Taak-e's Dev-Log

항해99 8주차 Weekly I Learn(실전 프로젝트 1주차)

What I Learned 1. 실전 프로젝트 팀이 이루어지다. 6주 기간의 실전 프로젝트를 진행하기에 필요한 팀구성이 이루어졌다. 백엔드(Node.js) 3명, 프론트엔드(React) 2명, 디자이너 2명 2. 기획 & S.A. 어떤 서비스를 기획할 것인지 머리를 맞대어 고민을 했고 오프라인 독서 모임 웹 서비스를 기획. 화면 정의서를 바탕으로 컴포넌트, API 명세서를 짜고 와이어프레임도 순조롭게 맞춰 작성해 디자이너, 백엔드분들과의 소통이 막힘없이 순조롭게 진행될 수 있었다. 화면 정의서 : https://deep-raft-c4b.notion.site/79d1be119dc44a03b58c6fd494cccad3 화면 정의서 로그인페이지 deep-raft-c4b.notion.site 컴포넌트 명세서 :..

항해99 7주차 Weekly I Learn (당근마켓 클론코딩_로그인 기능 구현)

What I Learned - 실전 프로젝트 전 마지막 점검 같은 7주차 클론코딩 프로젝트를 진행하면서 개인적으로는 붕 떠버리는 시간을 가지게 되었다. 첫 미니프로젝트에 했던 로그인, 회원가입 기능을 또 하게 된 부분도 있지만 클론코딩의 의미를 너무 쉽게 생각해버린 것이 큰 착각이었다. 왜 이렇게 만들었을까, 이런 기능을 넣었을까를 생각하며 개발을 했어야하는데, 주먹구구식 동작구현에만 집중해서 그저 따라하기에 급급했던것 같다. 더군다나 CSS에라도 신경을 썼어야 하는데 그부분은 클론이 아니라 이전 기수분들이 코딩해 놓은 것을 거의 가져다 썼기 때문에 결론적으로는 무엇하나 제대로 해보지 못한 무늬만 클론코딩이었던 것 같다. 실전 프로젝트 전에 이런 해이한 마음으로 시작이 좋을 수 있을까하는 생각도 가지게 ..

항해99 6주차 Weekly I Learn (첫 협업: Front & Back)

What I Learned - 5주차까지 3주간 바쁘게 배운 주특기 React를 이용해 첫 미니프로젝트 협업을 진행했다. 그동안은 개인 미니프로젝트를 통해 모든 부분을 내 생각과 결정으로 진행을 하다가 처음으로 나만의 생각이 아닌 여러 사람의 생각을 공유하며 한 가지 결과를 냈기 때문에 그 생각을 공유하고 정리하는 과정에서 협업이 무엇인지 배웠다. - 백엔드에 대한 지식이 턱없이 부족했기때문에 생소한것들이 너무도 많았지만 촉박한 시간 속에서 몰입해서 개발하는 것이 지금하는 부트캠프의 특징이기 때문에 그 정신없는 틈속에서 하나하나 부딪혀가며 코딩을 해나가는 것 또한 개발 성장의 속도를 강제적으로라도 증가시켰던것 같다. - API 명세서가 무엇인지 오히려 첫 협업이고 모든 것이 조심스럽고, 민폐를 끼치면 안..

항해99 5주차 Weekly I Learn (Axios)

5week Keyword Axios Axios란? - node.js와 브라우저를 위한 Promise 기반의 HTTP 비동기 통신 라이브러리로 5가지 종류의 HTTP 메서드를 지원한다. 특징 브라우저를 위해 XMLHttpRequests 생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이드 지원 (XSRF : 쿠키만으로 인증하는 서비스의 취약점을 이용해, 사용자가 모르게 해당 서비스에 특정 명령을 요청하는 공격) 사용법 - 요청보내기 import axios from "axios"; // axios는 axios.요청타입으로 요청을 보낼 수 있다. // 예시) // ..

항해99 4주차 Weekly I Learn ( LifeCycle)

4주차 KeyWord Life Cycle (생명주기 메서드) 1) LifeCycle 이란? - 한국어로 "생명주기 메서드" 라고 하며, 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들이다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있다. - 생명주기 메서드는 클래스형 컴포넌트에서만 사용 할 수 있고 React Hook 중 useEffect 와 조금 비슷하게 생각 할 수 있다. ( 물론 작동방식은 많이 다르며, 커버하지 않는 기능들도 있다. )

클래스형 컴포넌트 vs 함수형 컴포넌트

리액트에서 함수형 컴포넌트를 권장하게 된 이유 리액트는 2가지의 방식으로 컴포넌트를 만든다. 함수형과 클래스형이 그것이다. 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅 (Hook)을 지원하게 되면서 정확히는 함수형 컴포넌트 + 훅(Hook) 의 사용을 권장하고 있다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 가진 반면, 함수형 컴포넌트는 state를 사용하지않고 단순하게 데이터를 받아서 (props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하면서 Logic의 재사용이 가능하다는 장점이 있다. 클래스형 컴포넌트 VS 함수형 컴포넌트 1. 선언 방식이 다르다. - 클래스형 컴포넌트와 함수형 ..