즐겁게, 코드

기존 리액트 어플리케이션은 크게 두 가지 방법으로 스타일을 꾸밀 수 있었습니다. 하나는 CSS나 SASS 등 별도의 스타일 파일을 생성해 관리하는 방식이고, 다른 하나는 컴포넌트 안에서 스타일을 작성하는 CSS-in-Js 라는 방식입니다. 이중 넥스트(Next.js)에서는 CSS-in-js 방식을 권장하며, styled-component와 유사한 styled-jsx 라는 도구를 활용합니다. styled-jsx styled-jsx는 넥스트 프로젝트에 기본적으로 포함되어 있습니다. 이를 활용하기 위해서는 jsx 라는 값을 속성으로 갖는 style 태그를 컴포넌트 본문에 위치시킨 후, 적용할 CSS 스타일을 *문자열로 작성하면 됩니다. (* 상태에 따른 조건부 스타일을 활용할 수 있다는 장점을 살리기 위해 주..

requestAnimationFrame은 자바스크립트로 *애니메이션 효과를 쉽게 구현할 수 있는 API입니다. (* 이 글에서의 애니메이션이란, 프레임 단위로 픽셀을 재렌더링하는 행위를 의미합니다.) 기존의 자바스크립트 애니메이션은 setInterval 등을 사용해 1.5ms 마다 대상의 위치를 변경하는 등의 방법을 사용했지만, 디스플레이 주사율이 기기마다 다양해짐에 따라 이는 좋지 않은 경험으로 다가올 수도 있었습니다. setInterval을 사용한 애니메이션 position: 0 const car = document.querySelector("#car"); const value = document.querySelector("#value"); let xPos = 0; const render = () =..

깃과 커밋은 뗄래야 뗄 수 없는 관계인데, 가슴에 손을 얹고 제 깃허브를 되돌아보면 커밋 메시지가 제대로 적힌 내용이 드뭅니다. 😅 물론 갈수록 의식하고는 있지만 아직도 정확한 기준을 잡지 못하고 있었는데 이번 기회에 커밋 메시지에 대해 정리해보기로 했습니다. 🤔 왜 좋은 커밋 메시지를 남겨야 하는가? 거창하게 소제목을 뽑았지만 사실 좋은 질문은 아닌 것 같습니다. 깃이 뭔지 모르는 사람이라도 '좋은' 무언가를 남겨야 한다는 데에는 동의할 것이기 때문인데요, 그렇다면 질문을 조금 바꿔서 왜 우리는 좋은 커밋 메시지를 남기지 못하는 걸까요? 아마 가장 솔직한 대답은 "귀찮아서" 또는 "어차피 혼자 진행할 프로젝트니까" 정도가 될 것 같네요. 하지만 한편으로는 "제대로 남기고 싶어도 어떻게 남겨야 할지 몰라..

넥스트(Next.js)는 기본적으로 모든 페이지를 미리 렌더링합니다. 미리 렌더링을 해두면 SEO에도 유리하고 더 나은 성능을 얻을 수 있는데요, 넥스트에는 두 가지 사전 렌더링 방법이 존재합니다. 1. 정적 생성 - HTML 페이지를 미리 렌더링해두고 요청에 따라 제공합니다. 2. 서버 사이드 렌더링 - 페이지가 요청되는 시점에 서버에서 렌더링을 수행하고 결과물을 제공합니다. 별도의 외부 데이터가 필요하지 않다면 정적 생성 방식으로 미리 렌더링된 페이지를 제공합니다. 그러나 외부 데이터를 필요로 하는 경우에는 서버 사이드 렌더링을 통해 페이지를 제공하는데요, 오늘은 넥스트에서 어떻게 외부 데이터를 다룰 수 있는지 알아보도록 하겠습니다. getServerSideProps getServerSideProps..

리액트에서는 react-router-dom 라이브러리를 통해 페이지간 라우팅을 구현할 수 있었습니다. 그러나 넥스트(Next.js) 에서는 pages 폴더 안에 컴포넌트를 생성하면 자동으로 경로가 설정되게 됩니다. /.next /pages ㄴ-- index.jsx ㄴ-- tomato.jsx /public /styles 이렇게 pages 폴더 안에 index 와 tomato 라는 컴포넌트가 있으면 별도의 라우팅 없이 /tomato 라는 경로를 사용할 수 있게 됩니다. (* 경로명은 export되는 컴포넌트 이름이 아닌 파일명을 기준으로 합니다.) 정적 라우팅 정적 라우팅은 사전에 지정된 주소로 이동하는 방법입니다. react-router-dom 처럼 넥스트에서도 Link 컴포넌트를 사용해 주소를 이동할 수..

로직을 작성하다 보면 배열 안에서 특정 조건을 만족하는 값을 찾아야 하는 때가 자주 있습니다. 배열을 순회하는 forEach 메서드를 활용해 배열에 5보다 큰 원소가 있는지 검사하는 코드를 작성해 보겠습니다. const array = [2, 4, 6, 8, 10]; const biggerThanFive = false; array.forEach((el) => { if (el > 5) { biggerThanFive = true; } }); console.log(biggerThanFive); // true 제대로 작동합니다! 다만, 이를 위해 변수를 따로 할당하고 3줄이 넘는 코드를 작성해야 한다는 것은 어딘가 찝찝합니다. 오늘은 특정 조건을 만족하는 값을 찾는 더 나은 방법을 소개하겠습니다. Array.pr..

자바스크립트는 싱글 스레드 프로그래밍 언어입니다. 이는 곧 싱글 스레드 런타임(실행 환경)을 가지고 있다는 의미로, 한번에 하나의 작업만을 수행할 수 있음을 의미합니다. 그런데 웹 브라우저에서는 음악을 재생하면서 마우스 이벤트를 감지할 수도 있고, 웹 서버에 요청을 보내는 동안 새로운 키보드 입력을 수행할 수도 있는 등 동시에 일어나는 일이 꽤나 많습니다. 자바스크립트는 싱글 스레드에서 동작하는데 어떻게 브라우저에서 동시(병렬) 작업을 구현할 수 있었던 것일까요? 지금부터 찬찬히 알아보도록 하겠습니다. 자바스크립트 엔진과 런타임의 구조 자바스크립트 엔진은 변수와 객체의 메모리를 할당하는 힙 영역과 하나의 콜 스택으로 이루어져 있습니다. 또 자바스크립트가 실제로 실행되는 실행 환경(런타임)인 브라우저나 N..