분류 전체보기 (33) 썸네일형 리스트형 Diary 프로젝트 진행 - 글쓰기 페이지 레이아웃 글쓰기 페이지 글쓰기 페이지 레이아웃은 완성했다. 이미지 업로드 부분은 어케 만들까? 기능을 구현하는 것보다 사실 css 구현하는 게 어렵네 ㅜㅜ Diary 프로젝트 진행 - 메인 & 상세 화면 기존부터 만들고 싶었던 것들이 무수히 많았는데 몸상태가 좋지 않아서 제대로 끝낸 적 없다. 그래서 끝까지 제대로 만들어보겠다는 생각으로 다이어리앱 프로젝트를 시작하게되었다. 기능은 일단 단순하게 아래 것들을 구현할 생각이다. ● 다이어리 메인 화면(다이어리 목록) ● 다이어리 상세 화면 ● 다이어리 작성(글쓰기) 및 수정, 삭제 화면 ● 로그인, 회원가입 (모달형식) 메인 화면 및 상세 화면 완성 디자인 부분은 벨로그를 참고해서 만들어보았다. 원래는 redux tookit을 사용하려고 했는 데 사용이 아직 미숙해서 메인 화면에서 상세 페이지로 갔다가 다시 메인 화면으로 이동하면 여러번 랜더링 되어 포스팅이 중복되어 나오는 이슈가 발생했다. 차라리 요즘 자주 사용하는 리액트 쿼리를 사용하면 어떨까? 고민을.. 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.. 리액트 - Error: Please verackage.json has a valid "main" entry 에러 해결하기 리액트로 진행하는 프로젝트를 깃헙에 업로드하고, 브랜치명을 변경하고 이것저것 하다가 리액트를 실행했더니 다음과 같은 에러가 나서 당황했다. ㅠㅠ (폴더명은 모자이크 처리했습니다.) 에러를 살펴보면 실행(load)하는 도중에 에러가 생겼다. 구글링한 결과 다음과 같은 방법으로 해결되어 정리를 남긴다. [해결 방법] 01) npm cache clean --force 명령어로 캐시를 삭제한다. 02) node_modules 폴더를 삭제한다. 03) package-lock.json 파일을 삭제한다. 04) npm install 명령어를 입력해서 node_modules와 package-lock.json를 다시 설치해준다. 위와 같은 에러가나면 node_modules 폴더, package-lock.json 지우고 .. '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.. 이전 1 2 3 4 5 다음
