본문 바로가기

전체 글178

[error] next/image Un-configured Host 설명 next/image 컴포넌트의 src 속성에 정의되지 않은 URL 의 호스트 이름을 사용하는 값을 사용했을 때 오류 발생 기본적으로 로컬 public 경로를 제외한 외부 경로를 사용하려 하면 next.config 파일에 사용할 URL 패턴을 정의해 사용 가능하다. 단순히 외부 URL 패턴을 추가하는 것이므로 기존에 로컬 경로로 쓰던 방식 또한 사용가능하다. 코드 // next.config module.exports = { images: { remotePatterns: [ { protocol: 'https', hostname: 'assets.example.com', port: '', pathname: '/account123/**', }, ], .. 2023. 7. 10.
비동기 데이터로 jsx 구성 시 최적화 및 예외 처리 2023.06.27 오류 발견 및 내용 업데이트 PART 1. sequlize findOne 메서드의 null return 설명 개발 환경 back : express + sequlize + ts from : nextjs + redux toolkit + ts sequlize 의 findOne 메서드를 통해 데이터베이스의 내용을 조회하는 기능을 구현했다. try-catch 문안에서 조회 성공 시 2xx 번대 실패 시 4xx, 5xx 번대 상태코드로 반환하여 redux toolkit 기능들을 활용 비동기 작업을 처리하고 있는 와중 잘못된 요청에도 데이터 없이 화면이 나타나고 redux 의 state, api 요청 역시 에러관련 내용이 없었고 값은 있어야 할 state 의 값이 null 인 이상한 상황이 나왔다.. 2023. 6. 23.
Node.js 개발 및 배포 환경 구성에 유용한 패키지 내용 ts + express 서버 개발서버 및 배포환경에서 사용했던 유용한 패키지 패키지 리스트 cross-env 운영체제나 플랫폼에 종속되지 않고 동일한 방법으로 env 변수를 주입할 수 있는 패키지 ex) "start": "cross-env NODE_ENV=production ..." tsc-alias tsconfig.path 내용이 js로 변환 시에도 정상적으로 사용할 수 있게 돕는 패키지 tsconfig.path의 내용이 js 파일로 변환 후에 정상적으로 인식하고 작동하지 않으므로 ts를 쓴다면 필수적인 패키지 ex) "build": "tsc && tsc-alias" nodemon 코드 변경 시 자동으로 인식하여 node 애플리케이션을 재시작 해주는 패키지 ex) "dev": "nodemon --.. 2023. 6. 19.
(input.type=text) 엔터 시 submit 되는 상황 방지 설명 form 태그 안에서 input 태그에서 엔터를 누를시 submit 되는 상황을 방지하려면 onKeyDown 이벤트에서 엔터 키를 눌렀을때만 기존 이벤트 동작을 막아주어 처리한다. onKeyDown : 키가 입력되었을 때 작동하는 이벤트 핸들러 event.key : 입력된 키 event.preventDefault() : 기본 이벤트 동작을 실행하지 않는 메서드 코드 // event.keyCode, event.which 사용을 권장하진 않는다. event.key === 'Enter' && event.preventDefault()} /> event.keyCode === 13 && event.preventDefault()} /> event.which === 13 && event.preven.. 2023. 6. 19.
[이슈] 패키지 일부 파일이 정상적으로 업데이트되지 않는 이슈 (npm) 내용 Nextjs 13 버전 업데이트 후 image 컴포넌트 관련 image.d.ts 파일이 정상적으로 업데이트 되지 않아 이전 버전의imgae 컴포넌트의 type 내용이 있어 오류가 발생 해결과정 Next.js 같이 Typescript 를 지원하고 많은 사람이 이용하는 패키지의 파일이 누락될 가능성보다 제대로 업데이트 되지 못했을 가능성이 높다고 판단했다. 관련 내용을 chatgpt 에 문의한 결과 npm 의 캐시 관련 내용 및 해결방법을 제시했다. 내용 : npm 의 캐시내용은 패키지를 다시 설치할 때 활용한다. 해결방법 : 특정 명령어를 통해 캐시내용을 제거한 후 다시 설치 코드 npm cache clean --force 결론 imgae 컴포넌트가 Nextjs 13 버전 들어오면서 변경사항이 있었고.. 2023. 6. 8.
eslint prettier 코드 포맷팅 통합 내용 eslint 와 prettier 는 문법 오류를 방지하고 코드 포매팅을 통해 일관적인 코딩 컨벤션(코딩 규약)을 유지하여 코드 작성 및 협업시에 도움이 된다. 다만 이 두 가지가 겹치는 부분이 존재하는데 eslint 와 prettier 모두 코드 포매팅 기능을 제공하기 때문에 겹치는 상황이 생겨 코드작성이 힘들어질 수 있다. 위 과정을 해결할 수 있는 라이브러리가 두 가지가 있다. 관련 라이브러리 eslint-config-prettier eslint입장에서 불필요하거나 Prettier 와 충돌할 수 있는 모든 규칙을 제외해버린다. 단지 규칙을 꺼버리는 것이기에 당연히 다른 규칙과 함께 사용하는 경우에 의미가 있다. eslint-plugin-prettier Prettier의 규칙이 ESLint에 통합.. 2023. 6. 8.
줄 바꿈 형식 CR? LF? CRLF? 내용 VSC 하단에 CRLF 혹은 CR, LF 로 적힌 부분이 보이고 커서를 올려보면 줄 시퀀스의 끝 선택 이라는 문장을 볼 수 있다. CR? LF? CRLF? CR, LF 는 타자기를 쓸 때 사용했던 단어이며 타자기로 문서를 작성할 때 한 줄에 글자를 다 입력하여 아래 줄로 이동 하는 것이 Line Feed(LF) 이고, 왼쪽 가장 앞으로 밀어 주는 것이 Carrige Return(CR) 이다. 현재에 와서는 텍스트 파일에서 줄 바꿈을 나타내는 의미로 주로 쓰인다 CRLF (Carriage Return + Line Feed) 는 두 과정을 합친 것을 의미하며 아래 줄로 줄바꿈 후 첫번쨰 열로 이동하는 의미이다. 운영체제의 관점에서 줄바꿈에 쓰이는 메모리, 용량을 줄이고자 CR, LF 를 쓰기도 하며 C.. 2023. 6. 8.
URI 인코딩 및 디코딩 관련 js 메서드 내용 웹 개발시 url 과 관련된 내용을 다루는 상황이 빈번하게 나오지만 url 관련해서 몰랐던 내용이 있어 정리하려 한다. 웹페이지 구현 시 페이지 이동 및 라우팅 관련된 기능을 사용한다면 url 주소를 부분적으로라도 입력해서 사용하는 경우가 일반적인데 만약 주소 일부분에 한글과 같은 인코딩이 필요한 문자가 들어간다면 문제가 될 수 있다. 자동으로 인코딩 및 디코딩 되는 경우 또는 애초에 인코딩 및 디코딩 필요치 않은 문자를 사용한다면 상관없겠지만 문제를 예방하는 차원에서 명확히 처리해주는 js 메서드가 존재했다. 기본 개념 인코딩 : 인코딩은 정보를 다른 형식이나 표현으로 변환하는 과정(웹에서는 주로 문자를 특정 형식의 코드로 변경하는 것을 의미) 디코딩 : 디코딩은 인코딩된 정보를 다시 원래의 형태.. 2023. 6. 7.
[ 개발 이슈 ] maxlen 적용 이슈 eslint 는 prettier 를 사용해서 공통된 형식을 적용하기 위해서 여러 코드 규칙을 적용해둔 상황에서 tsx 파일에서 보이던 maxlen 룰이 ts 파일에서는 적용되지 않았고 100줄이 넘어가는 내용을 prettier 는 설정에 따라 줄을 넘겼고 그 내용은 화살표 함수가 있던 코드였기 때문에 eslint 의 arrow-body-style, implicit-arrow-linebreak 규칙에 따라 함수형식이 올바르지 않아 오류가 발생했다. 상황 정리 : ts 파일에서 maxlen 규칙이 적용되지 않음 화살표 함수가 포함된 코드가 100줄이 넘어가 prettier 함수의 리턴 내용을 줄바꿈함 arrow-body-style, implicit-arrow-linebreak 규칙에 따라 올바르지 못한 함수.. 2023. 5. 3.
커스텀 crousel (nextjs + ts + styled-components) 저장해두면 언젠가 쓸까해서 저장해두는 나의 커스텀 crousel 만들때는 참 오래걸렷는데 버리는 것도 한순간이군 사용 방법 ReactElement[] | ReactElement 형식의 children 을 받아 배열의 경우 매핑하여 슬라이드 배치 추가로 필요한 banner 가 있다면 받아서 배치 (딱히 필요없음) props 로 styleOption:{ height:CssValue } 받아 crousel 높이 설정 (width 는 자동으로 100% 상위 태그로 감싸서 넓이 조정하여 사용하는 방식) CssValue 는 따로 css 를 props 를 입력받을때 타입을 자세히 설정해두려고 만든 class 형식의 type 이며 간단하게 string 으로 조금 고쳐서 사용해도 상관없다. 보완점 css 입력 받는 부분.. 2023. 4. 20.
SVG 의 이해 및 배치 관련 내용 SVG 이해 SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽을 표현하기 위한 XML 기반의 마크업 언어로, 웹에서 그래픽을 표현하는 데 사용되는 형식입니다. SVG는 XML 형식을 사용하여 그래픽 요소들을 정의하고 조작할 수 있는 벡터 그래픽 포맷으로, 화면 크기에 독립적이며 고해상도 그래픽을 지원하며, 확대/축소가 가능하고 품질 손실 없이 크기를 조절할 수 있습니다. svg 에 많은 내용이 있지만 디자인에 관련된 내용도 있고 모두 알필요 없이 핵심적인 내용만 알아도 개발하는 입장에서 충분할 것 같다. SVG의 주요 특징 벡터 그래픽: 화면 크기에 독립적인 벡터 기반 그래픽을 사용하여 고해상도 디스플레이에 적합하며, 확대/축소에도 품질 손실이 없다. XML 기반: XML .. 2023. 4. 18.
Next.js 에 <Link /> 는 무엇인가 next/link Next.js 에서 제공하는 Routing 기능을 가진 태그 ※ Next.js 의 특별한 Routing 에 관한 내용을 참고하자 속성 href 필수 요소 탐색할 경로 또는 URL 객체 형태로 사용 할 수 있습니다. as 브라우저에서 클릭 시 이동할 링크를 미리 지정할 수 있는 기능을 제공,서버사이드 렌더링(Server-Side Rendering)과 같이 서버에서 렌더링하는 경우에 유용하게 사용하며 as prop은 href prop과 함께 사용하는 것이 일반적이다. 공식문서로는 이해가 힘들어 chatGPT 에게 많이 물어본 결과 href 의 값은 가변적일 수 있는데 SSR 상황에서 as 를 활용하면 미리 링크에대한 정보를 가지고 있는 셈이 된다. 추가적으로 성능상의 이점이 어는 정도 되는.. 2023. 4. 6.

티스토리툴바