- 전체보기(45)
- JavaScript(9)
- 제이쿼리(5)
- React(5)
- jquery(5)
- typescript(5)
- http(4)
- 웹 브라우저(4)
- CSS(3)
- js(3)
- github pages(3)
- 메소드(3)
- DOM(3)
- 고도몰(3)
- tcp(3)
- html(3)
- server(2)
- 타입스크립트(2)
- XMLHTTPRequest(2)
- webpack(2)
- Fetch(2)
- 실행 컨텍스트(2)
- url(2)
- Immutable(2)
- 리액트(2)
- 토큰(2)
- npm(2)
- URI(2)
- cookie(2)
- next.js(2)
- Generic(2)
- OSI 7 Layer(2)
- ssg(2)
- 세션(2)
- ajax(2)
- babel(2)
- 자바스크립트(2)
- promise(2)
- session(2)
- component(2)
- REST API(2)
- Token(2)
- transport layer(2)
- shell(2)
- Kernel(2)
- bebel(2)
- client(2)
- emotion(2)
- SSR(2)
- Cache(2)
- 스코프(2)
- svelte(2)
- 컴포넌트(2)
- jekyll(2)
- yarn(2)
- API(2)
- 깊은 복사(1)
- Presentation Layer(1)
- web browser(1)
- BEM(1)
- 호출 스택(1)
- boiler-plate(1)
- 순수함수(1)
- 싱글 스레드(1)
- 인터프리터 언어(1)
- 불변성(1)
- TCP/IP(1)
- clock(1)
- declaration file(1)
- GET(1)
- POST(1)
- esbuild(1)
- session storage(1)
- parsing(1)
- 4-way Handshake(1)
- framer-motion(1)
- Elements(1)
- merge(1)
- rebase(1)
- align self(1)
- stack(1)
- REST(1)
- Proxy(1)
- heap(1)
- 쿠키(1)
- 관심의 분리(1)
- align items(1)
- static site generation(1)
- package manager(1)
- 솔루션(1)
- yarn-berry(1)
- 샵바이(1)
- 종속성(1)
- 함수형 프로그래밍(1)
- 객체(1)
- Web Storage(1)
- divergent branches(1)
- velog(1)
- 유지보수(1)
- normalize css(1)
- OSI 7계층(1)
- PORT(1)
- 전송 계층(1)
- callback(1)
- fast-forward only(1)
- 리덕스(1)
- AMD(1)
- CommonJS(1)
- Module(1)
- array method(1)
- 페이지스(1)
- call stack(1)
- cascading(1)
- 백그라운드 동작(1)
- 프론트엔드(1)
- 엘리먼트(1)
- Dispatch(1)
- 프로토타입(1)
- 클린 코드(1)
- 매개변수(1)
- 시스템 전역설치(1)
- Execute Context(1)
- css 상대 단위(1)
- Recoil(1)
- 데이터 단위(1)
- Prototype(1)
- await(1)
- webview(1)
- 인트라넷(1)
- Modifier(1)
- 물리계층(1)
- secret mode(1)
- Data Link Layer(1)
- event loop(1)
- loader(1)
- zshrc(1)
- bash(1)
- URN(1)
- 선언파일(1)
- async(1)
- 비동기(1)
- paint(1)
- parameter(1)
- script 태그(1)
- Network Layer(1)
- XML(1)
- Flex(1)
- export(1)
- host(1)
- vpn(1)
- 인터넷 프로토콜 스위트(1)
- 네트워크 대역폭(1)
- Viewport(1)
- ip(1)
- 인수(1)
- reducer(1)
- 콜백함수(1)
- 스키마(1)
- layout(1)
- Proxy Server(1)
- selector(1)
- 웹 서버(1)
- nuxt.js(1)
- 벨로그(1)
- cli(1)
- https(1)
- bundler(1)
- 번들러(1)
- JWT(1)
- 컴파일 언어(1)
- json(1)
- Latency(1)
- 웹 호스팅(1)
- npx(1)
- const(1)
- 카페24(1)
- box-sizing(1)
- mount(1)
- 캐시(1)
- CSS in JS(1)
- 아키텍처(1)
- interface(1)
- 인터페이스(1)
- 프로토콜(1)
- woff2(1)
- async/await(1)
- Content Delivery Network(1)
- pnpm(1)
- data type(1)
- segment(1)
- zsh(1)
- Jotai(1)
- 스벨트(1)
- react-query(1)
- local storage(1)
- Application Layer(1)
- flow(1)
- new(1)
- 가상 element(1)
- 비트맵(1)
- 쇼핑몰(1)
- 쇼핑몰 솔루션(1)
- nvm(1)
- stringify()(1)
- 컴파일러(1)
- SSL/TLS(1)
- Session Layer(1)
- 선택자(1)
- Native(1)
- styled components(1)
- Constructor(1)
- repaint()(1)
- Context API(1)
- 벡터(1)
- CSR(1)
- 렌더링(1)
- dependency(1)
- Dom 조작(1)
- 로더(1)
- suffix(1)
- tsconfig.json(1)
- hardware(1)
- manifest.json(1)
- 데이터 타입(1)
- decoupling(1)
- 정적 웹 사이트(1)
- CDN(1)
- custom hook(1)
- stand alone(1)
- css selector(1)
- data(1)
- spa(1)
- rem(1)
- parse()(1)
- Meta Data(1)
- components(1)
- bundle(1)
- JSX(1)
- 지킬(1)
- nest(1)
- Physical Layer(1)
- CSSOM(1)
- 스크립트 언어(1)
- function as child(1)
- svg(1)
- rendering(1)
- 의존성(1)
- code(1)
- 번들 도구(1)
- 재사용성(1)
- 사용자 개인 디렉토리(1)
- block(1)
- reset-css(1)
- 정적 타입 검사 도구(1)
- prefix(1)
- Throttling(1)
- 체인(1)
- 깃허브(1)
- DOM tree(1)
- ES6(1)
- 원시타입(1)
- 참조타입(1)
- SDK(1)
- reflow(1)
- 통신계층(1)
- grid(1)
- 프로토타입 체인(1)
- nhn(1)
- em(1)
- zustand(1)
- redux(1)
- closure(1)
- align content(1)
- Flag(1)
- 광고수익(1)
- element(1)
- 인터프리터(1)
- swc(1)
- chrome(1)
- pwa(1)
- scope(1)
- headless(1)
- xhr(1)
- canvas(1)
- Composite(1)
- 쿠기(1)
- 자사몰(1)
- 개발 블로그(1)
- routing(1)
- argument(1)
- new 연산자(1)
- Compound(1)
- 자바스크립트 엔진(1)
- 프로세스(1)
- 얉은 복사(1)
- 플랫폼(1)
- JSON Server(1)
- Internet Protocol Suite(1)
- scss(1)
- object(1)
- cors(1)
- asynchronous(1)
- ruby(1)
- front end(1)
- hydration(1)
- 3 Way-Handshake(1)
웹 브라우저의 동작 순서 1
웹 성능 웹 성능은 개발자의 주요 관심사 중 하나입니다. 그리고 웹 성능에 영향을 미치는 주요 항목은 '지연시간'과 '싱글 스레드'입니다. 지연시간 싱글 스레드 웹 브라우저는 싱글 스레드로 동작합니다. 따라서 메인 스레드의 책임을 줄여주는 방시긍로 웹 성능 향상을
실행 컨텍스트 정리 1 (by 모던 자바스크립트 Deep Dive)
자바스크립트 엔진은 2개의 과정으로 나누어 소스코드를 처리합니다.소스코드의 평가소스코드의 실행모든 소스코드는 실행에 앞서 평가 과정을 거치고 실행하기 위한 준비를 합니다.평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문을 먼저 실행합니다.여기서 생성된
Effective TypeScript 내용 정리 1
타입스크립트는 자바스크립트이 상위 집합(superset)입니다.자바스크립트는 타입스크립트의 부분 집합(subset)입니다.모든 자바스크립트 프로그램은 타입스크립트입니다.하지만 모든 타입스크립트 프로그램은 자바스크립트가 아닙니다. 자바스크립트가 아닌 타입스크립트 프로그램
Github Pages + JS 정리 1
로컬에서 변경사항 확인 bundle exec jekyll serve 명령어를 실행하면 로컬에서 Jekyll을 사용하여 정적 웹사이트를 생성하고, 내장된 개발 서버를 통해 웹사이트를 호스팅합니다. 이렇게 실행하면 실시간 변경을 확인할 수 있는 이유는 다음과 같습니다:
Github Pages - 정적 사이트 만들기 1
Github Pages와 Jekyll의 관계 GitHub Pages는 정적 웹사이트 호스팅 서비스를 제공하는 플랫폼으로, GitHub 리포지토리에 있는 정적 파일들을 호스팅하여 웹사이트를 제공합니다. 이때 정적 파일은 HTML, CSS, JavaScript, 이미지 등
CS 지식 + Github Pages
JSON Server JSON Server는 개발 및 프로토타이핑을 위한 가상 REST API를 생성하는 도구입니다. 이를 사용하면 간단한 JSON 파일로 가짜 API를 만들어서 데이터를 관리하고 응답을 제공할 수 있습니다. 주로 프론트엔드 개발자들이 프론트엔드 애플리
Next.js + TypeScript 내용 정리
Next.js tsconfig.json 타입스크립트 컴파일러의 동작을 설정하는 '설정 파일'로서, 컴파일 시 어떤 옵션을 사용하고 어떤 파일을 포함 또는 제외할지를 정의합니다. 파일 확장자 그대로 json 형태로 작성되어 있습니다. 선언 파일(Declaration
CSS 기본 정리
css 속성 align-items align-items 속성은 Flex 컨테이너 내의 모든 아이템들의 수직 정렬 방식을 설정합니다. 이 속성은 아이템들을 단일 행(row) 또는 열(column) 내에서 수직 정렬하는 데 사용됩니다. flex-start: 아이템들을 컨
CSS 지식 / SSG
CSS 가상 엘리먼트 가상 element after, before CSS에서 ::before와 ::after는 가상 엘리먼트(pseudo-elements)로, HTML 요소의 내용(content) 앞이나 뒤에 콘텐츠를 생성하거나 스타일을 적용할 때 사용됩니다. 이러한
redux 원리
Redux 리덕스는 애플리케이션의 상태가 하나의 중앙 스토어에서 관리되므로, 상태의 일관성을 유지하고 예측 가능함을 보장합니다. 이는 애플리케이션의 모듈화와 독립성을 강화하여 코드의 유지보수성을 높이고, 결합도를 낮추는 데 도움을 줍니다. decoupling Deco
Front-end 도구 및 라이브러리 정리
스타일링 라이브러리 Emotion Emotion은 JavaScript를 사용하여 CSS 스타일을 관리하는 라이브러리로, React와 다른 프레임워크에서 사용할 수 있습니다. Emotion은 CSS-in-JS 스타일링 방식을 채택하여, 컴포넌트와 함께 스타일을 선언하고
react 상태관리도구
Context API React의 Context는 컴포넌트 간에 데이터를 전달하는 메커니즘을 제공하는 React API입니다. 일반적으로 React 컴포넌트는 상위 컴포넌트로부터 데이터를 props로 전달받습니다. 그러나 컴포넌트 트리의 여러 단계를 거치는 경우, 중간
React Headless 컴포넌트 개발 패턴
Headless 패턴 Headless 개념은 소프트웨어 개발에서 주로 사용되는 용어로, 사용자 인터페이스(UI)를 가지지 않은 컴포넌트 또는 서비스를 의미합니다. 일반적으로 웹 애플리케이션 또는 CMS(Content Management System)과 같은 시스템에서
[웹 브라우저] 렌더링 과정 + 구성요소
웹 브라우저 렌더링 과정 1. 파싱(Parse) 웹 브라우저는 HTML, CSS 및 JavaScript와 같은 웹 페이지의 리소스를 서버로부터 가져옵니다. 그리고 가져온 리소스들은 파싱되어 문서 객체 모델(DOM) 및 CSS 객체 모델(CSSOM)로 변환됩니다. 이 단
javascript 코드 관리 용어 정리
nest React에서 "nest"라는 개념은 컴포넌트 계층 구조를 구성하는 것을 의미합니다. Nesting은 컴포넌트를 다른 컴포넌트 내에 중첩시키는 것을 말합니다. React에서는 UI를 작은 단위의 재사용 가능한 컴포넌트로 구성합니다. 이러한 컴포넌트들은 계층
JavaScript 비동기 작업
JavaScript는 싱글 스레드 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 왜냐하면 코드를 읽고 실행하는 'stack'이 하나만 존재하기 때문이죠. 동기 작업은 순차적으로 실행되며, 이전 작업이 완료되어야 다음 작업이 실행됩니다. 한 작업이 실행 중
REST API, JSON,
REST API rest 아키텍쳐 스타일에 부합하는 api를 의미합니다. 자원에 대한 식별 변하지 않는 고유한 식별자 -> URI를 통해 자원을 식별 representational state transfer : 표현된 자원의 상태 JSON JSON(JavaScri
웹 브라우저 동작, React 용어, 타입스크립트 개념 정리
웹 브라우저 동작원리 Elements > Decoupling(디커플링, 탈동조화) : 경제용어로는 한 나라의 경제가 보편적이고 세계적인 경기 흐름과 독립적으로 움직이는 현상을 의미합니다. 예를 들어 글로벌 경기침체 시기에 특정 국가는 계속 성장하고 있을 때, 디커플링
CS 지식 + JavaScript 기본
세그먼트(segment) 영어 뜻 자체로 '분할, 단편, 구분' 등의 의미가 있습니다. 기하학에서는 서로 다른 두 점을 연결하는 가장 짧은 선인 선분입니다. CS에서는 구성 또는 분할의 개념에서 사용하는 기본 단위를 의미합니다. transport layer에서는 교환되
HTTP + OSI 7계층
Bebel 브라우저 별로 최신 ECMAScript(JavaScript) 문법을 지원하지 않는 경우에 대응하기 위해, JavaScript 코드를 이전 버전에서 호환되는 버전으로 변환해주는 컴파일러입니다. 이 덕분에 브라우저 지원 또는 호환을 기다리지 않고 바로 새로운 표