즐겁게, 코드

리액트 어플리케이션에서는 상태와 속성을 통해 컴포넌트끼리 값을 주고받는다는 것을 알고 계실 것입니다. 그런데 컴포넌트 계층이 아래 이미지와 같다고 할 때, App에서 TodoItem까지 값을 전달해야 한다면 어떨까요? 맞습니다. App에서 TodoItem 컴포넌트까지 값을 전달하기 위해 TodoContainer, TodoList 컴포넌트에도 상태를 넘겨줘야 합니다. 물론 전달할 상태값이 단순하고 컴포넌트의 중첩 깊이가 깊지 않다면 이렇게 해도 큰 문제는 없습니다. 다만 큰 문제가 없을 뿐이지 분명히 더 나은 방법이 있는데요, 바로 오늘 소개할 리덕스를 활용하는 방법입니다. 🛠 리덕스(Redux) 리덕스는 데이터를 저장하는 거대한 창고(Store)와, 창고에 진입할 수 있는 함수들을 제공하는 라이브러리입니..

// utils.js const sayHello = () => { console.log("안녕하세요!"); }; const sayNothing = () => { console.log("..."); }; export { sayHello, sayNothing }; import { sayHello, sayNothing } from "./utils.js" 자주 보셨을 import-export 구문입니다. 그런데 조건에 따라 모듈을 불러오는 것도 가능할까요? // Error!!! if(person === "friend") { import { sayHello } from "./utils.js"; sayHello(); } else if(person === "professor") { import { sayNothing..

기존 리액트 어플리케이션은 크게 두 가지 방법으로 스타일을 꾸밀 수 있었습니다. 하나는 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 = () =..

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

자바스크립트의 자료형은 원시형과 객체 타입으로 구분됩니다. 원시형 : Number, String, Boolean 객체 : 나머지 전부 객체 타입이 원시형과 구분되는 가장 큰 차이는 변수에 실제 값이 담기는 원시형과는 달리 객체 타입은 해당 데이터의 참조(reference) 값이 저장된다는 것입니다. (C나 C++의 일반 타입과 포인터를 떠올리면 됩니다.) 이게 뭐가 중요하다고 갑자기 이 얘기를 꺼내는 걸까요? 이제부터 코드를 통해 살펴봅시다. let number1 = 1; let number2 = number1; number2 = number1 + 9; console.log(`number1 : ${number1}, number2 : ${number2}`); // number1 : 1, number2 : ..

클로저(closure). 분명 한번은 들어봤지만 한번도 직접 써본적은 없는 그 문법입니다. 그런데 정말 없을까요? 오늘은 클로저가 무엇인지 한번 알아봅시다. let myName = "Chanmin"; function printName() { console.log(myName); // "Chanmin" } printName(); 실행 결과로 "Chanmin" 이 출력되는 것은 쉽게 예측할 수 있는데, 함수 안에서 어떻게 바깥의 myName 변수를 사용할 수 있었던 걸까요? 바로 우리가 모르는 사이에 클로저가 사용되었기 때문입니다. 이번에는 조금 복잡한 예시를 들어 보겠습니다. function outer(outerValue) { return function inner(innerValue) { console...