분류 전체보기 (13) 썸네일형 리스트형 협업을 위한 git & github (Pull & Request 도전기) 다른 사람의 레포지토리에서 함께 작업하는 방법을 연습해보자. 시작하기에 앞서… https://wayhome25.github.io/git/2017/07/08/git-first-pull-request-story/이 글을 보고 따라 학습했습니다! git 초보를 위한 풀리퀘스트(pull request) 방법 · 초보몽키의 개발공부로그 개발을 하다 보면 코드를 여러 개로 복사해야 하는 일이 자주 생긴다. 코드를 통째로 복사하고 나서 원래 코드와는 상관없이 독립적으로 개발을 진행할 수 있는데, 이렇게 독립적으로 개발하는 wayhome25.github.io 순서 협업할 파일 Fork 하기 clone, remote 설정하기 작업할 branch 생성하기 수정 작업 후 commit, push Pull Request 보내기.. 협업을 위해 프로젝트 세팅을 도전해보자! (React + node.js) 이 포스트는 팀프로젝트를 세팅하는 역할을 맡게 되며 제가 지나온 길들을 팀원들에게 알려주기 위해 쓴 포스트입니다. React + node.js 프로젝트 세팅 요약된 부분만 읽으셔도 개발 자체에는 영향을 주지 않습니다! 🥗 요약 frontend의 경우 create-react-app을 이용하여 typescript 템플릿을 받았습니다. backend의 경우 우선은 express.js, nodemon을 이용했습니다. ESLint + Prettier 설정은 aribnb의 컨벤션을 가져왔습니다! 개발시 가이드 npm install로 필요한 모듈들을 먼저 받아주세요! food-management > npm install food-management/client > npm install (Frontend개발시) fro.. React에서 Redux를 이해하며 사용해보기 2편 (redux-toolkit) 지난 포스트에서는 React에서 redux를 다루면서 알아야 하는 기본적인 hook과 메서드들에 대한 학습을 했다. 이번 포스트에서는 redux만으로 관리하기 힘든 커다란 프로젝트에서 사용하기 용이한 redux-toolkit에 대해서 설명해보려고 한다. npm 설치 (@reduxjs/toolkit) 이전 글에서 설명했지만, npm으로 아래와 같이 입력하여 설치해주면 redux toolkit을 사용할 수 있다. npm install @reduxjs/toolkit 설치가 끝났다면, 이제 좀 더 개선된 redux-toolkit을 사용할 수 있다. reducer 대신 slider? redux에서는 slice라는 개념이 추가되었고 이를 주로 사용한다. 학습에 앞서 먼저 slice에 대한 개념을 알아보자. Redu.. React에서 Redux를 이해하며 사용해보기 1편 count state를 Redux로 관리하는 간단한 예제를 만들어보며 Redux에 대한 학습을 해보자. 이 포스트는 react가 앱에 미리 설치된 환경이라는 가정 하에 진행한다. (create-react-app 사용함) npm 설치 (react-redux) Redux는 바닐라 자바스크립트에서도 동작하지만. react에서의 Redux를 사용하기 위해서는 따로 react-redux도 함께 설치해주어야 한다. npm install redux react-redux 먼저, store가 필요합니다! 먼저 state들을 저장할 store를 만들어야 한다. 그리고 그에 인자로 부여할 reducer함수도 함께 정의해야 한다. store란 무엇이며 reducer란 무엇일까? 차근차근 하나씩 이해해보자. store란? Re.. [React 일기앱 버그] 로그인 후 로그인 유저의 정보를 읽어올 수 없는 문제 해결 일기 쓰기 사이트에 로그인할 시 일기장을 생성할 수 없는 에러가 발생했다. 사실은 몇몇 유저가 “로그인 후 일기가 안 써져요”라는 버그를 지적해주셨으나 메시지에 답장을 보내려고 하면 새로고침 하니 작동합니다! 지금은 잘 써져요.라고 해주셨기 때문에 애초에 왜 이런 문제가 발생하는 걸까? 에 대한 질문을 던지지 않은 채로 그저 안일하게 넘겨왔었다. (바보) 나는 최근까지 이 버그의 원인을 눈치채지 못하고 이곳저곳에 이 버그가 난 포트폴리오를 들고 면접을 보러 다녔다. 그러다 한 곳에서 면접을 보는 도중 “포트폴리오 사이트를 이용해봤는데 이러한 버그가 있었다” 라는 피드백을 (감사히도) 받을 수 있었고, 그 자리에서 버그사항을 메모했다. 면접관분께서는 “로그인 후 로그인 된 유저의 정보를 앱이 제대로 읽어오.. React와 Node.js + MongoDB로 쇼핑몰을 만들어보며... 이번엔 React와 Node.js를 사용하여 쇼핑몰을 만들었다. 약 2주에 걸친 개발 기간 동안 느낀 점을 기록하기 위해 회고글을 남긴다. 프로젝트 소개: 모퉁이 꿈 다락방 (https://corner-dream-atelier.herokuapp.com/)달러구트 꿈 백화점이라는 책에서 영감을 받아 만든 꿈을 팔고 살 수 있는 쇼핑몰이다. '통신판매에 도전하는 요정들의 스타트업'이라는 지존 오타쿠 같은 컨셉을 잡고 만들었다 으하하. 간단히 아래와 같은 기능들이 있다. 1. 상품 조회 2. 상품 구매 3. 상품 생성 4. 카트에서 삭제 5. 카트에서 결제 6. 구매한 상품정보 조회 강의에 나온 기능에서 +@로 개선할 부분은 개선하고, 추가할 부분은 추가하는 식으로 진행하며 나만의 프로젝트로 점점 바꾸어나갔다.. Node.js multer로 AWS S3에 이미지 업로드하기 + heroku 쇼핑몰을 만들며 생긴 일… 이미지가 올라가지 않았다. heroku에선 30분에 한 번씩 sleep 모드로 들어가서 이미지를 지워버린다는 얘기도 있었고, 무엇보다 일단 이미지 업로드 자체가 되질 않았다. 이렇게 된 거 aws 란 넘을 함 이용해보자! 하며 삽질을 시작했다. 결과는 만족한다. 삽질은 괴롭지만 결과는 늘 달다! 이 글은 AWS의 IAM, S3등등 AWS의 사이트에서 할 수 있는 세팅을 전부 한 상태라는 전제 하에 진행합니다. S3 페이지의 버킷에 들어와서 업로드를 눌러 이미지를 업로드 했을 시, 객체 URI를 클릭하면 정상적으로 이미지가 뜨는가? 를 먼저 확인하고 진행하도록 한다. 할 일 프론트에서 Axios를 이용하여 유저가 직접 업로드한 이미지를 넘겨주면 서버에서는 건네받은 이미지를 s.. NVM 설치하기 / exit status 5 에러 해결 NVM이란 Node Version Manager으로, 편리하게 노드 버전을 여러 개 관리할 수 있는 쉘 스크립트다. 원래 노드의 안정화된 최신 버전을 늘 이용했었지만, 이번에 John Ahn 님의 따라하며 배우는 노드 리액트 쇼핑몰 강의를 듣고 있던 중 npm install 오류가 나 node 버전문제라는 것을 깨달았다. 개인 프로젝트 개발을 할 땐 최신 버전을 사용하되, 해당 강의를 들을 때만 일시적으로 node 10.16.0 버전을 사용하기 위해 nvm을 설치했다. 설치 https://github.com/coreybutler/nvm-windows GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ir.. React, Firebase를 이용한 다이어리 사이트를 만들어보며... 블로그를 쉬는동안 리액트 공부를 했다. 기존의 강의를 듣고 클론코딩하는 방식이 아니라 새로운 도전을 해보고 싶었다. 그래서 잘 듣고 있던 유데미 리액트강의를 멈춰두고 한달정도 기간을 잡고 느긋하게 만들기 시작했다. (강의를 멈춰둔 시점은 useEffect를 배우기 직전 쯤인데 이 프로젝트를 만들다보니 자연스레 useEffect에 대해서 공부할 수밖에 없게 되더라...) 프로젝트 소개 이번에 만든 프로젝트는 일기를 쓰는 사이트 이다... (https://hamsoter.github.io/diaryapp/) 이름은 없다. 그냥 말 그대로 일기를 쓰는 사이트이며, 정말 일기를 쓸 수 있고. 귀엽다. 하지만 브라우저 탭에 덩그러니 'React App' 이라고 뜨는 건 좀 아닌 거 같아서 급하게 '끄적끄적' 이라.. [Git] .eslintcache 없애버리기 (gitignore 캐시 삭제) 문제 평화롭게 리액트 공부를 하던 날... git status를 입력하니 누가봐도 git에 올리면 안 될 거 같은 수상쩍은 캐시파일이 있었다. ?? 머임 ㅋㅋ 凸 하고 .gitignore에 해당 캐시파일을 추가해주었다. 이제 됐겠지~ 하고 다시 git status를 확인해보자, 여전히 git에서는 .eslintcache파일을 추적중이었다. (휴...凸) gitignore 파일을 추가하기 전의 캐시기록이 남아 있기 때문이라고 한다. 해결법 git rm -r --cached . 캐시파일을 전부 지워버리는 명령이다. `git state`로 사라진 거 확인... ㄲㅈ ㅋㅋ git add . git commit "clear git cache" 확인했으니 이제 stage에 올려주고 커밋해준다 깔끔 이전 1 2 다음
