JS 중급&패턴
TypeArray와 Array의 메서드 동작의 차이
1. TypedArray란?TypedArray는 ArrayBuffer를 기반으로 동작하는 고정 길이·고정 타입의 메모리 뷰(View)입니다.일반적인 Array와 달리, TypedArray는 메모리 상에 연속된 byte block으로 존재하여, C++ 수준에서 직접 접근이 가능합니다.즉 V8등 브라우저 엔진(C++) 내부에서는 이 메모리를 연속 메모리 기반으로 직접 연산하기 때문에 일반 Array보다 훨씬 빠른 처리가 가능합니다.ArrayBuffer 개념 구조ArrayBuffers 개념Where to use ArrayBuffer vs typed array in JavaScript? - Stack OverflowArrayBuffers는 물리 메모리에서 바이트 배열을 나타냅니다.ArrayBuffer는 바이트를..
더보기
JavaScript
[자바스크립트] 디바운스란 뭘까? 간단한 사용 예제
debounce()특정 함수가 여러번 반복 실행될 경우, 정해진 지연시간동안 반복된 호출을 마지막에 딱 1번만 호출하도록 제어해준다.사용법호출하고자 하는 함수를 첫 번째 인자로 넣고, 지연시간 을 두 번째 인자로 넣는다._.debounce(function() {}, 1000(ms))예제 See the Pen debounce by Jihee Eom (@bonjenny) on CodePen.https://velog.io/@chojs28/lodash-debounce-%EC%A0%95%EB%A6%AC
더보기
JavaScript
TypeArray와 Array의 메서드 동작의 차이
1. TypedArray란?TypedArray는 ArrayBuffer를 기반으로 동작하는 고정 길이·고정 타입의 메모리 뷰(View)입니다.일반적인 Array와 달리, TypedArray는 메모리 상에 연속된 byte block으로 존재하여, C++ 수준에서 직접 접근이 가능합니다.즉 V8등 브라우저 엔진(C++) 내부에서는 이 메모리를 연속 메모리 기반으로 직접 연산하기 때문에 일반 Array보다 훨씬 빠른 처리가 가능합니다.ArrayBuffer 개념 구조ArrayBuffers 개념Where to use ArrayBuffer vs typed array in JavaScript? - Stack OverflowArrayBuffers는 물리 메모리에서 바이트 배열을 나타냅니다.ArrayBuffer는 바이트를..
더보기
이터레이터 헬퍼 맛보기
https://roy-jung.github.io/iterator-helper-overview/?utm_source=substack&utm_medium=email 이터레이터 헬퍼 맛보기이터레이터 헬퍼?이터레이터 헬퍼(Iterator Helper)는 ECMAScript 2025(ES2025)에 새롭게 추가될 기능으로, 이터레이터를 더욱 편리하게 사용할 수 있도록 돕는 다양한 인터페이스의 집합입니다. ES2015에서roy-jung.github.io이터레이터 헬퍼?이터레이터 헬퍼(Iterator Helper)는 ECMAScript 2025(ES2025)에 새롭게 추가될 기능으로, 이터레이터를 더욱 편리하게 사용할 수 있도록 돕는 다양한 인터페이스의 집합입니다.ES2015에서 이터레이터 프로토콜이 도입된 이후, ..
더보기
require와 fetch의 차이점 정리
require와 fetch의 차이점 정리자바스크립트에서 require와 fetch는 전혀 다른 역할을 하는 기능입니다. 이 글에서는 두 함수의 목적, 사용 환경, 동작 방식 등의 차이를 정리합니다.✅ require (CommonJS 모듈 시스템)용도: 자바스크립트 코드에서 다른 파일이나 모듈을 불러올 때 사용사용 환경: Node.js동작 방식: 동기적(synchronous)예시:const fs = require('fs');특징:로컬 파일 또는 Node 내장 모듈을 불러옴파일 내용을 읽는 게 아니라, 모듈 전체를 가져와 실행✅ fetch (웹 API)용도: HTTP 요청을 보내서 외부 리소스를 가져올 때 사용사용 환경: 브라우저, 최신 Node.js 환경동작 방식: 비동기적(asynchronous) (Pr..
더보기
[자바스크립트] 디바운스란 뭘까? 간단한 사용 예제
debounce()특정 함수가 여러번 반복 실행될 경우, 정해진 지연시간동안 반복된 호출을 마지막에 딱 1번만 호출하도록 제어해준다.사용법호출하고자 하는 함수를 첫 번째 인자로 넣고, 지연시간 을 두 번째 인자로 넣는다._.debounce(function() {}, 1000(ms))예제 See the Pen debounce by Jihee Eom (@bonjenny) on CodePen.https://velog.io/@chojs28/lodash-debounce-%EC%A0%95%EB%A6%AC
더보기
[JS] 포커스 밀림 현상 해결, 스크롤 여백 scollIntoView
https://jjyabbu.tistory.com/124 element.scrollIntoView선택한 element가 있는 스크롤 영역에서 해당 element로 스크롤 시켜주는것임. 예를 들어 html과 css가 아래와 같이 되어있을 때 ... .overflow{ width:100px; height:200px; overflow:scroll; } .overflow section{ width:100px; hjjyabbu.tistory.comhttps://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView element.scrollIntoView - Web API | MDNElement 인터페이스의 scrollIntoView() 메소드는 scrollI..
더보기
컴포넌트는 어떻게 등장하게 되었는가
https://velog.io/@teo/separation-of-concerns-of-frontend 프론트엔드 개발자 관점으로 바라보는 관심사의 분리와 좋은 폴더 구조 (feat. FSD)최근 프론트엔드 개발에서 주목받는 FSD 아키텍쳐 폴더 구조를 주제로 소프트웨어 공학 관점에서의 관심사의 분리라는 원칙을 통해 설명하고자 했습니다. 이 글은 그동안 프론트엔드가 복잡성velog.io 우리는 언어를 3개나 배운다! 😆웹 개발을 하기 위해서 우리는 3가지 언어나 배워야 합니다.HTML과 CSS 그리고 Javascript 죠.어쩌다가 웹 개발은 언어를 3개나 하게 되었을까요?HTML은 웹을 표현하는데 있어서 상당히 유용한 언어입니다.한번 HTML없이 javascript만으로 웹페이지를 만든다고 생각해볼까요..
더보기
[Javascript] 비동기, Promise, async, await
function setTimeoutPromise(delay) { return new Promise((resolve) => { setTimeout(() => { console.log('setTimeoutPromise'); if (true) { // resolve(); } }, delay); });}console.log('setTimeoutPromise가 시작됩니다.');const promise = setTimeoutPromise(1000);promise.then(() => { console.log('끝났습니다!');});console.log('콘솔');위 소스코드를 실행하면 아래와 같은 결과가 나온다.https://imch.dev/posts/what-..
더보기
useEffect에 관한 고찰
1. useEffect를 쓰지 않으면 어떻게 될까?2. useEffect라는 구문을 사용함으로 인해서 내부는 어떻게 동작하게 될까?3. 아래와 같이 리턴문을 사용하는 이유는 뭘까?return () => clearInterval(id);return clearInterval(id);위와 같이 사용하면 안되는 걸까?
더보기
CS 지식
프로세스, 스레드, 프로세스와 스레드의 동작과정 차이
프로그램: 아직 메모리에 할당되지 않은 정적인 파일프로세스: 실행 중인 프로그램 (OS 입장에서의 최소작업단위)스레드: 프로세스 내에서 실행되는 실행 단위 (CPU 입장에서의 최소작업단위) 프로그램 -> 프로세스 -> 스레드프로그램은 아직 실행되지 않은 파일 그 자체를 가리키는 말이다. (Ex. 윈도우의 *.exe, MacOS의 *.dmg 등) 쉽게 말해서 그냥 코드 덩어리다. 자, 그러면 이제 그 실행 파일(프로그램)에게 의미를 부여하기 위해 프로그램을 실행하보자.프로그램을 실행하는 순간 해당 파일은 컴퓨터 메모리에 올라가게 되고, 이를 동적인 상태라고 하며, 이러한 상태의 프로그램을 프로세스라고 한다. 프로세스 -> 스레드과거에는 프로그램을 실행할 때 실행 시작부터 실행 끝까지 프로세스 하나만을 사용..
더보기
CS
보일러플레이트 코드란 (Boiler Plate) ?
요약BoilerPlate 코드란 모든 코드를 작성하기 위해 항상 필요한 부분을 의미한다. BoilerPlate는 다음 4가지로 구성되어 있다.Import : 필요한 코드를 불러들이는 부분Component : 현 페이지를 구현하는 코드StyleSheet : 페이지의 객체를 꾸미기 위한 styleExport : 현 Javascript 코드를 타 Javascript에서 접근하기 위한 부분 용어 정의코딩을 배우는 방법이 여러 가지 있겠지만, 그중 가장 쉽고 빠르게 결과를 만들 수 있는 방법은 바로 모방일 것이다.간혹 전문서적을 보며 공부하시는 분들도 봤지만, 대부분의 경우는 블로그, 유튜브, 스펙 문서 등을 참고하여 '무작정' 짜다 보면 많은 부분을 이해하지 못하더라도 내가 원하는 대로 동작하게 만드는 것은 쉽..
더보기
브라우저의 응답 캐싱 2 (+ Authorization 헤더란?)
브라우저의 응답 캐싱 2: Authorization 헤더란?브라우저가 HTTP 응답을 캐싱하는 방식과, Authorization 헤더의 동작 원리를 함께 이해하면 인증 흐름에 대한 직관이 생긴다. 특히 Basic Authentication을 사용하는 경우, 브라우저의 동작을 정확히 이해하지 않으면 로그아웃이 불가능한 현상에 봉착하게 된다.이 글에서는 다음과 같은 내용을 정리합니다.Basic Auth가 URL에 포함될 때 어떤 방식으로 동작하는지브라우저가 인증 정보를 기억하는 방식캐시와 인증 캐시의 차이이를 무력화하거나 조작하는 방법의미 없는 쿼리스트링의 효과1. Basic Auth와 URL다음과 같은 URL을 살펴보자:https://id:pw@xxx.domain.com/stats;json;norefres..
더보기
개발 용어에서의 함수와 수학에서의 함수의 차이 (feat.랜덤함수)
1. 개발 용어에서의 함수 (Function)개발에서 함수는 입력 값을 받아 처리한 후, 결과를 반환하는 코드 블록입니다. 함수는 재사용 가능하고, 특정 작업을 수행하는 데 필요한 로직을 그룹화하여 프로그램을 보다 효율적으로 만들 수 있습니다.입력 (인수, Arguments): 함수에 전달되는 데이터출력 (반환값, Return Value): 함수가 처리한 결과예시 (개발 용어):def add(a, b): return a + bresult = add(3, 5) # 결과: 8이 함수 add는 두 숫자 a와 b를 입력받아 그 합을 반환합니다.2. 수학에서의 함수 (Mathematical Function)수학에서 함수는 각각의 입력 값에 대해 정확히 하나의 출력 값을 매핑하는 규칙 또는 관계입니다. 입력..
더보기
[자료구조] Array, Vector, Linked List의 차이
ADT: Linked List,Not ADT: Array, Vector(≒ Dynamic Array)ADT순수하게 기능이 무엇인지를 나열한 것을 가리켜 '추상 자료형' 혹은 ADT라고 한다.특정 자료형과 그 자료형을 바탕으로 하는 기능들(함수들)의 집합이라고 생각하자.자료구조에 앞서 ADT를 알아야 하는 이유.자료구조의 간단한 예로 연결리스트, 스택을 들어보면연결리스트는 insert, delete 등과 같은 기능들(함수)과 함께 작동하는 자료구조이다.스택 역시 push, pop. peek, empty 등과 같은 기능들(함수)과 같이 정의되어야 비로소 작동하게 된다.그렇기에 자료구조(연결리스트, 스택, 큐 등)의 ADT는data를 담을 저장소를 만드는 것과data를 다루는 함수들을 정의하는 것을포함하는 개..
더보기
OtfficiAI: SV3D, LLM-based ultra-personalized AI shopping mall(A Study on the Innovative Approach of Shopping Mall such as Virtual Fitting and Search Augmentation)
더보기
프로세스, 스레드, 프로세스와 스레드의 동작과정 차이
프로그램: 아직 메모리에 할당되지 않은 정적인 파일프로세스: 실행 중인 프로그램 (OS 입장에서의 최소작업단위)스레드: 프로세스 내에서 실행되는 실행 단위 (CPU 입장에서의 최소작업단위) 프로그램 -> 프로세스 -> 스레드프로그램은 아직 실행되지 않은 파일 그 자체를 가리키는 말이다. (Ex. 윈도우의 *.exe, MacOS의 *.dmg 등) 쉽게 말해서 그냥 코드 덩어리다. 자, 그러면 이제 그 실행 파일(프로그램)에게 의미를 부여하기 위해 프로그램을 실행하보자.프로그램을 실행하는 순간 해당 파일은 컴퓨터 메모리에 올라가게 되고, 이를 동적인 상태라고 하며, 이러한 상태의 프로그램을 프로세스라고 한다. 프로세스 -> 스레드과거에는 프로그램을 실행할 때 실행 시작부터 실행 끝까지 프로세스 하나만을 사용..
더보기
[C#, JS, CS] 읽으면 좋을 링크 모음
C# 예제로 배우는 C# 프로그래밍 - yield 예제로 배우는 C# 프로그래밍 C# 웹 프로그래밍 - C# 프로그래밍 배우기 (Learn C# Programming) 방어적 프로그래밍 [Effective C# Item 3] 캐스트보다는 is, as가 더 좋다 C# 상속: base, base() 인터페이스와 추상클래스의 차이 ★★★읽기 전용으로 착각하기 쉬운 컬렉션★★★ 자료구조 프로세스? 스레드? 프로그램? 컴퓨터 운영체제(OS)는 어떻게 메모리를 관리할까? C# object 타입의 c# object ToString, GetType, GetHashCode, Equals 함수 설명 C# object 타입의 c# object ToString, GetType, GetHashCode, Equals 함수 재정의..
더보기
[CS] Array와 List의 차이
[자료구조] Array(배열) vs List(리스트) Goal 그래프의 기본 개념 이해 2021.12.16 - [자료구조] - [자료 구조] 자료 구조에 대한 이해 [자료 구조] 자료 구조에 대한 이해 Goal 자료 구조란 무엇인가 자료 구조를 왜 알아야 하는가 어떠한 자료 ongveloper.tistory.com (출처는 위 글임을 밝힌다.) 0. 결론 Array는 메모리 상에 데이터가 연속적으로 저장되고, List는 메모리 상에 데이터가 비연속적으로 저장된다. Array와 List의 차이를 묻는 것은 Array와 LinkedList의 차이를 묻는 것이 일반적이다. Array와 List, 둘 모두 선형 자료구조*로 동일한 용도로 사용하기에, 둘의 차이를 모르고 사용하는 경우가 많지만, 프로그래밍의 성능..
더보기
React.js
[React] state prev 는 무엇인가?
https://velog.io/@blee94/React-state-prev-%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%ED%95%9C%EB%B2%88-ARABOZA stateChange한번에 여러개의" data-og-host="velog.io" data-og-source-url="https://velog.io/@blee94/React-state-prev-%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%ED%95%9C%EB%B2%88-ARABOZA" data-og-url="https://velog.io/@blee94/React-state-prev-는-무엇인가-한번-ARABOZA" data-og-image="https://scr..
더보기
[React.js + TypeScript] react-dnd 안쓰고 드래그앤 드랍 구현하기
간단한 재정렬 기능을 가진 todolist이다.이동 시 해당 아이템이 마우스 커서를 따라오도록 구현:draggingItem 상태를 추가하여 현재 드래그 중인 아이템을 추적합니다.드래그 중인 아이템의 복사본을 마우스 커서 위치에 표시합니다.이동 시 커서가 e-resize 모양이 되도록 변경:각 todo 아이템에 cursor-e-resize 클래스를 추가했습니다.메뉴 목록을 가로로 나열하고 left-align 정렬: 요소에 flex flex-wrap gap-2 items-start 클래스를 적용하여 가로 정렬과 왼쪽 정렬을 구현했습니다.추가한 글자 길이에 맞게 아이템의 너비가 fit되도록 변경:각 요소에 inline-block 클래스를 추가하여 내용에 맞게 너비가 조정되도록 했습니다.드래그 중인 아이템의 ..
더보기
[React] MutableRefObject와 LegacyRef
[React] MutableRefObject와 LegacyRef출처: https://zerodice0.tistory.com/244 [React] MutableRefObject와 LegacyRefInput의 onChange에 setState를 할당해서 값이 바뀔때마다 상태값이 변경되도록 설정했더니, 매번 Input에 입력한 값이 변경될 때마다 렌더링이 다시 되는 기염을 토했다. 당연한 얘긴 줄 알고 있었는데zerodice0.tistory.com 우선 Input의 ref를 보면 요 녀석은 LegacyRef|undefined를 받게 되어있다. 요 녀석을 따라가보자. ref 자체가 LegacyRef나 undefined만 할당할 수 있는 녀석이었다. Input이 어째서 LegacyRef를 참조하는지는 Intri..
더보기
[React.19] 메모이제이션이 필요 없는 리액트 컴파일러
https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%99%84%EB%B2%BD-%EA%B0%80%EC%9D%B4%EB%93%9C-a6a0e96edc97 (번역) 리액트 컴파일러 사용법 — 완벽 가이드원문: https://www.freecodecamp.org/news/react-compiler-complete-guide-react-19/junghan92.medium.com리액트 컴파일러 사용하여 문제 해결하기다시 말씀드리면, 리액트 컴파일러는 빌드 과정에서 선택적으로 사용할 수 있는 도구입니다. 리액트..
더보기
React.memo, useMemo, useCallback 역할 및 차이점
https://develogger.kro.kr/blog/LKHcoding/112 React.memo, useMemo, useCallback 역할 및 차이점React.memo React는 컴포넌트를 렌더링 한 뒤, 이전 렌더된 결과와 비교하여 Dom 업데이트를 결정한다. 상황에 따라 이 과정의 속도를 높이기 위해 React.memo를 사용 한다. 먼저 HOC에 대해 알아보자. Reactdevelogger.kro.kr
더보기
[React] forwardRef란?
https://velog.io/@hygge31/forwardRef은 ref 속성에 값을 설정할 수 있지만,사용자 컴포넌트의 경우 ref 속성을 forwardRef 함" data-og-host="velog.io" data-og-source-url="https://velog.io/@hygge31/forwardRef" data-og-url="https://velog.io/@hygge31/forwardRef" data-og-image="https://blog.kakaocdn.net/dna/dzA6vL/hyWV0oYms3/AAAAAAAAAAAAAAAAAAAAADfbU-7XV6XEhRciA-lNOrbp00bg9EMWLjoLrb8fdP5-/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=xtOcln%2Ft8bbYo%2BzV4rP82wTAe%2FQ%3D
더보기
섹션 5: 렌더링 리스트 및 조건부 Content
섹션 5: 렌더링 리스트 및 조건부 Content 67. 모듈 소개 www.notion.so 67. 모듈 소개 Rendering Lists & Conditional content Working with Really Dynamic Content 지난 섹션에서: 다수의 컴포넌트와 작업하는 방법 state로 작업하고 사용자 이벤트를 다루는 방법 이번 섹션에서: Outputting Dynamic Lists Of content 목록과 조건부 컨텐츠를 렌더링하는 법 페이지에서 어떻게 다양한 데이터의 배열을 출력할 수 있는지 Rendering Content Under Certain Conditions 다양한 조건에서 다양한 컨텐츠들을 보여주는 법 68. 데이터의 렌더링 목록 목록의 동적 렌더링 목록이 총 몇 개가 생..
더보기
섹션 4: 리액트 State 및 이벤트 다루기
48. 모듈 소개 User Interaction & State Making Apps Interactive & Reactive 지난 섹션에서: 컴포넌트와 Props 이번 섹션에서: Handling Events 이벤트 핸들링 (클릭, 텍스트 입력창에 입력 등) 이벤트 핸들러를 추가하는 방법 Updating the UI & Working with “State” 사용자와의 상호작용 (화면에 표시되는 내용 변경, 목표 상태 도달 방법) State 조정 방법 (How Transition State A to State B) A Closer Look At Components & “State” State State: React & Components React allows you to create re-usable an..
더보기
HTML & CSS
[반응형 CSS] @media 쿼리, repeat auto-fit
이번 포스트에서는 최근 CSS Grid 레이아웃에서 자주 언급되는 auto-fit과 auto-fill의 차이점, minmax() 함수의 활용법, 그리고 미디어 쿼리 분기점 설정 시의 모범 사례에 대해 알아보겠습니다.1. auto-fit과 auto-fill의 차이점CSS Grid에서 repeat() 함수와 함께 사용되는 auto-fit과 auto-fill은 유사해 보이지만, 동작 방식에 차이가 있습니다.auto-fill: 그리드 컨테이너의 가용 공간에 맞춰 가능한 많은 열을 생성합니다. 남는 공간이 있더라도 빈 열을 유지하며, 콘텐츠가 없는 빈 셀을 생성합니다.auto-fit: auto-fill과 유사하게 가능한 많은 열을 생성하지만, 남는 공간이 있을 경우 빈 열을 제거하고, 기존의 셀이 그 공간을 채우..
더보기
[다크모드] light-dark 함수로 쉽게 구현
light-dark() 함수먼저 영상에 나온 light-dark()함수를 써서, prefer-color-scheme값이 dark인 상태에서 보여줄 화면을 구성하고 싶은데요 아 근데 prefer-color-scheme란.. 여러분이 설정한 "난 다크모드가 좋아 or 라이트모드가 좋아" 시스템 설정입니다 처음 들어보셨다면 그냥 light상태일걸요? 저도 건드린적 없습니다 딱히 암튼간에:root { color-scheme: light dark;} 일단 이렇게 해서 브라우저에게 "여기는 light와 dark 테마 모두 지원합니다~"라고 알려줍시다 이제, 라이트모드와 다크모드에서 각각 달라야 하는 색상이 있다면 light-dark()함수를 쓰면 되는데 예를 들어 이렇게 되어있다고 합시다body { color:..
더보기
[HTML] iOS에서 키보드 활성화 시 Viewport 문제 정리
1) iOS에서 키보드 활성화 시 Viewport 계산 문제문제 원인키보드로 인해 Viewport가 변경됨:iOS의 사파리에서 키보드가 표시되면 시각적 뷰포트 는 줄어들지만, 레이아웃 뷰포트는 같은 크기로 유지합니다.Android는 해당 키패드만큼 자동으로 줄여줍니다.getBoundingClientRect의 상대 위치:이 메서드는 요소의 뷰포트에 대한 상대적 위치를 반환합니다.Safari(iOS)에서는 키보드가 나타날 때 시각적 뷰포트 크기를 자동으로 줄여주지 않습니다.getBoundingClientRect가 반환하는 위치 정보 (top, left, right, bottom 등)(출처: https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingC..
더보기
태그가 iOS에서는 onFocus되지 않는 문제 {:toc}1. 태그의 Click과 Focus 동작일반적인 동작 요소를 클릭할 때, 브라우저와 운영체제에 따라 포커스가 해당 버튼으로 이동할지 여부가 결정됩니다.브라우저 별 동작(출처: https://en.spec-zone.ru/html/element/button) Spec-Zone.ru en.spec-zone.ru 데스크톱 브라우저Windows: 클릭 시 버튼에 포커스가 이동합니다.Mac(Firefox, Safari): 클릭해도 버튼에 포커스가 이동하지 않습니다.모바일 브라우저Android: 클릭 시 버튼에 포커스가 이동합니다.iOS: 클릭해도 버튼에 포커스가 이동하지 않습니다. 2. Safari와 WebKit의 포커스 동작 논쟁 (WebKit 버그 #22261)(출처: https://bugs.web..
더보기
C#
[C#] ArrayList와 List의 차이
[C# 기초] #11 : Collection(List, ArrayList) 안녕하세요! 극꼼입니다! 오늘부터는 Collection중 List와 ArrayList에 대해 배워보겠습니다 ㅎㅎ * Collection : https://geukggom.tistory.com/95 [서론] 자료구조 : 데이터를 구조적으로 구현하는 알고리즘 Collectio geukggom.tistory.com (출처는 위 글임을 밝힙니다.) 0. 서론 [CS] Array와 List의 차이 [자료구조] Array(배열) vs List(리스트) Goal 그래프의 기본 개념 이해 2021.12.16 - [자료구조] - [자료 구조] 자료 구조에 대한 이해 [자료 구조] 자료 구조에 대한 이해 Goal 자료 구조란 무엇인가 자료 구 bo..
더보기
[C#] public 필드 멤버 접근 vs 프로퍼티 멤버 접근
https://constructionsite.tistory.com/38 [C#] public 필드 vs 자동 구현 프로퍼티 비교 분석 이 글은 C#에서 public 필드(Field)와 자동 구현 프로퍼티(Auto-Implemented Property) 중 무엇을 사용해야 하는가 고민에서 시작하여, 필드와 자동 구현 프로퍼티의 차이점, 성능에 관해 실험해본 내용을 다 constructionsite.tistory.com 멤버 접근 필드 멤버 접근이 프로퍼티 멤버 접근보다 빠릅니다. class Gun //public 필드 { public int Bullet; public void Fire() { Bullet--; } } class Gun //자동 구현 프로퍼티 { public int Bullet { get; ..
더보기
15장. LINQ
1. 데이터! 데이터! 데이터! LINQ(Language INtegrated Query): C# 언어에 통합된 데이터 질의 기능 질의(Query)란 - From: 어떤 데이터 집합에서 찾을 것인가 - Where: 어떤 값의 데이터를 찾을 것인가 - Select: 어떤 항목을 추출할 것인가 class Profile { public string Name { get; set; } public int Height { get; set; } } Profile[] arrProfile = { new Profile() { Name="정우성", Height=186 }, new Profile() { Name="김태희", Height=158 }, new Profile() { Name="고현정", Height=172 }, ne..
더보기
14장. 람다식
1. 람다식, 너는 어디에서 왔니? 람다 계산법: 어떤 값을 변수에 대입하고 싶으면, 함수를 변수에 대입 2. 처음 만나는 람다식 익명 메소드: 무명 함수로, 입력(매개 변수)와 출력(반환 값)을 가지고 있음 기본적인 람다식 매개_변수_목록 => 식 람다식 선언 예 delegate int Calculate(int a, int b); static void Main(string[] args) { Calculate calc = (int a, int b) => a + b; } 형식 유추로 더 간단하게! Calculate calc = (a, b) => a + b; 만약에 대리자를 쓴다면 delegate int Calculate(int a, int b); static void Main(string[] args) {..
더보기
JS 중급&패턴
TypeArray와 Array의 메서드 동작의 차이
1. TypedArray란?TypedArray는 ArrayBuffer를 기반으로 동작하는 고정 길이·고정 타입의 메모리 뷰(View)입니다.일반적인 Array와 달리, TypedArray는 메모리 상에 연속된 byte block으로 존재하여, C++ 수준에서 직접 접근이 가능합니다.즉 V8등 브라우저 엔진(C++) 내부에서는 이 메모리를 연속 메모리 기반으로 직접 연산하기 때문에 일반 Array보다 훨씬 빠른 처리가 가능합니다.ArrayBuffer 개념 구조ArrayBuffers 개념Where to use ArrayBuffer vs typed array in JavaScript? - Stack OverflowArrayBuffers는 물리 메모리에서 바이트 배열을 나타냅니다.ArrayBuffer는 바이트를..
더보기
JavaScript
[자바스크립트] 디바운스란 뭘까? 간단한 사용 예제
debounce()특정 함수가 여러번 반복 실행될 경우, 정해진 지연시간동안 반복된 호출을 마지막에 딱 1번만 호출하도록 제어해준다.사용법호출하고자 하는 함수를 첫 번째 인자로 넣고, 지연시간 을 두 번째 인자로 넣는다._.debounce(function() {}, 1000(ms))예제 See the Pen debounce by Jihee Eom (@bonjenny) on CodePen.https://velog.io/@chojs28/lodash-debounce-%EC%A0%95%EB%A6%AC
더보기
TypeArray와 Array의 메서드 동작의 차이
1. TypedArray란?TypedArray는 ArrayBuffer를 기반으로 동작하는 고정 길이·고정 타입의 메모리 뷰(View)입니다.일반적인 Array와 달리, TypedArray는 메모리 상에 연속된 byte block으로 존재하여, C++ 수준에서 직접 접근이 가능합니다.즉 V8등 브라우저 엔진(C++) 내부에서는 이 메모리를 연속 메모리 기반으로 직접 연산하기 때문에 일반 Array보다 훨씬 빠른 처리가 가능합니다.ArrayBuffer 개념 구조ArrayBuffers 개념Where to use ArrayBuffer vs typed array in JavaScript? - Stack OverflowArrayBuffers는 물리 메모리에서 바이트 배열을 나타냅니다.ArrayBuffer는 바이트를..
더보기
이터레이터 헬퍼 맛보기
https://roy-jung.github.io/iterator-helper-overview/?utm_source=substack&utm_medium=email 이터레이터 헬퍼 맛보기이터레이터 헬퍼?이터레이터 헬퍼(Iterator Helper)는 ECMAScript 2025(ES2025)에 새롭게 추가될 기능으로, 이터레이터를 더욱 편리하게 사용할 수 있도록 돕는 다양한 인터페이스의 집합입니다. ES2015에서roy-jung.github.io이터레이터 헬퍼?이터레이터 헬퍼(Iterator Helper)는 ECMAScript 2025(ES2025)에 새롭게 추가될 기능으로, 이터레이터를 더욱 편리하게 사용할 수 있도록 돕는 다양한 인터페이스의 집합입니다.ES2015에서 이터레이터 프로토콜이 도입된 이후, ..
더보기
[자바스크립트] 디바운스란 뭘까? 간단한 사용 예제
debounce()특정 함수가 여러번 반복 실행될 경우, 정해진 지연시간동안 반복된 호출을 마지막에 딱 1번만 호출하도록 제어해준다.사용법호출하고자 하는 함수를 첫 번째 인자로 넣고, 지연시간 을 두 번째 인자로 넣는다._.debounce(function() {}, 1000(ms))예제 See the Pen debounce by Jihee Eom (@bonjenny) on CodePen.https://velog.io/@chojs28/lodash-debounce-%EC%A0%95%EB%A6%AC
더보기
[Javascript] 비동기, Promise, async, await
function setTimeoutPromise(delay) { return new Promise((resolve) => { setTimeout(() => { console.log('setTimeoutPromise'); if (true) { // resolve(); } }, delay); });}console.log('setTimeoutPromise가 시작됩니다.');const promise = setTimeoutPromise(1000);promise.then(() => { console.log('끝났습니다!');});console.log('콘솔');위 소스코드를 실행하면 아래와 같은 결과가 나온다.https://imch.dev/posts/what-..
더보기
useEffect에 관한 고찰
1. useEffect를 쓰지 않으면 어떻게 될까?2. useEffect라는 구문을 사용함으로 인해서 내부는 어떻게 동작하게 될까?3. 아래와 같이 리턴문을 사용하는 이유는 뭘까?return () => clearInterval(id);return clearInterval(id);위와 같이 사용하면 안되는 걸까?
더보기
CS 지식
프로세스, 스레드, 프로세스와 스레드의 동작과정 차이
프로그램: 아직 메모리에 할당되지 않은 정적인 파일프로세스: 실행 중인 프로그램 (OS 입장에서의 최소작업단위)스레드: 프로세스 내에서 실행되는 실행 단위 (CPU 입장에서의 최소작업단위) 프로그램 -> 프로세스 -> 스레드프로그램은 아직 실행되지 않은 파일 그 자체를 가리키는 말이다. (Ex. 윈도우의 *.exe, MacOS의 *.dmg 등) 쉽게 말해서 그냥 코드 덩어리다. 자, 그러면 이제 그 실행 파일(프로그램)에게 의미를 부여하기 위해 프로그램을 실행하보자.프로그램을 실행하는 순간 해당 파일은 컴퓨터 메모리에 올라가게 되고, 이를 동적인 상태라고 하며, 이러한 상태의 프로그램을 프로세스라고 한다. 프로세스 -> 스레드과거에는 프로그램을 실행할 때 실행 시작부터 실행 끝까지 프로세스 하나만을 사용..
더보기
보일러플레이트 코드란 (Boiler Plate) ?
요약BoilerPlate 코드란 모든 코드를 작성하기 위해 항상 필요한 부분을 의미한다. BoilerPlate는 다음 4가지로 구성되어 있다.Import : 필요한 코드를 불러들이는 부분Component : 현 페이지를 구현하는 코드StyleSheet : 페이지의 객체를 꾸미기 위한 styleExport : 현 Javascript 코드를 타 Javascript에서 접근하기 위한 부분 용어 정의코딩을 배우는 방법이 여러 가지 있겠지만, 그중 가장 쉽고 빠르게 결과를 만들 수 있는 방법은 바로 모방일 것이다.간혹 전문서적을 보며 공부하시는 분들도 봤지만, 대부분의 경우는 블로그, 유튜브, 스펙 문서 등을 참고하여 '무작정' 짜다 보면 많은 부분을 이해하지 못하더라도 내가 원하는 대로 동작하게 만드는 것은 쉽..
더보기
개발 용어에서의 함수와 수학에서의 함수의 차이 (feat.랜덤함수)
1. 개발 용어에서의 함수 (Function)개발에서 함수는 입력 값을 받아 처리한 후, 결과를 반환하는 코드 블록입니다. 함수는 재사용 가능하고, 특정 작업을 수행하는 데 필요한 로직을 그룹화하여 프로그램을 보다 효율적으로 만들 수 있습니다.입력 (인수, Arguments): 함수에 전달되는 데이터출력 (반환값, Return Value): 함수가 처리한 결과예시 (개발 용어):def add(a, b): return a + bresult = add(3, 5) # 결과: 8이 함수 add는 두 숫자 a와 b를 입력받아 그 합을 반환합니다.2. 수학에서의 함수 (Mathematical Function)수학에서 함수는 각각의 입력 값에 대해 정확히 하나의 출력 값을 매핑하는 규칙 또는 관계입니다. 입력..
더보기
[자료구조] Array, Vector, Linked List의 차이
ADT: Linked List,Not ADT: Array, Vector(≒ Dynamic Array)ADT순수하게 기능이 무엇인지를 나열한 것을 가리켜 '추상 자료형' 혹은 ADT라고 한다.특정 자료형과 그 자료형을 바탕으로 하는 기능들(함수들)의 집합이라고 생각하자.자료구조에 앞서 ADT를 알아야 하는 이유.자료구조의 간단한 예로 연결리스트, 스택을 들어보면연결리스트는 insert, delete 등과 같은 기능들(함수)과 함께 작동하는 자료구조이다.스택 역시 push, pop. peek, empty 등과 같은 기능들(함수)과 같이 정의되어야 비로소 작동하게 된다.그렇기에 자료구조(연결리스트, 스택, 큐 등)의 ADT는data를 담을 저장소를 만드는 것과data를 다루는 함수들을 정의하는 것을포함하는 개..
더보기
OtfficiAI: SV3D, LLM-based ultra-personalized AI shopping mall(A Study on the Innovative Approach of Shopping Mall such as Virtual Fitting and Search Augmentation)
더보기
프로세스, 스레드, 프로세스와 스레드의 동작과정 차이
프로그램: 아직 메모리에 할당되지 않은 정적인 파일프로세스: 실행 중인 프로그램 (OS 입장에서의 최소작업단위)스레드: 프로세스 내에서 실행되는 실행 단위 (CPU 입장에서의 최소작업단위) 프로그램 -> 프로세스 -> 스레드프로그램은 아직 실행되지 않은 파일 그 자체를 가리키는 말이다. (Ex. 윈도우의 *.exe, MacOS의 *.dmg 등) 쉽게 말해서 그냥 코드 덩어리다. 자, 그러면 이제 그 실행 파일(프로그램)에게 의미를 부여하기 위해 프로그램을 실행하보자.프로그램을 실행하는 순간 해당 파일은 컴퓨터 메모리에 올라가게 되고, 이를 동적인 상태라고 하며, 이러한 상태의 프로그램을 프로세스라고 한다. 프로세스 -> 스레드과거에는 프로그램을 실행할 때 실행 시작부터 실행 끝까지 프로세스 하나만을 사용..
더보기
[CS] Array와 List의 차이
[자료구조] Array(배열) vs List(리스트) Goal 그래프의 기본 개념 이해 2021.12.16 - [자료구조] - [자료 구조] 자료 구조에 대한 이해 [자료 구조] 자료 구조에 대한 이해 Goal 자료 구조란 무엇인가 자료 구조를 왜 알아야 하는가 어떠한 자료 ongveloper.tistory.com (출처는 위 글임을 밝힌다.) 0. 결론 Array는 메모리 상에 데이터가 연속적으로 저장되고, List는 메모리 상에 데이터가 비연속적으로 저장된다. Array와 List의 차이를 묻는 것은 Array와 LinkedList의 차이를 묻는 것이 일반적이다. Array와 List, 둘 모두 선형 자료구조*로 동일한 용도로 사용하기에, 둘의 차이를 모르고 사용하는 경우가 많지만, 프로그래밍의 성능..
더보기
[React.js + TypeScript] react-dnd 안쓰고 드래그앤 드랍 구현하기
간단한 재정렬 기능을 가진 todolist이다.이동 시 해당 아이템이 마우스 커서를 따라오도록 구현:draggingItem 상태를 추가하여 현재 드래그 중인 아이템을 추적합니다.드래그 중인 아이템의 복사본을 마우스 커서 위치에 표시합니다.이동 시 커서가 e-resize 모양이 되도록 변경:각 todo 아이템에 cursor-e-resize 클래스를 추가했습니다.메뉴 목록을 가로로 나열하고 left-align 정렬: 요소에 flex flex-wrap gap-2 items-start 클래스를 적용하여 가로 정렬과 왼쪽 정렬을 구현했습니다.추가한 글자 길이에 맞게 아이템의 너비가 fit되도록 변경:각 요소에 inline-block 클래스를 추가하여 내용에 맞게 너비가 조정되도록 했습니다.드래그 중인 아이템의 ..
더보기
[React] forwardRef란?
https://velog.io/@hygge31/forwardRef은 ref 속성에 값을 설정할 수 있지만,사용자 컴포넌트의 경우 ref 속성을 forwardRef 함" data-og-host="velog.io" data-og-source-url="https://velog.io/@hygge31/forwardRef" data-og-url="https://velog.io/@hygge31/forwardRef" data-og-image="https://blog.kakaocdn.net/dna/dzA6vL/hyWV0oYms3/AAAAAAAAAAAAAAAAAAAAADfbU-7XV6XEhRciA-lNOrbp00bg9EMWLjoLrb8fdP5-/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=xtOcln%2Ft8bbYo%2BzV4rP82wTAe%2FQ%3D
더보기
섹션 5: 렌더링 리스트 및 조건부 Content
섹션 5: 렌더링 리스트 및 조건부 Content 67. 모듈 소개 www.notion.so 67. 모듈 소개 Rendering Lists & Conditional content Working with Really Dynamic Content 지난 섹션에서: 다수의 컴포넌트와 작업하는 방법 state로 작업하고 사용자 이벤트를 다루는 방법 이번 섹션에서: Outputting Dynamic Lists Of content 목록과 조건부 컨텐츠를 렌더링하는 법 페이지에서 어떻게 다양한 데이터의 배열을 출력할 수 있는지 Rendering Content Under Certain Conditions 다양한 조건에서 다양한 컨텐츠들을 보여주는 법 68. 데이터의 렌더링 목록 목록의 동적 렌더링 목록이 총 몇 개가 생..
더보기
섹션 4: 리액트 State 및 이벤트 다루기
48. 모듈 소개 User Interaction & State Making Apps Interactive & Reactive 지난 섹션에서: 컴포넌트와 Props 이번 섹션에서: Handling Events 이벤트 핸들링 (클릭, 텍스트 입력창에 입력 등) 이벤트 핸들러를 추가하는 방법 Updating the UI & Working with “State” 사용자와의 상호작용 (화면에 표시되는 내용 변경, 목표 상태 도달 방법) State 조정 방법 (How Transition State A to State B) A Closer Look At Components & “State” State State: React & Components React allows you to create re-usable an..
더보기
[HTML] iOS에서 키보드 활성화 시 Viewport 문제 정리
1) iOS에서 키보드 활성화 시 Viewport 계산 문제문제 원인키보드로 인해 Viewport가 변경됨:iOS의 사파리에서 키보드가 표시되면 시각적 뷰포트 는 줄어들지만, 레이아웃 뷰포트는 같은 크기로 유지합니다.Android는 해당 키패드만큼 자동으로 줄여줍니다.getBoundingClientRect의 상대 위치:이 메서드는 요소의 뷰포트에 대한 상대적 위치를 반환합니다.Safari(iOS)에서는 키보드가 나타날 때 시각적 뷰포트 크기를 자동으로 줄여주지 않습니다.getBoundingClientRect가 반환하는 위치 정보 (top, left, right, bottom 등)(출처: https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingC..
더보기
{:toc}1. 태그의 Click과 Focus 동작일반적인 동작 요소를 클릭할 때, 브라우저와 운영체제에 따라 포커스가 해당 버튼으로 이동할지 여부가 결정됩니다.브라우저 별 동작(출처: https://en.spec-zone.ru/html/element/button) Spec-Zone.ru en.spec-zone.ru 데스크톱 브라우저Windows: 클릭 시 버튼에 포커스가 이동합니다.Mac(Firefox, Safari): 클릭해도 버튼에 포커스가 이동하지 않습니다.모바일 브라우저Android: 클릭 시 버튼에 포커스가 이동합니다.iOS: 클릭해도 버튼에 포커스가 이동하지 않습니다. 2. Safari와 WebKit의 포커스 동작 논쟁 (WebKit 버그 #22261)(출처: https://bugs.web..
더보기
15장. LINQ
1. 데이터! 데이터! 데이터! LINQ(Language INtegrated Query): C# 언어에 통합된 데이터 질의 기능 질의(Query)란 - From: 어떤 데이터 집합에서 찾을 것인가 - Where: 어떤 값의 데이터를 찾을 것인가 - Select: 어떤 항목을 추출할 것인가 class Profile { public string Name { get; set; } public int Height { get; set; } } Profile[] arrProfile = { new Profile() { Name="정우성", Height=186 }, new Profile() { Name="김태희", Height=158 }, new Profile() { Name="고현정", Height=172 }, ne..
더보기
14장. 람다식
1. 람다식, 너는 어디에서 왔니? 람다 계산법: 어떤 값을 변수에 대입하고 싶으면, 함수를 변수에 대입 2. 처음 만나는 람다식 익명 메소드: 무명 함수로, 입력(매개 변수)와 출력(반환 값)을 가지고 있음 기본적인 람다식 매개_변수_목록 => 식 람다식 선언 예 delegate int Calculate(int a, int b); static void Main(string[] args) { Calculate calc = (int a, int b) => a + b; } 형식 유추로 더 간단하게! Calculate calc = (a, b) => a + b; 만약에 대리자를 쓴다면 delegate int Calculate(int a, int b); static void Main(string[] args) {..
더보기
[Postgre SQL] select 결과 없을 때 (select return 0 rows 0 total rows)
https://enterone.tistory.com/337 select return (0 row 0 total rows) null 결과 출력처리방법쿼리에서 조건을 걸어 데이터가 return 0 row일때 쿼리에서 "값이 없다" 라는 결과를 리턴값으로 처리하는 방법을 사용해보려한다. 1. 테이블 생성하기 CREATE TABLE `CODE_TABLE` ( `CODE_CD` VARCHAR(10) NOT NULL Centerone.tistory.com쿼리에서 조건을 걸어 데이터가 return 0 row일때쿼리에서 "값이 없다" 라는 결과를 리턴값으로 처리하는 방법을 사용해보려한다. 1. 테이블 생성하기CREATE TABLE `CODE_TABLE` ( `CODE_CD` VARCHAR(10) NOT NULL ..
더보기
[PostgreSQL] DUAL 테이블이란?
https://goodahn.tistory.com/54 PostgreSQL에서 DUAL 테이블 사용하기DUAL 테이블이란 Oracle database에는 테이블의 생성 없이 함수 혹은 계산식을 임시로 테스트 할 수 있도록 일종의 더미 테이블인 "DUAL" 테이블을 제공합니다. 예를 들어, || 연산자를 테스트 하기 위해goodahn.tistory.comDUAL 테이블이란Oracle database에는 테이블의 생성 없이 함수 혹은 계산식을 임시로 테스트 할 수 있도록 일종의 더미 테이블인 "DUAL" 테이블을 제공합니다.예를 들어, || 연산자를 테스트 하기 위해서 SELECT 쿼리를 사용하려고 하는데 테이블을 생성할 필요가 없는 것입니다.https://livesql.oracle.com/ 에서 테스트 결..
더보기
[SQL] DB 정리 파일 모음
1장. DB 기본 [SQL] 1장. DB 기본 1. 데이터 데이터: 현실에 존재하는 사실들을 숫자/문자로 표현한 것 Ex) 이름: 김땡땡 사는 곳: 서울시 2. 파일 시스템 파일 시스템: 데이터를 파일로 관리하기 위해 파일을 생성, 삭제, 수정, 검색 bonjenny.tistory.com 2장. 주요 키워드 [SQL] 2장. 주요 키워드 1. 주요 키워드 - 데이터: 각 항목에 저장되는 값 - 개체(entity): 실체, 객체, 엔티티로 명명함. 즉 업무에 필요하고 유용한 정보를 저장하고 관리하기 위한 "집합" ex) 학생이라는 엔티티는 학버, 이 bonjenny.tistory.com 3장. 자료형 [SQL] 3장. 자료형 자료형 자료형: 해당 컬럼에 저장되는 데이터의 유형 1) 숫자형-정수형 TINYI..
더보기
[백준] 11444. 피보나치 수 6
11444번: 피보나치 수 6 첫째 줄에 n이 주어진다. n은 1,000,000,000,000,000,000보다 작거나 같은 자연수이다. www.acmicpc.net 1. 재귀를 사용하여 푸는 방법 def fib(n): return (0 if n == 0 else 1) if n
더보기
Anaconda 설치 & Spyder PATH 설정
https://memme.tistory.com/190 Anaconda 설치 & Spyder PYTHONPATH 설정Anaconda 설치 Anaconda 설치 시 파이썬 기본 프로그램(기본 라이브러리)과 함께 많이 사용되는 외부 패키지(라이브러리)와 통합 개발 환경(Spyder)을 한번에 설치함으로 따로 환경을 설치 할 필요가 없memme.tistory.comAnaconda 설치Anaconda 설치 시 파이썬 기본 프로그램(기본 라이브러리)과 함께 많이 사용되는 외부 패키지(라이브러리)와 통합 개발 환경(Spyder)을 한번에 설치함으로 따로 환경을 설치 할 필요가 없다.*참고 : 파이썬의 경우 OS 설치 시 자동으로 설치되어있는 경우가 있다. 설치방법은 아주 간단.아래 URL에서 본인의 OS 버전에 맞는..
더보기
