개발 일지

1. 함수형 컴포넌트 만들기(함수 표현식) : rscp import React from 'react'; const Component = () => { return ( ); }; export default Component; (* 참고 : 표현식은 호이스팅에 영향을 받지 않는다.) 2. 함수형 컴포넌트 만들기(함수 선언식) : rsfp import React from 'react'; function $TM_FILENAME_BASE$(props) { return ( $1$ );} export default $TM_FILENAME_BASE$; 1&2번은 React Snippets 플러그인 설치시 사용가능한 단축키이다. (*함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우..

로컬에서 여러 프로젝트를 작업을 하다보면, host 주소가 port를 변경해서 실행해야 할 때가 있다. 그럴때는 package.json 파일의 script를 조금 수정해주면된다. "scripts": { "dev": "vite --host 0.0.0.0 --port 4000", "build": "vite build", "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, 이렇게 --host / --port 옵션을 사용해서 지정할 수가 있다.

const activeSubmitButton = () => { if(arr.includes(null)) { setSubmitButton(false) }else { setSubmitButton(true) } } 이러한 코드가 레이아웃을 구성하는 React 컴포넌트 내부에 구현되어 있다. 이는 좋지 못한 코드이다. 왜 일까? 먼저, null은 JavaScript에서 "값이 없음"을 나타내는 특별한 값이다. React 컴포넌트의 내부 로직에 null이 들어간다면, 컴포넌트가 아무것도 렌더링하지 않는다는 의미이다. 따라서 화면에 아무런 내용도 표시되지 않을 수 있다. 만약 이렇게 될 경우, 사용자에게 텅 빈 페이지를 보여주게 되는 것일테고, 이는 UX(사용자 경험)를 저하시키는 결과를 가져올 수 있다. 또한, ..

next 버전이랑 typescript 버전이 안맞아서 발생하는 문제 build 파일, node_modules, .d.ts 타입 정의 파일 삭제하기, npm 캐시 삭제하기. (npm cache clean 명령어 사용) 그리고 다시 재설치하였더니 해당 오류는 없어졌다..

하드디스크에 계시는 우리 프로그램이시여 디버그를 거룩하게 하옵시고 컴파일에 임하옵시며 명령이 키보드에서 이루어진 것과 같이 모니터에서도 이루어지게 하옵소서. 일용할 데이터를 주시옵고 우리가 프로그램의 오류를 용서한 것과 같이 우리의 오타를 사하여 주옵시고 우리를 버그에 들게 하지 마옵시며 다만 불시의 에러에서 구하옵소서 대개 속도와 파워와 안정성이 프로그램에게 영원히 있사옵니다. 엔터 출처 : https://flexboy.tistory.com/m/4

vite는 기본적으로 프로덕션 모드에서 Strict Mode를 true로 설정한다. 프로덕션에서 Strict Mode가 켜져있는 이유는 안정성과 성능을 향상시키기 위해서 인데, 'Strict Mode'를 설정함으로써 자바스크립트의 잠재적 오류를 탐지하고 경고 메세지를 출력하는 기능을 제공한다. 프로덕션 환경에서 잠재적인 버그를 발견하는 것은 어플리케이션의 안정성을 향상시키는데 기여한다. 실제로 rollup 옵션 Docs를 보게 되면, 특별한 이유 없이 이 'Strict Mode'를 해제하지 말라고 나온다. (참고 : https://rollupjs.org/configuration-options/#output-strict ) # Javascript에서 'Strict Mode'는 여러 기능들을 제공한다. 암묵..

함수형 컴포넌트에서는 앞서 공부한 라이프 사이클 메서드를 사용할 수 없다. React v16.8부터는 함수형 컴포넌트에서도 클래스형 컴포넌트의 라이프 사이클 메서드와 유사한 기능을 할 수 있는 기능들을 제공한다. 1. useState 가장 기본적인 hook. 가변적인 상태를 지닐 수 있다. (1) 사용 예 state를 컴포넌트에 추가할 때 이전 state에서 상태값 업데이트가 필요할 때 배열이나 객체 state를 업데이트 할 때 초기값을 재생성하는 것을 막고 싶을 때 key와 함께 state를 초기화 시키고 싶을 때 이전 렌더링 정보를 저장하고 싶을 때 (2) useState(initialState) 컴포넌트 최상단에 state 변수를 할당하며, 컨벤션은 일반적으로 [이름, set이름] 이런식으로 배열 ..

Redirects 유저가 보는 URL의 path를 리다이렉트 시켜서 다른 path로 이동시킨다. next.config.js 에서 redirect를 설정할 수 있다. module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ]; }, }; 리다이렉션은 동기(async)함수로 source, destination, permanent 프로퍼티를 가지고 있는 매핑된 배열 객체를 반환한다. source : 유입되는 요청 경로 패턴 destination : 라우팅하려는 경로 permanent : true / false true : 클라이언트/검색 엔진에 리다이렉션을 영원히 캐싱하는 경우..

* 23년 5월 5일 Next.js 13.4.0 버전 에서 App Router(stable) 버전이 릴리즈 되었습니다. ** Next.js 12 이하 버전까지는 Page Directory를, 13 버전 이후부터는 App Router를 권장합니다. (방식에 차이가 있으므로 주의) (대표적으로 App Router에서는 Custom App 이 없습니다.) Next에서는 App 컴포넌트를 사용하여 페이지를 초기화한다. 즉, Next는 기본적으로 가장 먼저 App Component를 확인하고 index.js의 컨텐츠들을 확인하기 때문에 모든 페이지들이 통과하는 관문이라고 볼 수 있다. 어떤 컴포넌트가 어느 페이지에 있어야 하는지, 모든 페이지들을 한 눈에 볼 수 있는 청사진 역할을 한다. App 컴포넌트를 사용해..

1. CSS Modules Next.js에서는 module.css 확장자로 CSS모듈을 기본적으로 지원한다. CSS Modules는 유니크한 클래스네임(className)을 생성하여 css의 범위를 한정시켜 독립적으로 사용할 수 있다. 이는 같은 클래스네임을 여러 파일에서 사용해도 충돌이 나지 않게 해주는 장점이 있다. (사용예시) Nav.tsx import { useRouter } from "next/router"; import Link from "next/link"; import styles from ".//Nav.module.css"; export default function Nav() { const router = useRouter(); return ( Home Detail ); } Nav.mo..