전체 글
TIL | Nextjs 환경변수
Loading Environment Variables(node, browser) Next.js에서는, CRA처럼 환경 변수를 자체적으로 지원해준다. 기본적으로 .env.local파일 안에 선언된 환경 변수에는, process.env.변수명을 통해 접근할 수 있다. API_END_POINT: examples => node 환경에서만 사용 가능 NEXT_PUBLIC_API_END_POINT: examples => 브라우저 환경에서 사용 가능 기본적으로 env.local 내부 선언된 모든 환경변수들은 Node.js환경에서만 사용할 수 있지만, 브라우저에서 사용하고자 할 경우 NEXT_PUBLIC_ 키워드를 붙여야 사용이 가능하다. ( SSR이 아닌, CSR 요소에 해당 환경변수를 사용하고자 할 경우 NEXT_..
TIL | testing-library, Jest-Dom eslint 설정하기
Testing Library, Jest-DOM eslint 설정하기 plugin 설치 yarn add -D eslint-plugin-jest-dom eslint-plugin-testing-library eslint-plugin-jest-dom: jest-dom 체크를 위한 eslint 플러그인 eslint-plugin-testing-library: testing-library 체크를 위한 eslint 플러그인 package.json "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, 기존 package.json의 eslintConfig 부분 지워주기 eslintrc.json { "extends": [ "react-app", "react-a..
TIL | useRef의 3가지 정의와 리턴값의 두가지 타입
useRef의 3가지 정의 및 타입 tsx의 useRef를 사용하면서, 기존에 js에서 사용하지 않던 RefObject 타입과 MutableRefObject 타입의 차이점 및 세가지 사용방법에 대해 자세히 알아보자 useRef useRef는, 인자로 넘어온 초깃값을 useRef의 .current 프로퍼티에 저장한다. 특정 DOM에 직접 접근하여 값을 변경하거나, 컴포넌트가 리렌더링이 되는 동안 유지해야할 일정한 값을 저장할 때 사용하곤 한다. 이러한 useRef의 index.d.ts(@types/react 경로에 존재) 에는 세가지 사용 방법이 나와있다. 1.초깃값 및 제네릭 타입이 주어졌을 경우 function useRef(initialValue: T): MutableRefObject; 초깃값의 타입과..
TIL | Atomic design pattern 간단 정리
Atomic Design 최근 사이드 프로젝트나, 개인적으로 atomic design을 접해볼 기회가 있었기에 간단하게 정리해보았다. Atomic Design이란? Atomic Design은 보다 신중하고 계층적인 방식으로 설계 시스템을 만들기 위해서, 함께 작용하는 5개의 단계로 이루어진 방법론이다. 5개의 단계는 Atoms, Molecules, Organisms, Templates, Pages가 존재한다. Atomic Design 5 stages 1. Atoms atoms는 atomic design에서 UI를 이루는데 필요한 기본적인 구성 요소 역할을 한다. label, inputs, buttons 등 기본적인 HTML 요소들이 포함되어 있다. 각각의 atom들은 고유한 속성들을 갖고 있다. 패턴 라..
2021년 회고
2021년은?.. 시간이 날 때마다 미리 적어두고 글을 게시하려 했지만, 미루고 미루다가 오늘 사람 없는 카페에서 가만히 혼자 생각하며 회고를 쓸 수 있는 최적화된 환경이었기 때문에 글을 한번 적어본다. 이번 1년 동안 정말 정신없이 시간을 보냈는데, 난 과연 무엇을 이루고 어떻게 보냈는지 정리해 보자. 개발자로서의 시작 진로 변경 결정 및 공부 시작 (12월 ~ 3월) 이전 경력을 과감히 포기하고 새로운 도전을 위해 결정 및 공부를 시작했던 기간이다. 생활코딩, 김버그님의 웹 기초 강의 등을 공부하고 개발자들의 유튜브 브이로그를 보면서, 개발자로서의 삶을 상상하고 기대감에 부풀어 공부를 했던 기간이었다. 이때만 해도, 앞으로의 도전과 성장이 굉장히 기대되었다. 나 스스로의 결정을 바탕으로 새로 출발하는..
TIL | 간단한 custom hook 만들어보기 2
간단한 custom hook 만들어보기 2 이 글은, 노마드코더의 실전형 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다. useScroll (scroll event를 위한 hook) useScroll.ts import { useState, useEffect } from "react"; export const useScroll = () => { // x축, y축을 초기 상탯값으로 지정 const [scroll, setScroll] = useState({ x: 0, y: 0, }); const handleScroll = () => { // 상탯값을 각각 window.scrollX, window.scrollY값으로 업데이트 (이 부분은 필요에 따라서 수정이 가능한 것으로 보이므로 자유롭게 사용하면 될 ..