오늘 지난주와 마찬가지로 이제껏 배운 리액트 내용을 바탕으로 게시판을 이어서 구현했다. 기본적인 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는 돔요소를 직접 선택하기 때문에 사용을 지양한다는 말을 듣고 다른 방법으로 구현을 시도했다. // ..

오늘의 학습 내용 리액트, styled component 활용 공통 버튼, 모달, 커스텀인풋박스, 커스터셀렉트박스 만들기 새로운 배움 useRef 요소 선택자로의 역할 css z-index styled component 파일 분리 props는 이벤트도 내려줄 수 있다. 문제 상황과 시도, 해결 이제껏 배운 리액트, 컴포넌트 간의 props 내려주기, styled component를 활용한 조건부 스타일들을 활용하여 조건에 따라 (primary, negative, 크기, 아이콘 유무) 버튼을 만들수있도록 구현해야 하였다. 우선 처음 컴포넌트를 구성할때는 버튼에 관한 조건이 발생할 경우 이에 조건에 따라 적절한 버튼을 리턴하는 버튼 컴넌트를 만들고 이 버튼 컴포넌트를 부모 컴포넌트에서 다양한 조건을 부여하며..

오늘의 학습 내용 프론트앤드 개념 정리 스터디 포트폴리오 웹사이트 만들기 시작 - 시맨틱태그, css 플랙스박스… 새로운 배움 자바스크립트에서 호이스팅, let과 const도 호이스팅 된다! 문제 상황과 시도, 해결 개념정리 스터디에서 발표를 준비하면서 호이스팅에 대해 발표를 맡게 되었다. 발표를 준비하면서 많은 참고자료를 살펴보고 공부할수 있었다. 자료조사차 살펴보던 웹사이트에서 var, let, const 중에 const는 호이스팅 되지 않는다고 말하는 분들이 많았다. 실제로 호이스팅이 된다고 해도 const는 선언된 라인에 도달해야 초기화, 할당이 이루어 지며, 선언 또한 같은 라인에서 진행하고 있으니 아니라고 봐도 무방하다고 처음에 생각했다. 하지만 알고있기로는 분명히 호이스팅의 대상인데 이것을 ..