React는 CRA로 프로젝트 생성하면 jest가 포함되어 있는데, Next.js는 포함이 안되어있어서 따로 설치를 해야한답. js 관련 라이브러리 설치 2. package.json에 jest관련 설정 3. package.json – scripts에 test 추가 3. 테스트해보기 4. 성공!
React는 CRA로 프로젝트 생성하면 jest가 포함되어 있는데, Next.js는 포함이 안되어있어서 따로 설치를 해야한답. js 관련 라이브러리 설치 2. package.json에 jest관련 설정 3. package.json – scripts에 test 추가 3. 테스트해보기 4. 성공!
프로젝트 생성 2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수) 3. eslint 설정 예시 (.eslintrc) 3. prettier 설정 예시 (.prettierrc)
프로젝트를 빌드시키는 과정에서 eslint 에러가 발생했습니다. 이번 프로젝트에 처음으로 typescript를 적용해서 대비를 못했었네욥. 그럼 에러를 없애보도록 하겠습니다~_~ 라이브러리 설치 2. eslint 설정파일 수정 구글링을 통해 수정한 부분만 올려놨습니다. 이렇게 하고 빌드를 하면 성공!
디자인이 나오지 않은 상태에서 개발을 진행중이라…(ㅎㅎ…) 툴팁은 라이브러리로 구현해놓기로 했습니다. 라이브러리는 가장 사용법이 간단하고 쉬운 react-tooltip 라이브러리 선택! 라이브러리 설치 2. ReactTooltip 컴포넌트 적용 hover 효과를 더할 요소에 ReactTooltip에 전달한 id와 똑같은 값을 data-for에 설정하면 됩니다. 그리고 children으로 tooltip에 띄울 내용 혹은 컴포넌트를 전달하면 끝입니다. effect, place, type은 부가적인 요소로 설정하지 않을 경우 default 값이 […]
토큰 만료기간을 사용자에게 알려주기 위해 타이머가 필요했다. useTimer를 할까했는데 아예 컴포넌트로 만든 예시가 많아서 참고해 구현했다. 일단 필요한 기능은 5분 제한과 재시작이고, 코드는 다음과 같다. 사용예시 (렌더링) isActiveTimer값은 토큰 요청을 할 때는 false로 했다가, 서버의 응답(토큰값)을 받게 되면 true로 바꾼다.
print 기능을 이용하게 되어 정리할 겸 기록~ 컴포넌트 전체코드 주의할 점 : react는 spa이기 때문에 document.body의 innerHTML을 변경해놓게 되면 새로고침을 해야한다. 하지만 새로고침을 하면 state는 초기값으로 돌아가게 되는데 이를 원치 않을 경우, 현재창이 아닌 새창에서 열기를 하면 된다. 그럼 현재의 돔트리에는 아무 수정이 없기 때문에 괜찮음!
퍼블리싱을 받았는데, noscript와 script 태그를 사용한 부분이 있었다. 문제는 리액트에선 두 태그를 사용하기가 까다롭다는 것… 그래서 아예 html파일을 만들고, 해당 파일을 iframe으로 렌더링하기로 했다. html 예시 iframe을 이용해 렌더링하는 법
회원가입 할 때 주소를 입력받아야 해서 카카오 우편번호 api를 사용하게 되었다. 어어어어어엄청 쉽다. 설치 사용
슬라이더 구현에 react-id-swiper 라이브러리를 사용하게 되었다. 자동재생을 멈추고 다시 재생시키는 컨트롤 기능을 구현해야하는데 문서를 찾아봐도 react에서 인스턴스 생성하는게 없었고, useRef를 이용해도 계속해서 null값만 들어왔다. 그러던 중, github에서 해답을 찾았다. (출처 : https://github.com/kidjp85/react-id-swiper/issues/20) 나도 해당코드를 사용해서 메소드로 자동재생을 컨트롤 할 수 있었다. 사용예시
섹션마다 스크롤 이벤트를 더해야해서 custom hook으로 만들어봤다! 노마드 코더와 다른 점은 element가 정해진 지점에 오게되면 true를 반환해서 해당 컴포넌트에서 스타일을 더하게된다. (이건 각자 css에서 정하면 된다 나같은 경우는 fade in) useScroll 사용예시