호박너구리 블로그

※ Recoil 요약 정리 (Recoil에 대해 알고싶다면 이전 글을 참고해주세요) // Recoil이란? Recoil은 페이스북에서 만든 새로운 React를 위한 상태 관리 라이브러리로, 최대한 React의 시맨틱과 동작을 유지하면서 위의 문제점을 개선하기 위해 만들어졌습니다. // Recoil 핵심 개념 (atoms, selectors) Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있습니다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위이며 Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환해줍니다. 저는 제 NextJS 프로젝트 상태관리 라이브러리로 Rec..

개발 2021. 5. 18. 15:49

리액트에서는 자체적으로 상태 관리를 할 수 있는 Hooks나 Context를 제공합니다. 그러나 내장된 상태 관리 프로그램은 다음과 같은 몇 가지 단점이 있죠. - 컴포넌트의 상태는 공통된 상위요소에서 공유될 수 있지만, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 함 - Context는 단일 값만 저장할 수 있으며, 여러 값들의 집합을 담을 수는 없음 - 이 두가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의 잎(state가 사용되는 곳)까지의 코드 분할을 어렵게 만듦 그래서 사람들은 보통 Redux, Mobx을 사용합니다. 그리고 페이스북에서 새로운 상태관리 라이브러리 Recoil도 선보였죠. 오늘은 그 중에서 Recoil에 대해서 간단히 살펴보고 적용해보겠습니다! ※ ..

개발 2021. 5. 18. 15:40

ESLint와 Prettier는 코드를 깔끔하게 유지하고 컨벤션을 통일하는데 좋은 툴입니다. 그래서 많은 프로젝트에서 많이 사용하고 있는데요, 오늘은 NextJS 프로젝트에 ESLint와 Prettier를 적용해보겠습니다! ※ 혹시 ESLint를 잘 모르시거나 자세한 설정에 대해 궁금하시다면 이전 글을 먼저 읽고 와주세요! 1. ESLint 적용하기 ※ 사실 패키지 설치와 설정 파일 세팅은 NextJS가 아니더라도 동일하게 적용 가능합니다. (1) 패키지 설치 우선 다음 명령어를 통해서 패키지를 설치합니다 npm install eslint --save-dev # or yarn add eslint --dev (2) 설정 파일 세팅하기 그리고 설정 파일을 세팅하면 되는데요, --init 플래그를 사용한 다음..

개발 2021. 5. 17. 12:09

1. ESLint란? Lint는 협업하며 개발을 하신 분이라면 많이 들어보셨을 것입니다. Lint(혹은 Linter)란 에러가 있는 코드에 표시를 달아주는 것을 뜻하는데요, 에러와 코딩 스타일을 잡아주기 때문에 여러 명이 코드를 작성하더라도 한 사람이 코딩한 것처럼 깔끔하게 만들어줄 수 있죠. ESLint는 ES(Ecma Script)와 Lint를 합친 것으로, (Ecma라는 기구에서 만든 Script가 표준 Javascript이기 때문에) 자바스크립트 코드의 에러를 표시해 줍니다. 린트를 통해 잡아내고 싶은 에러의 기준은 직접 설정할 수 있는데요, 문법적인 오류만 잡아낼 수도 있고 세미콜론(;) 사용과 같은 전반적인 코딩 스타일을 정해둘 수도 있습니다. 2. ESLint 설정하는 방법 (1) 패키지 설..

개발 2021. 5. 16. 20:25

대략 한 달 전인 2021년 4월 18일, 어도비의 공동 창업자 찰스 게쉬케가 별세하셨습니다. 게쉬케는 존 워녹과 어도비를 설립하여 현재까지 많은 이들이 사용하는 pdf, 포토샵 등을 만들었는데요, 오늘은 바로 1982년에 설립된 글로벌 소프트웨어 기업 어도비(Adobe)에 대해서, 기업이 어떻게 성장해왔고, 현재 어떤 서비스를 제공하고 있으며, 어떤 목표를 추구하고 있는지 살펴보려고 합니다! #어도비의 시작과 성장: 프린팅 기술 기업에서 최고의 소프트웨어 기업으로 옛날에는 컴퓨터 화면의 문자와 이미지를 정확하게 종이로 출력하기 어려웠습니다. 그리고 어도비의 창업자들은 이런 문제를 해결하기 위해 사업을 시작했죠. 우선 1970년대 말에 존 워녹과 찰스 게쉬케는 제록스 Parc (Xerox Palo Alt..

기업 분석 2021. 5. 14. 18:30

이전 글에서 레이아웃 컴포넌트를 만들고 헤더와 푸터를 추가했습니다. 헤더에는 로고도 있고 메뉴바도 있죠. 보통 로고를 누르면 메인페이지로, 메뉴를 누르면 해당 메뉴로 페이지가 이동(라우팅) 됩니다. 원래 html에서는 a 태그로 사용하죠. 이와 달리 NextJS는 CSR과 SSR을 모두 지원하기 때문에, 자체 태그와 라우팅 함수를 만들었습니다. 오늘은 그 중에서 어떻게 a 태그대신 Link태그로 라우팅 할 수 있는지 살펴보겠습니다. 1. 링크 태그 이용하기 이것은 현재 헤더의 모습입니다. 로고와 메뉴, 그리고 스타일까지 적절하게 적용되어있죠. import styles from './Header.module.scss' const Header = () => { return ( Traffickr 서비스 소개 ..

개발 2021. 5. 11. 18:30

대부분의 페이지에는 Header, 메뉴바, Footer 등이 들어갑니다. 하지만 모든 페이지에 일일이 헤더, 메뉴바, 푸터를 작성하기에는 번거롭습니다. 컴포넌트로 만들더라도 매번 세 개의 컴포넌트를 넣는 것은 깔끔하지 않죠. 그래서 보통 필요한 컴포넌트를 묶어서 Layout으로 만들어 사용합니다! 오늘은 한 번 React로 Layout 컴포넌트를 만들어보겠습니다. 1. Layout 컴포넌트 생성하기 우선, 원하는 디렉토리에 Layout 컴포넌트를 생성합니다. 저는 components 폴더 안에 Layout이라는 폴더와 파일을 생성했습니다. (개인적으로 타입스크립트를 선호해서 tsx파일로 만들었는데, jsx를 사용해도 무방합니다) // components/Layout/Layout.tsx const Layo..

개발 2021. 5. 10. 18:30

이전 글에서 NextJS에서 React 컴포넌트를 추가하여 페이지로 확인하는 법을 살펴보았습니다. 이번 글에서는 React 컴포넌트 스타일링에 대해서 다룰 것인데요, 그저 css 스타일 속성 주는 것이 왜 주제가 될만한 내용인지 아마 이해하기 어려우실 수도 있습니다. 사실 맞습니다! js (혹은 ts) 파일 내부에서 스타일링을 할 수도 있으니까요. 그러나 NextJS에서 별도의 css(혹은 sass, scss) 파일로 컴포넌트 레벨 스타일링을 한다면, 이 부분을 알아두셔야 할 수도 있습니다. 왜냐하면, NextJS는 [name].module.css 형식의 CSSModule 방식을 지원하기 때문입니다. * 전역으로 스타일링을 하고 싶다면 해당 css파일을 pages/_app.tsx 에서 import 하면 ..

개발 2021. 5. 9. 18:30