본문 바로가기

IT/JavaScript & TypeScript49

[JavaScript] 함수 4장 내용. 자바스크립트 함수의 특징자바스크립트 함수는 일급 객체(first-class object)로 다루어짐즉 변수에 할당되거나 함수에 파라미터, 반환값으로 사용되는 등, '값'처럼 다룰 수 있음다른 함수를 인수로 받거나 반환하는 함수를 고차 함수라고 함함수에 파라미터로 넘긴 변수는 값이 '복사'됨, 즉 함수 내에서 값이 변경되어도 외부에선 그대로임하지만 객체를 넘겼을 경우 함수 내부에서 객체의 속성값을 변경하면 외부에도 영향을 줌 (엄격 모드 제외) 함수 선언문function 키워드를 통해 이름 있는 함수를 정의하는 방식호이스팅이 발생하여 정의하기 전에도 호출할 수 있음foo();function foo() { console.log("Hello, World!");} 함수 표현식동일하게 funct.. 2025. 11. 2.
[TypeScript] Null, Undefined 체크 동등 연산자(==)를 사용하면 Null과 Undefined 체크를 동시에 할 수 있다.동등 연산자를 사용하는 얼마 안되는 경우 중 하나다. let value = null;console.log(value == null); // truevalue == undefined;console.log(value == null); // true data?.value != null 처럼 옵셔널 체이닝에도 유용하다. Nullish Coalescing Operator(널 병합 연산자, ??)를 사용하면 Null, Undefined일 때 줄 값을 설정할 수 있다.let value = null;console.log(value ?? 1); // 1value == 0;console.log(value ?? 1); .. 2025. 10. 31.
[TypeScript] 문자열 key 검증하기 그저께 실무에서 고민했던 부분 정리... type Flag = { name: string; age: number;}const myFlag: Flag = { name: "doringri", age: 10};const getValue = (key: string): number | null => { return myFlag[key] ?? null;}const val = getValue("age") as number ?? 20;위의 코드는 as number로 타입을 단언해주고 있다.하지만 타입 단언은 대부분의 경우에서 타입 안전성이 낮다.getValue()에서 null을 체킹할 필요 없이 컴파일 단계에서부터 올바른 key인지 체크할 수 있다면 DX가 더 향상될 것이다. const getValue = (.. 2025. 10. 28.
[JavaScript] 타입 1장 내용. 원시 타입총 7가지가 있으며, 객체와 달리 속성이나 메서드를 가지고 있지 않다.하지만 대응하는 래퍼 객체가 존재하기 때문에 속성을 사용 가능하다.예를 들어 "doringri"라는 문자열은 String이라는 래퍼 객체가 존재하기 때문에 .length 속성을 사용 가능하다. Number자바스크립트는 정수와 부동소수점을 구분하지 않기 때문에 1과 1.0은 같은 값이다.내부적으로 배정밀도(64비트) 부동소수점 방식으로 숫자를 다룬다.3.14처럼 값을 직접 표현하는 것을 리터럴이라고 한다.표현할 수 있는 부동소수점 리터럴의 최대 크기는 대략 2의 1024승이다.오차 없이 표현할 수 있는 최댓값은 Number.MAX_SAFE_INTEGER이다. BigInt부동소수점의 범위를 벗어나는 큰 정수를 다룰 때.. 2025. 10. 21.
[JavaScript] 클로저 3장 내용. 클로저를 통한 정보 은닉function createCounter() { let count = 0; return function counter() { return ++count; }}const counter1 = createCounter();const counter2 = createCounter();console.log(counter1()); // 1console.log(counter2()); // 1count라는 변수에는 오로지 counter 함수에서만 접근이 가능하므로, 정보 은닉의 기능을 한다. 커링여러 개의 파라미터를 받는 함수를 하나의 파라미터만 받는 함수로 연속적으로 변환하는 함수형 프로그래밍 기법. 클로저를 통한 부분 적용 함수를 이.. 2025. 10. 14.
[JavaScript] 객체에 대해 한빛미디어 '프런트엔드 레벨을 높이는 자바스크립트 퀴즈북' 2장 '객체' 를 읽고 정리합니다.이 책 베타리더로 참여했었는데 발행본 받고나서 처음부터 다시 읽고 있습니다. Object.assign은 얕은 복사 메서드이다. 스프레드처럼 depth가 1인 필드만 복사되고 나머지는 기존 참조를 유지함. Object.defineProperty로 객체의 속성 정의, 수정을 key 단위로 세밀하게 할 수 있음.const user = {};Object.defineProperty(user, 'name', { value: '철수', writable: false, // 수정 불가 enumerable: true, // for...in, Object.keys() 에서 속성이 보일지 말지 결정 confi.. 2025. 10. 9.
[JavaScript] class, 클로저, Prototype을 통한 객체지향 실질적인 데이터를 가지고 있는 필드와 그 필드에 접근하기 위한 메서드를 묶을 때 객체를 사용한다.이런 경우 자바스크립트에서는 흔히 class를 사용한다.하지만 class 말고 다른 방법으로 구현할 수도 있는데 각 방법을 비교해 보았다. 1. classclass Animator { private currentValue: number = 0; private isAnimating = false; forward() { this.isAnimating = true; this.currentValue += 1; } stop() { this.isAnimating = false; } getValue() { return this.currentValue; }} 특징: this를 통해 모든 .. 2025. 9. 4.
[Inner Circle] 5주차~13주차 고찰 및 정리 패스트캠퍼스 INNER CIRCLE 풀스택 개발 5주차~13주차의 내용을 정리합니다.팀 프로젝트를 하면서 고민했던 부분을 멘토링 받은 부분이 포함되었습니다.끝난지는 한달이 다 되어가는데 그동안 배운 내용에 대해서 정리를 덜 했길래 정리합니다. (4주차까지만 정리해놓음) 서버 액션 내부에서 SSR 캐시 무효화를 통해 자동 리패칭 가능서버 액션인 만큼 Next.js 자체 서버를 쓸 때 가능함- revalidatePath를 통해 리패칭- revalidateTag를 통해 my-tag의 캐시만 무효화'use server'import { revalidatePath } from 'next/cache';export async function deletePost(id: string) { await db.delete(i.. 2025. 7. 22.
[JavaScript] 실행 컨텍스트 https://youtu.be/EWfujNzSUmw?si=Ik297-UzEH90eSmO위의 강의 정리한 내용 실행 컨텍스트는 각 스코프별로 코드가 실행되는 환경 정보를 담고 있는 객체이다. 코드 실행을 위해 존재한다. 0. 실행 컨텍스트는 언제 생성하고 언제 없어지는가- 코드 실행시키면 콜 스택에 실행 컨텍스트를 담는다.- 글로벌 실행 컨텍스트 위에 함수A의 실행 컨텍스트가 올라가고... 이런식. 가장 위에 있는 실행 컨텍스트만 활성화됨.- 일단 실행되면 사라진다.- 마지막 라인까지 코드가 모두 실행되면 글로벌 실행 컨텍스트도 사라진다. 1. Record로 호이스팅 이해console.log(name);var name = "doringri";- var로 정의한 변수 선언문 이전에 해당 변수의 값을 찍었을 .. 2025. 7. 17.
[Inner Circle/프론트엔드] 4주간 진행한 프로젝트 메모사항 바이브 코딩을 위한 AI 기반 IDE (팀원분들 추천)나는 현재 코파일럿과 VS코드 사용중...windsurf(조금더 쌈), cursor 단위를 rem or px? -> rem으로 통일하는게 낫다. - EM은 상대적인 단위 곧, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식 - REM은 Root + em = rem도 상대적인 단위 단, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식이 아니라 **Root의 폰트 사이즈**에 의해 결정되는 방식 문서의 전체적인 통일성을 위해서는 REM을 쓰는 게 낫다. 프론트엔드 개발 방향 조언성능보단 유저 경험을 중요하게 생각하는게 좋다.(진짜 성능이 필요한 웹페이지가 아닌 이상) 예를 들어, 데이터가 없을 때 컴포넌트를.. 2025. 5. 16.
[JavaScript] 그래프 알고리즘 인접한 노드를 탐색하는 자료구조로, DFS를 이용하여 탐색한다. BFS로도 구현할 수 있지만 내가 DFS가 익숙하기에...function dfs(graph, visited, node) { if (visited[node]) return; visited[node] = true; console.log("Visiting:", node); for (let neighbor of graph[node]) { dfs(graph, visited, neighbor); }}// 예시const graph = { 0: [1, 2], 1: [0, 3], 2: [0, 4], 3: [1], 4: [2]};const visited = Array(Object.keys(graph).length).fill(false).. 2025. 5. 9.
[Inner Circle] FE과정 3-4주차 정리 25/04/07번들링, tsconfig에 대해서도 보기 25/04/08왜 useEffect 밖에서 실행한 함수는 ref(엘리먼트)값이 없을까?useEffect는 렌더링 직후 실행되기 때문.반면 일반 함수는 렌더링 중에 실행되기 때문에 엘리먼트가 렌더링되지 않은 시점이기 때문에 없다. 25/04/09에러 핸들링 시에 에러 바운더리를 이용해보고 싶다.(그냥)리렌더링시 state와 ref와 일반변수의 차이: 일반변수는 값이 안남아있음. state와 ref는 남아있음.state와 ref의 가장 큰 차이는 "값 변경" 시임. state는 값이 변경되면 리렌더링을 유발함.또 다른 차이는 ref는 항상 최신 값이라는 점. state는 렌더링이 끝나야 최신 값을 얻을 수 있음.고민되는것: 프리티어 쓰기멘토링: 요새는 .. 2025. 4. 16.
[TypeScript] Record 해시 테이블로 switch문 대체하기 이것은 회사 후임분이 자주 쓰시던 팁인데, 좋아보여서 나도 사용해보기로 했다.일단 기존에 작성하던 방법은 아래와 같은 예시이다.export enum CharacterType { LANCER, ROUXLS, RALSEI}export const getCharacterOrderByName = (name: string) => { switch (name) { case "lancer": return CharacterType.LANCER; case "rouxls": return CharacterType.ROUXLS; case "ralsei": return CharacterType.RALSEI; }} enu.. 2025. 3. 6.
[JavaScript/알고리즘] CountDiv 오랜만에 다시 하는 코딜리티...A와 B 사이에 K로 나눴을 때 몫이 0이 되는 수가 몇 개인지 세는 문제입니다. https://app.codility.com/demo/results/trainingGDW5F8-WJ7/ Test results - CodilityWrite a function: function solution(A, B, K); that, given three integers A, B and K, returns the number of integers within the range [A..B] that are divisible by K, i.e.: { i : A ≤ i ≤ B, i mod K = 0 } For example, for A = 6, B = 11 and K = 2, your fapp.. 2025. 3. 1.
[TypeScript] 파라미터 전달에 대한 고찰 오늘은 그냥 간단한 글입니다. type PrintUser = (name: string, age: number) => void;const printUser: PrintUser = (name, age) => { console.log(name, age);};printUser("aa", 10);뷰에서 커스텀 훅이 리턴하는 함수를 호출할 일이 있었는데 위와 같은 방법(함수형 개별인자 타입)으로 호출하였다.왜냐면 뷰에서 객체를 만들기가 싫었기 때문이다. (코드가 지저분해져서)하지만 이러한 방식은 순서가 바뀌었을 때도 타입스크립트에서 잡아줄 수 없는 상황이 될 수 있기 때문에, 위험성이 있다. type User = {name: string; age: number};const printUser = (user: Use.. 2025. 2. 20.

티스토리툴바