[프로젝트 초기 설정]yarn + CRA + TypeScript + Prettier + ESLint

신규 프로젝트 설정을 위한 초기 설정 템플릿 메모.완전 초기 설정에서 어떤게 필요할지 궁금해 하시는 분들께 도움이 되었으면 좋겠습니다.yarn installyarn 이 install 되어 있지 않을 경우 (설치 되어 있을 경우 무시)npm install -g yarn  yarn CRA (feat. TypeScript)yarn global install 이 된 점을 확인한 후, 아래의 커맨드 입력yarn create react-app my-app --template typescriptmy-app: 생성하고자 하는 프로젝트 이름--template typescript: 타입스크립트 프로젝트를 생성하고자 할때 추가로 작성유의사항: create-react-app 이 아닌 create react-app 임!ESLi..

Dynamic Routing + Router Hook (URL masking)

이슈 내용: Next.js 환경에서 URL 및 컴포넌트 디렉토리를 설정, 라우터 설정 필요 해결 방법: 각 디렉토리 폴더 생성 및 컴포넌트 이름 설정 -> 메인 URL에서 직접 접속 가능 + router 설정으로 query 전달 & 마스킹 처리 기본적인 URL 라우팅 localhost:3000 이 기본 접속 URL이라고 가정할 때, Next.js 환경에서 제공하는 기본적인 Dynamic Routing을 설정하면, 디렉토리 및 컴포넌트 파일 이름을 작성하여 그대로 라우팅 된 URL로 접속이 가능하다. 예를 들어, 위와 같은 디렉토리 & 컴포넌트 이름을 설정한 다음, 로컬 구동 후 확인해 보면 /movies 에서는 index 의 내용이, /movies/all 에서는 all 의 내용이 그대로 출력되는 것을 확..

rewrites() - nextConfig 에서 URI 우회 & API parameter 숨기기

이슈 내용: API 접속할 때의 보안키 숨기기 & URI 표시 우회가 필요함 해결 방법: Next.js - nextConfig 부분에서 rewrites() 활용하여 API 우회 & process.env 설정하여 키 숨김 API KEY가 노출되던 파라미터 부분 index.tsx 에 설정되어 있던 부분 (태그가 존재하는 return 부분 제외) 로직은 아래와 같다. const API_KEY = "c3a6fcbe2573a7042c" // 개인정보 사유로 일부 키 삭제 const [movies, setMovies] = useState([]) useEffect(() => { (async () => { const { results } = await (await fetch(`https://api.themoviedb...

NextJS - 알아두면 좋은 지식 정리 (1)

노마드 코더의 Next.js 강의를 듣는 동안, Next.js (vs. React) 의 특징을 아래와 같이 정리해본다. create-react-app (React) create-next-app (Next.js) 프로젝트 init (폴더 생성) 커맨드 npm npx Library ? Framework? Library (기본 틀 제공, 설정은 개인의 자유) Framework (기본 세팅이 쉬우나 폴더 및 파일 경로는 고정되어 있어서 유의해야 함) CSR ? SSR? Client Side Rendering (브라우저가 유저가 보는 UI를 다 만들어줌) -> client-side JS가 모든 UI를 만듦 (HTML 에서는 빈 div 가 자리잡고, UI가 이후에 출력) cf) JS 로딩이 다 안되면 화면이 보이지..

[Webpack] Module parse failed: Unexpected character '' (1:2)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

문제 내용: 프로젝트 루트에 있는 엑셀 파일 import가 적용되지 않음 & 엑셀 파일 인식이 제대로 되지 않음 해결 방법: webpack config 에 설정 추가 & 프로젝트 로컬 경로를 입력하여 파일 direct import ExcelRulesUpload.tsx 의 코드는 어땠을까? function logic const downloadExcelTemplate = e => { const link = document.createElement('a') const fileName = 'excel_template_example.xlsx' link.href = fileName document.body.appendChild(link) link.target = '_self' link.download = fileN..

We no longer support global installation of Create React App. ..

문제 내용: npm 구버전으로 인한 create-react-app 즉시 활용이 어려움 해결 방법: npm install -g create-react-app 입력 후 세팅 이전 버전의 npm 사용으로 인해, create-react-app 구버전이 연동되어서 글로벌 설치를 지원하지 않는다는 문구가 출력되었다. 기본 create react app 세팅하는 링크가 있어서 진입 https://create-react-app.dev/docs/getting-started/ Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev 링크를 한 번..