React

도입배경 > 로그인 여부에 따라 Route별 권한을 주기 위해 당시 개발했던 서비스는 로그인한 유저만 서비스를 이용 할 수 있게 기획하였다. HOC(Higher-Order-Component)? 컴포넌트를 인자로 받아서 다른 컴포넌터를 반환하는 고차함수 HoC의 원리는

도입배경특정 페이지로 넘어갈 때 단순히 페이지만 이동하는 것이 아니라 특정 데이터를 같이 넘길수 있는 방법이 없을까 고민하였다. 그래서 react-router-dom 중 하나인 Link 방법을 생각하였다.component -> component 로 렌더링 될때 값을 넘

도입배경Front에서 Back으로 api를 요청할 때 스토어의 id를 같이 넣어줘야하는데 그때 path의 정보를 가져오면 되겠다 생각하게 되었고 front의 path에서 값을 가져오는 방법을 찾게되었다.2가지 방법이 있는데 match 와 useParamas를 사용하는

프로젝트 진행 할 당시 한 페이지에 2가지의 api를 요청해야했다. 비동기처리 방법에 대해 고민하였고 지난 프로젝트 Vue에서 사용했던 Async & await가 생각나서 적용하게 되었다.코드가 간결해지고, 가독성이 높아진다.try / catch로 에러를 핸들링할 수

map()함수를 이용하여 array값을 원하는 조건으로 거친 후 반환한다.배열의 값을 2배로 나타내주는 코드이다.결과는 2,4,6,8,10{}을 활용하여 JSX에 포함시킬수 있다.Taste arry에 해당하는 원소들을 뽑아 Avatar로 나타내는 코드이다.여기서 key

지금까지 2번의 프로젝트를 진행하면서 axios에서 data말고 headers 나 여러 구성요소를 담아 보낸적이 없었다. 이번 프로젝트에서는 권한을 좀 더 철저히 하기위해 front에서만 권한을 나누는 것이 아니라 요청할 때 headers에 token을 담아 back에

댓글마다 달린 수정 버튼을 클릭하면 해당 댓글에만 수정 input창을 띄우고 싶었다. 기존의 document.getElementsByClassName()으로 class이름을 선택하면 해당 모든 Input 태그를 읽어와서 고민을 하였다.기존에는 문자열에 띄어쓰기를 통해

상태정보를 관리하기 위해 Redux를 도입했다. 하지만 새로 고침할 때마다 Redux가 초기화 되는 문제를 만나게 되었다. 해결방법을 찾던 중에 redux-persist를 알게 되었고 적용하였다.라우저에서 기본적으로 제공해주는 저장소인 localstorage와 sess

로그인을 하고 유저의 요청과 응답 처리를 안전하게 주고 받기위해서 JWT 토큰을 사용하였다. 프론트엔드 작업을 할 때 서버에서 넘겨주는 토큰을 locastorage에 저장하고 인증여부를 체크했지만 좀더 이론을 알기위해 글을 작성하기로 했다.Json 포맷을 이용하여 사용

1\. StatelessStateful 이란?서버는 클라이언트에게서 요청을 받을 때 마다, 클라이언트의 상태를 계속해서 유지하고 서비스 제공에 이용한다.Stateless 서버는 반대로, 상태를 유지 하지 않습니다. 상태정보를 저장하지 않으면, 서버는 클라이언트측에서 들

리엑트에서 상태관리하기 위해서 기존 프로젝트에서는 Redux를 많이 사용하였다. 하지만 회사에서는 MobX를 사용하였고 업무 이해를 키울겸 MobX공부를 시작하였다.프로젝트를 하면서 상태관리가 필요하다고 느낀적이 있다. 고정을 많이 사용하는 기능에 매번 API로 데이

마운트업데이트마운트 해제세 가지를 거쳐 나타난다.lifecycle 표시componentDidMount() 는 컴포넌트가 마운트 된 직후 호출된다. 초기화 작업은 이 메서드에 이루어지며 된다.API요청을 통해 외부에서 데이터를 가져와야 한다면, 요청을 보내기에 적절한 위

react-hook-form 라이브러리를 접하게 되면서 장점 중 하나가 re-rendering이 적다는 것이었다. 이해하기 위해서는 controlled component, uncontrolled component 개념을 알게되었다. 입력을 받는 방법중 여러 입력을 다

사내에서 사용하는 시스템으로 마크다운 형식으로 문서를 작성하고 공유하는 서비스를 만들었다. 스터디 내용도 정리하고 개발관련 지식도 공유할수 있는 서비스이다.기존에 만들어진 마크다운은 <a/> 태그의 href 기능을 사용해 스크롤을 목차에 맞게 이동하는 기능만 들어

게시물을 보다보면 문구에 포함된 링크의 미리보기를 제공해주는 경우를 본적이 있다. 데이터를 불러오기 위해서는 URL에 OGTag가 있어야한다.어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요

ChatpGPT 그거 어떻게 써? 써도 괜찮은거야? 주니어 개발자의 첫 ChatGPT 사용기

vite를 사용해 배포 후 파일 다운이 안된다고?? (절대경로, 상대경로의 기초를 찾아서)