분류 전체보기 (12) 썸네일형 리스트형 협업을 위한 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 일기앱 버그] 로그인 후 로그인 유저의 정보를 읽어올 수 없는 문제 해결 일기 쓰기 사이트에 로그인할 시 일기장을 생성할 수 없는 에러가 발생했다. 사실은 몇몇 유저가 “로그인 후 일기가 안 써져요”라는 버그를 지적해주셨으나 메시지에 답장을 보내려고 하면 새로고침 하니 작동합니다! 지금은 잘 써져요.라고 해주셨기 때문에 애초에 왜 이런 문제가 발생하는 걸까? 에 대한 질문을 던지지 않은 채로 그저 안일하게 넘겨왔었다. (바보) 나는 최근까지 이 버그의 원인을 눈치채지 못하고 이곳저곳에 이 버그가 난 포트폴리오를 들고 면접을 보러 다녔다. 그러다 한 곳에서 면접을 보는 도중 “포트폴리오 사이트를 이용해봤는데 이러한 버그가 있었다” 라는 피드백을 (감사히도) 받을 수 있었고, 그 자리에서 버그사항을 메모했다. 면접관분께서는 “로그인 후 로그인 된 유저의 정보를 앱이 제대로 읽어오.. 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에 올려주고 커밋해준다 깔끔 [Intellij] 스프링부트 프로젝트 안 열림, 빌드 안 됨, 튕김 현상 https://start.spring.io/ 에서 생성한 프로젝트를 Intellij에서 Open Project 할 시 갑자기 어떤 오류 메세지도 없이 IDEA가 냅다 튕겨버리는 현상이 있었고, 정말 아무리 구글링해도 해결법이 나오질 않아서 시간을 많이 낭비했다. 해결법은 생각보다 간단했다. (허무주의) 1. 프로젝트 파일을 압축 해제한다. 2. 폴더를 통째로 IDEA에 드래그한다. 3. 빌드 되는 거 확인. 빌드가 성공적으로 되었다면 스프링 애플리케이션에 Run 버튼이 생긴다. 이 오류의 정확한 원인은 모르겠다. 이상하게 노트북 개발 시에만 이런 현상이 나타난다. 언젠가 까먹을 나, 그리고 어딘가에서 고생중인 익명의 개발자들을 위해 작성하는 글. 화이팅. 이전 1 2 다음
