문제 현재 next.js를 사용하여 랜딩사이트를 개발중이고, 프론트엔드는 간편한 amplify를 사용하여 배포했다. 그런데 분명히 develop모드에서는 잘 로드되던 이미지가 배포만 하면 아래와 같은 404 not found 에러와 함께 로드되지 않았다. 도대체 왜 안되는지 아무리 구글링을 해봐도 비슷한 질문만 있을 뿐 해결 방법은 나오지 않았다. 나는 next.js에서 제공하는 next/image를 사용했는데, 이것 때문에 문제가 생겼을 것이라는 추측으로 이미지 선언 방식도 바꿔보고, alias 설정에 문제가 있었나 싶어서 이 부분도 바꿔보고 이것저것 시도했지만 해결되지 않았다. (처절한 시도들..) 해결 그러다가 혹시 하는 마음에 로컬에서 빌드를 해본 결과! 엥? 정상적으로 작동한다. 빌드 했을 때도..
지금까지 프로젝트를 진행하기 위해 했던 고민들을 적어보려고 한다. 우선 처음 프로젝트를 진행할 때는 어떤 라이브러리/프레임워크를 써야할지에 대한 내용이다. 항상 react를 써오던 사람으로서 이번 프로젝트도 react로 하면 편하겠지만..! 이번에는 개발해야 할 결과물이 한가지가 아니라 여러개로 나누어져 있기 때문에 각 결과물의 특성을 고려해서 고민해보았다. (그리고 너무 하던 것만 하면 재미없다) 개발 리스트 일단 프론트에서 개발해야 하는 것들은 크게 4가지이다. 1. 리뷰 위젯 리뷰 위젯은 2가지로, 리뷰 작성 위젯과 리뷰 목록 위젯이 있다. 말그대로 위젯형태로 다른 기업의 서비스에 삽입될 수 있어야 한다. 2. 관리자콘솔 말그대로 관리자 콘솔로, 관리자가 리뷰에 관한 데이터들을 관리할 수 있어야 한..
지금 만들어야 하는 기능은 사용자가 리뷰작성을 하던 중 일정 시간동안 입력이 없으면 리뷰주제를 추천해주거나 현재 작성중인 문장을 자동완성해주는 기능이다. 필요 기능 일단 이 프로세스를 위해서 구현해야 할 세부 기능들은 다음과 같다. 1. 사용자가 입력을 시작한 이후 1초간 입력을 멈춘 상태를 감지한다. 2. 서버로 지금까지 작성한 문장들을 전송한다. 이 때 이미 이전에 전송했던 문장은 제외하고 전송한다. 3. 서버로 부터 데이터를 받아서 화면에 추천문장으로 띄운다. 4. 문장완성 기능의 경우 화면에 뜬 추천문장을 클릭하면, 입력 중이던 문장이 자동으로 대치된다. 여기서 일단 1번 기능을 먼저 구현하려 한다. 아직 서버가 구현이 안된 상태라 나머지는 서버가 구현된 이후 진행할 예정이다. 프로세스 1번 기능..
시작! 리뷰에서 특정태그와 관련있는 단어를 하이라이팅 해서 보여주는 기능을 개발해야 한다. 실패 처음 생각한 방법은 당연히 아래처럼 replace를 이용해 하이라이팅 하고 싶은 단어를 하이라이팅 된 컴포넌트로 교체하는 것이다. return content.replace( '곰팡이', '곰팡이' ); 하지만 위의 코드는 안타깝게도 아래와 같이 컴포넌트로 변환되지 않고, 문장 그대로 출력이 되어버린다. 이 이유는 text에 script를 넣어서 공격하는 XSS(Cross site script)를 브라우저에서 막고 있기 때문이다. 이를 해결하기 위한 방법으로는 dangerouslySetInnerHTML를 사용할 수 있다고 한다. 하지만 이름에도 dangerously가 붙는 것에서도 알 수 있듯이 공식문서에서도 ..
개발을 진행 하다보니 길고 긴 import문이 점점 거슬린다. import Fonts from '../../utils/GlobalFonts'; import { colors } from '../../utils/GlobalStyles'; 더 개발이 진행되기 전에 alias 설정으로 깔끔하게 경로를 정리하고 시작하자! 일단 alias란 번역하면 '별명'이다. 말 그대로 저 지저분하고 긴 경로에 별명을 붙여서 깔끔하게 정리해준다. 보통 src/ 혹은 .을 @로 바꾸어서 많이 사용한다고 한다. 먼저 ts가 alias를 인식할 수 있도록 tsconfig.json을 아래와 같이 설정해준다. { "compilerOptions": { "baseUrl": "./src", "paths": { "@/*": ["*"] }, }..
ESLint 설정을 하던 중 아예 관련 패키지가 깔리지 않는 에러 때문에 일단 건너 뛰고 개발을 약간 진행했다. 어제 계속 씨름 한 결과 ESLint와 prettier 설정을 드디어 완료 했다. 그런데 실행해 보니 내가 짠 모든 코드에 빨간줄이 떴다.. 전부 ESLint와 Prettier에서 나는 에러들이다. 하나씩 해결해봤다. 1. Replace `↹↹` with `····` 이게 가장 많이 뜬 에러였다. 위 사진에서보다 훨씬 많이 있었는데 알고보니 Prettier에서는 tab을 사용하고, ESLint에서는 space를 사용하여 공백을 구성하기 때문에 충돌이 일어나는 거였다. 간단하게 prettier 설정(.prettierrc)을 아래와 같이 수정해서 해결했다. { "useTabs": false } 2..
Next.js는 프레임워크이기 때문에, 정해진 구조 안에 코드를 넣어야 작동한다. 기본적으로 존재하는 pages 폴더(Next12기준)에 index.js를 만들면, 그곳에서 return하는 것들이 바로 프로젝트의 메인화면에 렌더링된다. 또한 해당 폴더에 파일들을 만들면, 자동으로 routing 되어 주소창에 '/파일이름' 만 입력해도 해당 페이지로 자동 routing 된다. (404페이지 또한 자동으로 생성된다.) 여기서 중요한 점은 routing을 하기 위해서는 꼭 함수를 exprt default 해야 한다는 점이다. 또한 파일의 이름이 주소가 되므로 파일의 이름을 잘 지어야 한다. 함수의 이름은 전혀 상관없다. pages안에 있는 index.js는 사이트의 메인페이지가 된다. 따라서 /만 입력했을 때..
기존에는 React.js만을 이용해서 개발을 해왔다. 최근에 Next.js 공부를 시작하면서 둘의 차이점을 느낄 수 있게 되었다. React.js => 라이브러리 Next.js => 프레임워크 라이브러리와 프레임워크는 주체가 어디에 있느냐에 따라 나뉜다. 개발자가 원하는 코드를 불러와서 사용할 수 있게 해 놓은 것은 라이브러리, 이미 만들어진 틀 안에 개발자가 코드를 넣으면, 코드가 작동하도록 해 놓은 것이 프레임워크이다. React를 사용할 때에는 내가 폴더 구조를 어떻게 만들지 직접 정하고, 내가 원하는 대로 파일의 구조를 짤 수 있었던 반면 Next를 사용할 때에는 이미 정해진 pages라는 폴더 내에 개발을 해야만 나의 코드가 작동한다. React 프로젝트를 생성하면 보이는 ReactDom.ren..
Components: | Next.js (nextjs.org) Components: | Next.js Good to know: If you are using a version of Next.js prior to 13, you'll want to use the next/legacy/image documentation since the component was renamed. This API reference will help you understand how to use props and configuration options available for th nextjs.org next/image의 장점 (이미지를 import해서 사용할 경우) import Image from 'next/image' impo..
