웹 접근성을 위한 태그 웹 접근성을 고려한 HTML 태그의 다양한 성질이 있다. 그 중, <button>과 시멘틱 태그의 성질에 대해 살펴보자. Button 태그의 기본 타입 <button> 태그는 type 속성을 가져, 해당 버튼의 타입을 나타낸다. 그 중 type 속성의 속성 값은 다음과 같다...

웹 팩 대표적인 번들러 도구 여러 개의 자바스크립트 모듈들을 하나의 파일로 묶어주는 역할을 함. React의 웹 팩 도구로, rollup이 있음. 장점: 전역 변수 충돌 문제 해결, 빌드 속도 향상 웹 팩의 주요 속성 webpack.config.js 웹 팩이 실행될 때 참조하는 설정 파일 웹 팩의 주요 속성과 ...

CDN Content Delivery Network, 컨텐츠 전송 네트워크 분산되어 있는 여러 서버에 컨텐츠를 캐싱하여, 사용자와 가까운 곳에서 빠르게 전송하는 시스템 CDN의 탄생 배경 스트리밍 서비스가 발달하면서, 인터넷 대역폭의 주 컨텐츠가 비디오가 되었음. 따라서, 비디오와 같이 큰 용량의 컨텐츠를 전송시 네...

프로세스 모델 소프트웨어 생명 주기는 다음과 같은 프로세스를 거친다. 이러한 프로세스를 포함한 다양한 모델이 존재한다. 대표적인 모델 2가지, 폭포수 모델과 애자일 모델에 대해 살펴보자. 폭포수 모델, Waterfall 1970년대 소개된 오래된 프로세스 모델 각 단계가 다음 단계 시작 전에 끝남. → 순차적...

공유 자원, Shared Resource 위 이미지의 빨간 영역에 있는 자원들을 공유 자원으로 설명할 수 있다. 즉, 각 프로세스, 스레드가 함께 접근할 수 있는 자원이나 변수이다. 보통, 파일이나 데이터, 코드 등이 이에 해당한다. 이 공유 자원에, 두 개 이상 프로세스가 동시에 읽거나 쓰게 된다면? 임계 영역, Cr...

전에, 프로세스와 스레드를 다룬 내용의 글을 쓴 적이 있었다. GunBlog, 프로세스와 스레드의 차이는?! GunBlog, 멀티 프로세스와 멀티 스레드란?! 하지만, 내용이 부실함을 느꼈고, 심화적인 내용을 바탕으로 글을 정리하고자 한다. 프로세스 컴파일 과정 프로세스 컴파일은 크게 4가지 과...

CPU에 대해 Central Processing Unit, 중앙 처리 장치 컴퓨터의 주요 요소 중 하나로, 인간의 뇌와 같은 역할을 한다. 이는 연산, 제어, 기억과 같은 다양항 기능을 한다. CPU의 구조 CPU는 크게 3가지의 구조로 나눌 수 있다. 산술/논리 연산부(ALU): 모든 산술 연산과 ...

운영체제란?! 컴퓨터 하드웨어와 컴퓨터 사용자 간의 중재자 역할을 하는 프로그램 즉, 애플리케이션과 사용자 간의 제어와 조정을 담당하는 역할을 한다. OS 예시: Linux, Windows, MAC 등… 운영체제가 하는 일 컴퓨터 시스템에서, 운영체제는 다음과 같은 위치에 있다. ...

HTTP란?! Hyper Text Transfer Protocol 즉, 종단 시스템간 데이터를 주고 받기 위한 통신 규약 또는 프로토콜을 의미한다. 초기에는 뜻에서 알 수 있듯이, 하이퍼텍스트 문서를 전송하는 규약으로 동작했다. 현재는 거의 모든 형태의 데이터 전송이 가능하다. 예: HTML, Text, Image...

MAC 주소란?! 데이터 링크 계층에서 통신을 위해, 네트워크 인터페이스에 할당된 고유 식별자 OSI 계층 모델에서 다음과 같이 주소 체계를 가지며, 자신만의 주소 기법을 가진다. LAN 주소 또는 Physical(물리) 주소 라고도 한다. MAC 주소의 특징 48비트로 구성되어, 이론상 총 2의 ...

네트워크의 PDU Protocol Data Unit OSI 모델에서 네트워크 통신을 설명할 때, 나타나는 데이터 단위들이 존재한다. 이 때 사용하는 데이터 단위를 PDU라 한다. 계층별 PDU 계층별로 PDU의 명칭은 구분된다. 제어 정보가 담긴 헤더(Header)와 데이터가 담긴 본문(Payload)으로 구성...

네트워크의 패킷 우리는 흔히 네트워크 통신을 설명할 때, OSI 7계층을 사용하곤한다. 이렇게 나뉘어진 계층으로, 종단 간 송수신 과정을 설명한다. 패킷은 이러한 계층 중 하나에서 사용하는 전송 단위로, 여기서는 네트워크 계층의 전송 단위이다. 네트워크의 패킷은 다음과 같은 데이...

프론트엔드에서의 테스트란?! 테스트는 소프트웨어 개발 단계에서 중요하게 이뤄지는 절차적인 확인 방법이다. 프론트엔드에서의 테스트는 어떻게 이뤄질까? 프론트엔드에서의 테스트 코드 프론트엔드에서 중점적으로 확인해야할 점은 UI가 예상하는대로 잘 동작하는지를 확인하는 것이다. 이를 확인하기 위한 자동화된 테스트의 코드를 테스트 ...

시간 복잡도 Time Complexity 입력 값과 연산 수행 시간의 상관관계를 나타내는 척도 알고리즘을 풀 때, 다음과 같이 시간 초과가 나는 경우가 본 적이 있을 것이다. 이와 같이, 알고리즘은 효율성도 중요한 척도이기 때문에, 계산하는 방법을 알아야한다! 시간 복잡도 표기법, 빅오 표기법(Big-O)...

HTTP와 HTTP의 차이는 무엇인가? HTTP는 종단 시스템간 데이터를 주고 받기 위한 통신 규약 또는 프로토콜을 의미한다. 그렇다면 HTTPS는 무엇인가? HTTP HTTP: Hyper Text Transfer Protocol 초기, 하이퍼텍스트 문서를 전송하는 규약 현재, 거의 모든 형태의 데이터 전송 가능 ...

MVC는 뭐고, MVVM는 무엇인가? 데이터를 렌더링하고 처리하는 다양한 아키텍처 디자인 패턴이 있다. 이 중, 우리는 MVC와 MVVM에 대해 알아보고자 한다. MVC 패턴 MVC 패턴은 Model(데이터), View(화면), Controller(컨트롤러)로 구성딘 디자인 패턴이다. Model : 애플리케이션의 데이...

알고리즘 풀이 방식 분류 여러 알고리즘 문제를 풀기 위한 다양한 방식이 존재한다. 어떤 상황에서 어떤 알고리즘을 적용해야하는지 알아보자. 모듈러 연산 % 기본적으로, 어떤 숫자를 다른 숫자로 나눈 나머지를 구할 때 데이터가 순환하여 반복하는 구조인 경우(원형적 자료구조) 에라토스테네스의 체 여러 개의 수가 소수인지 판별할 ...

Props drilling이란 무엇인가? Props drilling은 부모 컴포넌트에서 자식 컴포넌트로 props를 넘겨줄 때, 중첩된 자식 컴포넌트로 계속 넘겨 주면서 전달하는 형태다. Props drilling 장점 명시적인 값을 사용하여, 어떤 props를 받았는지 확인 가능 값이 어떤 흐름으로 전달되는지 확인 가능 ...

자식 컴포넌트에서도 props를 변경할 수 있는가? 부모로부터 props를 받는 자식 컴포넌트에서 props 변경은 불가능하다. 그렇다면, 그런 식의 변경은 불가능할까? useState 훅을 활용하여 바꿔보자 다음과 같이, 자식 컴포넌트에서도 값을 바꿔보자. 부모 컴포넌트로부터 setState(상태 업데이트) 함수를 전달 받는다...

재조정(Reconciliation)은 무엇인가?! React를 사용하는 이유는 빠른 렌더링에 있다. 이 빠른 렌더링은 React에서 사용하는 Virtual DOM과, 기존 Virtual DOM과 비교하여, 차이가 있는 부분만 실제 DOM에 적용하여 이뤄낸다. 재조정(Reconciliation)의 구현 재조정은 크게 두 가지 방식으로 구...

JSX는 무엇인가?! JavaScript XML(eXtensible Markup Language) JavaScript로 마크업을 편하게 작성하기 위해 만든 새로운 언어 형식 확장자를 .jsx를 사용. 그렇다면, JSX는 어떻게 컴파일이 될까? 브라우저가 JSX을 읽는 방법 JSX는 직접 읽을 수 없음. 따라서, 자...

mutable과 immutable은 무엇인가? 뜻에서도 알 수 있듯이, 각각 가변과 불변의 의미를 담는 말이다. 정확히 무슨 의미가 있을까? mutable 데이터가 변할 수 있는 경우 참조(reference) 타입 mutable한 데이터의 복사, 변경 mutable 메서드 pop, push, u...

package.json & package-lock.json의 역할 패키지를 관리하는 매니저로 npm과 yarn을 주로 사용한다. 특히, npm install로 프로젝트를 위한 모듈들을 설치할 때 여러 기본파일들이 설치된다. 여기서 설치되는 이 파일들은 무엇인가? package.json 파일 프로젝트의 기본 ...

ES6에서 생긴 큰 변화들 ES6란?! ECMA Sciprt 6 ES2015라고도 불림 2015년에 도입된 자바스크립트 표준안 가장 큰 변화가 일어난 ES 버전 변화 1. const & let 기존의 var 키워드가 가지는 한계를 보완한 변수 키워드 등장 블록 스코프를 가지는 키워드 공통적으로, 재선언 ...

구조 분해 할당이란?! ES6부터 객체 or 배열의 값을 추출해서 바로 할당할 수 있는 편리한 문법이 도입되었다. 미리 분할해서 값을 명시하는 방법으로, 비구조화 할당이라고도 부른다. 배열 구조 분해 할당 const [a, b, c] = [25, 26, 27]; console.log(a); // 25 console....

프로토타입(prototype)은 무엇인가?! 프로토타입은 사전적 의미로, 최종 결과물이 나오기 전 만들어보는 시제품 or 초기 모델을 의미한다. 자바스크립트는 특히, 프로토타입 기반 객체지향 프로그래밍 언어이다. 자바스크립트에서의 프로토타입은, 객체의 원형을 의미한다. 따라서, 자바스크립트의 모든 객체는 프로토타입을 가지며, 프로토...

실행 컨텍스트(Excution Context)란?! 실행 컨텍스트(Excution Context)는 코드가 실행되기 위해 필요한 환경을 제공하는 객체다. 지난 번 Record와 Outer를 포함한 렉시컬 환경을 포함한다. [Tech] 클로저와 렉시컬 스코프/환경, 렉시컬 환경에 대해 이 실행 컨텍스트는 호출 스택에 쌓여서, 호출되면 관...

클로저(Closure)란?! 클로저는 내부 함수가 자신이 선언될 때의 환경의 범위(= Lexical Scope)를 기억하여, 함수가 해당 범위 밖에서 호출되어도 해당 범위에 접근할 수 있는 함수를 말한다. function 외부함수() { var 값 = 10; var 내부함수 = function () { console.log(값);...

메서드 체이닝이란?! const input = require("fs") .readFileSync(0) .toString() .trim() .split("\n") .map(Number); console.log(input); 위의 예시와 같이, 하나의 메서드가 반환한 값을 다음 메서드에게 넘겨주며 연결하여 호출하는 형태를 메서드...

map과 forEach란?! 두 키워드는 엄연히 다른 용도의 키워드이다. 어떤 유사한 차이점이 있는지 확인하자. map은?! 배열의 요소를 순회하며, 콜백함수를 적용한 새로운 배열 생성. 원본 배열을 변경하지 않음! forEach는?! 배열의 요소를 순회하며, 반환 값이 없는 반복문. 원본 배열을 직접 변경함! ...

이벤트 루프란?! 자바스크립트에서 비동기 동작을 처리하기 위한 것이다. 브라우저 내부 구성요소 자바스크립트를 사용하는 브라우저에는 이벤트 루프를 포함한 구성 요소가 있다. 구성 요소는 Call Stack, Web API, Callback Queue가 있다. 또, Callback Queue는 마이크로태스크 큐와 태스크 큐로 ...

콜백함수란 무엇인가?! 직역하면, 다른 함수에 매개변수로 넘겨주는 함수. function 함수AB(매개변수A, 매개변수B, ..., 콜백함수명) { 콜백함수명() } 함수AB(변수A, 변수B, ..., 콜백함수) 즉, 매개변수로 변수 or 값이 아닌, 함수를 전달하는 형태. 콜백함수 전...

Sync와 Async의 차이는 무엇일까? Sync 요청에 대한 응답을 기다리고 동작을 수행한다. 말 그대로, 동기 작업. Async 요청에 대한 응답을 기다리지 않고 다음 동작을 수행한다. 말 그대로, 비동기 작업. 콜백함수, Promise, async & await으로 처리 가능. 블로킹과 논블로킹...

List, Map, Set의 자료구조 자바스크립트의 자료구조에 대해 알아보자. List 순서가 있고, 데이터 중복을 허용. 인덱스를 통해 데이터에 접근 가능. 가변적인 크기와 배열이라고도 불림. Map key에 value를 매핑하는 자료구조. key 중복은 허용하지 않고, 순서도 없음. value 중복은 허용...

멀티 프로세스와 멀티 스레드란?! 앞서 개념에서, 프로세스와 스레드의 차이를 알아봤다. 구분되는 특징으로, 프로세스끼리는 자원 공유가 없고 스레드끼리는 공유되는 자원이 있다는 것이다. 멀티 프로세스 여러 개의 프로세스로 구성한 프로그램에서, 각 프로세스가 하나의 작업을 처리하는 것을 의미. I/O 요청이 많을 때 사용하는...

객체 지향 프로그래밍이란?! Object Oriented Programming라 불리는 객체 지향 프로그래밍. 협력의 관점, 즉 여러 개의 독립된 단위인 객체들의 모임으로 파악하고자 하는 것을 의미하고. 각각의 객체는 서로 메시지를 주고 받고 데이터를 처리할 수 있도록, 상호작용으로 로직을 구성하는 프로그래밍 방법이다. 객체 지향 ...

ES6에서 화살표 함수를 언제, 왜 쓸까? 화살표 함수(Arrow Function)를 언제, 왜 쓰는지를 알아보자. 함수를 만드는 다양한 방법 함수 선언식 function func() {...} 함수 표현식 let func = function() {...} // 익명 함수 let...

React의 생명 주기란?! 컴포넌트 기반 라이브러리, React. 각 컴포넌트에는 생명 주기(라이프 사이클)가 존재. 이 생명 주기는 생성 ⇒ 업데이트 ⇒ 제거 단계로 크게 나눌 수 있다. 생명주기 함수는 클래스 컴포넌트에서만 사용 가능하다. 함수형 컴포넌트에서는 Hooks로 대체 되었다. 생성 단계, Mountin...

CORS란?! Cross-Origin Resource Sharing, 교차 출처 자원 공유 정책 자바스크립트는 기본적으로, Same-Origin Policy(동일 출처 정책)의 보안 규칙이 존재한다. 동일 출처 정책이란?! 자바스크립트로 다른 웹페이지에 접근할 때는 같은 출처(same origin)의 페이지에만 접...

Sass(SCSS)란?! Syntactically Awesome Style Sheets 라고 불리는 CSS 전처리기이다. 기존의 CSS의 단점(한계)을 보완하기 위한 CSS 확장판이다. CSS에 비해, 어떤 장점(특징)을 갖고 있을까? Sass: Syntactically Awesome Style Sheets CSS가 갖고 있...

var, let, const는 무슨 차이가 있을까? 셋은 모두 변수 선언 키워드로, 변수를 선언하거나 할당하는 기능을 한다. 셋은 어떤 차이가 있는지 알아보자. var, let, const var는 변수 재선언, 재할당 모두 가능. let는 변수 재선언 불가능, 재할당 가능. const는 변수 재선언, 재할당 모두 불가능....

require와 import의 차이는 무엇인가? 자바스크립트 코드를 작성하면, 상단 부에 다음과 같은 코드를 작성한 적이 있을 것이다. const inp = require('fs') import pkg from "./package.js" 둘은 공통적으로, 외부 파일이나 라이브러리 코드를 ...

렌더링 중에 자바스크립트가 실행되면 렌더링이 멈추는 이유 지난 번, HTML + CSS + JS 렌더링 방식에서, 자바스크립트 실행시 멈추는 동작을 확인했다. 브라우저의 렌더링 원리, HTML 렌더링 방식 왜 자바스크립트가 실행되면, 렌더링이 멈출까? 렌더링 도중, 자바스크립트가 실행된다면? 브라우저의 렌더링 엔...

null, undefined, undeclared, NaN은 무엇인가? 특정 수치 중, 빈 값이나 불가능한 값을 나타낸다. 자세히 어떻게 나뉘어지는지 확인해보자. null 빈 값 null이라는 빈 값을 할당했을 때, 생기는 타입. let nothing = null; undefine...

SPA, CSR, SSR은 무엇인가? 각각은 렌더링 방식을 설명할 때 나타내는 용어들이다. 렌더링 방식은 어떻게 차이가 있는지, 페이지를 어떻게 불러오는지 확인해보자. SPA, Single Page Application 최초 한번의 페이지를 받아오고, 이 후 새로운 페이지를 받아오지 않는 웹 애플리케이션. 데이터 변경이...

실행 문맥(실행 컨텍스트) 실행 컨텍스트는 자바스크립트 코드가 실행되기 위해 필요한 환경을 제공하는 객체다. 이 실행 컨텍스트를 콜 스택에 쌓아서, 가장 위에 쌓여 있는 컨텍스트와 관련 있는 코드를 실행한다. 이 방식으로, 코드의 환경과 순서를 보장한다. 실행 컨텍스트의 Lexical Environment RE...

타입스크립트 (TypeScript) 타입스크립트는 기존의 자바스크립트에서 추가적으로, 정적(static)인 타입을 명시하는 특징을 지닌다. 이로 인해, 코드에 목적을 명시할 수 있다는 장점이 있다. 또한, 목적에 맞지 않은 타입의 변수 or 함수들을 사전에 제거 가능하다. 타입스크립트의 정적 타입 타입스크립트는 타입을 명시적으...

이벤트 전파 이벤트 객체가 생성되면, 이벤트를 발생시킨 타킷 요소(DOM 요소)를 중심으로 DOM 트리를 통해 이벤트 전파가 발생한다. 이벤트 전파 방향 구분 DOM 트리의 계층적인 구조에 의해, 이벤트 전파는 부모-자식 사이에서 발생한다. 이벤트 버블링 자식(타깃) 요소에서 발생한 이벤트가 부모 요소로 전파하는 방식 이...

마이크로태스크 큐, 태스크 큐 지난 번 이벤트 루프에 대해서 살펴볼 때, 자바스크립트에서 콜백함수가 처리되는 과정을 확인했다. 위의 그림과 같이, 콜백함수는 Callback Queue라는 곳을 거치는데 사실 두 종류의 마이크로태스크 큐와 태스크 큐로 나뉘어서 작업을 진행한다. 해당 큐에 대해 자세히 알아보자. 마이크로태스크 큐와 태스크...

자바스크립트 동작 원리, 이벤트 루프(Event Loop) 자바스크립트에서 비동기 동작을 위한 것으로, 이벤트 루프가 존재한다. 브라우저 내부 구성요소 이벤트 루프 Call Stack이 다 비워지면, Callback Queue에 있는 함수를 하나씩 Call Stack으로 옮긴다. 비동기 함수들을 적절하게 실행하도록 돕는다. ...

자바스크립트에서 비동기적으로 코딩하기 비동기 작업을 위한 다양한 자바스크립트 기능을 살펴보자. 동기와 비동기 비동기는 자료가 순서대로 실행되지 않고 무작위의 순서로 실행되는 특성이다. 따라서, 이로 인해 페이지가 멈추지 않고 사용자와의 상호작용 유지가 가능하다. 이를 위한 JavaScript 기능에 대해 알아보자. Promise ...

JavaScript는 어떤 언어일까? JavaScript는 싱글 스레드이면서 논 블로킹 언어이다. 각각은 자바스크립트의 특징과 연관되어 있다. 1. 싱글 스레드 우선 스레드는 프로세스 내의 실행되는 흐름 단위를 의미하는데, 싱글 스레드는 스레드가 하나만 존재하여, 한 번에 하나의 작업만 가능하다. 2. 논 블로킹 또한, 논 블로킹이기에...

Restful API REST란? 직역하면, REpresentational State Transfer으로 웹 서비스 동작을 위한 아키텍처 스타일 또는 설계 원칙을 일컫는다. REST는 클라이언트와 서버 사이 상호작용에 관한 원칙과 제약 조건들을 갖는다. 따라서 Restful API는! REST 아키텍처 스타일을 잘 준수한 웹 API. 즉, RE...

브라우저 저장소의 차이점 브라우저 저장소는 말 그대로, 저장위치가 클라이언트 브라우저인 저장소를 의미한다. 브라우저 저장소는 크게 WebStorage, Cookie로 나뉘는데 여기서, WebStorage는 LocalStorage와 SessionStorage로 나눌 수 있다. LocalStorage 영구적, Key-Value 저장 방식 ...

this의 용법 this는 함수 호출 위치와 방식에 따라 다른 객체를 참조한다. 그렇다면, 각각은 어떤 객체를 참조하는지 알아보자. 📢 그 전에 알아야할 용어 정리 바인딩 프로그램의 특정 기본 단위가 가질 수 있는 구성요소의 구체적인 값, 성격을 확정하는 것을 말한다. 예) 변수의 이름, 자료형, 자료 값 ...

REST API REST란? 직역하면, REpresentational State Transfer으로 웹 서비스 동작을 위한 아키텍처 스타일 또는 설계 원칙을 일컫는다. REST는 클라이언트와 서버 사이 상호작용에 관한 원칙과 제약 조건들을 갖는다. API란? 응용프로그램에서 사용할 수 있게 프로그래밍 기능을 제어할 수 있게 만든 인터페이스를 말...

CSS에서 position이란? position: 요소 위치 지정 형식 지정으로, 기본값은 static 웹 브라우저마다 요소의 위치들이 다를 수 있음 → 통일된 위치를 위해 사용. static 순서대로 배치 + 이동 X (상대 ...

CSS에서 margin과 padding이란? margin: 바깥쪽 여백을 의미. padding: 안쪽 여백을 의미. 해당 여백의 값과 테두리의 값을 알면, 요소 전체의 크기를 구할 수 있다. 전체 너비 = width + 2 x ( margin + border + padding) 전체 높이 = heig...

클로저(Closure)란? 클로저(Closure)는 함수가 자신이 선언될 때의 실행 컨텍스트의 스코프를 기억하는 기능이다. 따라서, 함수가 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있다. 관련 용어를 자세히 알아보자. 렉시컬 스코프(Lexical Scope) 스코프는 변수에 접근할 수 있는 유효한 범위를 말하는데, 여기서 렉시컬...

[프로그래머스 / JavaScript] 연속 부분 수열 합의 개수 - Level.2 문제: 연속 부분 수열 합의 개수 - Level.2 문제 설명 철호는 어떤 자연수로 이루어진 원형 수열의 연속하는 부분 수열의 합으로 만들 수 있는 수가 모두 몇 가지인지 알아보려한다. 원형 수열: 일반적인 수열에서 처음과 끝이 연결된 형태의 수열 ...

호이스팅(hoisting)이란? 변수 및 함수 선언문을 스코프 내의 최상위로 끌어올려서 실행하는 현상 뜻 그대로 가져오면, 끌어올린다라고 직역. 함수 선언문 vs 함수 표현식 함수 선언문(Function Declarations) 변수 선언처럼, 키워드 function으로 시작. ...

주소창에 google.com을 입력하면 일어나는 일 주소창에 google.com을 입력할 때 발생하는 네트워크 송수신 과정에 대해 알아보자. DNS, Domain Name System 사람이 읽을 수 있는 도메인 이름을 기계가 읽을 수 있는 IP 주소로 변환하는 시스템 예시: www.naver.com -> 221.221....

Reflow와 Repaint 실행되는 시점 해당 작업은 렌더링과 연관된 작업. 두 작업은 렌더링 방식의 Layout, Paint 단계가 다시 일어난다고 생각하면 됨. Reflow란? DOM의 레이아웃(위치, 크기 등)을 다시 계산하는 과정. 이 때, 관련된 모든 HTML 요소의 수치를 다시 계산하여 렌더 트리를 재구축....

브라우저의 렌더링 원리 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 렌더링 엔진을 사용. 렌더링 엔진 브라우저 마다 상이한, 렌더링을 수행하는 렌더링 엔진이 있음. 크롬: 블링크(Blink) 사파리: 웹킷(Webkit) 파이어폭스: 게코(Gecko) 이 때, 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링...

Tailwind CSS 방식의 스타일링 css 작성 없이, 클래스를 추가하는 것만으로도 스타일링 가능. HTML에서 모든 디자인을 구축 가능. 단독 유틸리티 퍼스트 CSS 라이브러리 = Tailwind CSS Tailwind CSS 공식 홈페이지 존재 → 설치 및 사용법 안내 ...

CSS-IN-JS 방식의 스타일링 말 그대로, 자바스크립트 코드 안에 CSS를 작성하는 방식. 스타일을 자바스크립트 코드 안에 정의하고 컴포넌트와 함께 번들링하는 접근 방식. styled-componenets, emotion 방식 CSS를 런타임에 동적으로 생성해서 적용하는 원리 채택. 따라서, 초기 로딩에 ...

컴포넌트 React의 함수에서, JSX를 반환하는 것이 컴포넌트. 함수 선언문 작성법 export default function App() { return ( <div className="title"> <h1>App Component</h1>...

전통적인 방식의 스타일링 인라인 스타일 HTML 태그의 style 속성을 사용해서 CSS 스타일을 지정하는 방식 style 속성에는 객체 형식의 값이 할당. font-size와 같은 케밥 케이스는 카멜 케이스로 작성. export default function Example1() { ...

JSX 문법 JavsScript + XML (확장 문법) JSX는 HTML과 굉장히 유사 리액트 개발팀이 편하게 작성하도록 제작. JSX 범위 1. 반드시, 하나의 루트 요소만 반환해야 함! 루트 요소를 2개 이상으로 두면, 문제가 발생한다. export default fun...

React 프로젝트 설정 .gitignore 깃허브에 푸쉬시, 무시되어야할 항목들 나열. 생성된 .gitignore에 해당 항목도 추가로 기입하도록 한다. # Customs .env .env.* package-lock.json package.json 해당 파일의 scirpts에 터미널에서...

리액트 사용 이유 1. 가장 인기 있는 라이브러리 주간 다운로드가 3천만 이상으로, 인기 있다. npm: react npm trends에서도 확인 가능 react vs vue, npm trends [참고] 라이브러리 vs 프레임워크 라이브러리: 내가...

기존의 프로젝트 생성 방식, CRA 기존에는, META에서 제작한 create-react-app 으로 프로젝트를 생성. 오랜 기간 동안, React의 생태계에서의 표준으로 자리잡았음. 프로젝트를 위한 폴더 생성 후, 해당 위치로 이동 create-react-a...

유틸리티 타입 타입스크립트에서 어떤 목적을 달성하기 위한 기능을 구현한 커스텀 타입을 의미 Partial< T > 주어진 타입 T의 모든 속성을 선택적으로 만드는 유틸리티 타입 다음과 같이, 하나의 인터페이스에 존재하는 것을 따로 인터페이스로 구현해서 사용해야하는 번거로움 존재. interface...

클래스 자바스크립트 에서 클래스를 사용했듯이, 타입스크립트에서도 사용 가능하다. TS 클래스의 타입 선언 타입스크립트에서는 타입을 명시해야한다는 점에서 구분. 자바스크립트 class Person { constructor(name, age) { this.name = name; this.age = ag...

제네릭 제네릭이란?! 타입을 변수처럼 사용하는 문법 다양한 타입을 받아야할 때, 타입을 미리 정하지 않고 사용할 때 정하도록 함. <> 기호를 사용하며, 안에는 type의 의미인 T를 타입 변수로 사용. 사용할 때, <> 기호와 타입을 명시하여 작성한다. 사용 예시 function ge...

enum 이넘 enum 열거형 타입: 관련된 타입을 묶어 놓는 것 enum 이라는 키워드 사용 → 사용할 값들을 특정 타입으로 묶어둠 케이스별 오타를 방지해줌. 타입 별칭, 인터페이스의 재료로도 활용 가능. 다음과 같이 사용 가능 { // enum enum StatusEnum { L...

인터페이스 앞서 배운 타입 별칭의 개념을 비교하며 살펴본다. 타입 별칭으로 지정할 수 있는 객체 → 인터페이스로도 설정 가능 따라서, 객체 타입만이 인터페이스로 설정 가능 (원시 타입 불가!) interface 키워드를 사용하여, 지정 예시 // 객체 타입을 지정 시 사용 (나만의 객체 타입) interf...

타입 별칭 type이라는 키워드를 사용해서, 나만의 타입을 지정. 타입을 반복해서, 재사용하고 싶을 때도 주로 사용. → 유지보수성 증가 가독성 문제를 해결할 수 있는 방안으로 제시! readonly 키워드 최초에 초기화하고, 읽기만 가능 → 수정은 불가! 타입 별칭에 문자열을 준다면? 다음과 같이, 자동완...

타입 별칭 type이라는 키워드를 사용해서, 나만의 타입을 지정. 첫 글자는 대문자로 작성하여 지정하도록 함. 타입을 내가 원하는 이름으로 사용 가능 타입을 반복해서, 재사용하고 싶을 때도 주로 사용. → 유지보수성 증가 가독성 문제를 해결할 수 있는 방안으로 제시! 예시 1 type Level = num...

타입스크립트 연산자 자바스크립트의 OR(||) 연산자와 AND(&&) 연산자와 같은 역할을 하는, 유니언 타입과 인터섹션 타입이 있다. 유니언 타입 | (파이프) 자바스크립트의 OR(||) 연산자와 같은 역할 여러 개의 타입을 결합한 타입. 연결된 타입 중 1개만 만족하면 됨 let valu...

타입스크립트 함수 타입 함수 매개 변수와 반환 값의 타입을 지정해주는 것 함수 선언문, 함수 표현식, 화살표 함수의 방식이 존재 반환 값의 타입 함수의 결과로 내보내는 return의 타입을 의미 결과를 받는 변수까지 타입을 지정하는 것은 드묾 void ⇒ 아무것도 반환하지 않음 funct...

TypeScript 특징 검사 범위 타입스크립트는 tsconfig.json 하위 파일의 모든 변수를 전역으로 검사한다. 따라서, 서로 다른 파일에 같은 변수를 정의하면 Error 발생! 해결 방법 코드 블럭 {}을 활용하여, 변수를 감싸주면 된다! 이전 let num: number = 10; ...

알아야 할 JS문법 템플릿 문자열 백틱 (`)으로 문자열을 정의 const name = "geoncoding"; const greet = `hello, ${name}`; // 단, name과 같은 변수명은 지양한다. 화살표 함수 =>로 함수 정의 co...

타입스크립트 시작 개요 자바스크립트 + 타입 시스템을 추가한 언어 TypeScript로 작성된 코드를 실행하려면, TypeScript 코드를 JavaScript 코드로 ‘변환’해주는 작업이 필요! TypeScript의 간단한 구동 TS Playground - An online editor for exploring T...

Fork Fork 다른 사람의 GitHub 저장소를 자신의 계정으로 복사하는 작업 원본 저장소는 그래도두고, 복사본에서 자유롭게 변경 가능 Fork 목적 기여(Contribution): 포크한 후 수정하고, pull request를 보내 원본 저장소에 기여 자유로운 실험: ...

REST API REST Representational State Transfer HTTP 요청 메시지로 서버의 데이터를 조작하기 위한 디자인 패턴 REST API REST 디자인 패턴을 적용한 API 구성요소: 자원, 행위, 표현 자원: 요청과 응답으로 주고받는 데이터 자원 URI로 명시 행위...

JavaScript fetch WEB API 웹 브라우저가 제공해주는 API 웹 브라우저를 기반으로 해서 사용해야 함 fetch() 자바스크립트에서 HTTP 요청을 보내는 내장 함수 API 호출하기 위해서 사용함 대표적인 API ENDPOINT JSONPlaceholder - Free Fake REST ...

JavaScript 개념 스코프 scope 변수에 접근할 수 있는 유효한 범위 렉시컬 스코프 lexical scope 코드 위치에 따라 한 실행 컨텍스트에서 유효한 범위 작성 시점에 스코프가 결정됨. 렉시컬 환경 lexical environment 실행 컨텍스트의 record와 outer를 아우르는 말 ...

JavaScript 기본 변수 선언 키워드 var : 변수 재선언 가능, 따라서 사용하지 않는 키워드 let : 변수 재할당 가능 const : 변수 재할당 불가 자료형 기본 자료형 string : ‘’ or “” or ``으로 감싸진 문자 number : 일반적인 숫자 boolean : true / false ...

Auto Close Tag HTML 태그의 종료 태그를 자동으로 추가 Auto Rename Tag 태그의 이름을 수정하면 종료 태그도 함께 수정 Code Runner 자바스크립트 코드를 NodeJS로 실행하게 해주는 익스텐션 추가 설정:...

Github란? Git이 로컬 저장소의 개념이면, Github는 원격 저장소의 개념 Github Repository 새로운 원격 저장소를 생성한다. 아까 작성했던, 로컬 예제를 원격 저장소에 추가해본다. git remote add 원격저장소명 깃허브(원격저장소)주소 git br...

Git 등장 배경 Linus Torvalds가 처음 배포 → 지옥에서 온 정보 관리자 버전 관리 시스템을 사용하지 않는 버전 관리의 문제점 대두 소스 코드 관리, 의존 패키지, 라이브러리… → 따라서, 버전 관리가 되는 시스템을 개발해야 함. 변경된 내용이 기록되어야 함 특정 시점을 명명해야 함...

JSON 요청 실습 JSON을 요청하는 서버 실습을 진행하자. 실습을 위한 projecet, api 폴더를 생성한다. projecet에서 json-server를 설치한다. api 에서 db.json을 생성하여, 다음 코드를 삽입한다. { "posts": [ {...

JSON 이란? JSON 데이터를 저장하고, 전송하기 위한 형식 중 하나. 특징: 키-값 쌍으로 구성, 배열지원, 다양한 데이터 타입 가능, 주석 불가능, 마지막에 콤마(,) 불가 가능한 데이터 타입: 문자열, 숫자, Boolean, 객체, 배열, null 서버 통신에서 가장 많이 사용되는 데이터 형식...

UI/UX UI: 디자인할 대상, 서비스의 구조나 형태 (서비스 관점) 제품을 편리하게 사용할 수 있도록 설계하고 디자인 UX: 방법론, 사용자 경험 (사용자 관점) 사용자의 라이프 사이클과 제품의 특성 고려 → 아이디어를 상품화하고 서비스 기획 UI/UX 기획 ...

자바스크립트 클래스 클래스란? class는 객체를 생성하기 위한 템플릿을 정의 가능 코드의 재사용성, 유지보수성을 높임 객체 지향 프로그래밍의 주요 개념을 활용 가능 캡슐화, 상속, 다형성 등.. 클래스 기본 문법 class 클래스명 { // 생성자 메서드 constructor(매개변수) ...

자바스크립트 내장 객체 indexOf 문자열이나 배열에서 특정값의 처음 위치 반환 값이 존재하지 않으면, -1 반환 인자를 추가하면, 탐색 시작 위치를 지정할 수 있음 배열[문자열].indexOf(찾고 싶은 값, 시작 위치) 예시 // 문자열 const txt = "Hel...

자바스크립트 객체 객체 Object 데이터를 구조화하고 관리, 복잡한 데이터 표현에 유용 키(key)와 값(value)으로 이루어진 속성의 집합 다양한 속성과 메서드를 포함 가능 {} 를 사용하여 생성, 각 속성은 쉼표 , 로 구분됨 키(key)는 문자열, 심볼(symbol) 타입이어야 함 값(value)은 어떤 타입이어도 ...

자바스크립트 보충 동적으로 HTML 작성하기 innerHTML(): 직접 태그의 형태를 생성한다. createElement(): 문서에 괄호안의 태그를 생성한다. classList.add(): 클래스 속성의 값을 추가한다. setAttribute(): 특정 속성과 값을 추가하여 설정한다. textContent(): 해당 태그에 ...

배열이란? 배열 데이터를 순서대로 저장하는 객체 인덱스로 요소에 접근 다양한 데이터 처리 구현 배열의 특징 0부터 시작하는 인덱스를 기반으로 함 동적인 크기, 크기가 고정되어 있지 않음 다양한 데이터 타입 저장 가능 유연한 데이터 구조로, 리스트 or 스택 or 큐 등의 자료구조를 간단히 구현 가능 반복문과 메...

BOM (Browse Object Model) BOM: 브라우저 객체 모델 웹 브라우저 창과 관련된 객체를 제공하는 JS 모델 웹 브라우저 자체를 조작하는 기능 제공 (브라우저 환경에서만 동작) BOM의 여러가지 객체 document history location navigator alert - 응답만 받는 경고창...

CSS 애니메이션 transfrom 요소를 이동, 회전, 크기 조절 등을 할 때 사용 속성값 설명 scale(x, y) 요소 크기를 몇 배율로 조정 (예: scale...

JS 함수 함수 객체 자료형 중 하나, 특정한 기능을 제공하기 위한 코드의 집합 호출로 결과 값을 반환받음. 함수 호출부와 선언부로 나뉨. 함수 용어 용어 기능 익명 함수 이름이 없는 함수 / 변수에 할당해서 사용 ...

JS 반복문 JS에는 다양한 반복문들이 존재한다. 설명 기능 for 정해진 횟수만큼 반복 while ...

Var / Let / Const Var: 함수 범위 Let, Const: 블록 범위 if문에서 재선언의 차이 var : if 블록 밖에서 선언된 변수가 재선언될 수 있음 let : if 블록 밖에서 선언된 변수가 재선언되지 X const : 애초에 재선언되지 X 리...

Event 사용자와 상호작용하는 동작을 일컫는다. click: 마우스를 클릭했을 때 발생하는 이벤트 keyup: 키보드를 눌렀다가 뗄 때 발생하는 이벤트 이벤트 속성 currentTarget : 이벤트가 연결된(리스너가 등록된) 요소 target : 이벤트가 실제 발생한 요소 previousElementSibling...

DOM, Document Object Model DOM 구조도 기본 클릭 이벤트 작성 window onload: css, dom, img이 모든 것이 로드되고 실행 addEventListener: 이벤트 리스너 추가 함수 window.onload = function () { function 함수명() { docum...

반응형 웹 & 관련 CSS Viewport 웹 페이지가 표시되는 디바이스 화면 영역 특정 부분을 넣어, 반응형 웹 제작 가능 모바일, 태블릿, 데스크톱 등 각 기기에서 실제로 콘텐츠가 보여지는 영역 반응형 웹 설정 디바이스의 크기에 따라 콘텐츠가 적절하게 표시되도록 조절하는 데 사용 <meta name=”...

CSS 기본 지식 3 root.css 모든 페이지에서 반복해서 적용되는 부분을 처리하는 CSS를 모아두기 위한 용도. 예) 주로 색상과 글씨 크기 :root 선택자: 최상위 요소를 가리킴. --변수명 형태로, CSS 변수를 정의해서 모아둠. :root { --main-bg-color-blue...

CSS 기본 지식 2 overflow overflow 속성 : 내용이 요소 크기를 벗어나 보여주기 어려울 때, 보여주는 방식! float 속성과 함께 사용, 자식의 요소에 구애받지 않음 auto 벗어나는 부분 스크롤 생성 ...

CSS 기본 지식 스타일시트 불러오기 외부 파일 로드 < link > 태그의 href 속성 사용 스타일시트가 긴 경우 사용 ex1.html <html> <head> <link rel=...

레이아웃 만들기 WAI-ARIA Web Accessibility Initiative’s Accessible Rich Internet Applications 스크린리더가 브라우저를 읽을때, 각 요소가 어떤 역할을 하는지 알도록 만들어진 기술 실습을 위한 속성 role : 웹 접근성을 부여하기 위한 속성 해당 태...

HTML ! 입력 후, 엔터 기본 HTML 형식의 소스가 나옴 HTML 버전 차이 현재, HTML5 & CSS3 사용 버전을 알고, 유지보수를 해야함 블록 요소 가로 영역이 전체 100% padding 상하좌우 적용 margin 상하좌우 적용 인라인 요소 가로 ...

웹 접근성 설명 어떤 사용자가 어떤 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있는 보장하는 것 기관 사이트마다 아래에 있는 WEB 접근성 마크가 존재. ⇒ 웹 접근성 표준화 존재. KWCAG : 한국형 웹 컨텐츠 접근성 지침 사이트의 Tab키를 활용하여, 본문 ...

1. 파이썬 정의 파이썬의 기본 프롬프트는 >>>으로 나타난다. 귀도 반 로썸에 의해 개발된 고급 프로그래밍 언어. 배우기 쉽고, 속도 빠르고, 확장성이 좋음. → 라이브러리 풍부/ 다양한 플랫폼 사용 가능 2. 기본 출력 💡 print(”내용을 입력하세요”) 3. 파이썬 특징 간결한 코드로...

IT 블로그 창설! 안녕하세요. 블로그 개설자 이재건입니다. 기존에 티스토리로 작성했던 글을, 여기다가 이전하여 재작성할 계획입니다. 앞으로의 블로그 글을 기대하며, 궁금하신 내용은 댓글 남겨주세요! 감사합니다 :)