전체 글84 [React,TS] React프로젝트 TS세팅 하기 목차 설치 명령어npx create-react-app my-app --template typescript 2024. 5. 28. [React,TS] airbnb eslint prettier적용 목차 React + TS에서 airbnb형식 적용하기 설치방법npm install --save-dev eslint prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import .eslintrc.json{ "extends": [ "airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "pl.. 2024. 5. 28. [React,Next] forwardRef사용하기 ( 개인기록 ) 목차 forwardRef는 무엇인가?'forwardRef'는 React에서 부모 컴포넌트가 자식 컴포넌트의 DOM 요소 또는 클래스 인스턴스에 'ref'를 전달할 수 있도록 해주는 고차 함수이다. 기본적으로 'ref'는 부모 컴포넌트가 자식 컴포넌트의 특정 DOM 요소에 접근할 수 있게 한다.하지만 일반적인 컴포넌트에서는 'ref'를 직접 전달할 수 없기 때문에 'forwardRef'를 사용하여 문제를 해결해야한다. 왜 'forwardRef'를 사용해야 하는가?React컴포넌트는 기본적으로 'ref'를 직접 전달받을 수 없다. 하지만 'forwaredRef'를 사용하면 부모 컴포넌트가 자식 컴포넌트의 특정 DOM 요소에 접근할 수 있게 된다. 이는 다음과 같은 경우에 유용하다.DOM 조작 : 특정 D.. 2024. 5. 27. [Next.js]웹 페이지 전환 효과를 주는 방법들 목차 웹 페이지 전환 효과를 주는 것들은 무엇이 있을까?Next.js에서 페이지 전환 효과를 구현하는 방법에는 여러 가지가 있다. 아래는 몇가지 대표적인 방법이다. Framer MotionFramer Motion은 React 애니메이션 라이브러리로, Next.js에서 페이지 전환 효과를 쉽게 구현할 수 있다.`AnimatePresence`와 `motion.div`를 사용하여 페이지 전환 애니메이션을 적용할 수 있다.// components/PageTransition.tsx'use client';import { usePathname } from 'next/navigation';import { AnimatePresence, motion } from 'framer-motion';import React from.. 2024. 5. 24. [Next.js]Next.js에서 framer-motion을 이용한 페이지 전환효과 추가하기 목차 framer-motion이란?https://github.com/framer/motion GitHub - framer/motion: Open source, production-ready animation and gesture library for ReactOpen source, production-ready animation and gesture library for React - framer/motiongithub.comFramer Motion은 React 애니메이션 라이브러리로, Next.js에서 페이지 전환 효과를 쉽게 구현할 수 있다.AnimatePresence와 motion.div를 사용하여 페이지 전환 애니메이션을 적용할 수 있다. 설치방법npm install framer-motion.. 2024. 5. 24. [Next.js, React] useState, useEffect 코드 컨벤션 목차 useState 상태 변수와 설정 함수의 명명상태 변수와 설정 함수는 의미 있는 이름을 사용한다.상태 변수는 단수형 명사, 설정 함수는 `set` 접두사를 사용한다.예 `const [count, setCount] = useState(0);`초기 값 설정상태 변수의 초기 값은 올바른 타입을 사용하여 명확하게 설정한다.예: `const [name, setName] = useState('');`상태 초기화 함수초기 상태를 계산하는 데 복잡한 로직이 필요하면 상태 초기화 함수를 사용한다.예: `const [value, setValue] = useState(() => computeInitialValue());`상태 그룹화관련된 상태 값은 객체로 그룹화하여 관리한다.const [formState, setFor.. 2024. 5. 23. TSX에서의 코드 컨벤션 목차 파일 및 폴더구조폴더 구조 : 컴포넌트는 기능별 또는 도메인 별로 폴더를 구성한다.src/ components/ Header/ Header.tsx Header.styles.ts Header.test.tsx Button/ Button.tsx Button.styles.ts Button.test.tsx pages/ Home/ Home.tsx Home.styles.ts Home.test.tsx 네이밍 컨벤션 파일명컴포넌트 파일은 PascalCase를 사용한다.`Header.tsx`, `Button.tsx`컴포넌트 명컴포넌트 이름도 PascalCase를 사용한다.`const MyComponent: Rea.. 2024. 5. 23. 개인 코드 컨벤션 정리 - CSS 목차 styled-components폴더구조컴포넌트 기반 구조로 각 컴포넌트에 대해 별도의 스타일 파일을 생성한다.src/ components/ Button/ Button.tsx Button.styles.ts Header/ Header.tsx Header.styles.ts 네이밍 컨벤션 파일명CamelCase를 사용한다.`Button.styles.ts` 변수명PascalCase를 사용하여 styled-component를 정의한다.const PrimaryButton = styled.button` /* styles */`; 스타일 정의 순서 : 스타일 속성은 다음 순서대로 작성Positioning: position, top, right, bottom, lef.. 2024. 5. 23. eslint에서 Delete `CR`이 나오는 문제해결(개인기록) VScode에서 Delete 'CR'이 나오는 문제 해결 방법VScode에 AirBnb의 esLint를 적용하던중에 Delete CR이라는 알수없는 에러가 발생했었다.그래서 우리의 친구 GPT한테 물어보니 Window와 Unix/Linux 운영 체제 간의 줄바꿈 방식 차이로 발생하는 문제라고 한다.그래서 여러 삽질을 하면서 해결하였는데 이게 종합적으로쌓이다가 해결된거라 일단 성공했을때의 세팅을 기록해두려고 한다.일단 핵심은 endOfLine을 "auto"로 두는게 핵심이지 않을까 싶다. VSCode 설정 파일('.vscode/settings.json'){ "editor.formatOnSave": true, "editor.tabSize": 2, // 탭 크기를 2로 설정 "editor.insertSp.. 2024. 5. 23. 개인 코드 컨벤션 정리 목차 정리하기에 앞서개발자는 혼자서도 개발을 할 수도있지만 다양한 사람과 협업을 해야할 가능성이 더 높습니다.이 때 아무리 뛰어난 개발자더라도 자신만의 개발로 막 개발을 한다면 나중에 협업을 할때 다른 사람의 러닝커브가 생길 수 도 있고다른 사람과의 협업이 더 힘들어져 개발속도가 늦춰질 수 도있습니다.그래서 코드 컨벤션을 정의함으로써 한사람이 개발을 한 것처럼 그리고 다른사람이 오더라도 많은 자원이 소모하지 않게 끔 하려고 합니다.그렇기에 일단 협업도 좋지만 자기 자신도 일단 규칙을 어느정도 세우는게 중요하다 싶어서 해당 포스팅글을 작성하려고합니다. 자세하진 않더라도 조금씩 규칙을 정하면서 내용을 추가할 예정입니다! 해당 컨벤션은 완벽하지 않고 주관적인 영역과 장단점을 통해 자신만의 방법을 고른 것이므.. 2024. 5. 22. 이전 1 2 3 4 5 6 7 ··· 9 다음
