React

이번 심화코스에 신청하기 위해서 Pagination기능을 구현 해보려고 한다. 내 방법을 생각한 사람이 많이 없는것 같아 기록으로 남기려하며, 따로 라이브러리는 사용하지 않았다.먼저 내가 구현할 페이지는 아래와 같이 프로토타입의 모습을 만들어두었다.먼저 데이터가 어떻게

이전에 useState를 이용한 Pagination을 구현했었다. 생각대로 구현은 잘 되었지만, 뒤로가기 했을 때, page의 값이 어딘가에 저장되어 있지 않아 page의 값이 다시 1로 초기돠 되는 일이 생긴것이다. Final Project를 했을때는 Redux-to

개인과제 프로젝트를 배포하는 방법을 생각해보다가 git으로 배포하는 방법이 있다고 하여 정리해두고 발생한 문제를 적어두려고 한다.배포를 진행하고 프로젝트를 만들어도 되었었지만, 프로젝트를 먼저 하고 있었던지라 완성하고 배포하여 생각보다 많은 설정이 필요하지 않았던것 같

사실 redux에 redux-persist를 이용하여 localstorage를 사용하는 방법은 파이널프로젝트에 사용하면서 방법은 알고 있었지만, sessionStorage와 localStorage를 같이 사용하는 방법을 찾다 다시 기록해보고자 한다.리액스에서 순수 st

이번 기업과제를하면서 토큰 값을 localStorage에 저장할지, cookie에 저장하면 좋을지 알아보다 각각의 장단점을 적어보려고한다.이번 프로젝트의 경우엔 제 3자의 API를 받아 구현하는부분이라 cookie에 관한 직접적인 설정을 할 수 없어 localStora

프로젝트를 진행하다가 부모 컴포넌트에서 자식컴포넌트의 함수를 써야했다. useState는 익숙하게 사용했지만 해당함수를 사용하기 위해서 좋은 방법은 아닌것 같았다. 하여 방법을 찾다 기록해두기로 한다.forwardRef는 부모 컴포넌트로부터 ref 속성을 받는 한 컴포

프로젝트를 진행하다 폰트를 파일로 적용하는 방법을 찾아 기록해두려고 한다.구글 폰트의 @import를 사용해서 적용할 수 있지만 파일로 저장해보자.먼저 구글폰트에서 원하는 폰트를 찾고 다운을 받아주면된다.파일 압축을 풀어내면안에 otf파일들이 들어있다.다른 브라우저에서

계산기를 만들면서 결과값이나 입력값에 대해서 1000단위로 ,를 찍어야하는 기능이 필요했다. 기능자체는 간단했지만, 소수점과 같이 사용하면서 문제가 생기게 되었다. 이부분을 보완하면서 사용했던 기록을 남겨두려한다.이를 찾아보다 정규표현식과 JS의 replace함수를 사

이전 프로젝트에서는 서버에서 받아오는 id값을 얻고 해당 id값을 토대로 서버에 데이터 요청을 보내고 다시 받아와 페이지에 넘겨주고 컴포넌트에서 데이터를 처리하였는데 이러한 방법대신 데이터를 한번 받아오고, 해당 데이터의 id를 url의 parameter로 지정하여 데

회원가입을 하다보면 사용자가 입력한 값이 실제 값인지를 구분해야할 필요가 있다. 하여 이번 프로젝트를 진행하면서 핸드폰 번호의 input값을 받아와 값을 받을 때, 값을 확인하고 입력하게 해야했다.안되는건 아니다. 다만 숫자뿐만이 아닌 일반 문자도 입력이 가능하기 때문

이전엔 익숙한 onChange나, onClick, onkeydown 등 이벤트를 활용을 해봤지만, 생소한 onBlur와 onFocus를 정리해 두려고 한다.onBlur는 이벤트가 target하고 있는 곳에 focus가 out되었을 때 작동하는 이벤트이다. 즉, inpu

이전에는 드롭다운을 onMouseEnter와 onMouseLeave를 이용하여 구현 하였는데 이것 말고도 다른 방법이 있을 것 같아 찾아보다 hooks를 만들어 구현하는 방법을 찾게 되었다.먼저 header에 해당 버튼을 눌렀을 경우 드롭다운이 발생하도록 하기 위해서는

이전 프로젝트에서 자식 컴포넌트의 함수를 부모 컴포넌트에서 사용할 수 있도록 하기 위해 useRef를 사용하였는데 이번엔 기본적인 DOM조작을 위한 방법으로 사용했다. 해당 방법을 적어두려고 한다. [React] 부모컴포넌트에서 자식컴포넌트 함수 호출하기 useRef

드롭다운을 만들면서 필요했던 forwardRef에 대해 정리해 놓으려고 한다. 사실 이전에 부모컴포넌트에서 자식 컴포넌트 함수 호출하기에서 사용된 적이 있지만 이에 대한 자세한 내용을 적어두지 않아서 여러 글을 참고 삼하 적어보려고 한다. useRef React 컴포

이전엔 <input>태그를 활용하여 입력할 text를 받았었는데, 이번 프로젝트를 진행하면서 <div>에서도 contentEditable이라는 속성으로 text입력을 받을 수 있다는걸 알았다. 이에 대한 방법과 코드를 기록해두려고 한다.HTML5의 모든 엘리

사실 Ref에 관한 포스팅을 여러번 했었다. 부모컴포넌트에서 자식컴포넌트 호출하기 위한 forwordRef, onBlur, onFocus를 사용하면서 Ref를 직접 사용가기도 하고 focus설정이라던지, contentEditable을 사용할때도 사용했다. 사실 Reac

Portal 프로젝트를 진행하다보면 모달창이 필요할때가 있다. 이 모달창이 어떠한 컴포넌트에서 떠야할지 조절하는건 물론 개발자의 몫이겠지만, 대부분 최상위에 띄워져 사용자의 다음 스텝에 영향을 줄 수 있도록 만드는것이 목적이다. 이러다보니 최상위 컴포넌트 바로 아래

현재의 프로젝트에서 자사 라이브러리를 사용하기 위해 React.lazy를 사용하여 컴포넌트를 동적으로 임포트하고 사용했었다. 내가 사용한 react의 버전은 14인데, v16.6에서 실험적인 기능으로 suspense가 등장하게되어 현재 사용중인 React.lazy와 같