JavaScript10 React에서 map 쓰는 패턴 정리 React에서 map 쓰는 패턴 정리React로 개발하다 보면 제일 많이 쓰는 게 진짜 진짜 map이다.리스트만 있다 하면 무조건 map으로 돌리고,API 데이터 받아오면 또 map,컴포넌트 반복 렌더링도 map,필터링해서 다시 그린 다음에도 결국 map… 거의 리액트 개발 = map을 얼마나 예쁘게 쓰느냐 싸움이라고 해도 될 정도. 근데 매번 사용할 때마다“여기 return 써야 했나?”“이건 ()로 감싸는 거였지?”“객체 반환할 때 왜 에러 나지?”이런 헷갈림들이 한 번씩은 꼭 온다. 그래서 이번에 내가 자주 쓰는 패턴 기준으로 map을 정리해봤다.1) map + {} + return 패턴로직이 좀 있는 경우에 내가 자주 쓰는 방식 {}(중괄호)이 나오면 JS는 “아 함수 몸체구나?”라고 인식한다.그.. 2025. 12. 2. 스택/큐 알고리즘 스택/큐 알고리즘📍스택LIFO (Last In First Out): 가장 마지막에 들어온 데이터가 가장 먼저 나가는 구조: 후입선출"쌓는다 → 꺼낸다"의 흐름책 더미, 웹 브라우저의 뒤로가기 버튼처럼, 가장 마지막에 넣은 것이 가장 먼저 처리됨push() – 데이터 삽입pop() – 데이터 꺼내기peek() – 맨 위의 값 확인 (제거는 안 함)JS 코드function createStack() { const items = []; return { push(element) { items.push(element); }, pop() { return items.length === 0 ? null : items.pop(); }, peek() { return.. 2025. 7. 4. 정렬 알고리즘 📍정렬💡정렬(Sorting)이란? 주어진 데이터를 일정한 기준에 따라 순서대로 나열하는 알고리즘📍선택 정렬배열에서 아직 정렬하지 않은 부분 중 가장 작은 값을 찾아서, 그 값을 현재 탐색 위치로 옮기는 것을 반복하는 정렬 방식→ 매번 남은 배열 중 최소값을 찾아 앞으로 보냄JS 코드function selectionSort(arr) { const n = arr.length; for (let i = 0; i 시간복잡도)외부 반복문: n-1내부 반복문: n - i번👉 1 + 2 + 3 + ... + (n - 1) = n(n - 1)/2 = O(n²)📍버블 정렬인접한 두 요소를 비교해 순서가 잘못되었으면 서로 교환하는 정렬 방식JS 코드function bubbleSor.. 2025. 6. 22. [코어자바스크립트] 7장. 클래스 [7장] 클래스1. 클래스와 인스턴스의 개념 이해상위클래스 - superclass하위클래스 - subclass2. 자바스크립트의 클래스생성자 함수 Array를 new 연산자와 호출하면 인스턴스가 생된다.이때 Array를 일종의 클래스라고 하면, Array의 prototype 객체 내부 요소들이 인스턴스에 상속된다고 볼 수 있다.인스턴스에 상속되는지(인스턴스가 참조하는지) 여부에 따라 스태틱 멤버와 인스턴스 멤버로 나뉜다.// 생성자 함수var Rectangle = function (width, height) { this.width = width this.height = height}// 프로토타입 메서드 정의Rectangle.prototype.getArea = function () { return .. 2024. 6. 18. [코어자바스크립트] 6장. 프로토타입 [6장] 프로토타입자바스크립트는 프로토타입 기반 언어클래스 기반 언어에서는 상속을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제함으로써 상속과 비슷한 효과를 얻는다.❓원형(prototype) 모든 객체는 다른 객체로부터 직접적으로 생성된다. 이 때 생성된 객체는 원본이 되는 객체를 원형이라고 부른다.1. 프로토타입의 개념 이해어떤 생성자 함수를 new 연산자와 함께 호출하면constructor에서 정의된 내용을 바탕으로 새로운 인스턴스가 생성된다.이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데이 프로퍼티는 constructor의 prototype이라는 프로퍼티를 참조한다.var suzi = new Person('Suzi')suzi.__proto_.. 2024. 6. 18. [코어자바스크립트] 5장. 클로저 [5장] 클로저1. 클로저의 의미 및 원리 이해클로저함수와 그 함수가 선언될 당시의 lexical envrionment의 상호관계에 따른 현상어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상→ 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상var outer = function () { var a = 1 var inner = function () { console.log(++a) } return inner}var outer2 = outer()console.log(outer2()) // 2console.log(outer2()) // 3inner 함수의 실행 결과가 아닌 inner함수.. 2024. 6. 17. 변수 선언 삼형제 var, let, const (feat. TDZ(Temporal Dead Zone)) 자바스크립트의 변수 선언할 때 제일 처음 배우는 var, let, const.... 이 셋을 집중비교해보면 TDZ라는 용어가 나온다..! TDZ에 대해 알아보자. 🤔👊🏻 ✨var vs. let vs. const특성varletconst범위(Scope)함수 범위 또는 전역 범위블록 범위블록 범위재선언(Redeclaration)가능불가능불가능재할당(Reassignment)가능가능불가능호이스팅(Hoisting)선언과 초기화가 함께 이루어짐선언만 호이스팅, 초기화는 이루어지지 않음선언만 호이스팅, 초기화는 이루어지지 않음일시적 사각지대(TDZ)해당 없음해당됨해당됨❓TDZ(Temporal Dead Zone)란let과 const로 선언된 변수가 호이스팅되는 과정에서 발생하는 일시적인 사각지대를 의미한다.변수는 .. 2024. 6. 14. [코어자바스크립트] 4장. 콜백 함수 [4장] 콜백 함수1. 콜백 함수란?콜백함수: 다른 코드의 인자로 넘겨주는 함수콜백함수는 제어권과 관련이 깊음어떤 함수 X를 호출하면서 특정 조건일 때 함수 Y를 실행해서 나에게 알려달라는 요청을 보내는 것임.2. 제어권📍호출시점❓제어권실행흐름 or 프로세스var count = 0;var cbFunc = function() { console.log(count); if (++count > 4) clearInterval(timer);};var timer = setInterval(cbFunc, 300);// 실행 결과// 0 (0.3초)// 1 (0.6초)// 0 (0.9초)// 1 (1.2초)// 0 (1.5초)code호출 주체제어권cbFunc()사용자사용자setInterval(cbFun.. 2024. 6. 14. [코어자바스크립트] 3장. this [3장] this❓this 대부분의 객체지향언어에서 - 클래스로 생성한 인스턴스 객체JS에서 - 어디서든 사용 가능 (상황에 따라 this가 바라보는 대상이 달라짐)→ 함수와 객체(메서드)의 구분이 느슨한 자바스크립트에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능임!1. 상황에 따라 달라지는 thisthis는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다.실행 컨텍스트는 함수를 호출할 때 생성함 = this는 함수를 호출할 때 결정된다.📍전역 공간에서의 this전역공간의 this = 전역객체브라우저에서의 전역객체 = windowNode.js에서의 전역객체 = globalvar a = 1console.log(a) // 1console.log(window.a) // 1 (브라우저 환경에.. 2024. 6. 14. 이전 1 2 다음
