일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- React
- 반공변성
- RTK Query
- app router
- SSR
- TS
- tailwind
- 인터섹션
- 타입 좁히기
- 이분 검색
- async/await
- autosize
- 태그된 유니온
- CORS
- 투포인터
- Promise
- CI/CD
- Jest
- webpack
- 리터럴 타입
- 무한 스크롤
- dfs
- 결정 알고리즘
- map
- 공변성
- recoil
- ESlint
- Cypress
- 호이스팅
- useAppDispatch
- Today
- Total
목록JS (34)
짧은코딩
스코프 체인 스코프 체인은 "함수에서 어떤 값에 접근이 가능한가 혹은 어떤 값에 접근이 불가능한가"이다. 블록("{}")이 기준이 된다. 함수 안에도 블록이 존재하며, 함수가 아닌 블록은 if, for, while, swtich 등이 있다. -참고 const a = () => ({}); 이 코드는 객체를 리턴하는 함수이다. 예시 const x = "x"; function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); } } function a() { const x = "x"; console.log("a"); b(); } a(); c(); 위 코드는 b가 정의되어 있지 않다는 에러가 나온다..
코드 분석 이 코드에 대해서 호출 스택 분석을 해보겠다. 이렇게 선언을 제외한 함수 호출 할 때마다 호출스택에 넣어주고 함수 끝날 때마다 빼주면 된다. -개발자도구에서 호출 스택 보는 방법 브라우저의 콘솔에다가 내가 원하는 지점에 debugger라고 넣는다. 그러면 이렇게 호출 스택을 볼 수 있다. 또한 오른쪽 창의 "범위"가 스코프 부분이라 이것도 알 수 있다. 처음에 anonymous(익명)이 있는 이유는 파일 전체를 익명 함수로 치기 때문이다. *스코프 체인: 특정 함수에서 어떤 값에 접근할 수 있는지 -참고 const console = { log() { // 콘솔에 글자 적는 기능 }, }; const x = "x"; function c() { const y = "y"; console.log("c..
“함수의 호출은 리턴 값으로 대체해라!” JS 예시 const onClick1 = () => () => { console.log("hello"); }; const onClick2 = () => { console.log("hello"); }; document.querySelector("#header").addEventListener("click", onClick1()); // 정답 document.querySelector("#header").addEventListener("click", onClick2()); // 오답 -onClick1이 정답인 이유는 onClick1() 자리에 document.querySelector("#header").addEventListener("click", () => { con..
브라우저는 파싱 → 스타일 → 레이아웃 → 페인트 → 합성 → 렌더 등의 과정을 거친다. JS, CSS의 변화에 의해 DOM, CSS에 변화가 생기면 Reflow 혹은 Repaint 등의 과정을 수행한다. 1. 파싱 브라우저가 HTML을 파싱하고 읽어들이는 과정 -DOM Tree Hello web performance students! 이런식으로 코드가 해석되는 과정이 파싱이다. -CSSOM Tree body { font-size: 16px } p { font-weight: bold } span { color: red } p span { display: none } img { float: right } CSS 코드 역시 해석이된다. 2. 스타일 DOM Tree, CSSOM Tree가 생성되면 스타일을 매..
클로저란? 클로저는 난해하기로 유명한 개념 중 하나이다. 클로저는 JS 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN에서는 “클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다”라고 말한다. 핵심 키워드는 “함수가 선언된 렉시컬 환경”이다. 일급 객체란? 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 함수를 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. const x = 1; function outerFunc() { const x = 10; innerFunc(); } function innerFunc() { console.log(x); ..
사실 쿠키를 자주 사용했었지만 정확하게 알고 있지는 못한 것 같아서 이 글에 정리하려고 한다. 정확이 알고있지 못했던 것에 뭔가 부끄럼을 느끼고 반성한다..! 쿠키 쿠키는 오래전부터 사용해 왔다. HTTP 통신을 한다면 쿠키를 서로 주고받을 수 있다. 특히 같은 도메인이라면 다른 Scheme라도 쿠키를 공유할 수 있다. 쿠키를 중요하게 다뤄야하는 이유는 해커들이 다양한 방법으로 쿠키를 탈취하려고 하기 때문이다. HTTP는 Stateless 프로토콜이라 이런 쿠키를 통해 사용자 식별을 한다. 그렇기에 쿠키가 탈취되면 결국 사용자 개인 정보가 유출될 수 있다. 쿠키 속성들 path path를 설정하면 설정한 URL의 경로를 포함한 하위 경로에서만 쿠키에 접근할 수 있다. 만약 path=/uplog로 했으면,..
변수 호이스팅 모든 프로래밍 언어를 배울 때, 가장 먼저 배우는 것 중에 하나가 변수 선언일 것이다. JavaScript는 변수 선언이 좀 특이하다. 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아닌 그 전 단계에서 먼저 실행된다. console.log(score); //undefined var score; 이 코드에서 console.log의 결과는 undefined가 나오게된다. 보통의 프로그래밍 언어라면 에러가 났을거지만, JS 엔진은 런타임 전에 소스코드의 평가 과정을 거치면서 런타임 준비를 한다. JS 엔진은 모든 선언문(변수, 함수 등)을 찾아 런타임 전에 먼저 실행한다. 변수 선언이 소스코드의 어디에 위치하든 어디서든지 변수를 참조할 수 있다! => 이렇게 변수 선언..
forEach와 map 둘 다 배열을 순회하는 메서드이다. 그렇기에 중간에 break를 사용할 수 없다. 만약 break를 사용하고 싶으면 for문을 쓰면된다. 그렇다면 forEach, map의 차이점은 뭘까? 기본적인 것이지만 너무 간과하고 있던 것 같다..! forEach forEach는 그냥 단순히 배열을 순회한다. const arr = [25, 23, 11, 47, 53, 17, 33]; const temp = arr.forEach((car) => car); console.log(temp); // undefined 따라서 이렇게 코드를 짜면 undefined가 출력된다. map map은 순회하면서 새로운 배열을 만들어서 return한다. const arr = [25, 23, 11, 47, 53, ..
객체의 특징 객체는 복사할 때 원시 타입(문자열, 숫자, 불린값)가 다른 방식을 사용한다. 객체를 아래 코드처럼 복사하게 되면 let user = { name: "John" }; let admin = user; // 참조값을 복사함 참조 값을 복사하게 된다. 이는 user에서 객체를 저장하고 있는 위치를 admin에게 알려줘서 참조값을 복사하는 것이다. 이렇게 된다면 admin을 수정했을 때, user의 값도 바뀌게 된다. 그리고 user와 admin을 '==', '===' 연산자로 비교하면 true가 나오게 된다. (객체는 '=='도 '==='와 동일하게 동작) 얕은 복사 얕은 복사는 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키는 것을 말한다. 객체 안의 한 객체라도 기존 변수의 객체를..
async 함수 async는 function 앞에 위치한다. async function f() { return 1; } f().then(alert); // 1 async를 붙이면 해당 함수는 항상 Promise를 반환한다. Promise가 아닌 값을 반환해도 이행상태의 Promise로 값을 감싸 이행된 Promise가 반환된다. await await는 async 함수 안에서만 동작한다. async function f() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve("완료!"), 1000) }); let result = await promise; // 프라미스가 이행될 때까지 기다림 (*) alert(result);..