TIL 79

(항해55일차) 220429 리액트 실전프로젝트 8일차

기획이 계속 바뀌고 있긴 하지만, 일단 로그인과 회원가입 페이지를 만들고 있다. 회원가입을 할 때 추가정보를 함께 받기로 결정해 어떻게 페이지를 구성할지 고민했다. 처음에는 회원가입 페이지안에 필수정보, 추가정보 컴포넌트를 따로 만들고 필수정보로 입력한 데이터에 추가정보 컴포넌트까지 한 번에 모아 서버와 통신하려 했다. 하지만 생각해보니 필수정보는 무조건 받아야 하는 데이터이고, 유효성 검사까지 거쳐야하기 때문에 먼저 DB에 저장하는 편이 좋을 것 같아 아예 페이지를 나누는 것으로 구조를 바꿨다. 추가정보 페이지에서는 사진업로드, 태그로 키워드를 저장하기, select요소 등을 활용해 유저정보를 받을 계획이다. 우선 필수정보를 받아 서버와 연결할 준비를 마치고, mockapi.io라는 사이트에서 테스트를..

(항해52일차) 220426 리액트 실전프로젝트 5일차

오늘 우리 프로젝트 주제에 대한 피드백이 있었다. 예상보다 훨씬 긍정적인 평가를 받아 기분이 좋았지만 그래도 고칠 부분이 많이 생겼다. 팀 내에서 상의해 와이어프레임을 짜다보니 개연성이 부족하거나 이상하게 빠진 부분이 있었는데 기획멘토링을 거치면서 그런 부분을 알 수 있었다. 또 이후 새로 들어온 디자이너님이 또 한 번 그런 부분을 언급하셨다. (역시 현업이다 ..! ) 여러 피드백을 수용해 선생님과 학생으로 구분했던 유저를 통합하고 유저들이 언어, 문화 등 관심사를 교류하는 웹사이트를 만들기로 했다. 결제시스템이나 첨삭, 선생님 프로필 등 여러 기능이 빠졌지만 오히려 화상채팅이라는 핵심 기능에 여러 부가기능을 추가할 수 있을 것 같다. 며칠에 걸친 회의와 주제 변경으로 조금 지치긴해도 와이어프레임은 훨..

(항해51일차) 220425 리액트 실전프로젝트 4일차

실전 프로젝트답게 다사다난한 하루의 연속이다. 기획한 프로젝트는 두 번 엎어져서 이제 세번째 기획을 진행하고 있고, 오늘은 아침부터 갑자기 작성했던 api명세서가 통째로 날아가 처음부터 작성했다. 그래도 다시 더 잘 쓰면 되겠다며 웃고 넘긴 우리였지만 저녁엔 더 큰 일이 생겼다. 함께 하기로 한 디자이너님 중 한 명이 창업을 이유로 하차했다. 남은 한 분이 더 열심히 와이어프레임 작업에 참여해 주시긴 했지만 외국에서 근무해 연락이 어려운 직장인인 상황이라 프로젝트가 큰 난관을 만난 듯 하다. 다들 조금 지친 상황에서 우리 팀장이 굉장히 밝은 목소리로 회의를 진행했다. 미안한 마음도 있고, 멋있기도 해서 남은 기간동안 군말없이 팀장 말에 따라야겠다는 생각을 했다. 일정이 갑자기 더 빡빡해져서 내일부터는 빠..

(항해99)의 7주차 (220418-220424) WIL

이번 주에는 팀 구성원들이 어떤 사이트를 정해 똑같이 만들어보는 클론코딩을 진행했다. 우리 조는 많은 분야에서 활용할 수 있는 장바구니 기능을 경험하고 싶어 마켓컬리로 주제를 정했다. 이미 뷰와 기능이 정해져 있기 때문에 어떻게 그 기능을 구현했을지 최대한 생각하면서 프로젝트를 진행했다. 또 개인적으로는 컴포넌트를 최대한 잘게 구성해보는 목표를 잡았다. 내가 맡은 부분은 상세페이지와 장바구니페이지의 뷰, 그리고 장바구니와 관련된 CRUD였다. 뷰를 만들 때는 CSS뷰어라는 도구를 활용해 실제 마켓컬리에서 사용했던 요소를 최대한 똑같이 사용해보려고 했다. 그러면서 주로 사용했던 button, div, span 과 같은 요소 이외에도 다양한 요소를 써보면서 특정 상황에서 더 적절하게 사용할 수 있는 요소가 ..

(항해48일차) 220422 리액트 실전프로젝트 1일차

드디어 항해99의 메인 콘텐츠, 실전프로젝트가 시작되었다. 그동안 내가 공부했던 내용과 연습했던 프로젝트를 모두 담아야 하는 기간이다. 신기하게도 지난주 팀에서 거의 변함없이 팀이 구성되었다. 성격은 조금 다르지만 다들 열정이 있는 사람들이라 재밌게 프로젝트를 만들 수 있을 것 같다. 아무래도 긴 기간의 프로젝트인 만큼 주제를 정하는 시간이 오래 걸렸다. 아침부터 이야기를 나누기 시작했지만, 다들 생각하는 주제가 달라서 의견이 모이지 않았다. 결국 10가지 정도의 주제에서 투표로 정한 커피챗이 처음 주제로 결정됐다. (투표결과는 의외였다) 나는 처음 들어봤지만 실제 운영되고 있는 서비스인 커피챗이 있었다. 커피 한 잔에 현직에 있는 사람들의 조언을 들을 수 있다는 점이 재밌었다. 하지만 기능을 생각하다보..

(항해47일차) 220421 리액트 클론프로젝트 7일차

실전 프로젝트 전 마지막 날이다. 길다고 생각했던 7주가 순식간에 지나갔다. 이번주는 마지막 연습이라고 생각해서인지 평소보다 더 많이 하려고 한 것 같다. 다양한 기능을 시도해보려고 했고 개인적인 목표로 컴포넌트를 잘 구성해보려고 시도했다. 생각했던 기능들을 모두 구현할 수는 없었지만, 오늘 배포까지 끝내며 클론코딩을 잘 마무리했다. 강의를 들으며 공부하는 것과 코드를 직접 짜는 것의 가장 큰 차이는 오류인 것 같다. 코드를 내가 생각한 방식으로 짜다보면 오류가 정말 많이 발생한다. 어제만 해도 axios의 delete메서드는 바디에 데이터를 넣지 않는다는 사실을 몰라 정말 긴 시간을 오류를 찾으며 보냈다. 해결책은 생각보다 허무했지만, 오류를 찾는 과정에서 오히려 axios에 대해 많이 알게되고, 새로..

(항해44일차) 220418 리액트 클론프로젝트 4일차

시간이 어떻게 가는지도 모를만큼 정신없이 지나가고 있다. 따라하기만 하면 될 줄 알았던 클론코딩은 정말 어려웠다. 크롬익스텐션의 도움을 많이 받고 있다. 최대한 비슷한 구조로 코드를 짜보려고 하니 시간이 오래 걸린다. 하지만 오래걸리는 만큼 왜 이런 식으로 코드를 구상했는지 생각해보는 재미가 있다. 컴포넌트의 구조를 생각하는 것도 재밌지만 버튼은 버튼, 디브는 디브로만 쓸 줄 알았던 나에게 클론코딩은 많은 가르침을 주고 있다. 과연 얼마나 제대로 따라했을지는 모르겠지만 말이다. 정말 다양한 태그와 요소가 있고, 쓰는 방법도 많다. 가령 라벨 태그의 for값을 input태그의 id값으로 주고 input의 타입을 checkbox로 지정하면 클릭 시 체크되는 범위가 라벨태그 전체로 늘어난다. 이외에도 dl, ..

카테고리 없음 2022.04.19

(항해38일차) 220412 리액트 미니프로젝트 5일차

오늘 기본적인 기능 구현이 마무리되어 프론트 엔드 세 명이 각자의 브랜치를 메인에 연결하는 작업을 했다. 코드를 합치는 과정은 아직 매우 부담스럽다. 함께 쓰는 컴포넌트의 속성이 서로 다른 경우가 있거나 역할분담이 애매해져 같은 부분에 해당하는 코드를 작성할 때 충돌이 많이 발생한다. 함께 확인하면서 조심스럽게 코드를 고쳐도 막상 합친 코드를 실행시키면 꼭 크고 작은 오류들이 발생한다. 이번 프로젝트에서는 최소단위 컴포넌트를 공동으로 작업하고 나눠가져서 다행히 충돌이 많지 않았다. 하지만 역할 분배는 아쉬움이 남았다. 우리는 각자 페이지를 나누고 페이지에 해당하는 기능을 구현하기로 했는데, 막상 작업을 진행하다 보니 서로 필요한 기능이 겹쳐 같은 기능을 각자 만들어 사용했다. 일을 두번한 셈이다. 과정이..