TIL (24) 썸네일형 리스트형 TIL : 오늘은 무엇을 배웠나? next.js 는 무엇인가? ( 참고 ) Reactjs기반 폴스택 프레임워크 입니다. 프레임워크 00 이렇게 작성하라는 작성법을 공식 메뉴얼로 제시 예시) 스프링 프레임워크 , Vue.js 라이브러리 기능을 하는 덩어릴 뿐입니다. 예시) 리액트에서 리액트 라우터를 설치 받습니다. next.js 프레임워크가 가지고 있는 기능 - API Route를 지원하여 폴스택(프론트 + 백엔드) 개발이 가능해집니다. - 웹 페이지 로딩시간을 줄이는 코드스프리팅이 기본이다. - vercel이 개발하여 vercel 에 배포가능합니다. - fetch를 이용한 요청이 확대되었습니다. next.js 설치하고 샘플 앱 실행하기 ( 참고 ) next.js 설치 관련해서는 next.js 공식 설치 매뉴얼을 이용했습니다. 그리고 다음.. TIL : 오늘은 무엇을 배웠나? VITE 프로젝트에서 .env 설정하기 기존 리액트 프로젝트에서는 다음과 같이 .env 설정을 하였다. (1) .gitignore에 .env 파일이름을 추가한다. 그러면 깃허브에 .env 파일을 안올림으로써 노출이 안됩니다. (2) 리액트에서는 .env 파일에 다음과 같이 작성합니다. REACT_API_SERVER_URL = " 내용 " VITE 는 여기서 (2)번만 다름니다. 다음과 같이 작성합니다. # 다음과 같이 VITE...으로 시작합니다. VITE_API_SERVER_URL = " 내용 " TIL : 오늘은 무엇을 하였나? 모종의 이유로 없어졌던 나의 프로젝트가 깃허브에 남아 있어서 clone / 브랜치 이동 / 세팅 ( 1 ) 클론 ( 2 ) 깃허브에 올라간 브랜치중에 확인할 브랜치 가져오기 https://cjh5414.github.io/get-git-remote-branch/ Git remote branch 가져오기 Jihun's Development Blog cjh5414.github.io $ git checkout -t origin/브랜치이름 저는 Lv.6 브랜치도 확인하고 싶어서 다음과 같이함 git checkout -t origin/Lv.6 (3) npm install 깃허브에 존재하는 package.json에 맞게 나의 로컬(클론받은쪽)의 node_modules에 채우기 위해서 사용하였습니다. 기본 브랜치를 설.. TIL : TypeScript + React.js + vite 프로젝트 설치 ( + 일부 세팅 ) 설치 [ 1 ] 다음 명령어로 vite 환경에서 리액트 를 타입스크립트 환경을 구축하겠습니다. 다음 명령어를 입력해주세요 $ npm init vite [ 2 ] 그래서 vite-projeect로 넘어가서 npm install을 해주었습니다. [3] npm run dev로 타입스크립트 + 리액트를 실행합니다. 이 과정을 거쳐서 우리는 vite에서 리액트 + 타입스크립트 설치를 마쳤습니다. 그다음에는 세팅 입니다. + 리액트 개발 서버를 3000번을 고른 이유는 CRA때도 3000번에 절여있어서 그랬습니다. + 그 다음에 절대경로를 사용하기 위해서 다음과 같은 명령어를 설치해주었습니다. $ npm install vite-tsconfig-paths @types/node export default defineC.. TIL : TypeScript + React를 이용한 todoList 만들어보기(RTK ) RTK로 만들기전 useState로 관리를 하던 state을 다른 컴포넌트에서 이용해야하려면 프롭스로 처리를 해야되었습니다. 그렇게 되면 프롭스 드릴링이 생김과 동시에 에러가 발생해도 찾기가 어려웠습니다. 그래서 저는 리덕스를 사용하기로 했습니다. 저는 이 리덕스 툴킷 공식사이트에 왜 리덕스톨킷을 이용하는지에서 리덕스 스토어 구성에서 따로따로 선언해야 되는 점이 힘들지는 않지만 , 이 로직이 복잡해지면 에러 잡기도 힘들어져서 저는 결국 이것을 단순화한 리덕스 툴킷을 사용하기로 하였습니다. 그리고 리덕스의 기본 컨셉을 이어간다는 것을 이해하게 되었습니다. [ 1 ] 말 그대로 사용자가 title ,text를 입력하는 로직입니다. [ 2 ] 우리가 리덕스 스토어로부터 데이터를 불러오는 것입니다. 디스패치라는.. TIL : TypeScript + React를 이용한 todoList 만들어보기 오늘 내가 하였던 것들 typeScript와 리액트를 이용해서 할일 목록 페이지 를 만들어보는 것이었습니다. ( 1 ) 할일을 입력하면 저장되는 폼 을 작성하였습니다. 1. form의 기본동작을 preventDefault()를 이용해서 방지하였습니다. 2. 상태값을 저장하는 함수를 이용한 이유 ? 사용자가 입력한 데이터가 저장해야되기에 이용하였습니다. 또한, 제목 , 내용 , isDone( 할일이 시작에서 종료로 되는 상태) 이 변경여부가 이기에 그것을 고유한 식별자 인 id 기준으로 잡았습니다. 3. setText , setTitle이용해서 폼을 리셋합니다. ( 2 ) 할일목록이 시작과 종료 기준으로 컴포넌트를 분리하여 작성하였습니다. 4. 컴포넌트로 나누어서 TodoItems에 각각 상태가 할일이 시.. TIL : Typescript 설치하기 Typescript가 나온 이유 다음과 js에서는 에러가 나와야 되는데 NaN이 나옵니다. 반면에 ts에서는 에러가 나옵니다. // .js const obj = {math:20 , kor:20} const res = obj.math + obj.kors console.log(res); // NaN // .ts const obj = {math:20 , kor:20} const res = obj.math + obj.kors console.log(res); // main.ts(2,28): error TS2551: Property 'kors' does not exist on type '{ math: number; kor: number; }'. Did you mean 'kor'? // kors 속성은 존재하지 않는.. TIL : 내가 오늘 한 일 1 피그마 써보면서 느낀점를 남겼습니다. 평생 연습장에 써보았다가 Figma를 사용해보았습니다. 제가 피그마 관련해서 남긴 기록입니다. ( https://blog.naver.com/andante1104 ) 에플킹의 도서관 : 네이버 블로그 애플킹의 일상 blog.naver.com 2 이 프로젝트 코드 보관소 GitHub 에서 안쓰는 브랜치 제거하기 view all branches로 이동을 합시다. 우리는 브랜치를 삭제하고 새로 추가할수 있는 페이지에 왔습니다. 여기서 우리는 제거해야 될 브랜치 props-drilling 을 제거 하겠습니다. 휴지통 모양 눌러주세요 Your branches 에서 삭제 아이콘을 클릭하면 Active branches 에서 삭제된 것이 반영된 것을 확인 할수 있습니다. TIL : VITE 사용해보기 ( feat. 리액트 ) VITE 이용하여 리액트 프로젝트를 생성해보겠습니다. 들어가기에 앞서 VITE(에 대해서 알아보겠습니다. 왜 나오게 되었을까? VITE 공식문서를 참고하고 VITE가 나온이유에 대한 저의 생각입니다. VITE 공식문서에 따르면 모듈이 존재하는 프로젝트에서 있을 수 있는 문제 1. 성능 병목( = 교통 정체 생각하시면 됩니다. ) 현상 2. 개발 서버를 가동하는데 오랜 시간이 걸리는 현상 3. HMR ( 변경점만 갱신 , 소스코드 수정시 브라우저 즉시 업데이트 ) 를 사용해도 올래걸리는 현상 이런 현상은 개발자분들이 힘들어하시지 않을까 라는 것을 개선하기 위해 나타난 것이 VITE 라고 생각합니다. VITE 를 활용하여 리액트 프로젝트를 생성해보자 ( https://ko.vitejs.dev/guide/ ).. TIL : .env 참고한 서적 https://medium.com/@bhairabpatra.iitd/env-file-in-react-js-09d11dc77924 .env file in React js In a React.js project, the .env file is typically used to store environment variables. Environment variables are used to configure various… medium.com 미디엄에서 .env 파일을 다루는 법에 대해서 하고 있어서 분석하게 되었습니다. . 과정 [ 1 ] react project app 루트 디렉토리에 .env 파일을 만들어줍시다. // .env // REACT_APP : 환경변수이름 앞에 REACT_APP_API.. 이전 1 2 3 다음
