Frontend study/정리 및 기록 (12) 썸네일형 리스트형 React.StrictMode는 값을 참조하지는 않지만 형식으로 사용... 에러 React에 Typescript를 적용하던 중 위와 같은 에러가 발생했다. 해결은 간단했다. 본인은 index파일의 확장자명을 .ts로 해서 .tsx로 변경하니 저런 에러가 나지 않았다. Typescript로 변경할 때 jsx 형식이 담긴 파일은 되도록 tsx로 변경하는게 속편한 거 같다. 끝. (간단해서 정리할까 하다가 나중에 저런 에러 접할까봐 정리합니다. ;;) 깃헙 SSH Key 생성하기 Git 원격 저장소를 Clone하거나 Push 또는 Pull할 때 매번 비밀번호를 입력해야하는데 꽤 번거롭다. (번거롭다기보단 귀찮은..?) SSH Key를 생성해서 등록하게 되면 위와 같이 매번 비밀번호를 입력하지 않고 Git 작업을 할 수 있어 편하다. 그럼 SSH Key를 생성하고 등록하는 방법에 대해서 살펴보자! SSH Key 생성하기 1) SSH Key에 대해서 SSH(Secure Shell Protocol) 네트워크상에서 서로 통신을 할 때 보안적으로 안전하게 통신하기 위해 사용되는 접속 프로토콜(약속)이다. SSH Key SSH 프로토콜로 서버에 접속할 때, 비밀번호 대신 Key를 제출하는 방식이다. 대표적으로 깃헙에서 사용된다. 2) SSH Key 파일 조회하기 우선 gitbash를 열어서.. Git remote branch 모두 가져오기 Github의 원격 저장소를 clone한 후에 원격 저장소에서 pull 하게 되면 main(구 master) branch 하나만 받아온다. 여기서는 원격 저장소에 있는 main(구 master)을 제외한 branch를 받아오는 방법에 대해서 알아보자! git remote update 하기 먼저 원격 저장소에 접근하기 위해서 원격 저장소의 최신 정보를 받아온 후 로컬의 모든 branch에 업데이트 해준다. $ git remote update 위 명령어를 입력하게 되면 원격 branch를 찾지 못해 발생되는 다음 에러를 해결해준다. fatal: Cannot update paths and switch to branch 'feature/rename' at the same time. 💡 git fetch git .. Git config 설정하기 최초에 Git(Git bash)을 설치하고 나면, 설정해줘야 할게 있다. 개발시, 협업을 통해 진행하는 경우가 많기 때문에 만약 커밋을 했을 때, 해당 커밋을 누가 했는지를 알 수 있게 이름과 이메일을 설정해줄 필요가 있다. 본 설정 과정은 윈도우(본인이 윈도우를 사용하므로) 기준이다. 로컬에서 기본값으로 사용할 Git 사용자 이름과 이메일 설정하기 일단, git bash를 열어서 아래와 같이 입력해준다. 1 2 $ git config --global user.name "Your Name" $ git config --global user.email "Your Email" cs 사용자 이름과 이메일을 설정해줬으면, 아래와 같이 입력해서 확인해보자! 1 2 3 $ cat ~/.gitconfig 또는 $ gi.. 'React' refers to a UMD global, but the current file is a module (리액트로 개발중..) JavaScript로 진행할 때에는 이런 에러가 생기지 않았는데, TypeScript로 변환하는 과정에서 이런 에러가 생겼다. 일단 해결하는 방법은 컴포넌트 상단에 import React from 'react'; ← 이 구문을 추가해주면 해결된다. 근데 매번 React 관련 속성을 사용하지 않는데 위 구문을 작성하는 건 비효율적이다. (물론 작성해도 상관은 없지만..) 이를 해결하는 방법은 아래와 같다. 1) typescript(ver 4.1 이상), react 및 react-dom(ver 17) 버전 확인하기 2) tsconfig.json 파일에 들어가서 complierOption에서 jsx 속성을 다음과 같이 설정해주기 "compilerOptions": { ... 생략 "jsx.. CRA에서 dotenv 설정 할 때 생긴 오류 해결 CRA 에서 dotenv를 설정하기 위해 dotenv 패키지를 설치하고, .env 파일을 생성해서 api_key를 입력한 다음, 실행하려고 브라우저를 켜보니 아래와 같은 에러가 발생했다. Compiled with problems:X ERROR in ./node_modules/dotenv/lib/main.js 24:11-24 Module not found: Error: Can't resolve 'fs' in '/Users/yubyeong-gug/Desktop/product_server_admin_client/product_server_admin_client/node_modules/dotenv/lib' ERROR in ./node_modules/dotenv/lib/main.js 26:13-28 Module .. React@18과 react-router-dom@5의 호환성 문제 이슈 제로초 강의를 CRA로 옮기면서 생긴 문제였다. react-router-dom을 사용해서 라우팅 처리는 다했고 마지막으로 결과를 확인하던 찰나에 다음과 같은 문제가 생겼다. 로그인 페이지에서 회원가입으로 이동하려고 했는데 url는 정상적으로 변경되지만 회원가입 페이지가 랜더링되지 않는다. 일단 제일 먼저 해결한 방법으로는 index.js 파일에서 를 제거하는 거였다. 생각했던 거처럼 로그인 페이지에서 회원가입 페이지로 잘 이동되었다. 여기서 끝내면 찝찝해서 좀 더 찾아보고 오픈톡에도 물어보다가 알게 된 게 있어서 이렇게 정리해본다. 일단 본인이 사용한 리액트의 버전은 18이였고 react-router-dom의 버전은 5.2.0 이었다. 리액트 18에서는 react-router-dom 5.3.3 이하.. CRA에서 절대경로 설정하기 앞뒤가 안맞아서 수정중.... CRA에서 자체적으로 설정하는법 프로젝트 root 경로에 자바스크립트라면 jsconfig.json, 타입스크립트를 사용한다면 tsconfig.json 파일을 추가한 후 다음과 같이 작성해준다. { "compilerOptions": { "baseUrl": "src" }, "includes": ["src"] } 이렇게 위와 같이 작성해주면 절대 경로로 사용할 수 있다. 사용하는 방법은 아래와 같다. 만약 App 컴포넌트에서 components/Footer 경로에 있는 Footer 컴포넌트를 불러온다면 import문에 import Footer from 'components/Footer' 이렇게 불러와 주면된다. CRACO 사용하기 ❗ CRACO 를 사용하는 건 타입스크립트를 사용.. 이전 1 2 다음
