안녕하세요. IT 엘도라도 에 오신 것을 환영합니다.
글을 쓰는 것은 귀찮지만 다시 찾아보는 것은 더 귀찮습니다.
완전한 나만의 것으로 만들기 위해 지식을 차곡차곡 저장해 보아요.   포스팅 둘러보기 ▼

리액트 (React) (24)

[React] 전역 상태 관리를 위한 Recoil 핵심 개념 익히기

1. Recoil 소개 작지 않은 규모의 웹사이트를 React로 개발해본 사람이라면 전역 상태가 얼마나 중요한지 알고 있을 것이다. 전역 상태가 없다면, 여러 컴포넌트가 특정 상태를 공유해야 할 때 컴포넌트 트리의 props 전달 구조가 매우 복잡해지기 때문이다. 그래서 보통 React로 개발할 때는 Redux나 MobX 등의 전역 상태 관리 라이브러리를 함께 사용하는 경우가 많다. 그러나 React를 배우기 위해서 또 다른 라이브러리도 배워야 한다는 것은 다소 부담스럽다. 해당 라이브러리를 사용하기 위해 추가로 작성해야 하는 보일러 플레이트 코드도 그다지 마음에 들지 않는다. 웬만하면 React가 자체적으로 전역 상태 관리 기능을 제공했으면 좋겠다. 이러한 맥락에서 등장한 React 자체의 기능이 바로..

리액트 (React) 2022.02.03

[Next.js] 핵심 개념 익히기 - ⑥ 지원하는 브라우저 및 기능

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. Next.js는 IE11을 포함한 모든 현대 브라우저들(Edge, Firefox, Chrome, Safari, Opera 등)을 지원한다. 1. Polyfills Next.js는 IE11 호환을 위해 필요한 Polyfill들을 자동으로 삽입한다. 또한 fetch() 함수, URL 클래스, Object.assign() 함수 등의 기..

리액트 (React) 2022.01.17

[Next.js] 핵심 개념 익히기 - ⑤ 환경 변수 사용하기

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. Next.js는 다음과 같은 환경 변수 파일들을 통해 자체적으로 환경 변수를 지원한다. 환경 Default 환경 변수 (원격 저장소 푸시 O) Secret 환경 변수 (원격 저장소 푸시 X) 모든 환경 .env .env.local 개발 환경 (next dev) .env.development .env.development.local..

리액트 (React) 2022.01.17

[Next.js] 핵심 개념 익히기 - ④ Static 파일 사용하기

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. Next.js 앱이 제공할 Static 파일들은 프로젝트 폴더의 public 폴더에 둬야 한다. Next.js는 public 폴더에 존재하는 모든 파일들을 Base URL(/)을 통해 접근할 수 있도록 하기 때문이다. 예를 들어, public/me.png 파일은 코드 내에서 /me.png URL을 통해 접근하도록 할 수 있다. i..

리액트 (React) 2022.01.17

[Next.js] 핵심 개념 익히기 - ③ CSS/Sass 스타일링

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. Next.js에서는 JavaScript에서 CSS/Sass 파일을 import 할 수 있다. 이는 Next.js가 JavaScript에서의 import 문법을 확장했기 때문에 가능한 일이다. (아마도 Next.js가 Webpack의 동작 방식을 커스터마이징 한 것이 아닐까 추측한다.) 1. CSS 전역적으로 영향을 미치는 CSS ..

리액트 (React) 2022.01.17

[Next.js] 핵심 개념 익히기 - ② 페이지 및 사전 렌더링

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. 1. 페이지 및 라우트 Next.js에서 각각의 페이지는 pages 디렉토리에 존재하는 .js, .jsx, .ts, .tsx 확장자의 파일에서 default export 되는 React 컴포넌트로 표현된다. 그리고 각 페이지의 라우트는 해당 파일의 이름에 의해 결정된다. 예를 들어, pages/about.js 파일은 /about ..

리액트 (React) 2022.01.17

[Next.js] 핵심 개념 익히기 - ① 프로젝트 설치하기

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. 1. create-next-app 패키지 이용 다음과 같이 create-next-app 패키지를 이용하면 Next.js 앱의 개발을 위해 필요한 대부분의 것들을 쉽게 설치할 수 있다. npx create-next-app@latest # TypeScript 프로젝트 npx create-next-app@latest --typescri..

리액트 (React) 2022.01.17

[React] Hook 동작(구현) 원리 간단히 알아보기

요즘에는 React로 개발할 때 클래스를 많이 사용하지 않는 듯하다. React 16.8 버전부터 도입된 Hook API가 상당한 인기를 얻고 있기 때문이다. 필자 역시도 React를 처음 공부할 때는 클래스 컴포넌트를 작성하는 방법부터 시작했지만, 지금은 사실상 Hook 기반의 함수형 컴포넌트만을 사용하여 개발을 하고 있다. 그만큼 Hook은 굉장히 편리하고 강력한 여러 기능들을 제공한다. 그러나 Hook에도 약점이 하나 있다. 그것은 바로, 추상화(Abstraction)가 꽤 깊게 되어 있어서 그 내부 동작 원리를 잘 알지 못하고 사용하는 경우가 많다는 것이다. 이것이 약점인 이유는, 내부 동작 원리와 긴밀한 관련이 있는 어떠한 문제가 발생하는 경우 그 문제의 원인을 빠르게 파악해내기 어려워지기 때문..

리액트 (React) 2021.06.07

[React] 컴포넌트 렌더링 성능 최적화 Tip (Hook을 사용할 때)

개인적으로 React 프로젝트를 진행하면서 각 컴포넌트의 렌더링 성능을 최적화하기 위해 사용했던 필자만의 Tip을 소개하려고 한다. 단 이는 필자만의 Tip이기 때문에 반드시 올바른 방법이라고는 보장할 수는 없다. 이 방법은 "실제로 측정해본 결과 성능이 좋게 나오더라"보다는 "개념적으로 생각했을 때 이렇게 하는 게 성능적으로 효율적이겠다"에 초점을 맞추었다. 또한 최대한 각 컴포넌트를 독립적인 하나의 부품으로 생각하여 적용할 수 있는, 그리고 최대한 다양한 유형의 컴포넌트들에게 적용할 수 있는 최소한의 일관된 규칙을 정립하는 것에 집중하였다. * 만약 더 좋은 방법이나 개선할 만한 부분을 찾아서 댓글로 달아주신다면 매우 감사드리겠습니다. 1. 전제 조건 함수형 컴포넌트와 Hook을 사용한다. 즉, 클래..

리액트 (React) 2021.01.26

[React] Netlify, GitHub 간편 배포하기 (+ 커스텀 도메인 및 HTTPS 연결 설정)

간단하게 포트폴리오 웹사이트를 제작하면서 이것을 어떻게 배포해볼까 찾아보다가 Netlify라는 호스팅 서비스를 최근에 알게 되었는데, 단순한 정적 웹사이트를 배포하는 것에 있어서는 AWS와 비교도 안 될 정도로 간편하다는 것을 알게 되었다. Node.js 의존성 설치 등 기본적인 환경 설정은 대부분 생략 가능할 뿐 아니라, GitHub이나 BitBucket과 같은 Git Provider의 특정 저장소와 연결을 시켜서 해당 저장소의 특정 브랜치에 Push를 할 때마다 미리 지정해둔 명령어를 통해 배포를 자동화(Continuous Deployment, CD)하는 것도 매우 간편하기 때문이다. 따라서 이번 포스팅에서는 Netlify로 React 앱과 같은 SPA 앱을 간편하게 배포하는 방법, 그리고 GitHu..

리액트 (React) 2021.01.19