JavaScript (8) 썸네일형 리스트형 [React/Next.js] createContext createContext는 React에서 지원하는 Context API의 메소드 중 하나이다. React 또는 Next.js에서 전역 상태(Global State) 관리에는 Redux(Redux Saga)나 Recoil 등을 많이 사용한다. 최근에는 Zustand라는 라이브러리도 떠오르고 있는 것으로 알고 있다. 최근에 하는 프로젝트에서는 Recoil를 사용했는데, 난감한 경우가 하나 있었다. 다크 모드 구현을 위해서 어떤 모드인지(라이트인지, 다크인지)에 대한 상태를 담고 있어야 할 필요가 있었다. Recoil을 사용하자니 _app.tsx가 Recoil Root를 선언하기 때문에 사용할 수가 없었다. 그렇다고 local storage를 사용하자니 Next.js에서 사용하기 때문에 undefined로 정.. [Javascript] Momentum 만들기 - 리팩토링 todo 만들기 지난번 작업을 통해 사용자가 날짜와 해당 날짜에 진행할 todo를 저장하고, 화면에 띄우는 기능을 구현하였다. 앞으로 구현할 오늘 진행해야 하는 todo(today)와, 앞으로 진행 예정인 todo(upcoming), 완료된 todo(time machine) 기능을 구현하기 위해서는 먼저 지금 작성한 todo list에 해당하는 코드를 수정해야 할 필요가 있다. 왜냐하면 today와 upcoming, time machine이 서로 공유하는 부분이 존재하기 때문이다. 1. 각 todo에 해당하는 배열을 읽어서 li 태그로 표현 function paintTodayTodo() { ... span.innerText = todayTodo ... } function paintUpcomingTodo() { ... s.. [Javascript] Momentum 만들기 - todo list 구현 오늘 진행할 작업은 todo list 코드 리팩토링 겸 구현하는 부분이다. 기존 구현했던 todo와 다르게 날짜를 따로 입력받도록 구현할 것이고, 이 날짜는 다음 작업인 날짜를 활용한 마감될 todo와 앞으로 다가올 todo를 나누는 기능을 구현할 예정이다. 1. HTML 코드 작성 - todo를 입력하기 위한 부분의 구현이다. 마감 날짜를 입력할 date 타입의 input 태그와 진행할 작업의 이름을 입력할 text 타입의 input 태그 두 가지로 이루어져 있다. - form 태그는 입력된 두 개의 input 태그의 값을 사용하여 todo를 생성하고 localStorage에 저장하는 이벤트를 다루게 될 것이다. Today - form 태그에서 입력된 todo가 보여질 구문이다. ul 태그 내에 li .. [Javascript] Momentum 만들기 - 코드 리팩토링 지난 작업을 통해 배경화면 기능까지 구현을 마무리했다. 물론 해결해야 하는 이슈들이 남아있지만, 차차 진행할 예정이다. 구현해야 할 기능은 위치 정보와 날씨 API를 활용하는 것이 남아있다. 이전에 코드 리팩토링을 진행하고 넘어가고자 한다. 프로젝트를 진행하기 이전 'vanilla js니까 html 코드는 건들지 말고, 모든 화면 구성 요소들까지 javascript 코드에서 만들어야지.' 라는 이상한 생각을 갖고 시작해서 현재 코드가 아래 그림과 같이 javascript 파일에 모든 요소가 있어 코드가 굉장히 지저분하다. 위 그림처럼 HTMLElement들까지 javascript 코드 내에서 구현하다 보니 이미 20 ~ 30줄 가량을 차지하고 시작하게 되고, 이는 코드의 가시성을 너무 많이 해쳐버렸다. .. [Javascript] Momentum 만들기 - 배경화면 완성 오늘의 기본으로 돌아가는 Javascript, Momentum 만들기 구현 작업 내용 시간과 인사말, todo가 잘 보이도록 글씨 색깔 변경 시간과 인사말에 'fade in' 애니메이션 부여 배경화면 완전한 이미지가 될 수 있도록 설정 # background 지정 방식을 태그로 조정 배경화면 기능을 완성하고, 날씨 api를 활용하는 것으로 nomadcoder에서 제시한 momentum 작업을 끝내고, 이후에는 추가로 구현해보고 싶은 기능들을(선택한 나라의 인사말 적용, 등) 구현하고, 디자인을 입히는 것으로 마무리하려고 한다. 6월 안에는 마무리할 수 있기를. 1. 시간과 인사말, todo가 잘 보이도록 글씨 색깔 변경 사용되는 배경화면이 전체적으로 어둡기 때문에 글씨가 잘 보일 수 있도록 하얀색으로 변.. [Javascript] Momentum 만들기 - 배경화면 기능 구현 배경화면 기능 구현을 진행하였다. 수행할 작업 내용은 배경 이미지로 사용할 이미지를 불러와 배열에 저장한다. 배열에 저장된 배경 이미지 중 랜덤하게 하나를 불러와서 화면에 표시한다. 이 두 가지 작업에 더해서 추가적으로 사용자가 원하는 이미지를 불러와서 배경화면으로 설정하는 기능을 추가로 구현해보고자 한다. 일단, 오늘 작업은 위 1, 2번 작업을 진행하는 것으로. 1. 배경 이미지로 사용할 이미지를 불러와 배열에 저장하기 1. Google에서 "Momentum background image"로 검색해서 3가지 이미지를 저장, images 폴더 내에 저장하였다. 2. 코드 내에서 상수 형태로 이미지가 담긴 배열을 생성한다. const IMAGES = ['images/1.jpg', 'images/2.jpg.. [Javascript] Momentum 만들기 - 현황 노마드코더에서 강의하는 Momentum 클론 코딩 프로젝트는 4가지를 구현하는 것을 목표로 한다. 현재 시간을 보여줄 수 있는 clock.js 입력받은 이름에 인사말을 건네는 greetings.js todo 작성할 수 있는 todo.js 배경이미지를 랜덤으로 설정해주는 background.js 여기에 추가로 날씨 api를 받아서 현재 지역의 날씨를 표현하는 기능 또한 추가로 있다. 구현해야 하는 기능들에 대해서 현재까지 내가 구현된 기능들을 보면 아래 그림과 같다. 현재 시간을 사용자에게 표시해주는 clock.js 사용자에게 이름을 입력받아 인사를 건네주는 greetings.js todo를 작성할 수 있는 todo.js 이렇게 3가지의 코드가 기능상으로는 작성되어 있다. 하지만 그림에서 확인할 수 있듯이.. [Javascript] Momentum 만들기 - 소개 Momentum 만들기 강의 원본 : https://nomadcoders.co/ Watch Now - 노마드 코더 Nomad Coders nomadcoders.co 바닐라 자바 스크립트를 공부하기 전에 리액트와 같은 프레임워크를 사용하지 마라. 노마드 코더로 유명한 니콜라스가 바닐라 자바스크립트 강의뿐만 아니라 프론트 엔드 관련된 내용이 나올 경우 하는 말이다. 정확한 워딩은 아니지만 핵심 내용은 바닐라 자바스크립트를 할 수 있어야 프레임워크를 사용하더라도 더 잘 사용할 수 있다는 점이다. 학교에서는 프론트엔드에 대한 강의가 없어 기초를 제대로 다지지 못했고, 프론트엔드에 대해서 주변에서 하는 말들인 '그냥 리액트나 뷰, 앵귤러를 쓰면 되서 자바스크립트 기본 문법만 알면 된다.'는 말만 주워듣고 바닐라 .. 이전 1 다음
