Life is connecting the dots .

이 글을 쓰는 이유는 그동안 React를 당연하게 공부하고 당연하게 사용해 왔기 때문이다. 그러다 보니 React를 왜 배웠는지 왜 프로젝트에 사용하게 되었는지에 대한 질문을 받으면 어떤 이유를 설명해야 할지, 무슨 이유가 특별히 더 중요한지에 대해 고민이 앞서 스스로 명쾌한 대답을 하지 못하는 것 같다는 생각이 들었다. 그래서 오늘은 스스로에게 질문한 내용을 글로 남기려고 한다. React 란 리액트는 사용자 인터페이스(UI)를 담당하는 자바스크립트 기반 라이브러리로, 주로 싱글 페이지 애플리케이션(SPA)을 만들 때 사용한다. SPA 하나의 페이지로 만들어진 웹 애플리케이션을 의미한다. 페이지 이동 시 추가적인 서버의 접속 없이 필요한 데이터만 자바스크립트 안에서 동적으로 로드하여 화면을 변경한다. ..

리액트에서는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 Props를 사용하여 전달한다. 또한 한 컴포넌트 안에서는 변경 가능한 데이터를 다루기 위해 State를 사용한다. 이렇게 props와 state를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트로 즉, 한쪽 방향으로만 데이터가 이동하게 된다. 그렇다면 다음과 같이 서로 다른 데이터의 흐름에 있는 컴포넌트에서 서로 같은 데이터를 공유하고 싶은 경우에는 어떻게 하면 될까? 그럴 때는 공통 부모 컴포넌트에 state를 만들고 데이터를 props를 통해 사용하고자 하는 컴포넌트에 전달해야 한다. 하지만 이와 같은 props drilling은 컴포넌트가 여러 계층을 가지고 있는 복잡한 구조에서는 비효율적이고, 추적하기가 쉽지 않다. Context ..

최근에 만든 프로젝트도 그렇고 처음 시작을 Next.js프레임워크를 사용해서 개발을 해오다 보니 리액트 자체만을 사용해 무언가 개발해 본 적은 없었다. 그래서 리액트만을 사용해서 그동안 공부해 왔던 개념들을 빠르게 적용해 보는 중이다. 그중에서 리액트에서 라우팅을 공부한 뒤에 간단하게 실습을 해보았다. Next.js에서 페이지 이동과 관련된 기능을 적용하고 싶을 때는 useRouter 훅을 사용하면 되는데, router안에 포함된 메서드를 사용할 수 있다. 메서드와 관련된 상세 내용은 공식문서를 대신 첨부한다. 공식문서 리액트는 URL을 판단하여 특정 페이지를 보여주는 기능을 제공하지 않는다. 그러므로 관련 작업을 하기 위해서 react-router라는 라이브러리를 설치해서 사용해야 한다. 이 라이브러리..

웹사이트 랜딩페이지를 보다 보면, 상단 헤더 메뉴가 사용자가 스크롤 시 진입한 구간에 따라 메뉴의 스타일도 이동되는 것을 볼 수 있다. 그동안 프로젝트에서는 이러한 스타일을 적용할 페이지가 없었기에 한 번도 만들어보지 못했었다. 하지만 최근에 포트폴리오를 만들면서 관련 API를 알게 되어 기능도 익힐 겸 간단하게 적용해 보려고 한다. Observer API의 필요성 MDN공식문서에서 확인하면 타겟 요소가 상위요소 혹은 최상위 요소(=뷰포트)와 교차하는 변경사항을 비동기적으로 관찰하는 방법을 제공한다고 한다. 말 그대로 관찰자 API이다. 🧐 대상을 감시하다가 대상이 정해 놓은 구역에 진입하면 그때부터 만들어 놓은 함수를 시작한다. 과거부터 어떤 특정 요소의 가시성을 확인하고 두 요소들의 가시성, 즉, 서..

Next.js 프레임워크를 사용해서 만든 프로젝트를 Vercel를 사용하여 배포해 보았다. 배포하는 과정 중에 발생한 에러 해결을 통해 최종 배포를 완성하였다. Vercel docs에서 깃헙 레포를 통해 배포하는 과정이 간략하게 소개되어 있다. 그만큼 간단하기도 하고, 배포 관련 설정들에 대한 설명도 상세하게 되어있어서 나중에 다른 설정이 필요할 때도 docs를 참고하여 배포를 진행하면 될 것 같다. 1. 로그인 후 [Add New]에서 새로운 프로젝트를 생성해 준다. 2. 배포할 프로젝트의 깃헙 저장소를 불러온다. 2-1. 만약 불러올 저장소가 나오지 않는다면, +Add GitHub Account를 클릭하여 vercel을 설치해 준다. 모든 레포지토리를 선택하면 import 할 때 모든 레포가 보이고,..

Optimistic UI란 서버에 요청을 보내고 응답을 받기 전에 UI를 업데이트하는 데 사용할 수 있는 패턴이다. mutation을 시뮬레이션하고, UI에 업데이트 함으로써 낙관적인 결과를 사용자에게 보여주고, 이후 최종 서버에서 응답을 받으면 그 결과로 대체된다. 기존 프로젝트 기능 중 좋아요 기능👍에 Apollo Client에서 제공하는 옵션을 활용하여 적용해 보려고 한다. 좋아요 버튼을 누르면 아마도 대다수는 좋아요 숫자가 +1이 증가할 것이라고 예상한다. 이렇게 종종 결과를 예측할 수 있는 mutation에 UI를 낙관적으로 업데이트를 할 수 있다. optimisticResponse option Apollo Client는 mutation을 실행시킬 때 해당 옵션을 추가할 수 있도록 제공한다. 우..

반응형 웹이란 반응형 웹 디자인은 사이트가 데스크탑에서 모바일에 이르기까지 모든 디바이스에서 최적으로 보이고 작동하도록 만드는 데 중점을 둔 웹 개발 개념이다. 대게 데스크탑, 태블릿, 모바일 각각의 디바이스에서 서비스를 문제없이 이용할 수 있는 화면을 보여주며, 뷰포트(viewport) 크기를 변경하는 경우 이에 반응하여 적절한 화면을 제공하는 디자인 접근 방식이라고 할 수 있다. 반응형 웹을 만들기 위한 기술 중 하나로 미디어쿼리가 있고, 화면 크기가 다른 디바이스의 뷰포트를 토대로 미디어 쿼리를 적용하므로 먼저 뷰포트에 대해 이해할 필요가 있다. 뷰포트 뷰포트는 현재 보고 있는 화면의 영역으로, 접속한 기기에서 보이는 실제 영역의 크기를 의미한다. HTML문서는 어떤 기기에 접속하더라도 기본으로 9..

스코프란 식별자에게 접근할 수 있는 유효한 범위를 의미한다. 식별자란 변수 이름, 함수 이름, 클래스 이름 등 어떤 값을 구별하여 식별할 수 있는 고유한 이름을 의미 유효한 범위란 식별자 자신을 참조할 수 있는 범위 다시 말하면, 식별자가 선언된 위치에 따라 다른 코드가 식별자 자신을 참조할 수 있는지가 결정되며 이를 스코프라고 한다. 그러므로 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 한다. 스코프의 종류 스코프는 전역(global)스코프와 지역(local) 스코프로 나뉜다. 전역 스코프는 코드의 가장 바깥 영역으로 어디서든지 참조할 수 있다. 반면에 지역 스코프는 함수 몸체 내부를 뜻하며, 자신의 지역 스코프와 하위 지역 스코프(중첩 함수)에서 유효하다. // 자바스크립트 ..