본문 바로가기
반응형

분류 전체보기

 (399)
[나만의 명언집 프로젝트] 트러블 슈팅 모음집 ② | 7 ~ 13 들어가기 전해당 포스트는 프로젝트를 진행하는 중 경험한 문제를 최대한 정리해두는 포스트 입니다. 이 글이 우연히라도 누군가의 도움이 되는 개선책이 담겨 있다면 좋겠습니다.  참고로, 해당 포스트는 트러블 슈팅①(https://duklook.tistory.com/417) 에 이어서 작성됩니다. 전반적으로 빌드나 서버 측 환경에서 경험한 문제들이 모여진 것 같습니다. [빌드 에러] 실시간 명언 및 오늘의 명언의 정적 빌드 문제※ 이 부분은 트러블 슈팅 1 에서 다룬 정적 페이지와 동적 페이지 빌드에 대한 부분에 관한 처리를 다루는 이슈 입니다. NextJS 는 개발 환경에서는 정적 페이지를 생성하지 않지만, 배포를 위해 빌드하게 되면, 정적/동적 페이지가 별도로 구분되어 빌드가 되는데, 동적으로 자동 빌드가..
[웹 접근성 모음집] aria-* 모음집 포스트 목적 aria-* 와 관련된 다양한 자료나 주요 정보를 수집하는 목적으로 작성되었습니다. 매번 갱신 시 마다 최신 날짜로 업로드 되도록 함을 규칙으로 합니다. 해당 포스트는 추가되는 내용의 날짜 기준으로 업로드 일이 갱신됩니다. aria-label | 특정 요소에 레이블을 제공 Open Menu aria-labelledby | 다른 요소의 id 속성를 참조하여 해당 요소에 레이블을 제공 해당 속성은 예시와 같이 id 를 참고할 대상이 있는 경우에만 사용하며, 없는 경우는 aria-label 속성을 활용해야 합니다. 만일 aria-label 속성과 해당 속성이 동시에 적용된다면, 해당 속성만 적용됩니다. 섹션 제목 aria-describedby | 다른 요소의 Id를 참조하여 해당 요소에 설명을 제..
[NextJS]파비콘이 정상적인 경로에 위치함에도 업데이트가 되지 않는다면? 원인 만일 각 프로젝트의 정상경로에 파비콘 파일을 두었음에도 수정한 파비콘으로 변경되지 않는 문제가 발생한다면, 이 문제는 기존에 브라우저에 캐싱되어 있는 데이터로 인해 갱신된 데이터가 반영되지않아서 발생했을 가능성이 높다. 해결방법 따라서 다음과 같이 개발자 도구(윈도우 크롬 기준 F12 OR Ctrl + Shift + i ) 를 연 상태에서 브라우저의 좌측 상단의 새로고침 버튼을 마우스(좌측 버튼)로 꾸욱 누른 상태로 대기 하면, [강력 새로고침 및 캐시 비우기] 가 뜨는데 해당 옵션을 선택 후 결과를 지켜보면 교체된 새로운 파비콘이 표시되는 것을 볼 수 있다.
[나만의명언집 프로젝트] 트리블 슈팅 모음집 ① | 1 ~ 6 들어가기 전아주 사소한 문제일지도 모르나 직면했던 일부 이슈들을 하나씩 정리한 포스트 입니다. 개인의 참고용 및 히스토리로 남기기 위한 목적으로 작성되었습니다.  NextJS 를 사용했기에 프론트엔드와 백엔드 간의 구분이 모호하여 이를 별도로 구분해서 정리할까 고민했으나, 결국 하나의 프레임워크 내에서 발생하는 일이므로 이를 구분하지 않고 정리하는 것이 문서의 흐름에 좋을 듯하여, 구분없이 목차별로 정리하였습니다. 전체적으로 1,2,3 가지의 파트가 있으며, 정리한 수에 비해 비중있는 트러블 슈팅이 많이 없을 수 있습니다.   돌아보면 부끄러운 기록이 되겠지만, 이번 프로젝트는 저에게 있어서는 감회가 남달랐던 경험이었기에 다른 프로젝트에 비해 최대한 상세히 정리하며 넘어가볼까 합니다.  그럼 시작하겠습니..
[NodeJS] 이메일의 도메인이 존재하는지 확인해보자 포스트 목적 노드메일러 등의 SMTP 를 활용한 메시지 전송 패키지나 도구를 사용할 때, 이메일을 받는 이의 도메인이 존재하는지 아닌지 확인하기 위한 기능을 만들어 보았고, 이에 대한 정리를 위해 작성한다. 우선 이번 기능을 구현하기 앞서 사전 지식이 필요하다. 세부적으로 살펴본다면 DNS의 전반적인 내용을 다뤄야 하는게 맞지만, 필요한 개념만 살펴본다면 그 중 제일 중요한 MX 레코드에 대해 언급하고자 한다. MX 레코드 MX 레코드는 쉽게 말해 SMTP 로 전송되는 이메일 메시지를 라우팅(경로 나누기) 하는 방법을 나타내는데 쓰인다. 그래서 해당 도메인에 대한 MX레코드를 조회 해보면, 각 라우트 가능한 서버가 우선순위에 따라 나눠서 조회되는 것을 확인할 수 있다. 즉, 각 우선순위에 따라 우선순위가..
[React] React 혹은 Next 에서 forwardRef 타입에 대한 참조를 확인하는 방법 및 지정법 오늘의 명언? 포스트 작성 목적 forwardRef 의 타입을 지정할 때 어디서 내용을 참조해야 명확한 타입을 지정을 할 수 있는지 정리해본다. 다음 컴포넌트가 있다고 가정해보자 다음 컴포넌트가 있다고 가정해보자. 예시 컴포넌트는 대댓글 쓰기 Form 컴포넌트로서 기능을 수행한다. Form 의 action (전송 작업) 이 이루어지고 나면 해당 form 의 textarea 의 value 을 비우는 동작을 수행하기 위해 ref 를 사용해야 하는데, 해당 ref 를 참조해서 동작을 수행하는 함수는 ReplyForm 의 상위 컴포넌트에 있다. 현재 컴포넌트는 아무런 타입이 지정되어 있지 않으므로 __ 이 표시되는 것을 볼 수 있는데, 여기서 인터넷을 검색하지 않고 어떻게 타입을 지정해야 하는지 확인하려면 어떻..
[나만의 명언집 프로젝트] NextJS(^14.1) 에서 적용한 accessToken 을 이용한 토큰 인증에서 refresh + access 방식으로 수정 오늘의 명언 이 포스트의 목적 더보기 이번에 약 1달의 기간동안 나만의 명언집 프로젝트에 리액트의 메타 프레임워크인 NextJS 14.1 버전을 사용하였습니다. 이 프로젝트에 로그인 인증을 구현하기 위해서 간편한 인증 라이브러리인 next-auth( → 현재는 auth.js 로 새단장중)와 같은 도구를 사용 하지 않고, 전통적인 방식의 JWT 라이브러리를 활용해서 인증을 구현하였습니다. 이 포스트의 목적은 기존 프로젝트에 적용된 jwt 인증 방식(accessToken 기반)의 보안상 문제점을 인식하고, 이를 개선하기 위해 refreshToken 을 적용하는 리팩토링 과정에서 보이는 여러 가지 문제점들을 기록하고 개선하는 모든 과정을 정리하는 것 입니다. 따라서 내용의 흐름이 부자연스러울 수 있다는 점을 ..
[NextJS] 번들 분석도구 설정 및 사용법 @next/bundle-analyzerJavaScript 모듈의 크기를 관리하는 데 도움이 되는 Next.js용 플러그인이다. 각 모듈의 크기와 해당 종속성을 시각적으로 확인할 수 있게 도와준다. 이 정보를 사용하여 불필요하게 큰 종속성을 제거하거나, 코드를 분할하거나, 필요할 때 일부 부분만 로드하여 클라이언트로 전송되는 데이터의 양을 줄일 수 있다. 설치 다음 명령을 실행하여 플러그인을 설치한다. npm i @next/bundle-analyzer # or yarn add @next/bundle-analyzer # or pnpm add @next/bundle-analyzer 그 후 next.config.js 파일로 들어가서, 다음과 같이 번들 분석도구를 사용토록 셋팅한다. const withBundle..
반응형

티스토리툴바