Age of Discovery

내 기억이 맞다면 블로그를 시작한 후 2주 넘게 글을 안쓴적이 없었는데 지난 9월 초에 쓴 글을 마지막으로 한달넘게 공백기간을 가지게 됐다. 약 6주간의 프로젝트를 거치면서 정신적, 육체적으로 꽤 힘들었지만 그만큼 성장했다는 생각에 뿌듯하다. 프로젝트를 기획하는 날부터 마무리하는 날까지 팀원들간의 큰 갈등없이 순탄히 진행됐던 것이 정말 다행이라고 생각한다. 팀원들이 다들 실력도 좋은 데다가 빨리빨리 해치우지 않고는 못배기는 성격들이라 서로 부족한점을 보완하면서 일사천리로 진행됐던 것 같다. (타고난 인복이라 해야하나..?) 프로젝트를 한 문장으로 설명하자면 팀 프로젝트 협업툴 이라고 할 수 있겠다. 프로젝트 이름은 Developer들을 위한 Kit을 줄여 디벨킷 이라고 짓게 됐다. (내가 제안한 프로젝트..

글 쓰고 기록하는 습관이 점점 사라지고 있는 것 같아 무섭지만 틈틈이 조금씩이라도 써보려고 한다. 저번 주차 클론 코딩 때는 모달 창 띄우는 게 처음이고 도저히 구글링 해서 새로 공부할 시간이 없어서 모달 창 관리를 개떡같이 했는데 프로젝트 규모가 커졌기 때문에 기능 구현에 급급한 코드는 지양해야 할 것 같다. 리액트 portal을 사용하면 모달 라이브러리를 설치하지 않고도 간편하게 모달을 띄울 수 있다! public / index.html 파일에서 id가 root인 div아래에 같은 경로로 id가 modal인 div를 만들어주면 root(전역) 안에서 어떤 컴포넌트가 어떻게 렌더링 되던지 전혀 영향을 받지 않는 modal을 만들 수 있다. ModalContainer.jsx파일을 하나 만들어주자 impo..

코드 한 줄 없는 실전 프로젝트 첫 글을 포스팅해보려 한다. 왜냐? 아직 코드를 안 짰기 때문이다ㅋㅋㅋㅋ 앞으로 6주 동안 실전 프로젝트를 시작하게 되는데 실질적으로 기능 개발하는데 몰입할 수 있는 기간은 3주 정도로 빠듯하게 잡아야 될 것 같다. 우리 팀의 기획은 첫날부터 큰 의견 충돌 없이 순조롭게 진행됐다. 주제도 다른 팀에 비하면 빨리 정해졌고 팀원들 간에 대화도 잘 통했다.. 한 가지 문제는 항해 측에서 섭외해준 디자이너분이 첫날(금요일)에 참석하지 못할 것 같다고 하더니 그날 저녁에 갑자기 주말 동안 참석 못한다고 하셨다. 최대한 빨리 디자인 작업이 들어가야 할 것 같아서 아쉬운 마음에 와이어프레임만 만들어놓고 오매불망 기다리고 있었는데 일요일 저녁에는 웹디자인만 기획하는지 몰랐다고 그냥 탈주..

약 이틀정도 걸린 것 같다... 리액트에서 파이어베이스로 이미지 업로드 하는 대부분의 블로그글을 다 찾아보고 적용해봤으나 내 프로젝트에 맞춰 수정하기가 매우 까다로웠다. 그리고 파이어베이스에 이미지를 업로드하고 URL을 다운받는 메소드와 문법을 새로 알아야했기에 시간이 꽤 소요됐는데 그래도 성공을 해서 다행이다 집념의승리 ㅠㅠ 파이어베이스를 꼭 사용하려고 했던 이유는 여러가지가 있는데 1. 이미지를 base64로 인코딩하여 백엔드에 넘겨주기엔 사진 하나의 url길이가 몇천줄이 넘어간다. 2. 파이어베이스를 이용하면 한번에 여러장을 업로드 할 수 있다. 3. 파이어베이스를 통해 배포가 가능하다. 4. mock서버를 이용할 수 있다. 등이 있는데 사용하지 않을 이유가 없다. 처음 진입장벽이 조금 높았던것을 ..

이번 주차는 인스타그램을 클론코딩 하기로했다...! 생각보다 주제가 빨리 정해졌고 API설계도 금방 완료돼서 순항하게 될 줄 알았다 그러나 주말내내 스타일드컴포넌트로 css작업을 한땀한땀 하려니까 현타가 와서 '이거 맞는건가...' 싶었다ㅋㅋㅋ 그래도 어찌저찌 뷰는 완성....! 일요일에는 하루종일 파이어베이스작업에 매진했는데 자꾸 한끗차이로 마지막에 업로드가 안되는 버그가 있어서 계속 찾아보다가 매니저님한테 도움을 요청해놓은 상태 .... 만약 매니저님 면담 후에도 안될 시 백엔드 분들에게 양해를 구하고 base64로 다시 회귀해야 될것같다.. 파이어베이스 쓰면 진짜 편할거 같은데 이것도 비동기통신을 해야되다보니 까다로운 조건이 많았다. 게시글 댓글 CRUD작업 후에 다시 돌아오겠다...!

길지만 짧았던(?) 6주차 미니 프로젝트를 끝내고 회고를 해보려고 한다. https://www.youtube.com/watch?v=QHJPkb07igE 중고물품 거래하는 사이트였으며 처음에 구현하려했던 기능은 리액트와 리덕스를 사용한 게시글, 댓글 CRUD외에도 찜하기, 검색, 카테고리 분류 등 많았으나 시간이 부족한 관계로 이번에도 게시글과 댓글의 CRUD만으로 만족해야했다.... 슬프다..... 하지만 정말 많이 배웠다 전부 소화할 수는 없겠지만 습득했던 내용이 많았다. 처음에 백엔드 분들과 API명세서를 작성하고 데이터를 주고받기위해 연동하는 과정에서 오류가 무수히 많았지만 소통이 잘돼서 큰 문제없이 넘어가게 됐다. http와 https의 관계 그리고 JWT와 세션방식의 차이 등을 알게 됐으며 JW..

시간을 측정해보니 하루 17시간 이상은 컴퓨터앞에 앉아있는 거 같은데 온전히 코딩에 집중하는 시간은 12~13시간정도 되는 것 같다. 죽을 것 같다 ㅎㅎ 맡은 일이 있고 끝까지 해내야 하니 모든 신경이 프로젝트에 쏠리고 그만큼 집중은 잘되지만 피로감이 심하다 현재 게시글 CRUD까지는 완성이 된 상태이고 리덕스 미들웨어로 API통신을 하고 있긴 하지만 미들웨어를 통한 API 통신이 꼭 필요한가에 대해서는 의문이 남는다... 매니저님도 이유가 타당하다면 미들웨어를 사용하지않아도 된다고 하는데 아직 헷갈린다. 그래도 일단 해보자 코드는 나중에 리뷰하기로 하고 다시 프로젝트하러 이만

이렇게 오랫동안 블로그 공백기를 가져본적이 없었는데 약 일주일정도 포스팅을 안했다. 5주차 프로젝트가 너무 힘들어서 그랬나.... 5주차 땐 리액트 4명이 모여 팀과제를 했고 그럭저럭 겨우 마감했다. 그에 대한 글은 가볍게 스킵하고 6주차 출바알~ 드디어 리액트와 스프링 프론트와 백이 한 팀을 이뤄 미니프로젝트를 진행한다. 분명 들리는 소문에 의하면 쉬어가는 주차라고 했던 것 같은데 기능을 하나하나 추가하다보니까 더 달려야되는 한 주가 될듯하다. 우리 조는 중고나라와 당근마켓을 합쳐 당근나라라는 프로젝트를 진행하게 됐는데 딱 봐도 중고물품 관련 플젝이라는 감이 오지 않는가? 와이어프레임은 이런식으로 짜게됐고 구현할 기능은 위와 같다. 프론트 인원 2명에 기간이 일주일이라 저걸 다 리액트와 리덕스로 소화해..

지금까지 react-redux로 만든 투두리스트를 리덕스 툴킷으로 덮어씌워보자 툴킷을 앞으로 사용해야하니 익숙해지기 위함인데 기존의 코드를 뜯어고치고 변경해줘야한다는 막연한 두려움때문에 '그냥 새로 만들까...'하다가 이정도 리팩토링도 못하면 나중엔 회피에 대한 대가를 강하게 치를까 무서워 그냥 시도해봤다. 생각보다 간단하게 마무리됐다. import { createStore } from "redux"; import { combineReducers } from "redux"; import todo from "../modules/todos"; const rootReducer = combineReducers({ todo, }); const store = createStore(rootReducer); expor..

아무래도 코드설명을 하면 글이 길어지다보니 간단한 투두리스트 프로젝트도 블로그 포스팅이 나눠질 수 밖에 없는 듯..... 이제 남은 컴포넌트인 TodoItem과 Detail 그리고 모듈폴더의 todos.js 스토어를 살펴보자 const TodoItem = ({todo, i}) => { const dispatch = useDispatch(); const onDelete = (id) => dispatch(deleteTodo(id)) const onToggle = (id) => dispatch(toggleTodo(id)) const navigate = useNavigate(); const isDone = todo.isDone; return ( {navigate("/detail/" + todo.id)}}> 상세..

Redux 투두리스트 코드 하나하나 뜯어보자 기나긴 여정이 되겠지만 내가 왜 이런식으로 코드를 짰는지 복기할 수 있기 때문에 귀찮음을 감수할만한 충분한 가치가 있는 시간이라고 생각한다. const App = () => { return ( ) } 상세페이지 기능을 넣기전까지만해도 Route가 필요없었기 때문에 이런모양은 아니었지만 App.js를 이렇게 짜게된 건 원인이 아닌 필요에의한 결과라고 보면 될 것같다. Route로 경로를 설정해준 후 컴포넌트를 넣어준다. 그럼 URL에 위와같이 입력했을 때 해당 페이지로 이동할 수 있게된다. 단순 "/"경로는 메인페이지를 뜻하며 처음 실행될 때 보이는화면이 TodoContainer라는 컴포넌트가 보여지게 된다. /detail/:id 는 콜론뒤에 임의로 지정해줄 수..

다른 기술을 입혀서 리팩토링하는 것도 능력이라는데 그런 능력은 거저 주어지지 않는가보다.... 3주차에 useState만을 이용해서 구현한 투두리스트를 이번 주차에선 Redux로 만들어야한다. 리덕스를 생전 처음 접하는 건 아니었지만 약 두달전에 강의로만 접해보고 추가로 뭘 만들어보진 않았기 때문에 머릿속에서 리셋이 됐는지 이번주차에 제공된 학습자료가 눈에들어오질 않았다. toolkit대신 react-redux를 배워야하는 입장이라 action creator랑 value 그리고 초기상태값과 리듀서를 전부 따로따로 선언해줘야 했다. 실은 저번과제 위에 리덕스패키지만 설치해서 그대로 입혀보려고했으나 좌절을 느끼며 처음부터 하고있는 실정... 자 그럼 폴더구조랑 컴포넌트 구성을 봐보자. 구성자체는 전과 같지만..

기술매니저님과 면담 후에 스스로에게 들었던 생각 '리액트를 왜 쓰는지도 모른채로 좋다니까 사용하고 있었구나' 리액트는 기본적으로 가상 DOM을 사용하여 필요한부분만 렌더링하기 때문에 DOM에 직접 접근하면 안된다. let title_input = document.querySelector('.title-input') 이런식으로 직접접근하면 안된다는 것이다 input태그 두개를 저따구로 제어해놓고 3일만에 개인과제 끝냈다고 좋아하던 오만한 나의 모습을 반성합니다. 그럼 어떤식으로 접근을 해야하느냐? ref 훅을 사용하든지 아니면 state와 props를 사용하는 것이다. ref도 꼭 필요할때만 사용해야한다. (권장되는 방식은 아닌듯..) onChange함수와 구조분해할당을 이용해서 DOM을 리액트스럽게 제어..

위 사진에서 List.js와 Todo.js 컴포넌트를 파헤쳐보자 위와 같이 완료버튼을 누를시 완료!버튼을 취소!버튼으로 변경한 후 밑 줄로 내리는 작업이다. List.js 파일안에서 const setBtn = (todo) => { let new_arr = [...arr] let new_obj = new_arr.map(user => { if ( user.key === todo.key ) { if (user.isDone === '완료!') { return ( {...user, isDone : '취소!'} ) } else { return ( {...user, isDone : '완료!'} ) } } else { return {...user} } }) setArr(new_obj); } todo파라미터를 받아온 후..

7월 22일에 리액트 기초 주간이 시작되었다..!! 다른 것들은 잠시 뒤로하고 주특기인 리액트를 다듬을 수 있게 되어 개인적으로 가장 기대하던 시간이었다. 이번 주는 개인과제와 팀과제가 있는데 개인과제는 투두리스트를 만든 후 깃헙에 커밋하는 것이고 팀과제는 리액트에 대한 지식을 쌓으며 묻고답하는 시간을 가지는 것이다. 개인과제를 빨리 끝낸 후 팀과제 및 발표준비를 하려 했으나 생각한 것보다 일찍 끝내지 못했고 이제서야 마친 후 글을 작성하는 중이다 ㅋㅎㅋㅎ 개인과제의 조건은 투두리스트 CRUD 기본기능을 갖추는 것, 그리고 폴더구조를 동일하게 하는 것과 컴포넌트구성을 예제와 일치시키는 것이었다. 다만 hook은 state만 사용하는 것이 중요했다. Create랑 Delete만 먼저 다뤄보자! 내가 짰던 ..