담백한 웹 개발 이야기

안녕하세요. 웹 개발 지식을 알려드리는 조드래곤나인입니다. 디버깅을 하기 위해 console 객체의 log, info, error, dir, table 등 다양한 메서드를 활용하곤 합니다. 텍스트와 객체 이외에도 CSS를 사용할 수 있는데요. 오늘은 console.log에서 CSS 사용 방법을 알아보겠습니다! 목차 활용 사례: Self-XSS 주의 CSS 사용 방법 지원하는 CSS 범위 활용 사례: Self-XSS 주의 대중적으로 사용하는 서비스에서 활용 사례를 찾아보면 Self-XSS에 대한 주의를 주고 있습니다. Meta에서 운영 중인 Instagram, Threads, Facebook에서는 아래와 같이 Self-XSS에 대한 주의를 주고 있습니다. Google 번역기에서는 다음과 같이 주의를 주고 ..

안녕하세요. 웹 개발 지식을 알려드리는 조드래곤나인입니다. 개발자가 되고 싶은데 어떤 프로그래밍 언어를 시작할 모르겠거나, 학교나 관심으로 프로그래밍 언어를 많이 학습했는데, 어떤 것을 선택할지 고민 중이신 분들이 있을 것 같습니다. 이런 분들을 위해 오늘은 2023년 4분기에 자주 사용된 프로그래밍 언어 순위, 프로그래밍 언어 추천에 대해서 정리해 봤습니다. 순위는 개발자들이 가장 많이 사용하는 Github을 기준으로 정리했습니다. 목차 Stars 순위 Pull Requests 순위 Pushes 순위 Issues 순위 Stars 순위 Stars 순위는 개발자들이 오픈 소스나 프로젝트에 관심을 표현한 순위입니다. 프런트엔드 개발에 주로 사용되는 JavaScript는 2위, TypeScript는 6위를 하..

자바스크립트 변수명에는 영문, 숫자, 한글 이외에도 언더스코어 기호인 _를 사용할 수 있습니다. 언더스코어는 달러 기호와 마찬가지로 특별한 의미를 부여할 때 사용합니다. 언더스코어는 어떤 의미를 가지고 있고, 어떻게 활용하는지 알아보겠습니다. _ 변수 언더스코어 기호인 _는 변수, 함수, 속성, 이벤트 등의 이름에 사용할 수 있습니다. 예를 들어 다음과 같은 변수명은 모두 정상 문법입니다. const _name = "Peter"; const _1 = 100; const _$ = "dollar"; const _a_b = "a and b"; _ 의미 및 사용 사례 3가지 언더스코어는 자바스크립트 자체에서는 특별한 의미를 가지지 않지만, 코딩룰에서 의미를 부여해서 사용됩니다. 사례 1: 미사용 변수를 나타낼 ..

자바스크립트 변수명에는 영문, 숫자, 한글 이외에도 달러 기호인 $를 사용할 수 있습니다. 과거에 자주 사용했던 jQuery나 오픈 소스 코드를 보면 자주 사용되는 것을 알 수 있습니다. 달러 기호는 어떤 의미를 가지고 있고, 어떻게 활용하는지 알아보겠습니다. $ 변수 달러 기호인 $는 변수, 함수, 속성, 이벤트 등의 이름에 사용할 수 있습니다. 예를 들어 다음과 같은 변수명은 모두 정상 문법입니다. const $name = "Peter"; const $1 = 100; const $_ = "underscore"; const $a_b = "a and b"; $ 의미 및 사용 사례 3가지 $는 자바스크립트 자체에서는 특별한 의미를 가지지 않지만, 코딩룰에서 의미를 부여해서 사용됩니다. 사례 1: DOM 요..

불변 자료구조 Immutable Data Structures 불변 자료 구조는 영원히 변하지 않는 상태를 말합니다. 변화가 필요할 때 새로운 상태를 만들어 내고 값을 변경합니다. JSON 클론을 사용한 예시 const clone = obj => JSON.parse(JSON.stringify(obj)) const obj = { message: 'Hello World', inner: { count: 1 } } const clonedObj = clone(obj); console.log(obj === clonedObj) // false console.log(obj.inner === clonedObj.inner) // false 영속 자료 구조 Pesistent Data Structures 영속성은 상태를 제거하..

모노레포의 정의 다수 프로젝트를 단일 형상관리 저장소에 저장하는 소프트웨어 개발 전략 모노레포 기본 원리: npm 심볼릭 링크 npm 심볼릭 링크를 통해서 같은 저장소에 있는 다른 프로젝트를 npm 모듈처럼 사용할 수 있다. npm 심볼릭 링크 만들기 Step 1. my-core 패키지 만들기 프로젝트 루트에 my-core 패키지를 만든다. $ mkdir my-core $ cd my-core $ npm init my-core 폴더 내에 index.js 파일을 만들고 다음과 같은 코드를 작성한다. module.exports = (a, b) => a + b Step 2. my-repo 패키지 만들기 프로젝트 루트에 my-repo 패키지를 만든다. $ mkdir my-repo $ cd my-repo $ npm..

레이아웃을 코딩하는 방법은 다양한 방법이 있습니다. Float, Flex, Grid 순서로 레이아웃을 배치하는 방법이 발전되었습니다. 각 기술들의 차이와 가장 최근에 만들어진 Grid를 사용하면 어떤 장점이 있는지 정리했습니다. 그리드 시스템 구현 6 Grid를 1:3:2로 나누고 각각 같은 여백을 가질 때 코드를 비교해보겠습니다. 그리드 시스템 Float Float로 개발할 때는 가로 사이즈를 직접 계산해서 작성해야 됐고, overflow: hidden과 같은 특별한 방법을 사용해서 코딩을 해야 됐습니다. 1/6 3/6 2/6 .box {overflow: hidden} .item {float: left} .item:nth-of-type(1) { width: calc((100% - 20px) * 1 / ..

동시성 동시성은 동시에 얼마나 다양한 일들을 컨트롤할 수 있는지! 예를 들어 웹 브라우저에서 동영상을 재생하고 있을 때, 플레이 리스트 스크롤이나 댓글 작성 등 다양한 일을 함께 할 수 있는 것이 동시성 구현이다. 웹 브라우저는 메인 스레드 하나로 동작한다. 때문에 버벅임 현상 최소화를 위해 Idle Time[1]을 확보하고, Long Task[2]를 최소화해야 한다. 용어 정의 [1] Idle Time 메인 쓰레드의 작업이 없는 50ms 시간. 사용자 인터렉션이 발생할 수 있는 시간. [2] Long Task 50ms 이상 메인 쓰레드의 실행 시간 병렬성 병렬성은 동시에 얼마나 많은 일들을 할 수 있는지! 예를 들어 자바스크립트로 약 5초 걸리는 작업[1]을 웹 워커 5개로 실행[2]하면 좀 더 빠른 ..

순수 함수 순수 함수는 동일한 인자에 상응하는 동일한 리턴 값을 가지는 함수입니다. 그러므로, 평가 시점이 변경이 되더라도 동일한 결과를 리턴하기 때문에 다루기 쉬운 함수가 됩니다. 순수 함수는 객체의 변경이 필요할 경우 새로운 객체를 생성하여 리턴합니다. 외부 변수를 사용하거나 외부 변수를 변경하면 순수 함수가 아닙니다. 비순수 함수는 평가 시점에 따라 다른 결괏값을 가지기 때문에 평가 시점을 미세하게 다뤄야 합니다. // 순수함수 const add = (a, b) => a + b; const add1 = (obj, b) => ({val : obj.val + b}) // 비순수함수 const add2 = (a, b) => a + b + c; const add3 = (a, b) => { c = b; re..

DOM Event의 역사 1) DOM Event API는 DOM Level 2에서 논리적으로 표준화하려는 시도했음 2) DOM Level 2의 개정 전, Internet Explorer와 Netscape가 서로 정반대 이벤트 흐름을 채택함. Internet Explorer는 이벤트 버블링, Netscape는 이벤트 캡쳐링 3) 현재는 두 이벤트 흐름을 모두 지원함 DOM Event의 정의 javascript와 HTML 간의 상호작용을 담당 옵져버 패턴으로 이벤트가 발생할 때만 리스너가 실행 이벤트 버블링 1) 이벤트 흐름상 문서 트리에서 가장 깊이 위치한 요소에서 시작해 거슬러 올라감 2) 가장 깊이 위치한 요소에서 시작해 거슬러 흐르는 모양이 마치 거품이 올라가는 것 같아 버블링이라함 이벤트 캡처링 1..

Decorators Proposal 1) tc39/proposal-decorators에 제안서 정의됨. 2) Orthogonal Classes와 Class Evaluation Order 제안을 바탕으로 Decorators와 Class Field 및 Private methods를 함께 작동시키는 방법에 대한 결합된 비전을 제안. 3) Decorators는 이미 정의된 클래스, 함수, 변수의 코드를 수정하지 않고, 기능을 추가하는 것에 유용함 4) 메모이제이션, 접근 제어, 인증, 계측, 타이밍 처리, 로깅, 속도 제한 등에 사용된다. Decorators 실용성 JavaScript에서는 Decorators를 사용할 수 없지만 TypeScript에서 Decorators를 사용할 수 있다. 그래서 Node.js..

Union Type 이란? Union Type은 두 개 이상의 타입을 조합해서 정의한 타입이다. 예를 들어 다수의 자료형이 있으면, interface Square { kind: 'square' size: number } interface Rectangle { kind: 'rectangle' width: number height: number } interface Circle { kind: 'circle' radius: number } Union Type은 이렇게 |로 구분해서 정의한다. type Shape = Square | Rectangle | Circle Union Type의 타입 추론 TypeScript에서는 타입 추론(type inference)을 통해 각 타입을 추론하게 된다. TypeScrip..