본문 바로가기

분류 전체보기518

[Next.js] 환경변수 사용 방법: .env파일 (development, production, local) # Next.js 환경변수(Environment Variables) 사용 방법 Next.js는 아래의 3가지 방식으로 환경변수 기능을 지원한다. 1. process.env.NODE_ENV : 구동환경 체크용 환경변수 2. .env 파일 : 구동 환경별 환경변수 적용 파일 3. NEXT_PUBLIC_ : 브라우저에서 참조하기 위한 Prefix 각각의 기본적인 사용법을 정리해 본다. 1. process.env.NODE_ENV : 구동환경 체크 변수 - Next.js는 자동으로 process.env.NODE_ENV 변수를 생성하고, 구동 환경에 따라 아래의 3가지 값을 주입해 준다. 1) development : 개발 환경(npm run dev로 구동한 경우) 2) production : 배포 환경(npm r.. 2022. 8. 25.
[React-Query] Query data cannot be undefined 에러 해결 방법 # Query data cannot be undefined 에러 발생 이유 React-Query에서 useQuery를 아래와 같이 사용하면 에러가 발생할 수 있다. const { data, status} = useQuery(['todo', id], () => { fetchByParam(id); }); 만약 이런 에러가 발생 했다면... Error: Query data cannot be undefined at Object.onSuccess .... 이유는 useQuery에 등록한 함수가 Promise를 반환하지 않아서이다. 분명히 Promise 를 반환하는 fetch나 axios 함수를 썼겠지만, 호출만하고 리턴은 하지 않았을 수 있다. # Query data cannot be undefined 해결 방법.. 2022. 8. 24.
[React] Next.js + ReduxToolkit + TypeScript 설정 방법 (next-redux-wrapper HYDRATE 사용 이유) # Next.js와 Redux 설정에 대하여 Next.js와 Redux를 연동하는 것은 생각보다 간단하지 않다. 왜냐하면, 본질적으로 Next.js 와 Redux 의 출신성분이 다르기 때문이다. 단순하게 정리하면, Next.js는 서버에서 돌아가고, Redux는 클라이언트(브라우저)에서 돌아간다. 여러 브라우저들에서 제각각 돌아가는 Redux의 전역상태를 서버에서 돌아가는 Next.js 에서 사용하려면 일이 복잡해진다. 이 글에서는 이에 대해 좀더 자세히 알아보고, 실제 설정하는 방법을 정리한다. (Next.js + Redux-Toolkit + TypeScript 연동 코드는 하단에 따로 정리해두었다. ) # Next.js 와 Redux의 관계 1. Next.js 는 "서버" 프레임워크다. 1) Next.. 2022. 8. 23.
[Meta태그 og] 카카오톡 링크 공유 미리보기 반영 안될 때, 캐시 초기화 방법 # Meta 태그 OG(Open Graph) 속성 HTML Meta 태그에 오픈그래프(og) 속성을 설정하면, 카카오톡, 페이스북 등에 링크 공유시, [제목, 설명문, 이미지] 등을 미리보기 할 수 있게 해준다. - 위의 html 링크를 카톡 공유시, 아래와 같이 이미지, 제목, 설명, url이 미리보기로 노출된다. 그런데 가끔 Meta 태그의 og 속성 값을 변경해도, 카톡에서 반영이 되지 않을 때가 있다. 원인은 카카오톡 내부에서 OG 정보를 캐시해두고 처리하기 때문이다. 카카오톡은 OG 캐시를 초기화하는 방법을 제공해준다. # 카카오톡 공유링크 OG 캐시 초기화 방법 아래 사이트에 접속하여, URL 을 입력하고 초기화 버튼을 눌러주면 된다. 즉시 카카오톡 OG 캐시가 삭제되고, 변경사항이 바로 반영.. 2022. 8. 23.
[VS Code] Enter 개행 다음줄 들여쓰기 간격(Indent) 문제 조정 방법 Visual Studio Code 에서 Enter를 치고 다음 행으로 내려가면 앞에 특정 간격(Indent)으로 들여쓰기 된다. 이 때 간혹 아래의 2가지 문제가 발생하는 경우가 있다. # VS-Code 들여쓰기 간격 문제 ▶ 1번째 문제: Indent가 사라진다. - 엔터를 치면 간격이 생기는데, - 방향키로 커서를 위로 올리면 간격이 사라진다. ▶ 2번째 문제: indent 간격이 안 맞는다. - 엔터를 치면 간격이 생기는데, - 설정한 값과 불일치하는 다른 탭 간격이 적용된다. * 탭 간격 설정은 Preference>Setting의 Editor: Tab Size, 혹은 prettier 사용시 printWidth 등으로 할 수 있다. 이런 사소한 문제가 코딩의 생산성과 효율성에 영향을 미칠 수 있으므.. 2022. 8. 21.
[Next.js] Link 컴포넌트에 속성 설정 방법(className, target, rel 등) # Next.js의 Link 태그에 속성 설정 방법 Next.js 에서 태그는 새로고침없이 페이지를 이동하는 client-side navigation을 위해 사용된다. 만약 컴포넌트에 className, target, rel 등의 속성을 주고 싶다면, 컴포넌트에 직접 주는게 아니라, 태그 하위에 태그를 삽입하여 속성을 설정 주면 된다. import Link from 'next/link' export default function LinkAttr() { return ( // Link 태그 내부에 a태그를 삽입하고, a태그에 속성을 설정한다. 링크 ) } * 참고 : rel 속성으로 noopener noreferrer 를 설정해줘야 보안상 유리하다. 참고로 공식문서의 원문을 첨부한다. If you need .. 2022. 8. 21.
[Next.js] pages 라우팅 파일명, 컴포넌트 이름 작성 방법 Next.js 는 File System Routing 을 제공한다. 즉, pages 경로에 위치한 폴더 및 파일명 자체가 접속 경로로 라우팅된다. 1. pages/파일명.tsx : /파일명 접속 라우팅 2. pages/폴더/파일.tsx : /폴더/파일 접속 라우팅 3. pages/폴더/[쿼리].tsx : /폴더/모든경로 접속 다이나믹 라우팅. useRouter().query 로 경로 취득 * index.tsx 는 파일명을 제외한 / 경로로 인식. * 타입스트립트 확장자는 tsx, 자바스크립트 확장자는 js를 사용 그런데 라우팅되는 파일의 파일명과 컴포넌트 명은 달라도 상관없다. 이 글에서는 이에 대해 간략하게 정리한다. # pages 라우팅 파일명, 컴포넌트 이름 작성 방법 - pages 경로의 라우팅 .. 2022. 8. 21.
[VS Code] .git 등 숨김 파일/폴더 표시 방법 # Visual Studio Code 에디터에서 .git 등 숨김 파일/폴더 표시 방법 VS-Code 에서 .git 등의 숨김 폴더/파일을 표시하는 방법을 정리한다. 1. 설정 화면 진입 - Settings 항목을 클릭한다. 2. "exclude" 검색 - Files:Exclude 항목에 **/.git 등 숨김 폴더/파일들이 설정되어 있다. 3. 표시하고 싶은 숨김항목을 Files: Exclude 에서 제거 - 마우스를 올리면 나타나는 X버튼을 클릭하여 숨김항목을 제거한다. * 연필 모양 아이콘을 클릭하며 편집 가능하다. * Add Pattern 버튼을 클릭하여 추가도 가능하다. 2022. 8. 19.
[TypeScript] enum 기초 사용법 (+ enum이 필요한 이유) # TypeScript 의 enum 이란? Typescript 는 JS의 기본 타입 외에도 몇 개의 타입을 더 제공하는데, 그 중 하나가 열거형이라고 불리는 enum 이다. enum은 말 그대로, 여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입이다. 예를 들어, 사용자를 권한별로 관리해야할 때 enum으로 정의해두고 사용한다. enum Auth { admin = 0, // 관리자를 0으로 표현 user = 1, // 회원은 1로 표현 guest = 2 // 게스트는 2로 표현 } 근데 도대체 왜 enum을 사용하는걸까? 그리고 언제! 어떻게! enum을 사용하는게 좋을까? enum의 기초 문법은 글 하단에서 살펴보기로 하고, 먼저 enum이 필요한 이유부터 정리해본다. # enum 의 필요성.. 2022. 8. 18.