전체 글153 JavaScript 실행컨텍스트(Execution Context) 이해하기 Execution Context(실행 컨텍스트)란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.자바스크립트는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아 올린 후 실행하며 코드의 환경과 순서를 보장스택은 LIFO(Last In, First Out)의 구조로 마지막에 들어온 정보를 가장 먼저 접근한다.한다.여기서 환경이란 전역공간 또는 함수 내부의 환경이 될 수 있다. ✅ 예제var temp = 'temp'; function b (){ console.log('안녕하세용');} function a (){ b();} a(); (1) 콜스택에는 전역 컨텍스트말고 다른 컨텍스트는 없기 떄문에 전역 컨텍스트와 관련된 코드를 진행한다.(2) 전역 컨텍스트와 관련된 코드를 진행 .. 2025. 2. 28. Error: EBUSY: resource busy or locked, rmdir 키보드에서 Windows 키 와 R을 눌러 실행 명령 상자를 열고 다음을 입력하세요.resmon.exe확인을 클릭하여 리소스 모니터를 엽니다.모니터에서 CPU 탭 으로 이동합니다.검색 상자의 관련 핸들 에서 해당 파일 또는 폴더 경로 를 복사하여 붙여넣습니다.검색아이콘을 클릭하세요해당 파일이나 폴더를 사용하는 모든 프로그램을 볼 수 있어야 합니다.각각 마우스 오른쪽 버튼을 클릭하고 프로세스를 종료합니다.이제 파일이나 폴더에서 하려고 했던 것을 계속하세요. https://stackoverflow.com/questions/55212864/error-ebusy-resource-busy-or-locked-rmdir 2025. 2. 27. [React] 새 프로젝트 설치 + tailwindcss 설치 npm create vite@latest [프로젝트명] --template react-ts 위 설치 후 아래의 공식문서 그대로 따라하기 https://tailwindcss.com/docs/installation/using-vite Installing with Vite - InstallationIntegrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.tailwindcss.com 2025. 2. 21. [RN] forwardRef를 사용하는 이유 1. forwardRef 없이 구현하는 경우import React, { useRef, useState } from "react";import { TextInput, View, Button } from "react-native";// CustomInput 컴포넌트 (ref를 사용하지 않음)const CustomInput = ({ value, onChangeText }) => { return ( );};const App = () => { const [text, setText] = useState(""); const inputRef = useRef(null); const focusInput = () => { if (inputRef.current) { inputRef.current.. 2025. 2. 21. [RN] 프로젝트 시작하기 (+svg 넣는법) 1. expo 설치당연히 node 설치되어 있어야 함npx create-expo-app@latest 폴더명cd 폴더명 yarn 설치도 바로 하면 됨 2. expo app 실행npx expo satrt// yarnyarn start 3. npm run reset-projectsvg 넣기 1. 라이브러리 설치yarn add react-native-svgyarn add --dev react-native-svg-transformer 2. Update the Metro ConfigurationOpen your metro.config.jsconst { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");const defaultConf.. 2025. 2. 13. [RN] Failed to build iOS project. "xcodebuild" exited with error code 65. build 에러 Run script build phase '[CP-User] [Hermes] Replace Hermes for the right configuration, if needed' will be run during every build because it does not specify any outputs. To address this issue, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'hermes-engine' from project 'Pods')› .. 2025. 2. 11. [RN] FlatList 사용 시 스크롤 막고 싶을 때 데이터가 적어서 화면 밖으로 나가지 않을때에도 FlatList를 사용하면 위아래로 스크롤 시 요소가 움직인다.이를 막기 위해 찾아보니 1 ? [groupedData.length - 1] : undefined} scrollEnabled={groupedData.length > 3} renderItem={/* 생략 */} keyExtractor={(item) => item.orderDate}/> stickyHeaderIndices에 데이터의 갯수를 주고scrollEnabled에는 화면에 넘어가지 않을만큼의 제한 갯수를 정해준다. 2025. 2. 6. [RN] 기초 개념 이해하기 1. StyleSeet를 사용하지 않아도 css 적용은 가능. 하지만 사용하면 자동완성이 되어 사용하기 훨씬 편하다. 2. React Native는 이전에 제공하는 API와 Components가 훨씬 많았다. 하지만 유저 관리와 업데이트 및 빠른 속도를 위해 최소화하였고 필요한 컴포넌트들은 커뮤니티 라이브러리를 사용해야한다. 그래서 버그가 있거나 업데이트가 늦은 라이브러리가 많을 수 있다. (React Native와 Expo에서 기본제공하는 것 먼저 사용할 라이브러리 찾아보기!) 3. 리액트 네이티브에서는 flex가 기본적으로 column 값을 가지고 있다. 행 나열을 하기 위해서는 flexDirection:"row"를 주면 된다. 4. 레이아웃을 그릴 때에는 width나 height 값을 사용하지 않는.. 2025. 1. 20. Redux 사용법 Redux의 핵심 개념Store : 애플리케이션의 전역 상태를 보관Action : 상태를 변경하기 위한 "의도"를 나타내는 객체Reducer : Action에 따라 상태를 업데이트하는 순수 함수Dispatch : Aciton을 Store로 보내는 메서드Selector : 상태를 조회하기 위한 함수 Redux 사용법1. Redux 설치npm install @reduxjs/toolkit react-redux @reduxjs/toolkit은 Redux를 쉽게 사용할 수 있도록 도와주는 공식 도구 2. 간단한 예제 Store 설정// src/store/counterSlice.tsimport { createSlice } form '@reduxjs/toolkit';const counterSlice = createS.. 2025. 1. 12. [모던 리액트 Deep Dive] 4장 서버 사이드 렌더링 4.1 서버 사이드 렌더링이란?4.1.1 싱글 페이지 애플리케이션의 세상 싱글 페이지 애플리케이션이란?렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다.최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트와 브라우저의 history.pushState와 history.replaceState로 이뤄지기 때문에 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리하므로 싱글 페이지 애플리케이션이라고한다. 실제로 소스 보기로 HTML 코드를 봤을 때는 내부에 아무런 내용이 없다. 이는 사이트 렌더링에 필요한 내부의 내용을 모두 자바스크립트 코드로 삽입한 이후에 렌더링하기 .. 2025. 1. 10. (퀵/병합) 정렬 개념 정리 정렬의 종류1. 버블 정렬 (Bubble Sort)가장 기초적인 정렬시간복잡도: O(n²)구현이 쉽지만 비효율적 2. 선택 정렬 (Seletion Sort)가장 작은/큰 원소를 선택해서 정렬시간복잡도: O(n²)버블정렬보다 실제 교환 횟수가 적음3. 삽입 정렬 (Insertion Sort)작은 데이터셋에서 효율적시간복잡도: O(n²)거의 정렬된 데이터에서 매우 효율적4. 퀵 정렬 (Quick Sort)실제로 가장 많이 사용되는 정렬평균 시간복잡도: O(nlogn)분할 정복 방식5. 병합 정렬 (Merge Sort)안정적인 정렬 알고리즘시간복잡도: O(nlogn)추가 메모리 공간 필요퀵 정렬과 병합 졍렬을 학습하면 좋은 점분할 정복(Divide and Conquer) 패러다임의 대표적인 예시재귀적 문제 해.. 2025. 1. 8. 힙 개념 정리 힙이란?완전 이진 트리 형태의 자료구조이다.우선순위가 있는 데이터를 저장하고 관리하는 특별한 트리다. 완전 이진 트리란?모든 레벨이 왼쪽부터 차례대로 채워진다.마지막 레벨을 제외한 모든 레벨이 완전히 채워져 있어야 한다.앞 줄부터 왼쪽에서 오른쪽에서 차례대로 앉은 것처럼, 노드들이 순서대로 채워진다. 힙의 종류최대 힙: 부모 노드가 자식 노드보다 항상 큰 힙 자료구조 (부모 > 자식)최소 힙: 부모 노드가 자식 노드보다 항상 작은 힙 자료구조 (부모 힙의 특징항상 완전 이진 트리 형태를 유지부모 - 자식 간의 대소 관계만 중요(형제 노드 간의 관계는 상관 없음)배열로 구현하면 쉽게 관리 가능최소 힙 예시// 배열[0, 1, 2, 3, 4, 5, 6]// 배열 -> 힙 변환 그림 0 .. 2025. 1. 7. 이전 1 2 3 4 ··· 13 다음
