분류 전체보기 (49) 썸네일형 리스트형 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/ ).. 프로젝트3 회사 다니시는 분들의 회사에 대한 리뷰글을 담은 임시 데이터를 메인 화면단에 나타내기 1. useQuery라는 서버와 네트워크 통신 혹을 이용해서 json-server에 있는 data를 불러왔습니다 . 2. map이라는 배열 메서드를 이용해서 리뷰 데이터를 다음과 같이 화면에 나타내주었습니다. 3. 이제 리뷰페이지가 보입니다. useQuery 에서 제공하는 isLoading , isError 를 이용한 데이터 로딩시 / 데이터 로딩 실패시 로직 구현 // isLoading : 로딩중일때 보여줄 화면 if (isLoading) { console.log('로딩중입니다.'); return Loading...; } // isError : 에러 나올때 보여줄 화면 // 추가적으로 오류가 나오면 에러가 나오는것을 .. 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.. TIL : json-server 환경 구축하고 axios를 이용하여 요청하기 json-server 나는 프론트엔드 개발자이고 , 백엔드 쪽 DB 와 서버는 아직 구축 안되었다고 가정하자. 프론트는 다 구축되었다. 그럴 때 나는 프론트단에서 패키지 하나만 설치하면 임시 데이터를 제공하는 서버를 설치한다. 그것이 바로 이 녀석 이다. https://www.npmjs.com/package/json-server json-server > [!IMPORTANT] > Viewing alpha v1 documentation – usable but expect breaking changes. For stable version, see [here](https://github.com/typicode/json-server/tree/v0). Latest version: 1.0.0-alpha.23, la.. 이전 1 2 3 4 5 다음
