전체 글132 [JavaScript] 객체의 속성(property) 접근 방법 . (점) 호출: 변수처럼 직접 이름을 써서 호출한다[] (대괄호) 호출: 문자열을 키로 줄 수 있다var obj = { name: 'apple', color: 'red'};// 점으로 접근console.log(obj.name); // 'apple'// 대괄호로 접근console.log(obj['name']); // 'apple' 보통 []는 키를 문자열이나 변수로 넣어야할 때 사용한다 1. 속성 이름이 변수로 있을 때var key = 'color';console.log(obj[key]); // 'red' 2. 속성 이름에 공백이나 특수문자가 있을 때var obj2 = { 'my name': 'banana'};console.log(obj2['my name']); // 'banana'c.. 2025. 4. 5. ✨ Swift 시점 타입스크립트 로드맵 ✨ https://chatgpt.com/canvas/shared/67ef93f664b48191afe71eba71175350✨ Swift 가상 TypeScript 입문 로드맵 ✨✅ 1단계: 타입 기본 감 잡기 (Swift 타입 ≈ TS 타입)배우게:number, string, booleanany, unknownnull, undefinedobject 타입Swift 같이 쓰기:let age: number = 24;let name: string = '다정이';✅ 2단계: 함수에 타입 구조 다기배우게:함수 매계번수 타입함수 리턴 타입function add(a: number, b: number): number { return a + b;}✅ 3단계: 인터페이스(Interface) 이타배우게:interfacetype .. 2025. 4. 4. [JavaScript] 동등 연산자(==)와 일치 연산자(===) 동등연산자(==)타입이 달라도 값을 비교할 때 자동으로 타입 변환(type coercion)을 한 후 비교한다느슨한 비교라고 부른다(loose equality) 1 == '1' // true (문자열 '1'이 숫자 1로 변환된 뒤 비교)0 == false // true (false가 숫자 0으로 변환)null == undefined // true (특수 케이스) 일치 연산자(===)타입까지 정확히 같아야 true엄격한 비교라고 부른다(strict equality)1 === '1' // false (숫자 1과 문자열 '1'은 타입이 다름)0 === false // false (0은 number, false는 boolean)null === undefined // false 기본적으로 일치연산자를 .. 2025. 4. 4. [JavaScript] 자바스크립트 객체 다루기 keys, for...of 자스에서 객체나 배열을 다룰 때 자주 쓰이는 것들잊어버릴까봐 쓰는 포스팅 아래의 객체가 있을 때const person = { name: "John", age: 30, gender: "male"}; Object.keys는 객체의 모든 key(속성 이름)를 배열로 반환한다console.log(Object.keys(person));//["name", "age", "gender"] Object.values는 객체의 모든 value(값)를 배열로 반환한다console.log(Object.values(person));//["John", 30, "male"] Object.entries는 객체의 [key, value] 쌍으로 묶어서 2차원 배열로 반환한다console.log(Object.entries(pe.. 2025. 4. 3. [React🩵] 리액트의 리렌더링과 불변성 어느날 스프레드 연산자를 사용한 코드를 보다가 문득 든 생각 스프레드 연산자를 사용하면 기존의 배열을 모두 가져오게 되는데, 왜 굳이 다 가져와야할까?배열에서 원하는 요소만 이벤트를 주려면 id를 비교해서 해당 값만 변경하는 것이 더 효율적인 방법 아닐까? 라는 의문이 들었다 그 이유는 리액트는 상태가 변했을 때 리렌더링하기 때문이다새 배열을 전달 받아야만 "이 배열이 이전과 다른 배열이구나" 하고 인식을 하게 된다 그럼 여기서 또 든 의문... 왜 굳이 모든 값을 가져와서 새로운 배열을 만들어줘야할까? 그 이유는 "불변성(immutability)" 때문인데 완전히 새로운 배열을 전달해야 리렌더링이 일어난다 변경이 없는 부분까지 불필요하게 새로 만드는 것이 더 비효율적인 방법이 아닐까??리액.. 2025. 3. 29. [JavaScript] Map 배열 메서드 종합 .findIndex : 순서 찾기. 조건을 함수로 전달해야함. 못찾으면 -1를 반환 const arr = [ { id: 1, name: "피카츄" }, { id: 2, name: "파이리" }, { id: 3, name: "꼬부기" },];arr.findIndex(pokemon => pokemon.id === 2); // 👉 1arr.findIndex(pokemon => pokemon.name === "라이츄"); // 👉 -1 .indexof: 배열에서 값 찾기. 못찾으면 -1를 반환 const arr = [10, 20, 30, 40];arr.indexOf(30); // 👉 2arr.indexOf(50); // 👉 -1 (없으면 -1) 2025. 3. 28. [React🩵] a 태그와 Link 태그 a태그는 기본적으로 코드 실행 시 브라우저가 전체 페이지를 새로고침 하게 된다(전통적인 방식)이는 앱의 State가 초기화되는 문제가 발생할 수 있다이동하기 하지만 요즘은 SPA(Single Page Application) 방식 = JS를 이용해서 페이지를 동적으로 변경하는 방식이 일반적이다이때 Link 태그를 사용하면 브라우저의 새로고침 없이 페이지 전환이 가능하다import Link from 'next/link';function Home() { return ( About 페이지로 이동 );}export default Home; 구분a 태그Link 태그 기본동작페이지를 새로고침하여 이동새로고침없이 클라이언트 사이드에서 전환상태유지초기화됨유지됨속도전체 새로고침 되므로 상대적으.. 2025. 3. 20. [React🩵] 리액트 메모이제이션 총 정리! 01. 메모이제이션이란?메모이제이션은 이전에 계산된 결과를 저장해두고 동일한 입력값이 들어오면 다시 연산하지 않고 저장된 값을 반환한다리액터에서는 불필요한 렌더링을 방지하고, 성능을 향상시키기 위해 활용한다 불필요한 리랜더링을 방지하고 성능을 최적화한다비싼 연산의 재계산을 방지한다(데이터 필터링, 정렬 등)이벤트 핸들러나 콜백 함수의 재생성을 방지한다 02. React.memo컴포넌트가 변경되지 않으면 다시 렌더링 하지 않는다 컴포넌트가 동일한 props를 받을 때 불필요한 리렌더링을 방지한다내부적으로 얕은 비교(shallow comparison)를 수행하여 props가 변경되지 않으면 렌더링을 생략함 2-1. 기본 사용법const MemoizedComponent = React.memo(Compo.. 2025. 3. 18. [React🩵] Context ⬇️ 이전에 공부했던 props와 props drilling [React🩵] Props01. Props란?컴포넌트 끼리의 정보교환 방식부모 컴퍼넌트에서 자식 컴퍼넌트로 정보가 단방향으로 흐른다전달받은 자식 컴퍼넌트는 읽기만 가능하다(뷰어) 02. Props의 활용 방법function Mothersolby.tistory.com 01. props drilling의 문제점props란 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해주는 것을 말한다(단방향 데이터 흐름)props drilling이란 부모 컴포넌트에서 몇단계를 건너뛴 자식 컴포넌트로 데이터를 전달할 때 중간 단계의 컴포넌트가 불필요하게 props를 전달해야하는 문제를 의미한다ex. 부모 → 자식 → 손자 컴포넌트가 존재할 때 부.. 2025. 3. 14. [React🩵] useRef 01. useRefuseState와 더불어 특정 값을 저장하기 위해 사용하는 대표적인 React hook리랜더링과 상관없이 값을 기억하기 위해 사용되며(렌더링과 상관없이 변수를 유지), 자바스크립트 DOM API를 직접 사용하지 않고 DOM 요소에 직접 접근할 때 사용된다 02. 사용 방법import "./App.css";import { useRef } from "react";function App() { const ref = useRef("초기값"); //👈🏻초기 값 console.log("ref 1", ref); ref.current = "바꾼 값"; //👈🏻변경 값 console.log("ref 1", ref); return ( useRef에 대한 이야기.. 2025. 3. 14. 이전 1 2 3 4 ··· 14 다음
