본문 바로가기

FE/etc4

Nextjs의 Link component 프로젝트에서 next를 13으로 업그레이드하고 Link 컴포넌트 사용하면서 몇 가지 변경점이 생겼다는 것을 알게 되었다. 근데 아직 app 라우팅 방식으로는 변경 못함ㅠ next13 next config appDir 활성화 + yarn pnp랑 같이 쓰면 빌드에서 실패한다(요 이슈) 이 글에서는 가볍게 기본적으로 알면 좋을 Link 컴포넌트의 속성 및 Next.js12와 13으로 업그레이드되면서 Link 컴포넌트에서 무엇이 변경되었는지 소개해보고자 한다. 컴포넌트 Link 컴포넌트는 페이지 간 이동 시 사용된다. Link 컴포넌트의 href 속성에는 이동할 경로를 지정하고, 자식 요소로는 링크의 텍스트 또는 이미지 등을 넣어주면 된다. import Link from 'next/link'; ​ functi.. 2023. 3. 12.
프로젝트 eslint 적용하기 다들 알겠지만, 회사에서 개발을 하다보면 바닥부터 어떠한 프로젝트를 짜는 일이 별로 없다 😭 eslint 또한 항상 프로젝트에 기본적으로 `이미` 존재하는 파일 중에 하나가 되어버리니까, 크게 관심을 가지않던 파일 중 하나였다. 그러다가 요즘에 기존 멀티 레포를 모노레포로 합치게 되면서 각 멀티레포들의 eslint 파일들을 많이 보게 되었고... eslint 파일은 무엇인가ㅎ 에 대한 궁금증 + 나는 왜 여지껏 eslint를 한번도 잘 들여다보지 않았지? 요거 설정은 어떻게 하는것이지? 라는 충격과 의문이 들었따. 그렇다면 eslint란 무엇인가. eslint docs에서는 eslint를 `ESLint is a tool for identifying and reporting on patterns found.. 2022. 10. 8.
yarn과 dependencies / devDepedencies / peerDependencies 매일 yarn을 통해 새로운 라이브러리를 다운 받고, 애플리케이션을 실행한다. yarn을 통해 패키지들을 다운 받고, package.json 파일을 들여다보다가 궁금증이 생겨 글을 작성해본다. yarn은 무엇일까? docs에서는 `Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Code is shared through something called a package.` 요롷게 이야기한다. yarn은 npm과 같은 패키지 매니저이다. 거인의 어깨에 올라타라~ 바퀴를 다시 만들지 말라~ 뭐 요론 말들도 있지 않은가. 세상의 훌륭한 개발자들이.. 2022. 10. 3.
리액트에서 signature-pad로 서명하기, react-signature-canvas에 placeholder 넣기 회사에서 설문 제작 시 선택할 수 있는 새로운 문항 종류로 `서명 입력`을 받을 수 있는 모듈을 구현하게 됐다. 서명 입력 받는 라이브러리 중 가장 대표적으로 사용되고 있는 signature-pad를 리액트에서 좀 더 간편하게 사용할 수 있도록, React wrapper로 감싸주는 `react-signature-canvas`를 사용하기로 결정~ 해당 라이브러리를 사용하면서 고민했던 부분, 그리고 해결 방법에 대해서 글을 써보고자 한다. https://www.pocketsurvey.co.kr/survey1/ExBZRsY 여기서 완성된 기능을 사용해볼 수 있다. (포켓서베이 많이 사용해주세요😃) 오랜만에 링크 클릭해보니 서베이가 삭제된거 같다ㅠㅠ 404 뜨네ㅠㅠ react-signature-canvas를 사.. 2022. 1. 4.