Til
TIL | git 폴더명 대소문자 이슈
git 파일 및 폴더명 대소문자 오류 최근 프로젝트를 진행하면서 컴포넌트의 폴더 구조 및 이름을 수정하던 도중, 폴더 명의 대소문자를 변경했음에도 불구하고 해당 변경 사항이 반영되지 않은 채 dev에 merge 되어 빌드 오류가 지속적으로 났다. 확인해보니 git config core.ignorecase에 대한 이슈였다. git config core.ignorecase Internal variable which enables various workarounds to enable Git to work better on filesystems that are not case sensitive, like APFS, HFS+, FAT, NTFS, etc. For example, if a directory list..
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들은 고유한 속성들을 갖고 있다. 패턴 라..
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값으로 업데이트 (이 부분은 필요에 따라서 수정이 가능한 것으로 보이므로 자유롭게 사용하면 될 ..