본 포스트는 '모던 자바스크립트 Deep Dive'를 읽고 정리한 내용입니다.원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다.원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달(pass by value)이라 한다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달(pass by reference)이라 한다.11.1 원시 값11.1.1 변경 불가능한 값원시 ..

본 포스트는 모던 자바스크립트 Deep Dive 를 읽고 정리한 내용입니다.1. 객체란?자바스크립트에서 원시값을 제외한 나머지는 모두 객체(함수, 배열, 정규표현식 등)원시값 -> immutable객체 타입의 값 -> mutable객체0개 이상의 프로퍼티로 구성된 집합프로퍼티프로퍼티 = key + value객체의 상태를 나타내는 값(data)자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 value 가 될 수 있다.메서드프로퍼티의 value 가 함수인경우 -> method 라 부름프로퍼티를 참조하고 조작할 수 있는 동작(behavior)2. 객체 리터럴에 의한 객체 생성인스턴스클래스에 의해 생성되어 메모리에 저장된 실체클래스는 인스턴스를 생성하기위한 템플릿의 역할자바스크립트의 객체생성 방식객체 리터럴..

개발하면서 CSR과 SSR, 그리고 SPA와 MPA 같은 개념은 익숙하게 들어왔지만,이번 기회에 한 번 제대로 정리해두고 싶어서 글로 남깁니다.막상 누군가에게 설명하려고 하면,“이게 맞나?” 싶은 부분도 많고,각 개념이 어떻게 연결되는지도 애매하게 느껴질 때가 있었거든요.그래서 이번 글에서는 CSR과 SSR에 초점을 맞춰개념부터 특징, 장단점, 그리고 언제 어떤 방식이 적합한지 간단하게 정리해보려 합니다.이 글은 MDN Web Docs와 Naver D2 게시글을 참고하여 작성했습니다.MDN - CSRMDN - SSR네이버 D2 - 어서 와, SSR은 처음이지?용어정리CSR (Client Side Rendering)클라이언트(브라우저)에서 렌더링하는 방식입니다.서버는 HTML 껍데기만 주고, 실제 내용은 ..

https://www.typescriptlang.org/docs/handbook/2/narrowing.html타입 좁히기 : 유니언 타입 중에서 실제로 어떤 타입인지를 코드 흐름에 따라 좁혀서 사용하는 것1. typeof 타입 가드JS 에서는 typeof 연산자를 사용해서 값의 타입을 문자열로 확인가능typeof "hello" // "string"typeof 123 // "number"typeof true // "boolean"typeof undefined // "undefined"typeof Symbol() // "symbol"typeof 123n // "bigint"typeof {} // "object"typeof function() {} // "func..

8. 타입 별칭 (type)자주 쓰는 타입에 이름 부여type Point = { x: number; y: number;};function printCoord(pt: Point) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y);}printCoord({ x: 100, y: 100 });Union 타입에도 타입 별칭 부여 가능type ID = number | string;9. 인터페이스 (interface)객체 타입 정의 방식 (type과 유사)interface Point { x: number; y: number;}function printCoord(pt: Po..

1. 원시 타입string, number, boolean : 자바스크립트와 동일String, Number, Boolean (대문자 버전)은 사용하지 않는 것을 권장2. 배열[1, 2, 3]과 같은 배열의 타입을 지정할 때 number[] 구문을 사용할 수 있습니다.Array와 같은 형태로 적을 수 있으며, 동일한 의미를 가집니다.[number] 는 전혀 다른 의미를 가짐(튜플)3. any어떤 타입도 허용, 타입 검사 무시디버깅이 어려워지므로 사용은 최소화noImplicitAny 설정 시, 암묵적 any를 에러로 잡음4. 타입 표기let name: string = "Alice" → 명시적 타입 표기(선택 사항)대부분은 초기값 기반 타입 추론이 잘 됨5. 함수매개변수, 반환값에 타입 지정 가능function..

1. TypeScript란?JavaScript의 모든 값은 다양한 동작을 내장하고 있으며, 타입을 통해 이를 예측할 수 있음.JavaScript는 동적 타입 언어로, 코드 실행 전에는 타입 오류를 알기 어려움.TypeScript는 정적 타입 검사를 통해 런타임 오류를 사전에 방지할 수 있음. 정적 타입 시스템 사용 → 코드가 실행되기 전에 코드에 대해 예측가능 2. 정적 타입 검사TypeScript는 코드 실행 전에 타입을 검사하여 오류를 미리 감지.예제:const message = "Hello World!"; message(); // TypeScript 오류: 문자열을 함수처럼 호출할 수 없음.3. TypeScript의 장점예외 방지: 실행되지 않아야 할 코드 실행을 사전에 차단.버그 방지: 오타 및 ..

정답을 제출할 때, 엔터키를 눌러도, 제출 버튼을 눌러도 input 태그 안의 내용이 제출될 수 있도록 해야했다.1. input 태그의 값을 Hook으로 관리2. input이 입력될 때마다 State를 업데이트3. input tag의 onKeyDown 이벤트 핸들러를 설정하여 엔터키를 누를 시 값이 제출되도록 설정4. 제출 버튼에 onClick 이벤트 핸들러를 설정하여 값이 제출되도록 설정1. 'input' 태그의 값을 관리할 useState훅을 선언1. useState 훅을 사용하여 입력된 값을 관리할 State를 선언```javascriptimport { useState } from 'react';const ShortAnswer = () => { const [answer, setAnswer] = u..

개요JavaScript에서 Object에 접근하는 방법은 Dot Notation(점 표기법) , Bracket Notation(대괄호 표기법) 두 가지가 존재함점 표기법(Dot Notation)객체 뒤에 마침표와 속성 이름을 지정하여 객체의 속성에 접근const person = {name :'John' ,age :25 ,address : {city :'New York' ,state :'NY' }};console .log(person.name) ;// 출력: Johnconsole .log(person.address .city) ; // 출력:NewYork장점가독성이 좋다, 객체 지향 프로그래밍에 익숙한 개발자에게는 더 쉽다.깔끔하고 간결한 구문을 제공, 코드 작성과 유지 관리가 더 쉽다.대괄호 표기법보..