본문 바로가기

전체 글518

[JS] 영어 단어/문장 첫글자만 대문자로 바꾸는 초간단 방법 (코드 1줄) # Javascript - 영어 단어 첫 글자만 대문자로 바꾸는 방법 자바스크립트 자체적으로는 영어 단어의 첫글자만 대문자로 바꾸는 기능이 없다. 하지만 toUpperCase() 와 slice() 등를 적절히 배합하면, 아래와 같은 한 줄 짜리 함수를 만들어 구현할 수 있다. const capitalize = (str) => `${str.charAt(0).toUpperCase()}${str.slice(1)}`; const myName = "teddy"; capitalize(myName); // "Teddy" 이 함수의 구동원리는 다음과 같다: str.charAt(0)으로 첫글자만 뽑아서 toUppercase()로 대문자로 변환한다. str.slice(1)으로 두번째 이후의 모든 문자를 추출하여 그대로 뒤.. 2023. 8. 23.
[JS] Shallow Copy & Deep Copy 기본 개념, 원리 (feat. 값 vs. 레퍼런스 전달) # Shallow Copy, Deep Copy 기본 이해 이 글에서는 Shallow copy(얕은 복사), Deep copy(깊은 복사)의 기본 개념은 물론, 실질적인 구현 방법과 근본적인 작동 원리까지 파악해보려 한다. 자바스크립트의 Data Type과 Value 전달 및 Reference 전달 Shallow Copy 와 Deep Copy개념과 구현 방법 객체의 작동 방식과 Shallow Copy의 근본 원리 # Javascript의 데이터 타입 Javascript의 데이터 타입은 원시타입과 참조타입이 있다. 1. Primitive Data types undefined Boolean Number String BigInt Symbol ... 2. Structural Data Types Object: ne.. 2023. 8. 22.
[Next.js 13] Server Component vs. Client Component 기본 및 사용 방법 # Server Component vs. Client Component 기본 Next.js 13에서는 Server Component와 Client Component를 개발자가 선택적으로 정의하여 사용할 수 있다. 이에 대한 기본적인 이해를 위해 렌더링부터 가볍게 정리해본다. # 렌더링(Rendring)이란? 렌더링이란 결국 코드를 UI로 만드는 것을 의미한다. 따라서 React에서의 렌더링은 React Component를 HTML 로 만드는 과정이다. # React 18 이전의 렌더링 1. CSR (Client Side Rendering) React 18이 나오기 전, 리액트 컴포넌트의 모든 렌더링은 클라이언트(브라우저)에서 이루어졌다. - 서버는 React로 작성한 JS 코드 뭉텅이들을 브라우저에 응답.. 2023. 8. 21.
[Next.js 13] 프로젝트 폴더/파일 구조 이해하기 # Next.js 13 프로젝트 (폴더/파일) 구조 Next.js 13 프로젝트를 설치하면, 기본적으로 아래와 같은 프로젝트 구조를 갖게 된다. 최상위 루트 폴더 /app 폴더 /public 폴더 /src 폴더(Optional) /.next 폴더 /node_modules 폴더 최상위 루트 파일 Next.js 설정 파일들 next.config.js 파일 .next-env.d.ts 파일 .env 파일 그외 환경 설정 파일들 package.json 파일 .gitignore 파일 tsconfig.json 파일 .eslintrc.json 파일 [ VS Code 상에서 본 프로젝트 구조 ] # Next.js 13 폴더/파일의 구조 및 역할 각 폴더와 파일의 역할에 대해서 간단하게 살펴보면 다음과 같다. 1. 최상위.. 2023. 8. 19.
[Next.js 13] import alias @ 설정/추가/수정/삭제 방법 # Next.js 13 - import alias 란? import alias 란 import 할 때마다 매번 복잡한 경로를 입력할 필요 없이, 공통되는 부분은 @로 치환하여 사용하는 방법을 의미한다. import Header from "@/components/common/Header"; export default function BoardPage() { return ( BoardPage ); } 만약 import alias 없다면, 매번 import 할때마다 "../../components/common/.." 등의 복잡한 경로를 작성해주어야 한다. import Header from "../../components/common/Header"; export default function BoardPage(.. 2023. 8. 19.
[Next.js 13] 서버 포트 번호 변경 방법 Next.js 에서 서버를 구동하면, 기본적을 3000번 포트에서 서버가 실행된다. 물론 개발 서버와 프로덕션(배포용) 서버의 포트 번호 변경도 가능하며, 아래의 방법대로 진행하면 된다. # 서버 포트 변경 방법 개발 서버 및 프로덕션 서버의 포트를 변경하려면, package.json 파일에서 `-p 포트번호` 옵션을 추가하여 스크립트를 실행해주면 된다. "scripts": { "dev": "next dev -p 5000", "build": "next build", "start": "next start -p 6000", "lint": "next lint" } 예를 들어, 위와 같이 스크립트 수정후, - `npm run dev` 명령어를 실행하여 개발 모드로 서버를 구동하면, `http://localhos.. 2023. 8. 18.
[Next.js 13] 설치, 빌드, 서버 구동 방법 (개발 모드/프로덕션 모드) # Next.js 13 설치 방법 기본적으로 Node.js 16.8 이상이 설치된 상태에서 진행해야 한다. (node.js 공식 홈페이지에 방문하여 OS에 맞는 설치파일을 다운로드 받아서 설치하면 된다.) 1. 설치 `create-next-app` 명령어를 사용하여 Next.js를 설치하면, 관련 설정까지 자동으로 세팅된다. 터미널에서 상에서 원하는 경로로 이동 후, 아래 명령어를 실행한다. npx create-next-app@latest 만약 현재 경로 상에 설치하려면, 명령어 뒤에 마침표( . )를 하나 붙여준다. npx create-next-app@latest . 2. 세팅 설치를 시작하면 터미널 상에서 몇가지 질문을 받게 된다. 프로젝트 이름, 사용할 라이브러리, 추가 설정에 관한 것으로 추천하는.. 2023. 8. 18.
[Next.js 13] Next.js란? 주요 기능과 역할 # Next.js란 Next.js는 React로 웹 서비스를 구축할 수 있는 풀스택 프레임워크이다. 구체적으로 Next.js는 다음과 같은 역할을 수행할 수 있다. Front-End Server: 브라우저의 요청을 받으면, React로 렌더링한 HTML페이지를 응답한다. API Server: 클라이언트의 API 콜을 받아서 JSON등을 응답한다. Back-End Server: Node.js 환경에서 구동되므로, 데이터 베이스 연동, 파일시스템 접근 등이 가능하다. 이 외에도 복잡한 번들링, 컴파일 등의 설정 작업을 Next.js 에서 기본적으로 제공해주기 때문에, 개발자는 좀더 웹 개발에만 집중할 수 있게 되어 아주 유용하다. (+성능 또한 좋다) 한마디로 Node.js의 Express와 유사한 프레임워.. 2023. 8. 18.
[React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 - 모달창 초간단 구현 방법 HTML 에서 기본 제공하는 dialog 엘리먼트를 이용하면, 아래의 2가지를 아주 쉽게 구현할 수 있다. 1. 모달창 2. 다이얼로그 모달창과 다이얼로그의 차이는 - 모달창: dialog 엘리먼트 외부 영역이 불투명하게 dim 처리되고, 스크롤을 제외한 인터랙션(클릭 등)이 허용되지 않는다. - 다이얼로그: 툴팁처럼 노출되며 인터랙션에 영향을 미치지 않는다. dialog 엘리먼트를 이용하면, React에서 useState 나 외부 상태 관리 라이브러리 등을 사용하지 않아도 아주 쉽게 모달창을 구현할 수 있다. 당연히 Next.js 13 환경에서도 동일하게 모달창을 구현할 수 있다. 1. 모달창 dialog 엘리먼트는 비노출 상태가 디폴트이며, (open 속성을 t.. 2023. 8. 15.

티스토리툴바