IT168 [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. [React] 훅 안에서 정의한 함수의 클로저 문제 훅 안에서 내부 함수를 정의하고 그 안에서 state를 쓸 때는 클로저 문제가 발생한다.useEffect(() => { const handleVisibility = () => { if (state !== "stopChecking") { // state가 바뀌어도 모름 console.log("visible"); } } document.addEventListener("visibilitychange", handleVisibility); return () => document.removeEventListener("visibilitychange", handleVisibility);}, []); 이런 경우 useEffect가 실행될 시점의 state 값을 캡쳐하고 그 값은 갱신되지 .. 2025. 10. 28. [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. [Infra] Biome.js VSCode 세팅 린트와 포맷팅을 한번에 할 수 있는 성능 좋은 툴 Biome ..하지만 세팅이 항상 헷갈려서 정리해놓음. VSCode에서 저장시 자동 포맷팅이 되도록 하는 세팅 방법이다.npm install -D @biomejs/biome@1.9.42.x버전부터는 아직 VSCode에서 확장 프로그램 지원을 안하고 있기 때문에 1.x버전으로 설치한다. { "editor.defaultFormatter": "biomejs.biome", "editor.formatOnSave": true, "[typescript]": { "editor.defaultFormatter": "biomejs.biome" }, "[typescriptreact]": { "editor.defaultForm.. 2025. 8. 31. [Expo] RN 웹뷰 프로젝트 환경 세팅 Expo를 사용하면 리액트 네이티브 환경 세팅을 쉽게 할 수 있습니다. 1. 프로젝트 생성nvm install 22nvm use 22npx rn-new@latest --nativewind유틸성과 개발자 생태계 측면 tailwind가 좋기 때문에 nativewind 프로젝트를 생성했습니다.npm start로 expo 프로젝트를 시작할 수 있습니다. 2. expo go 앱 설치앱을 설치하고 단말기로 QR코드를 스캔하면 바로 테스트를 할 수 있습니다.유의할 점은 서버 시작 환경과 단말기가 같은 네트워크 상에 있어야 합니다. 3. react-native-webview웹뷰를 제공하는 라이브러리입니다.https://docs.expo.dev/versions/latest/sdk/webview/ react-native-.. 2025. 8. 31. [TortoiseGit] Cherry Pick 하위 브랜치에서 특정 커밋만을 가져와 상위 브랜치에 머지하고 싶을 때는 Cherry Pick을 이용한다.이 작업도 TortoiseGit에선 GUI로 쉽게 할 수 있다. 먼저 상위 브랜치로 체크아웃하고, Show Log로 들어간다. 그리고 아래처럼 파란 글씨를 클릭해 가지고 오고 싶은 커밋이 존재하는 하위 브랜치를 선택한다. 하위 브랜치의 커밋들이 보이면 가지고 오고 싶은 커밋을 선택해서 Cherry Pick을 해주면 된다. 2025. 8. 25. 사이드 프로젝트 개발환경 세팅 계획 현재 React Native와 React를 기반으로 한 사이드 프로젝트의 기획 단계에 들어가 있습니다.아직 앱 이름도 결정되지 않은 러프한 상태입니다.프로젝트에 앞서 패스트캠퍼스에서 제공받은 React Native 강의를 통해 생소하던 개념들을 정리합니다. 하이브리드 앱네이티브 앱 + 웹 앱웹 기술로 개발하여 네이티브 앱의 웹뷰를 통해 실행됨웹 개발자가 개발하기 용이함웹 앱과 달리 카메라, GPS 등 네이티브 앱만 사용할 수 있던 기능들을 이용할 수 있음앱 스토어를 통하지 않고도 업데이트가 가능함웹 콘텐츠를 로딩할 때 성능 면에서 네이티브 앱보다는 떨어짐 ExpoReact Native 프로젝트를 쉽게 개발할 수 있게 돕는 프레임워크 및 플랫폼React Native 개발 환경을 쉽게 세팅할 수 있게 해줌R.. 2025. 8. 3. [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. [Linux] 도커 없이 컨테이너 만들기 강의 정리(1) https://youtu.be/lVtgqmjv4BQ?si=HkWN11XM1uECmBEg위의 카카오엔터프라이즈 강의 내용 정리강의가 생각보다 길어서 절반정도의 내용까지 정리했습니다. - 컨테이너를 쓰려면 리눅스와 런타임(컨테이너 관리 도구)이 있어야 함.- 대규모 서비스를 돌려야 해서 서버를 여러대 사용하고 있다면 한번에 관리하기 위해 쿠버네티스를 사용한다. docker run 명령어를 통해 컨테이너 만든 뒤- ls로 보면 컨테이너의 루트 디렉토리의 FileSystem은 overlay, 호스트서버는 /dev/mapper/... 로 표시된다.- hostname은 컨테이너의 uid, 호스트서버는 pc 이름이 표시된다.- id 명령어를 쳐보면 uid(유저id), gid(그룹id)는 같다- 사실 루트권한으로 프로.. 2025. 7. 20. [JavaScript] 실행 컨텍스트 https://youtu.be/EWfujNzSUmw?si=Ik297-UzEH90eSmO위의 강의 정리한 내용 실행 컨텍스트는 각 스코프별로 코드가 실행되는 환경 정보를 담고 있는 객체이다. 코드 실행을 위해 존재한다. 0. 실행 컨텍스트는 언제 생성하고 언제 없어지는가- 코드 실행시키면 콜 스택에 실행 컨텍스트를 담는다.- 글로벌 실행 컨텍스트 위에 함수A의 실행 컨텍스트가 올라가고... 이런식. 가장 위에 있는 실행 컨텍스트만 활성화됨.- 일단 실행되면 사라진다.- 마지막 라인까지 코드가 모두 실행되면 글로벌 실행 컨텍스트도 사라진다. 1. Record로 호이스팅 이해console.log(name);var name = "doringri";- var로 정의한 변수 선언문 이전에 해당 변수의 값을 찍었을 .. 2025. 7. 17. 이전 1 2 3 4 ··· 12 다음
