Psychogrammer

🌕 Front 검색 결과

해당 글 60건

모듈 시스템을 알아보자. 모듈은 동기적 호출일까? Require vs Import

모듈?관련된 코드들을 하나의 코드 단위로 캡슐화한 하나의 파일을 말한다.  CommonJS (CJS)Require 키워드를 사용한 모듈 시스템을 말한다.Node.js와 구버전의 브라우저에서 주로 사용한다.module.exports와 exports 두 가지 방법으로 모듈을 내보낼 수 있다 예시1. module.exports// arithmetic.jsclass Arithmetic { constructor(a, b) { this.a = a; this.b = b; } add() {return this.a + this.b;} subtract() {return this.a - this.b;}}; module.exports = Arithmetic;// main.jsco..

🌕 Front/🌱 Vanilla JS 2024. 10. 26. 17:34

React-19 useActionState 살펴보기

Action: 비동기 전환을 사용하는 함수 (Before) Example1. passive processfunction OrderCoffee({}) { const [coffee, setCoffee] = useState(""); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); const handleSubmit = async () => { setIsPending(true); const error = await orderCoffee(coffee); setIsPending(false); if (error) { setError(error); retur..

🌕 Front/⚛️ React JS 2024. 5. 26. 16:48

브라우저 내의 자바스크립트 동작 원리

1. JavaScript Runtime 구성 요소브라우저 내의 JavaScript *런타임은 크게 JavaScript 엔진과 웹 API로 구성되어있다. 그리고 여기에 테스크 큐와 이벤트 루프라는 개념 또한 존재한다. 이를 통해 싱글 쓰레드 기반의 프로그래밍 언어라 불리는 JavaScript도 비동기적으로 코드를 실행시킬 수 있게 된다. *런타임: 프로그래밍 언어로 작성된 코드가 구동되는 환경 2. JavaScript 엔진JavaScript 코드를 읽고, 해석, 실행을 담당하는 인터프리터이다. 쓰레드 하나로만 동작하기 때문에 스택 영역도 단 하나만 사용하게 된다. 이로 인해 하나의 함수가 실행이 끝나기 전에는 다른 함수가 실행될 수 없는 "Run to Completion" 특성을 가지게 된다.JavaScr..

🌕 Front/🌱 Vanilla JS 2024. 5. 5. 17:09

자바스크립트 this바운딩에 대해 알아보자

대전제this는 함수를 호출할 때 결정된다.함수를 함수로서 호출할 경우에는 this가 지정되지 않는다.this에는 호출한 주체에 대한 정보가 담긴다. 실행 컨텍스트를 활성화할 당시에 this가 지정되지 않은 경우 this는 전역 객체를 바라본다.function func1() { console.log(this);}obj ={ func1:func1,}func1(); // Windowobj.func1() // obj 메서드는 객체의 메서드로서 호출할 경우에만 메서드로 동작하고, 그렇지 않으면 함수로 동작한다.this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지)는 중요하지 않다.오직 해당 함수를 호출하는 대상, 앞에 점 또는 대괄호 표기가 있는지 없는지가 관건..

🌕 Front/🌱 Vanilla JS 2024. 4. 20. 23:30

[CDN]: 사용자와 가까운 곳에서 제공하자

CDN 이란? (Contents Delivery Network) - 지리적, 물리적으로 떨어져있는 사용자에게 컨텐츠 제공자의 컨텐츠를 더 빠르게 제공할 수 있는 기술 - "세계에 널리 퍼진 중계서버들의 집합" - 대용량 또는 사용자의 잦은 요청이 있는 컨텐츠들을 Cache 서버에 분산 배치하여 컨텐츠의 전송 중 발생하는 트래픽 집중 & 병목현상 및 데이터 손실을 해결하기 위해 등장한 컨텐츠 전송 기술 - CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화한다. CDN은 각 지역에 캐시 서버(PoP, Points of presence)를 분산 배치해, 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달한다. CDN이 필요한 이유 S3 와 같은 "일반적인..

🌕 Front/📚 Theory 2022. 5. 14. 16:19

[CSS] 마진 상쇄 (Margin collapsing) 현상 이해하기

1. 마진 상쇄란? Block 요소들의 상하 마진이 겹칠 때, 한 쪽의 마진 값만 적용하는 렌더링 규칙 2. 마진 상쇄가 일어나는 3가지 상황 1) 인접 형제간 겹침 마진이 더 큰 값 (≥) 으로 랜더링이 일어난다. 2) 빈 요소의 상하 마진간 겸침 빈 요소란? block 요소의 height이 0인 경우를 말함 height, padding, border 상하로 늘어나는 프로퍼티 값이 없는 경우 내부에 inline 컨텐츠가 없는 경우 빈 요소 + 인접 박스들 간에 마진 겹침이 연쇄적으로 일어나는 경우, 상쇄가 여러번 일어난다. 마크업을 진행할 때, 빈 요소를 만들어놓는 상황이 있으니 꼭 인지해두자. 빠른 레이아웃 구성을 위해, div로 영역을 구분할 경우 나중에 append 하기 위해 빈 컨테이너를 만들어..

🌕 Front/✨ CSS 2022. 4. 19. 09:58

HTTP / HTTPS 동작 원리를 살펴보자

1. 어떤 보안 위험이 있다는 거지? 첫 째: 개인정보가 담긴 정보를 서버로 보낼 때, 어떤 놈이 갈취해갈 수 있음 둘 째: 피싱 사이트에 접속해 개인 정보를 갈취해갈 수 있음 HTTPS는 사이트에 보내는 정보를 제 3자가 보지 못하게 하며, 접속한 사이트가 믿을 만한 사이트인지 알려준다. 2. HTTPS를 이해하려면 1) 대칭키 방식: 암호화에 쓰이는 키와 복호화에 쓰이는 키가 동일한 기법 클라이언트와 서버가 대칭키 방식으로 통신을 한다면 클라이언트, 서버 모두 키를 가지고 있어야한다. 하지만 애초에 클라이언트에게 키를 전달하는 것 자체도 위험하며, 또한 클라이언트의 스코드는 누구든지 열어볼 수 있으므로 가지고 있기도 굉장히 위험하다. 즉, 원거리에서 대칭키를 안전하게 전달하는 것이 매우 어렵다. 2)..

🌕 Front/📑 Web Theory 2022. 3. 31. 22:40

[DNS] 동작 원리를 꼼꼼하게 살펴보자!

1. Domain 네트워크 통신에는 고유의 주소(IP 주소)가 필요하다. 이때 IP는 사람이 이해하고 기억하기 어렵기 때문에, 각 ip에 이름을 부여했고 이를 도메인이라고 한다. 예를 들어 142.250.207.14의 도메인은 google.com이다. 2. DNS (Domain Name System) DNS는 도메인을 입력하면 IP 주소를 변환해준다. 정확히는, 인터넷 도메인 주소 체계로 TCP/IP의 응용 계층에서, www.example.com과 같은 주 컴퓨터의 도메인 이름을 192.168.1.0과 같은 IP 주소로 변환하고, 라우팅 정보를 제공하는 분산형 데이터베이스 시스템이다. 쉽게 말해, 도메인에 연결된 서버의 주소를 찾아주는 역할을 하며 도메인 서버, 네임 서버라고도 불린다. 3. DNS 서버..

🌕 Front/📑 Web Theory 2022. 3. 31. 21:12

[React] 깜빡임 현상 해결 (useLayoutEffect, API호출)

분명 다 만들었지만, 보기엔 흉한 깜빡임 현상!! 이 글에선 두 가지 깜박힘 현상에 대해 다룰 것이다. 1. useEffect 호출에 의한 깜빡임 2. API 호출에 의한 깜빡임 1. UseEffect 호출에 의한 깜빡임 const [duckUrl, setDuckUrl] = useState(''); useEffect(() => { setDuckUrl('/duck.png'); }, []); Hook Flow에 의하면 DOM 배치 → 페인트 작업 → useEffect 호출 순서를 따른다. 따라서 useEffect로 이후 페인트 작업이 한 번 더 이루어짐에 따라(리페인트) 깜빡이는 현상이 나타난다. 2. UseLayoutEffect 을 통한 해결 const [duckUrl, setDuckUrl] = useSt..

🌕 Front/⚛️ React JS 2022. 3. 30. 13:02

[Typescript] 좀 더 알아보기(Type Assertion, Index Signature)

1. Type Assertion - 타입스크립트가 추론하지 못하는 타입을 as keyword를 통해 명시해주는 것 - Type casting: 데이터의 타입을 변환 - Type assertion: 데이터의 타입을 명시 Type Assertion의 두 가지 형태 1. As let someValue: unknown = 'this is a string'; let strLength: number = (someValue as string).length; 2. Angle Bracket let someValue: unknown = "this is a string"; let strLength: number = (someValue).length; - JSX에서는 꺾쇠괄호를 통한 Type Assertion은 태그와 혼동되..

🌕 Front/🎫 Typescript 2022. 3. 24. 14:32

[Typescrip] 타입 가드 (intersection, union, Type Guard) 가드 올려!

타입 가드(Type Guard) 배울 개념 intersection Type union Type Type Guard 1. 문제 발생 interface Animal { eat: () => void; sleep: () => void; } class Dog implements Animal { eat() {} sleep() {} } class Cat implements Animal { eat() {} sleep() {} } Dog클래스에 bark()메서드를 추가하고 싶은데? 그러기 위해선, Animal인터페이스에 bark()를 추가해야하고, Animal인터페이스를 구현하는 Cat클래스도 bark()메서드를 구현해야하는 비효율이 발생한다. 해당 타입을 쓰는 모든 코드에 변경을 가하지 않고, 특정 코드만 자유롭게 타..

🌕 Front/🎫 Typescript 2022. 3. 22. 15:16

[Typescript] 함수 사용하기 (parameter, optional, rest, overloading)

1. 함수 선언 • 매개변수와 리턴값의 타입을 선언 후 사용하면 된다. function func1(name: string): string { return 'hello ${name}'; } const func2 = function (name: string): string { return 'hello ${name}'; } const func3 = (name: string): string => { return 'hello ${name}'; } const world4 = (name: string): string => 'hello ${name}'; 2. 매개변수 수 일치 • 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야 한다. function buildName(firstName: string..

🌕 Front/🎫 Typescript 2022. 3. 22. 13:00

[Typescript] 유틸리티 타입 12가지 사용하기

• TypeScript는 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공한다. • 유틸리티 타입은 전역으로 사용 가능하다. 종류 Partial Readonly Record Pick Omit Exclude Extract NonNullable Parameter ConstructorParameters ReturnType Required 1. Partial interface Todo { title: string; description: string; } function updateTodo(todo: Todo, fieldsToUpdate: Partial) { return { ...todo, ...fieldsToUpdate }; } const todo1 = { title: 'organize desk', ..

🌕 Front/🎫 Typescript 2022. 3. 22. 09:56

AJAX란 무엇이고, 비동기 통신 API fetch, axios는 어떻게 쓰이는가

AJAX란? JavaScript를 이용한 비동기 통신 클라이언트와 서버간에 XML, JSON 데이터를 주고받는 기술이다. AJAX는 기술 자체를 뜻하기 보단, HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT, XMLHttpRequest 오브젝트들이 조합한 기술의 총칭을 일컫는다. XMLHttpRequest 객체를 이용해서, 페이지 새로고침 없이 페이지의 일부만을 위한 데이터를 로드하는 기법이다. AJAX(Asynchronous JavaScript and XML)의 X는 XML을 뜻하지만, JSON이 더 가볍고, 자바스크립트의 오브젝트로 쉽게 변환된다는 점 때문에 XML 보다 많이 사용된다. AJAX를 사용하는 이유 화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페..

🌕 Front/🌱 Vanilla JS 2022. 2. 12. 20:51

[호이스팅] TDZ, var, const, let, window 바인딩 여부

호이스팅(hoisting) 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 따라서 var로 선언할 시 초기화 값, undefined가 나오는 것과 다르게, const와 let은 초기화 값이 없기 때문에 오류를 출력한다. Temporal Dead Zone 변수가 현재 스코프 내에서 선언됐지만, 아직 초기화되지 않은 상태를 말한다. let 또는 const 키워드를 사용하여 변수를 선언했을 때 나오는 개념. TDZ는 변수가 선언된 지점부터 초기화되기 전까지, 해당 변수를 사용할 수 없게 한다. TDZ에 빠진 예시..

🌕 Front/🌱 Vanilla JS 2022. 2. 4. 10:23

스코프: 크롬 디버거로 보기, 블록스코프, 함수스코프, 렉시컬스코프

스코프란, 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정하는 것이다. 식별자에 대한 유효범위라고도 간단히 말한다. 크롬 디버거로 보는 스코프 var globalVariable1 = 1; const globalVariable2 = 2; const outerConst = function () { console.log(); }; var outerVar = function () { console.log(); }; function outerFunc2() { console.log(); } function outerFunc1() { let outerVariable = 999; function innerFunc() { const in..

🌕 Front/🌱 Vanilla JS 2022. 2. 3. 13:09

원시 데이터 타입과 래퍼 객체: 원시 타입이 메소드를 갖는 이유

123.123.toFixed(2) // 123.12 "hello".charAt(4) // 'o' 래퍼 객체는원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 하여, 원시값에서도 메서드를 호출할 수 있다. 래퍼 객체 변환 과정 1. 원시타입에 해당하는 객체가 생성된다. 2. 이 객체의 메서드가 호출된다. 3. 메서드 처리 후 이 객체는 소멸된다. 4. 원래의 원시타입만 남는다. 래퍼 객체를 사용하는 이유 문자열이나 숫자와 같은 원시값을 다루어야 하는 작업이 많은데, 메서드를 사용하면 작업을 수월하게 할 수 있을 것 같지만, 메서드를 사용하는 객체는 무겁고, 원시값은 가능한 한 빠르고 가벼워야 한다. 그래서 원시 타입을 유지하되, 메서드를 호출할 때만 잠깐 객체를 생성한 후 다시 삭제한다.

🌕 Front/🌱 Vanilla JS 2022. 2. 2. 16:41

[native code]: 넌 누구냐, 코드를 내놓거라!

위와 같은 생성자 함수들의 내부코드를 보고 싶어, 크롬 개발자 모드에서 확인했다. 하지만 native code라고만 나오고 더 이상의 정보를 알 수 없었다. You don't know Js라는 책에서 언급한 내용인지, 구글링 검색을 하면 죄다 책 내용을 요약한 블로그 내용밖에 없었고, 빠르게 밑그림만 확인하고 싶었는데 지엽적인 지식만 나열되어 있어, 다른 소스를 찾았다. 위의 내용을 간단히 정리하자. native code는 Window, Document, Function와 같은 내장객체들은 자바스크립트로 구현되어있지 않고, C와 C++같은 컴파일러 언어로 코딩되어 있기 때문에 안의 코드들을 볼 수 없다. 때문에 binary code를 보여줘봤자, 읽을 수도 없고 사용할 수도 없기때문에 [native co..

🌕 Front/🌱 Vanilla JS 2022. 1. 30. 18:46

[DOM]: 이벤트 버블링을 이용해 하위 요소 전체 다루기(e.target, e.currentTarget)

옵션들을 forEach로 반복시켜서 이벤트를 주는 방식이 아닌 event.target으로 옵션들의 부모요소 ul을 참조해 이벤트를 위임시키면 반복문을 쓰지않고도 옵션들에 이벤트를 줄 수 있다. 옵션이 많아지면 반복문이 돌아갈때 성능이슈도 있으니 탁월한 방법이다. li 부모 태그인 ul태그에 한 번반 이벤트리스너하면 된다. 부모ul태그에 한번만 등록해놓고 자식 li클릭시(버블링은 기본값) 버블링을 활용하면 하나의 이벤트리스너로 li 요소들 전체를 다룰수있다. 단 모든 이벤트가 버블링이 발생하는건아니다. click은 버블링이 기본으로 발생한다. const billboard = document.querySelector('billboard'); const ul = document.querySelector('ul..

🌕 Front/🌱 Vanilla JS 2022. 1. 27. 21:37

[DOM] Javascript로 html을 조작해보자

DOM 어렵게 생각하지마 OM은 Object Model, 객체 지향 모델을 뜻한다. 뭔가를 객체로 표현하는 방법을 말한다. 나아가 Documnet가 추가된 "D"OM은 웹 페이지의 내용을 객체로 표현하는 형식을 말한다. Brower가 추가된 "B"OM은 웹 브라우저 자체를 객체로 표현하는 형식을 말한다. 이 둘의 객체들로부터 제공되는 DOM API, BOM API를 통해 JavaScript가 웹 페이지/브라우저를 쉽게 제어 및 조작할 수 있다. DOM HTML문서의 구조와 내용을 객체 타입으로 변환시켜 웹 페이지에 객체지향적 접근을 가능하게 했다. 날 것 그대로의 Document를 Object로 만들면(=DOM), 구조, 내용, 스타일의 요소들을 구조적으로 접근할 수 있게 된다. DOM은 프로그래밍 언어..

🌕 Front/🌱 Vanilla JS 2022. 1. 17. 15:58