Experience

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

What I Learned - 다중 선택이 가능한 카테고리를 개발해보자 각기 다른 색을 가진, 그리고 클릭시 색이 바뀌는 버튼 검색 선택옵션에서 다중 선택을 하여 선택한 값들이 서버로 요청 시 넘어갈 수 있도록 상태관리가 필요한 버튼 - 실전 프로젝트를 하면서 기술적으로 막혔던 부분은? 1. Mui Modal 안에서 스타일컴포넌트로 커스텀한 Input radio Button 동작 안되는 현상 Mui 프레임워크에서 Modal 기능을 가져다 쓰는데 Modal 창 안에서 label htmlFor 을 통한 radio button이 동작을 하지 않는 현상 발생 (스타일 컴포넌트 Input type="radio" 와 label 속성을 줌) DataList=[ {name="카테고리이름", hex="컬러값"}, {....

항해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 와 조금 비슷하게 생각 할 수 있다. ( 물론 작동방식은 많이 다르며, 커버하지 않는 기능들도 있다. )