1. 홈 화면에 반응형 레이아웃이 필요한데... 진행 중인 Next.js 프로젝트의 홈 화면에는 대표 이미지, 대표 문구, 그리고 가입 및 로그인 버튼이 있다. PC화면과 모바일 화면에 모두 대응해야 하는 상황이다. module css를 사용하고 있어서 미디어쿼리를 직접 작성하려다가 일단 구글링을 해보기로 했다. 그런데 이렇게 알잘딱깔센 한 포스팅이 있누! 2. 모듈 CSS에 간단하게 적용하고 싶어 검색하다가 어썸한 발견! 아래의 참고 자료는 flex를 이용한 반응형 레이아웃에 대해 잘 정리해 놓았다. 중간 중간 삽입된 움직이는 삽화로 해당 코드의 결과를 한눈에 확인할 수 있어 친절하다! 아래 코드는 미디어 쿼리를 사용하지 않는 반응형 레이아웃 구현 방식인데 깔끔하다! flex-basis 속성을 유의해서..

1. 파비콘을 적용해야 하는데, 흠... 안드로이드 스마트폰의 크롬 브라우저에서 배포한 웹앱을 '홈화면추가'를 통해 홈화면에 아이콘을 생성해 보았다. 그런데 기대와 달리 못난(?) 아이콘이 적용되었다. 생각해 보니 누구 탓도 아닌 내 탓이었다. 파비콘을 적용한 기억이 없었기 때문이다. 이젠 문제와 원인을 알았으니 파비콘을 적용하면 되는데, 디자인된 ico 파일도 가지고 있지 않아서 고민이 되었다. 그러다가 검색을 통해 어썸 한 서비스를 만나게 되었다. 2. 놀라운 RealFaviconGenerator! "All browers, All platforms, Your favorite technologies" RealFaviconGenerator사이트의 홈 화면에 걸려있는 슬로건(?)이다. 뭔가 거창해 보여 '..

이 내용은 유튜버 제로초님의 Next.js 13 App Router를 이용한 X.com 클론코딩 동영상 강의(2023년) 내용을 실습하면서-나름대로-정리한 글이다. 1. Next.js 장점 권한 설정을 App Router 미들웨어로 쉽게 할 수 있게 되었다. CSR의 경우 클라이언트에서 자바스크립트 코드를 다운로드하여야 한다는 측면에서 성능상 불리할 수 있다. 반면 SSR은 서버에서 완성된 html을 보내주기 때문에 유리한 성능을 낼 수 있다. 하지만 그만큼 서버 부담이 증가하기 때문에 Next.js에서 캐시를 적극적으로 활용한다. 2. 클론코딩 2.1. 클론코딩의 장점 우수한 서비스를 소스로 만드는 것을 경험할 수 있다. 정말 귀찮아서 안하고 싶은 기능을 핑계 대지 않고 경험할 수 있다. 하기 싫어도 ..

1. 이미지 파일을 저장하려고 하는데... mind-ar 라이브러리를 이용해 증강 현실 콘텐츠를 제공하는 프로젝트를 개발하고 있다. 타깃 이미지를 사용자 단말기의 카메라로 스캔하면 3D 모델 캐릭터가 렌더링 되어야 한다. 타깃 이미지는 사용자 단말기의 카메라로 촬영도 가능하지만 단말기의 저장소에 있는 이미지를 업로드도 가능하도록 구현하고 있다. Node.js에서 파일을 업로드할 때 multer라는 라이브러리를 사용했었다. Next.js 13의 App Router로 프로젝트를 진행하고 있는데 여기에서도 multer를 사용해야지라고 생각하고 시도했는데 Route Handlers를 이용한 API에서는 express의 라우터 설정 방법과 달라 코드의 변경이 필요했다. 2. fs.writeFile을 이용해-외부 ..

1. 빌드 중 `&display=optional`를 추가하라는 경고를 받았는데... "npm run build" 명령을 내렸다. 빌드 중 몇 가지 경고 메시지를 받았는데 그중 아래의 경고를 조치하고자 하였다. ./src/app/layout.tsx 22:9 Warning: A font-display parameter is missing (adding `&display=optional` is recommended). See: https://nextjs.org/docs/messages/google-font-display @next/next/google-font-display 2. 결론은 "Let it be!" 2.1. 구글 머트리얼 아이콘 프로젝트의 아이콘으로 구글 머트리얼 아이콘을 적용하였다. 구글 머트리얼..

1. 왜 400 에러가 오는 거지?! REST Client(VSCODE의 extension, 스크립트를 작성하여 API를 테스트할 수 있다.)를 이용해서 파일 업로드 API를 테스트하였다. 아래는 테스트를 진행한 file-upload.http 파일이며 정상적으로 잘 작동하였다. ### 사진 업로드 POST http://localhost:3000/file-upload Content-Type: multipart/form-data; boundary=test-file-upload --test-file-upload Content-Disposition: form-data; name="file"; filename="test.jpg" Content-Type: image/jpeg < test.jpg --test-file..

1. 노트북 화면에서는 꽉 찬 화면인데 스마트폰에서는 왜 이러지?! 노트북에 기본으로 달려있는 카메라로 테스트해 가며 웹 AR을 이용한 프로젝트를 개발하고 있다. 프레임워크는 Next.js를 사용했다. mind-ar 라이브러리를 이용해서 웹 AR을 구현하였고 프로젝트를 실행해 노트북에서 꽉 찬 카메라 화면을 확인했다. https-단말기 카메라 제어는 http에서는 불가하다-가 기본으로 적용되는 Vercel에 배포해 스마트폰에서 테스트해 봤는데 기대했던 꽉 찬 화면으로 카메라가 작동하지 않았다! ㅠ_ㅠ 2. object-fit 적용 video 선택자에 object-fit을 cover로 적용하면 카메라로 촬영 중인 화면이 꽉 차게 보이게 된다. 이미지의 왜곡 없이 화면에 꽉 차게 보이기 때문에 가로가 세로보..

1. "Can't resolve 'encoding'..." 경고 프로젝트 실행 중(npm run dev) 뿐만 아니라 빌드 시에도 계속해서 표출되었던 경고 메시지이다. 프로젝트의 실행은 특별히 문제 되지 않았지만 비정상적인 상태이므로 해결이 필요했다! ⚠ ./node_modules/node-fetch/lib/index.js Module not found: Can't resolve 'encoding' in '(생략)\node_modules\node-fetch\lib' 2. encoding 의존성 설치로 간단 해결! 위 경고는 프로젝트 종속성에서 encoding이 누락되었기 때문에 발생한 것이다. 따라서 아래의 명령어로 종속성을 설치하면 잠잠해진다. npm i encoding 참고 자료 https://too..