항해99를 하기 전 나의 백그라운드 기존에 개발자로 일을 했었던 경험이 있었다. 국비 부트캠프를 수료하고 자바/스프링 개발자로 개발 회사에서 2년간 풀스택 개발자로 일을 하였지만 솔직히 풀스택이라는 거창한 이름 아래에서 프론트앤드도 백앤드도 인프라도, 쿼리도 어느 하나 T자로 깊게 다루지 못하는 내 모습이 부끄러웠던 기억이난다. 개인적인 사정으로 회사를 그만두게 된 다음 제대로 다시 공부해보자 결심하게 되었고 항해99를 선택하게 되었다. 누구는 경력이 있어서 대단하다고 하기도 하겠지만 경력이 있는 만큼 늦었다고 생각했고 더 열심히 해야지 다짐했던 것 같다. 여러 코딩부트캠프 중에서 항해99를 선택한 이유 온라인 부트캠프라는 점 때문에 끝까지 고민했었던 것 같다. '오프라인으로 해야 더 집중하지 않을까?'..

오늘 지난주와 마찬가지로 이제껏 배운 리액트 내용을 바탕으로 게시판을 이어서 구현했다. 기본적인 CRUD는 react-query와 json-server를 통해 내부 DB로 간단하게 구현을 완료한 상태였으며 회원 가입과 로그인은 서버에 API로 구현하기로 했다. KPT Keep 로그인, 회원가입 기능을 구현할 때 서버 API 명세서를 먼저 보고 작업했습니다. 명세서를 먼저 살펴보고 구현하니 어떤 요청을 보내야 하는지 명확해져서 비교적 간단하게 구현할 수 있었습니다. Problem 서버 요청이후 응답 에러 메세지에 따라서 적절한 에러메세지를 보여주기 위해서 컨트롤 하는게 어려웠다. axios로 서버와 통신할 때 요청, 응답 전에 interceptors를 구현한 다음 intercepter를 사용했다. 이때 i..

발표영상 바로가기 이벤트 전파, 캡처링, 버블링

오늘의 학습 내용 React Redux 복습 React 심화 학습 새로운 배움 React Redux ToolKit json-server 실습 context API vs Redux에 대한 나의 생각 문제 상황과 시도, 해결 기존의 Redux를 적용했었던 프로젝트를 React Redux ToolKit 을 적용하는 방식으로 redux와 redux toolkit을 학습했다. redux toolkit은 여러 라이브러리를 포함한 패키지로 redux를 깔끔하게 사용할 수있게 하였다. 하지만 소스코드가 많이 축약되다 보니까 기존의 redux를 이해하는게 중요할 것 같다는 생각이 들어서 redux duck 패턴을 한번 더 정리하는 시간을 가졌다. json-server를 실습하면서 db.json 파일을 생성해서 내가 정의..

오늘의 학습 내용 공통 버튼, 모달, 커스텀 인풋, 커스텀 셀렉트박스 만들기 리팩토링 useState 정리 새로운 배움 useRef 사용 지양 Array.prototype.map(), ****Array.prototype.forEach() in React Component 문제 상황과 시도, 해결 공통 버튼과 모달, 커스텀 인풋을 만들었던 프로젝트를 다시 다른 방법으로 만들어 보는 것을 시도해보았다. 처음에 만든 방법과 다른 방법으로 시도를 해보았는데 모달 팝업이 오픈될 경우 외부영역 클릭시 팝업 닫힘을 구현하고자 하였다. 이전에는 구글링하면 나오는 useRef를 사용한 방법을 통해 구현하였다. useRef는 돔요소를 직접 선택하기 때문에 사용을 지양한다는 말을 듣고 다른 방법으로 구현을 시도했다. // ..

이번 주 학습 내용 리액트 숙련 주차 강의 듣기 (완료) 내가 만든 첫번째 리액트 todo 서비스 리팩토링하기 (완료) 자바스크립트 동작원리 공부하기 (아직) 포트폴리오 웹사이트 만들기 (시작) 조건부 스타일링 - 커스텀 버튼, 커스텀 셀렉트박스 구현 (완료) 리덕스와 라우터를 활용해 todo 서비스 리팩토링 하기 (완료) 느낀점 props까지 이해하고 나니 Redux를 베우게 되었다. 처음에는 이해가 잘 안갔는데 차분히 따라하다 보니 구현이 가능했다. 고민이었던 점은 이전에는 간단하게 카운터 정도의 상태값을 관리하는 리덕스를 만들어본 반면 이번에는 좀 복잡한 형태의 상태를 관리하는 리덕스를 구현했는데 상태값이 복잡해지니까 상태에 따른 액션값도 복잡해지고 로직이 어지러워졌다. 이렇게 구현하는게 맞는걸까라..