코드스테이츠(Immersive)/2주프로젝트 썸네일형 리스트형 2주프로젝트(WebPaper_day10 : 프로젝트를 끝내면서) 개인적인 회고 마지막에 배포 관련 이슈가 생겨서 팀 회고 시간을 갖지 못하게 되었다. 개인적으로 배포를 하는것보다 팀 회고 시간이 더 중요하다 생각해서 회고 시간을 갖길 원했으나 설득하질 못했다. 모두다 다른 방향을 생각하고 있고, 같은 방향으로 이끄는 일은 참 힘든것 같다. 그래서 개인적으로나마 2주간 팀프로젝트를 진행하면서 있었던 일들을 되돌아보고자 한다. 처음에 아이디어 기획안을 냈을때는 기획대로 구현해보고 싶은 마음이 컸지만, 현실적인 시간과 상황이 처음 했던 기획과는 다른 방향으로 이끌었다. 항상 디테일하게 계획을 짜고 일을 진행하고 싶었지만, 시간이라는 압박에 쫓겨 그냥 그냥 넘어가고 말았던것같다. 글을 쓰면서 느끼는 점은 시간이라는 압박에 제대로 대처를 못한것같다. 시간을 더 확보하려는 노력.. 2주프로젝트(WebPaper_day09 : GridList, Comment Component 만들기) 2주 프로젝트 발표 준비 결과물 30% 이하, 고생했던 부분, 다음에 주의 해야할점, 아키텍쳐를 잘못 짬(처음시작이 중요하다 ) -> 4주에서 주의할점 Comment Component에서 _id를 찾아서 db에서 코멘트를 가져오기로, 상위컴포넌트에서 _id props 전달 상위컴포넌트 하위 컴포넌트 관계가 정리가 잘안된다( 처음 시작때 그림 그려놓기) 2주프로젝트(WebPaper_day08 : React state & setState) map을 써서 dynamic하게 렌더링을 했지만, 모든게 버튼처리 되는 문제 발생 -> 상위컴포넌트에서 Link 처리 기사 li 클릭시 state 변경 -> article 인자 받아와서 setState 설정 setState는 aysnchronous이므로 바로처리 되지않는다 (콜백이용) link로 연결시 props 전달하는법 -> _id를 써서 api에 접속해서 data를 가져오려했는데 넘겨주는게 나을거같다 -> link안에서도 state를 전달할 수 있구나 2주프로젝트(WebPaper_day08 : React state & axios) 카테고리를 선택하면 axios get 요청을 해서 데이터를 렌더해야한다 - state 부분 수정 , 특정기사 수 만큼만 저장 선택한 카테고리들의 state 변화 줘야됨 prevState is a name that you have given to the argument passed to setState callback function. What it holds is the value of state before the setState was triggered by React; Since setState does batching, its sometimes important to know what the previous state was when you want to update the new state ba.. 2주프로젝트(WebPaper_day07 : React Hooks) 기사의 클릭수를 저장하기위해 리액트 훅을 사용하기로 결정 비슷한 예시들을 찾아보기로 처음엔 클릭수를 저장해서 넘겨주려 했으나 이벤트가 클릭되면 Api에 아이와 카테고리를 포스트 하는 방식으로 => 공부해야할것 : React Hooks, axios 오피스아워 - 훅스 보다 기존 기술을 먼저 연습 - 커밋을 중요하게 생각하자 Hooks useEffect 사용해서 Data fetch하기 export default () => { const [count, setCount] = useState(0); const [person, setPerson] = useState(null); const [loading, setLoading] = useState(true); useEffect(async () => { const r.. 2주프로젝트(WebPaper_day06 : 라우터 셋팅) BrowserRouter It uses history API, i.e. it's unavailable for legacy browsers (IE 9 and lower and contemporaries). Client-side React application is able to maintain clean routes like example.com/react/route but needs to be backed by web server. Usually this means that web server should be configured for single-page application, i.e. same index.html is served for /react/route path or any other rou.. 2주프로젝트(WebPaper_day05 : 기본 컴포넌트 작성) 컴포넌트 업무 분배에 고민 -> 기능별로 분배하는것이 좋다 클릭된 아이템의 디테일페이지로 어떻게 넘어가느냐 고민.. React-Hooks > Hooks가 편하긴 하지만 클래스 컴포넌트로 먼저 사용하는게 나을듯 React Router - Link : to 를 이용하여 해당 url로 link( a 태그 역할) exact를 붙이면 정확한 url에만 반응 - Route : props로 받은 path로 접속하면 component props의 컴포넌트로 연결(render)시켜준다 Link와 마찬가지로 exact 키워드 사용 가능 props를 사용하고 싶다면 Mycomponent myProps='hello; />} /> exact render={(props) => ...props} isAuth={true} /> -S.. 2주프로젝트(WebPaper_day04 : 스탠드업 미팅, 리액트라우터) 스탠드업 미팅 세션 - 어제 뭐 했는지, 오늘 뭐 할건지 정리 - Scrum 테이블 - 팀장 주도하기 - 코드 및 스택에 대한 질문은 따로 미팅 스프린트 후 회고 작성 프로젝트 과정이 중요! (그러므로 회고 중요) 헬프데스크 더 이용하기 Eslint 에러 지속적으로 발생 > 글로벌 설치가 아니라 프로젝트 내에서 설치후 다시 해보기로 > Failed to load config \"standard\" to extend from > 노드모듈 삭제, package-lock.json, package.json 에 eslint관련 삭제 컴포넌트 설계하기 오피스아워 route Switch 헤더 2주프로젝트(WebPaper_day03 : 프로젝트 시작) 엔지니어 미팅(스키마, 프론트 ui구성에 대한 조언) 취소됨 오피스 아워 클라이언트(ui/기능) - 서버 서버 테스트케이스를 먼저 만드는게 수월 클라이언트 테스트케이스(어렵지만 시도해보면 좋음)(ex.클라이언트 리액트 테스트케이스) 큰파일을 분리해서 쪼개서 작업(라우터 -> 작은라우터(subRoute)) 서버 api 사용법 : 클라이언트 서버 레포 다운 받은후 둘다 켜서 진행 git pull upstream dev 클라이언트 api url를 변수로 사용 (endpoint) create react app 에서 환경변수 사용법 (process.env , dev , product) ${API_URI} source tree 작은기능에도 디테일하게 (로그인에도 에러처리) 클라이언트와 서버에서 둘다 에러처리 asy.. 2주프로젝트(WebPaper_day02 : 깃플로우, 데이터 스키마 ) Project Git Flow 주의사항 커밋메시지 자세하게 작성 add . 하지 않기 MASTER 쓰지 않기 push master 조심!! 다른사람이 작업하는 파일 건드리지 않기 그림 그릴 경우 명령어 브랜치명 1. 초기 Repo 설정 > Origin의 레포를 자신의 로컬로 클론 2. master branch에서 초기설정 진행 3. 초기설정완료 후 자신의 기준 Origin(git push origin master) / 팀원들에게는 Upstream이 될 Repo를 푸쉬 4. Dev 브랜치 생성(git checkout -b dev) / Dev 브랜치를 푸쉬(git push origin dev) ------------ 초기 설정 완료 ----------(초기설정자는 포크 클론을 안받아도 되나요?) 5. 자신의.. 이전 1 2 다음
