One more thinking

[Next.js] Getting Started - Installation

Next.js 문서 읽기 Installation 시스템 요구사항 Node.js 18.17 이상 macOS, Windows(including WSL), Linux 자동 설치 create-next-app 을 통해 자동 설치 Good to know 기본으로 TypeScript, ESLint, Tailwind CSS 구성과 함께 제공 다른 파일들과 코드가 분리되도록 src 디렉토리를 구분하여 설정(option) 수동 설치 수동 설치 패키지 next@latest react@latest react-dom@latest package.json의 개발 단계별 스크립트 dev: development 모드 실행 build: production 모드를 사용한 빌드 start: production 서버 시작 lint: 내장 E..

기술이 된 상상 2023. 11. 13. 12:49

[Next.js] Getting Started - Introduction

Next.js 문서 읽기 정의 Next.js는 풀스택 웹 애플리케이션을 만드는 리액트 프레임워크이다. 주요특징 Routing 파일시스템 기반 라우팅 중첩 라우팅 가능 로딩 상태, 에러 핸들링 Rendering Client-side와 Server-side 렌더링 가능 Next.js 서버에서 정적 혹은 동적 렌더링 가능 Data Fetching 서버 컴포넌트에서 동기/비동기 데이터 fetching 가능 요청 메모화, 데이터 캐싱, 재검증을 위한 확장된 fetch API 사용 Styling CSS 모듈, Tailwind CSS, CSS-in-JS을 포함한 스타일링 함수 지원 Optimizations 이미지, 글꼴, 스크립트 최적화 TypeScript 타입 체크, 효율적인 컴파일, 커스텀 플러그인 지원 App ..

기술이 된 상상 2023. 11. 12. 06:51

[Javascript] 업로드한 한글 파일 이름이 다운로드 시 깨질 때

한글 이름으로 된 파일을 다운로드 할 때 파일 이름이 깨질 때 그 원인와 해결 방법 파일 이름이 깨지는 이유 한글 이름의 파일이 다운로드 할 때 깨지는 이유는 한글 문자열의 유니코드 정규화 방식의 차이 때문입니다. ex) 한글.txt ☞ ᄒ+ᅡ+ᆫ+ᄀ+ᅳ+ᆯ.txt 유니코드 정규화 방식 운영체제에 따라 문자열을 정규화하는 방식에 차이가 있습니다. 보통 유니코드 정규화 방식에는 두 가지가 있습니다. NFC (Normalization Form Canonical Composition): 이 형식은 문자열을 정규화하고, 가능한 한 단일 코드 포인트로 표현되도록 합니다. 대부분의 경우에서 이 형식을 사용하는 것이 좋습니다. NFD (Normalization Form Canonical Decomposition): ..

기술이 된 상상/TIL 2023. 11. 11. 06:21

[HTML] 전화걸기, 통화 연결 기능

전화 걸기 기능 웹페이지에서 전화 앱을 연결하는 기능입니다. PC의 경우는 전화를 사용할 수 있는 앱이 호출 됩니다. MAC에서는 FaceTime이 열리네요. 모바일에서는 전화번호가 입력된 전화 화면으로 바로 연결됩니다. HTML a 요소 사용 To create a link to a telephone number, use tel: inside the href attribute: +47 333 78 901 Javascript window.location.href 사용 To create a link to a telephone number, use tel: inside the href attribute: +47 333 78 901 W3Schools online HTML editor The W3Schools o..

기술이 된 상상/TIL 2023. 11. 9. 17:27

[에러] vue.js v-deep 사용 시 발생하는 warning

v-deep 사용 시 발생 에러(경고) @vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() instead. 실행 환경 Vue.js 2.6.11 Node.js 16.20.0 사용 사례 v-html 을 사용하게 html 텍스트를 넣고 html 텍스트 내에 위치한 element에 추가적인 style을 입히고 싶을 때 사용하는 v-deep 요소 Deep Test Page 위의 코드를 실행하면 빌드를 하거나 서버 실행 창에 아래와 같은 경고 메시지가 발생합니다. @vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() inste..

기술이 된 상상/Error Case Study 2023. 11. 8. 04:44

Vue.js v-html 사용하여 style 적용하는 방법

Vue.js를 이용 중인데 json 데이터에 있는 텍스트를 그대로 불러와서 사용하고 있습니다. 텍스트에 줄바꿈이나 간격 등의 포맷을 적용하고 싶어요. 실행 환경 Vue.js version 3.3.4 Node.js version 16.20.0 MacOS Vertura 프로젝트 구성(Optional) Vue.js 프로젝트 설치 기본적으로 Vue.js 문서를 통해 구성된 프로젝트 구조를 예시로 듭니다. Vue.js 프로젝트가 이미 구성되었다면 skip 해도 무관하며 프로젝트를 구성하여 학습하고 싶다면 아래 링크의 Vue.js 프로젝트를 구성하는 방법을 참고하여 구성하세요. Quick Start | Vue.js VueConf Toronto - Join the premier Vue.js conference | 9..

기술이 된 상상 2023. 10. 27. 08:07

[서평]이토록 쉬운 리액트로 배우는 소켓 프로그래밍

리액트로 배우는 소켓 프로그래밍 : 네이버 도서 네이버 도서 상세정보를 제공합니다. search.shopping.naver.com 학습 도서로 매우 추천할 수 있는 책입니다. 리액트, Node.js, 웹소켓에 관한 내용을 실전적으로 학습할 수 있는 도서입니다. 책에서 다루는 도구를 다뤄보지 않았더라도 충분한 설명을 통해 내용을 학습할 수 있습니다. 목차의 단순하면서도 담백한 구성이면서도 내용의 흐름이 매우 논리적이었다. 학습을 하다보면 이어지는 논리적 궁금증을 따라 내용이 구성되어 있어 이해를 명확하게 할수 있다는 것이 도서의 큰 장점이다. 특히 각 도구(리액트, Node.js, 웹소켓)의 원리와 배경지식을 적절하게 추가하여 도구를 처음 접하는 사람들의 이해를 도왔다. 그리고 이어지는 실습 예제들이 매우..

책 보기 2023. 10. 20. 02:44

MacOS NPM에서 Yarn으로 Package Manager 변경하기

NPM으로 설정된 환경을 Yarn 패키지 매니저로 변경하는 방법입니다. 1. 구성 환경 MacOS Ventura 13 npx로 설정된 React 기본 환경 Node.js 16.20.0 NPM 8.19.4 React 18.2 1.1 프로젝트 유사 환경 구성 프로젝트와 비슷한 환경을 위해 라이브러리 하나를 추가했습니다. npm install react-bootstrap bootstrap 2. yarn 설치 npm을 사용하여 yarn을 설치합니다. npm install --global yarn // yarn 설치 확인 yarn --version ※ yarn 1버전을 방식을 적용한 이유는 yarn 2버전에 호환되는 라이브러리가 없는 경우를 겪어서 yarn 1버전으로 진행하였습니다. 3. 프로젝트에 yarn 적용..

기술이 된 상상 2023. 10. 1. 10:06