즐겁게, 코드

자식 요소를 감싸는 래퍼 컴포넌트를 작성할 때 자식 요소인 children 속성의 타입을 명시해야 하는 경우가 자주 있습니다. 그런데, ReactChild, ReactElement, ReactNode 등 비슷한 이름을 갖는 타입이 너무 많은 모습이네요! 오늘은 자주 사용되는 타입 설명과 함께 어떤 상황에서 각 타입을 사용할 수 있을지 간단히 알아보도록 하겠습니다. const App = () => { return ( {/* 과연 children 요소의 타입은 무엇일까요? */} Hello, world! ); }; type WrapperProp = { // children: React.ReactChild; // children: React.ReactElement; // children: JSX.Element..

오늘은 Tailwind CSS의 실험적인 기능 중 하나인 JIT(Just-In-Time) 모드를 가볍게 소개해보려 합니다. function App() { return ( “테일윈드 CSS는 커스터마이징하기도 쉽고, 빌드 결과물도 가볍고, 무엇보다 엄청나게 빠른 속도로 스타일링이 가능하다는 장점이 있습니다.” Chanmin, Kim 프론트엔드 개발자 인턴 ); } export default App; 테일윈드 CSS를 적용하면 클래스명이 조금 난잡해진다는 댓가를 치르는 대신 엄청난 생산성을 얻게 됩니다. 다만 이렇게 예약된 클래스명을 통해 스타일을 지정하다 보니, 원하는 스타일이 클래스명으로 예약되어 있지 않은 경우에는 별도의 CSS 파일을 생성하거나, 테일윈드 설정 파일을 수정하거나, Emotion 등 C..

귀여운 고양이들이 지그재그로 위치한 모습입니다! flexbox가 적용된 컨테이너 안에 left-, right- 요소가 있고, 각 요소 안에 사진과 설명이 적절히 들어간 레이아웃입니다. 1번 고양이입니다. 2번 고양이입니다. 3번 고양이입니다. img { width: 200px; } .flex-container { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid #cdcdcd; } @media (max-width: 768px) { .flex-container { display: flex; flex-direction: column; } } css는 컨테이너에 flex 속성을 적..

지난 글에서는 리코일이 무엇인지와 리코일과 기존 상태관리 방법의 차이를 간단하게 소개했는데요, 이번 글에서는 실제로 동작하는 여러 앱에서 리코일을 사용해 상태를 관리해보겠습니다. 리코일 설치하기 CRA로 프로젝트를 구성했다고 가정하고, 리코일을 설치해 보겠습니다. // yarn yarn add recoil // npm npm i recoil 리덕스를 사용할 때는 redux, react-redux, 경우에 따라서는 redux-thunk, redux-saga까지 설치해야 했지만, 이제는 리코일만 설치하면 됩니다! 리코일 루트 컴포넌트 정의하기 리코일을 사용하기 이전, 리코일로 전역 상태를 관리할 범위를 컴포넌트로 감싸줍니다. Tip. 는 리덕스나 컨텍스트의 Provider와 같은 역할을 합니다. import..

오늘은 리코일에 대한 이야기를 간단하게 해보려 합니다. 리코일은 페이스북에서 만든 상태 관리 라이브러리로, 리덕스에 비해 코드가 간결하고 직관적인 로직을 구성할 수 있다는 장점이 있습니다. 실제로 페이스북 팀에서도 "리코일은 리액트처럼 작동하고 생각합니다." 라는 내용을 장점으로 내세웁니다. Context API와의 차이 컨텍스트는 리액트에 내장된 상태 관리용 API로, 별도의 라이브러리를 사용하지 않고도 상태를 관리할 수 있다는 장점이 있습니다. 다만 컨텍스트는 중첩 가능한 Provider 컴포넌트와 useContext() 훅을 활용해 provider - consumer 관계를 구현하는데, 이러면 여러 컨텍스트가 중첩될 경우 값을 재계산하는 과정에서 성능 하락이 있을 수도 있습니다. 한번 인증 정보, ..

지금까지는 jest 와 함께 평범한 자바스크립트 코드를 테스트해봤는데요, 이번에는 리액트 어플리케이션의 레이아웃 테스팅을 진행해보도록 하겠습니다. 테스팅 라이브러리 리액트 어플리케이션을 테스트할때는 주로 에어비앤비에서 만든 enzyme이나 react-testing-library(앞으로는 간단히 RTL이라 부르겠습니다.) 를 사용합니다. 둘의 차이로는 enzyme이 Implementation Driven Test(구현 주도 테스트) 라는 목표에 따라 어플리케이션이 내부적으로 어떻게 동작하는지에 초점을 맞췄다면, RTL은 Behavior Driven Test(행위 주도 테스트) 라는 목표 아래에서 실제 사용자의 행위와 사용자가 보는 화면을 테스트하는데 초점을 맞췄습니다. 두 테스팅 라이브러리 모두 장점이 있..

어플리케이션에 로그인을 비롯한 인증이 필요한 이유는 무엇일까요? 당연하겠지만, 누구나 접근할 수 없는 정보를 보호하기 위해 사용자를 인증하는 작업이 필요하기 때문입니다. 인증을 구현하는 방법은 크게 서버 사이드 세션을 사용하는 방법과 JWT라는 인증 토큰을 사용하는 방법으로 나뉘는데요, 이번 글에서는 인증이 어떻게 이루어지는지에 대한 이론을 간략하게 소개하도록 하겠습니다. 세션 기반 인증 방식 세션 - 쿠키 방식이라고도 부르는 세션 기반 인증(편의상 "세션 인증 방식" 과 혼용하겠습니다.) 방식은 대략 다음과 같이 동작합니다. 인증 과정 클라이언트가 로그인을 시도합니다. 로그인에 성공하면, 서버는 해당 클라이언트를 식별하기 위한 세션값을 생성하고 응답에 실어 전송합니다. 클라이언트는 세션값을 수신하고 쿠..