본문 바로가기

개발(Development)273

[JS] Mutation이란? mutable vs. Immutable (cf. const 키워드) # Mutation이란? 프로그래밍 세계에서 Mutate란 값을 바꾸는 것, 즉 "change the value" 와 동의어이다. 이에 따라, Javascript에서 데이터 타입은 값을 바꿀 수 있는지 여부에 따라서 다음의 2가지로 분류 된다. Immutable: 값을 바꿀 수 없는 데이터 타입. (e.g. 원시 타입) Mutable: 값을 바꿀 수 있는 데이터 타입. (e.g. 참조 타입) # 재할당(Reassignment) vs. 변경(Mutation) 주의할 점은 값의 재할당(Reassignment)와 값의 변경(Mutation)은 다른 의미라는 점이다. 예를 들어, myName이라는 변수에 새로운 string 값을 재할당하는 것은 가능하지만. let myName = "Teddy"; myName =.. 2023. 8. 27.
[JS] 코드 실행 특정 시간 대기/지연 방법 (코드 1줄) # Javascript - 코드 실행 대기/지연(Wait/Delay) 방법 Promise 를 이용하면 코드의 실행을 특정 시간 대기 시킬 수 있다. 아래의 코드 1줄짜리 함수를 정의해두고 호출하면 된다. const delayTime = async (millisec) => new Promise((resolve) => setTimeout(resolve, millisec)); 구체적인 사용 방법은, delayTime() 함수를 호출하면 Promise를 반환하므로 then(콜백함수) 방식이나, async/await 방식을 사용하면 된다. const delayTime = async (millisec) => new Promise((resolve) => setTimeout(resolve, millisec)); // .. 2023. 8. 24.
[JS] 배열 중복 요소 제거 방법 (코드 1줄 ) # Javascript - 배열 중복 요소 제거 방법 자바스크립트에서 배열 중복 요소를 제거는 아래의 코드 한 줄이면 충분하다. const dedupeArray= (arr) => [...new Set(arr)]; 아래와 같이 사용하면 된다. const dedupeArray = (arr) => [...new Set(arr)]; const myArr = [1, 1, 2, 2, 2, 3]; dedupeArray(myArr); // [1, 2, 3] 작동원리는 Set 으로 중복요소를 제거하고, Spread 문법으로 새로운 배열을 생성한다. 함수로 만들어 두고 필요할 때마다 가져다 쓰면 편하다. 2023. 8. 24.
[Next.js 13] 라우팅 정의 방법 (Defining Routes) # Next.js 13 라우팅 정의 방법 Next.js 13은 파일 시스템 기반의 라우터를 사용한다. /app 디렉토리 내부에 폴더를 만들면, 각 폴더명은 라우팅 경로(Route Segement)가 된다. 폴더 내부에 또 다른 폴더를 만들면, 중첩 라우팅 경로(Nested Route)가 된다. cf. 라우트/라우팅 용어 "라우트"는 사실 영어로는 Route이며, 일반적으로 "루트"로 읽고, "경로"를 의미한다. 하지만, Next.js 에서는 Route는 "라우트", Routing은 "라우팅", Router는 "라우터"으로 읽는듯하여 그대로 표기하였다. 즉, 라우트 === 루트(접속 경로) 와 같은 의미이다. # 라우트 만들기 (Creating Routes) Route를 만드는 방법은 다음과 같다. /ap.. 2023. 8. 23.
[Next.js 13] 라우팅 기본 정리 (Routing fundamental) # Next.js 13의 라우팅 기본 모든 웹사이트의 뼈대는 사실상 여러 페이지로 구성된 라우팅 구조이다. 라우팅이란 구분된 경로를 통해 각 페이지에 접근하는 방식을 의미한다. 예를 들면, http://localhost:3000/board 의 /board 등, 브라우저 등에서 접속 가능한 경로 시스템이다. cf. 라우트/라우팅 용어 "라우트"는 사실 영어로는 Route이며, 일반적으로 "루트"로 읽고, "경로"를 의미한다. 하지만, Next.js 에서는 Route는 "라우트", Routing은 "라우팅", Router는 "라우터"으로 읽는듯하여 그대로 표기하였다. 즉, 라우트 === 루트(접속 경로) 와 같은 의미이다. # File-System Based Router Next.js 13은 `/app` 디.. 2023. 8. 23.
[JS] 배열에서 랜덤으로 요소 추출하는 초간단 방법 (코드 1줄) # JavaScript - 배열 요소 랜덤 추출 방법 자바스크립트의 배열의 요소를 랜덤으로 추출하는 코드는 아래의 코드 한 줄 짜리 함수로 쉽게 구현 가능하다. const getRandomElement = (arr) => arr[Math.floor(Math.random() * arr.length)]; const 당첨자명단 = ["Teddy", "Jennifer", "Nicole", "Brad", "Tom"]; getRandomElement(당첨자명단); // 랜덤으로 한명씩 나옴 작동원리는 다음과 같다: Math.random()은 [0이상, 1미만) 사이의 랜덤한 소수를 반환한다. 여기에 배열의 요소 수(length)를 곱해주면, [0이상, 배열의 요소 갯수 미만) 사이의 랜덤한 소수가 반환된다. Mat.. 2023. 8. 23.
[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.

티스토리툴바