본문 바로가기

JavaScript

(12)
recoil을 도입하여 컴포넌트 개선하기 출퇴근 할때 빠르고 쉽게 일기를 쓰기위해 speedJournal 이라는 프로젝트를 만들었다. 오늘의 아침 기분은 ---- 했다. 오늘의 점심 기분은 ---- 했다. 오늘의 저녁 기분은 ---- 했다. 라는 문장을 빠르게 완성하기 위한 컴포넌트가 필요했다.  각 감정(emotion)을 클릭하면 문장이 채워질 것이다. 단, 감정의 종류는 다양하기 때문에 아래와 같이 각 핵심 감정(category)을 클릭하면 선택할 수 있는 하위레벨의 감정이 표시된다. 이러한 감정들을 json으로 가져온다(추후 mongodb와 연동할 것임) 컴포넌트의 구조는 아래와 같다. 저널 : 몇번의 터치로 완성될 문장들의 집합(일기) 카테고리 그리드 : 각 카테고리를 목록으로 가진 컴포넌트 카테고리 아이템 : 각각의 카테고리 이때 카..
react에서 라우팅하기 react는 single page application이기때문에 각각의 page가 새로 load 되더라도 address가 변하지 않으며, 동일한 url을 갖는다. 그때문에 호출되는 url을 분리하기 위해서는 별도의 routing 작업이 필요한데, 이는 여러 routing package가 지원하고 있어 적당한것을 가져다 쓰면 된다. BrowserRouter를 이용하면 routing을 쉽게 할 수 있다. 이렇게 App을 BrowserRouter로 감싸면 하위 Component에서 route, link를 사용할때마다 browserRouter Tag를 감싸지 않아도 routing 기능을 사용할 수 있다. routing 작업은 위와같이 하면된다. link는 위와같이 하면된다.
React에서 cookies 사용하기 기본적으로 쿠키는 사용자가 접속한 웹사이트의 서버를 통해 사용자 컴퓨터에 설치되는 정보를 말한다. react에서는 react-cookies 패키지를 import 해서 사용할 수 있는데, react-cookies 패키지의 save함수는 3가지 파라미터를 받는다. 1. key 2. value 3. option 옵션은 path, expires, secure, httpOnly 가 있다. path는 쿠키의 값을 저장하는 서버 경로다. 기본은 "/"이고, 모든 페이지에서 쿠키에 접근할 수 있다. /a인 경우 domain.com/a 에서만 쿠키에 접근할 수 있다. expires는 만료시간이다. Date객체를 받는다. secure는 true인 경우 https로 통신할때만 쿠키가 저장된다. httpOnly는 docume..
Redux란 Redux는 리액트의 상태를 관리하기위해 사용하는 별도의 라이브러리이다. 리듀서를 이용하면 컴포넌트의 위치와 관계없이 스토어에 접근해 데이터를 사용하고 변경할 수 있다, 어찌보면 컨텍스트와 유사하다. this.store.getState() 형식으로 하위 컴포넌트에 스토어를 전달하면 전달받은 컴포넌트에서 this.props.store.dispatch() 형식으로 가져올 수 있다. 단 제약조건으로, 실질적인 store의 구현과 인터페이스는 소스 내에서 구현되는 것이 아닌, 별도의 reducers가 필요하다. reducers 내에서 combineReducers를 통해 리듀싱 함수로 변환하고, 이것을 소스에서 호출해야만 store를 온전하게 사용할 수 있다. 컨텍스트와 어느정도는 비슷하지만 번거로운점도 있고 나..
컨텍스트 api란 리액트에서 props는 부모 -> 자식으로 데이터를 전달하는 수단이다. 이런경우는 어떻게 해야하나 부모 -> 자식 -> 자식 -> 자식 props로 계속 내려줘야할까? 물론 아니다. context를 이용하여 전역적인 데이터를 생성하고, 관리할 수 있다. 방법은 일단 단순하다. 컨텍스트를 import하고, 위와같이 자식을 provider로 감싼다. 그리고 해당 데이터가 필요한 자식에서 이렇게 Consumer로 감싼 뒤 데이터를 가져오면 된다. 단 이때 데이터는 하위컴포넌트에서 받는것과 동일하게 정의되어있어야한다. 컨텍스트는 전역적으로 데이터를 관리하므로, 부모 ->자식->자식 뿐만 아니라 자식-> 부모 라는 역방향 데이터 전달도 가능하다. 용법은 아래와 같다. render 영역에 content 변수를 선언..
하이오더 컴포넌트(고차 컴포넌트)란 무엇인가? 함수 자체를 인자로 받거나 반환하는 함수를 고차함수라고 한다. 컴포넌트를 인자로 받거나 반환하는 함수를 '고차 컴포넌트'라고 한다. 중요한건, 컴포넌트를 받아서 컴포넌트를 return 한다는 것이다. 이렇게 이해하면 어려운데, 고차함수와 거의 똑같은 개념이라고 보면 어느정도 이해가 될것이다. 콘솔창에 찌끄려봤다. game 함수를 통해 게임을 할 수 있고, mySchedule 함수를 통해 하루 일과를 보낸다. 나는 매일 공부와 자전거를 타며, 시간이 남으면 그날마다 다른일을 할 수 있다. todayMySchedule은 오늘의 하루일과인데, 오늘은 남는시간에 게임을 할 예정이다. 그래서 콘솔창의 결과는 위와 같이 study bike game 이 된다. 고차 컴포넌트도 똑같다. ko.reactjs.org/do..
프로그래머스 javascript 문제풀이 - 가장 큰 수 /* 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 numbers return [6, 1..
웹 컴포넌트(lit element)로 캘린더 만들기 요새 회사에서는 lit Element를 이용한 웹 컴포넌트 기반 솔루션 개발이 한창이다. 기존 회사 제품의 샘플 화면을 클론 코딩하거나, 기존 제이쿼리 기반 위젯을 전환하거나 뭐 이러한 방향으로 나아가고 있다. 사실상 우리팀의 역할은 초기단계에서 딱히 없고 공부하라고 놔두는 느낌이 강하기 때문에 최대한 많은 것을 건드려보고 배우는 것이 현재 일이라 할 수 있다. 그런데 최근에 과거에 쓰던 캘린더는 도저히 새 제품에 넣을 퀄리티가 아니니 웹컴포넌트 기반으로 새로 만들라는 요청이 들어왔다. 퀄리티 있는 웹 컴포넌트를 만들어보고 싶은 욕심이 생겨 내가 만들어보기로 했다. (이때는 이렇게 오래걸릴줄 몰랐다) 캘린더 컴포넌트의 기능 명세다. 기본적인 기능은 단순하다. 사용자가 컴포넌트에 2021-01-10을 전달..