Salangdung_i의 기록

👩‍💻 script 사용시 어떤 순서대로 사용자에게 페이지가 보여지게 될까? 1. script가 header에 있을 경우 브라우저가 html을 한줄씩 읽는다. script를 만나면 html 파싱을 멈추고 자바스크립트를 읽는다. [ feching.js | executing.js ] > 자바스크립트를 다 읽고나면 다시 html을 파싱한다. > 페이지는 준비 완료된다. ❗️ 단점: js파일이 크다면 사용자가 화면을 보기까지의 시간이 많이 소요된다. 2. script가 body의 끝에 있을 경우 ... 브라우저가 html을 전부 parsing한다. 이후 페이지는 준비 완료된다. 이후 script를 읽는다.[feching.js|executing.js] 페이지가 준비가 다 된 다음에 스크립트를 만나서 서버에서 받아..

리액트를 공부하면서 제일 와닿지 않았던 것은 각종 hooks들이었다. useState, useEffect, useMemo, useCallback 등 용어가 나한테 직관적으로 의미가 다가오지 않았고, 클래스형 라이프사이클 메서드와 개념이 섞여버렸다. 내가 알기 위해 다시 정리하는 hooks이다. 1. useState 컴포넌트에서도 상태관리를 할 수 있는 것이다. 랜더링 직후 작업을 설정한다. const [value, setValue] = useState(); 기본형은 위와 같다. 뜯어보면 value는 상태 값 setValue은 상태를 설정하는 함수 useState안에 들어가는 것은 상태의 기본값이다. 예를 들면 import React, {useState} from 'react'; const App = ()..

조합이란? 서로 다른 n개의 원소를 가지는 어떤집합에서 순서에 상관없이 r개의 원소를 선택하는 것이며, (즉, 선택의 순서와 상관없이 같은 원소들이 선택되었다면 같은 조합이며 다른 원소들이 선택되었다면 다른 조합이다.) 이는 n개의 원소로 이루어진 집합에서 r개의 원소로 이루어진 부분집합을 만드는 것 혹은 찾는 것과 같다. 바로 예를 살펴보도록 하자. 4Combination3 = 4C3을 코드로 구현한다면 다음과 같은 인풋과 아웃풋을 가지게 된다. Input: [1, 2, 3, 4] Output: [ [1, 2, 3], [1, 2, 4], [1, 3, 4], [2, 3, 4] ] 4C3은 4개중에 3개씩 선택할 때 나올 수 있는 모든 조합을 구한다는 말이다. 이 때, 조합의 순서는 상관이 없다. 즉 [1..

2021년 10월부터 JS/React를 공부하기 시작했다. 그 시점부터 지금까지 공부했을 때 도움이 된 강의/서적에 대한 리뷰 및 기록이다. [강의] 자바스크립트 기초 강의 (ES5+) ⭐️⭐️⭐️⭐️ 쇼핑몰 미니게임 클론 코딩 & 코드 리뷰 ⭐️⭐️⭐️ 지구에서 제일 쉽게 설명한 자료구조와 알고리즘 ⭐️ 포트폴리오 웹사이트 클론 코딩 ⭐️⭐️⭐️⭐️ 프론트엔드 필수 브라우저 101 ⭐️⭐️⭐️⭐️ Git 마스터 과정 (기본개념부터 실무팁까지) ⭐️⭐️⭐️⭐️ 리액트 기본 강의 && 실전 프로젝트 3개 ⭐️⭐️⭐️ 비전공자를 위한 개발자 취업 올인원 가이드 [통합편] ⭐️⭐️⭐️ 제주코딩베이스캠프 Code Festival: JavaScript 100제 ⭐️⭐️⭐️ [서적] 비전공자를 위한 이해할 수 있는..

선입선출(FIFO)알고리즘은 가장 먼저 들어와서 가장 오래있었던 페이지를 우선으로 교체 시키는 방법을 의미한다. hit일땐 실행시간이 1초, miss일때의 실행시간은 6초이다. 전체의 실행시간을 자바스크립트 코드로 구해보자. 문제보기 테스트케이스 페이지 페이지 프레임 실행시간 BCBAEBCE 3 38 ABCABCABC 3 24 ABCDABEABCDE 4 62 ABCEDF 0 36 ABCDABEA 3 43 내가 푼 코드이다. function solution(pageFrame, page) { let memory = []; let result = 0; for (let key of page) { let check = false; // 1. 메모리안에 포함되어있으면 히트이면서 메모안에 없을떄만 push if (m..

코딩테스트를 준비하면서 자주나오거나, 알아두어야 할 함수들을 정리해보았다. [정의] splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) [매개변수] start는 배열의 변경을 시작할 인덱스 deleteCount는 배열에서 제거할 요소의 수 item1, item2, ... 는 배열에 추가할 요소이다. 아무 요소도 지정하지 않으면 splice() 요소를 제거하면된다. [예시] let fruits = ['🍎', '🍏', '🍌', '🍓']; fruits.splice(0, 1, '🍇'); console.log(fruits); // 출력 결과 : ['..

자바스크립트를 공부하면서 어려웠던 개념은 클로저이다. 클로저는 스코프, 스코프 체인에 대한 지식이 있어야 이해할 수 있다. 스코프란 식별자에 대한 유효범위이다. 이렇게 말하면 어려운데 아래의 코드를 보면 outer라는 함수가 선언되어 있다. 이 outer함수가 실행되면 outer함수에 대한 스코프가 생성된다. function outer() { var a = 'A'; var b = 'B'; } 이 표는 outer 함수에 대한 스코프이다. 코드를 조금 수정해서 outer함수 안에 inner함수를 생성해보자. function outer() { var a = 'A'; var b = 'B'; function inner() { var c = 'C'; var d = 'D'; } } 이렇게 각각의 스코프가 생성된다 그..

render() 메서드 : 준비한 UI를 랜더링하는 메서드이다. 내부적으로 html태그를 사용하여 골격을 만든다. constructor 메서드 : 컴포넌트 생성자 메서드로 컴포넌트를 만들때 처음으로 실행된다. constructor(props) { super(props); this.state = { number: 0 // 초기 state를 정할수 있다. } } getDerivedStateFromProps 메서드 : props로 받아온 값을 state에 동기화 시키는 용도로 사용하며, 컴포넌트가 마운트 될 때와 업데이트 될 때 호출된다. static getDerivedStateFromProps(nextProps, PrevState) { if(nextProps.value !== prevState.value){..

라이프 사이클 메소드 컴포넌트의 수명은 페이지에 랜더링 되기전인 준비과정에서 시작하여 페이지에서 사라질때 끝난다. 라이프사이클은 3가지의 과정을 거치는데 먼저 페이지에 컴포넌트가 나타나는 '마운트' , 컴포넌트 정보를 업데이트하는 '업데이트'(이 과정을 리랜더링이라한다.) 이후 페이지에서 컴포넌트가 사라지는 '언마운트' 과정이다. 라이프 사이클 3가지 마운트 : DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고 한다. 업데이트 : 컴포넌트는 4가지 경우에 업데이트 된다. 1. props가 바뀔 때 2. state가 바뀔 때 3. 부모 컴포넌트가 리랜더링 될 때 4. this.forceUpdate로 강제로 랜더링을 트리거 할 때 언마운트 : 컴포넌트를 DOM에서 제거하는 것이다. consturcto..