Front-end

기존 React 프로젝트(v18.2.0)에서 Next.js(v14.1.0)로 마이그레이션

최근 쇼핑몰을 공부해보고 싶어서 리액트로 간단하게 쇼핑몰을 만들었는데, 이를 고도화시키고 싶은 욕심이 있었다. 고도화를 하면서 기존에 쇼핑몰을 어떻게 만들었는지 기억이 가물가물하기도 해서 이를 Next.js로 마이그레이션하면서 쇼핑몰에 대해 다시 복기하고 기능을 고도화시키고자 하였다. 또, 리액트로 사이트를 만들고 나서도 그랬듯이 최종적으로 다 만들고 기억이 안 날수도 있기에 이에 대해 공부도 하고 기록으로 남기고자 한다. 최초 프로젝트를 마이그레이션하고자 결심하고 뭔부터 해야할 지 막막해 검색을 하고 사이트[링크]를 참고해 프로젝트를 시작했다. 참고사이트에서는 먼저 Next.js를 CRA로 시작하라고 돼있었지만 처음 시작부터 참고하고 싶어서 새로운 깃헙 프로젝트를 파서 거기에 기존 프로젝트를 기록으로 ..

중고신입과 주니어개발자 그 어딘가에서, 커피챗 후 이력서 수정

어제 아침 우연히 X에서 발견한 피드를 보고 우수한 행동력으로 묻지도 따지지도 않고 바로 신청한 커피챗. 뛰어난 행동력을 보여주기라도 하듯 커피챗 시간도 신청한 바로 다음날로 잡았다. 사실 커피챗을 처음 해봐서 오프라인 장소로 이동하는 동안 헛된 시간과 체력낭비가 되지 않을까라는 우려와 걱정으로 검색해봤다. 커피챗이라는 주제로 비즈니스를 하는 회사도 있다보니 그 곳에서 제안하는 내용이 뭔가 공신력(?)있는 것처럼 다가왔는데, 결과적으로는 비즈니스를 진행하다보니 적당 선의 가이드를 제안함으로서 수요자와 공급자의 사이에서 중재하는 게 아닌가 싶다. 결국은 케바케. 이번에 커피챗을 신청한 이유는 취업시장. "나한테만 이렇게 가혹한 걸까?"라는 생각으로 편하게 대화를 나누고 싶어서 신청했다. 곁들여서 내 이력서..

vite+react 깃헙 배포 방법

연휴동안 정말.. 이거 때문에 고생 너무 많이 했는데 은혜로운 분이 정리해놓은 글 덕분에 해결할 수 있었다. 우선, 에러 상황을 정리해보면 빈화면이다.. 코드를 보면 루트 아래로 어떤 파일도 들어오지 않는다. 당연 콘솔에 찍히는 에러코드도 404. 원인은 파일의 index.html에서 경로를 못찾는 것인데.. 몇몇 사람들은 같은 이유의 해결방법으로 경로를 수정하던데 그 방법으로는 해결되지 않았다. 해결하기 위해서는 몇가지를 수정해야만했다. 1. tsconfig.json에서 "noUnusedLocals", "noUnusedParameters"를 false로 수정. 2. vite.config.ts에서 base 설정값을 '/[레포이름]/' 으로 지정한다. 이 레포이름은 깃헙에 레포이름과 동일하게! 3. .gi..

DOM onclick vs React onClick

아래 두 코드의 차이가 뭘까? ex1 ex2 위의 버튼에서 작성한 onClickButton()의 경우에는 DOM의 Event, 아래는 리액트의 Event이다. 둘의 가시적인 차이는 react에서는 camelCase 컨벤션을 따른다. 또한 DOM Event의 경우에는 외부 자바스크립트를 언제든 쓸 수 있지만 React의 경우에는 이벤트를 반드시 컴포넌트가 생성될 때 명시돼있어야 한다. 참고자료 아티클