code를 헤엄치는 인어공쭈

렌더링 - 컴포넌트에게 현재 Props와 State에 기반하여 UI에서 어떻게 보여지고 싶은지 알려달라고 요청하는 과정이다. 크게 3개의 단계로 나뉜다.렌더링 트리거 (손님의 주문을 주방으로 전달)컴포넌트 렌더링 (주방에서 주문 준비하기)DOM에 커밋 (테이블에 주문한 요리 내놓기) 1단계: 렌더링 트리거컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다.1) 컴포넌트의 초기 렌더링인 경우 2) 컴포넌트의 state가 업데이트된 경우 초기 렌더링  앱을 시작할 때 초기 렌더링을 트리거해야 한다, 대상 DOM 노드와 함께 createRoot를 호출한 다음 해당 컴포넌트로 render 메서드를 호출하면 이 작업이 완료된다.import Image from './Image.js';import { create..

전체적인 흐름으로 우선적으로 살펴보겠다. 먼저 웹브라우저를 들어가기 => url 호스트 ip주소를 DNS 한테 물어본다=> 주소를 다시 웹브라우저 한테 전달 => 3 way handshake => 웹브라우저는 받아서 다시 서버한테 전달 => 서버에게 데이터 요청 (http request) => 데이터 전송 (http respones) => 사용자에게 데이터 출력 => 데이터 파싱 (html먼저 파싱 돔트리 생성, 생성중 스타일 태그를 만나면 잠시 중단하고 스타일 태그 파싱 cssom 트리 생성, 이후 마치면 html 를 마저 실행하다가 스크립트를 만나면 자바스크립트 엔진을 실행한다 (AST) => 돔트리와 cssom 트리를 합쳐서 랜더트리를 생성. => 여기까지 과정을 construction 이후 화면에..

자바스크립트는 싱글스레드 언어이다 즉 몸통이 하나이기 때문에 한번에 한개 밖에 하지 못하고 그게 끝나고 다음 동작을할수 있다는것이다.따라서 여러개의 작업을 하는데 문제가 있어서 우린 비동기를 쓰는것이다.비동기가 병렬적이라고 해서 자바스크립트가 병렬적으로 작업을 하는게 아니라 큐에 쌓아두고 끝나면 기다렸다가 실행을 하는 것이다. 자바스크립트는 언어이기 때문에 동작을 하려면 실행 시켜줄 엔진이 필요하다. 대표적인 엔진으로는 V8엔진(Chrome, Node.js에서 사용)이 있으며, 이외에도 각 브라우저 별로 여러가지 엔진들이 존재한다. 자바스크립트 엔진은 크게 Memory Heap과 Call Stack으로 이루어져 있습니다.함수를 실행하면 아래와 같은 Call Stack이 차례대로 생기게 된다. 비동기같은 ..

문제설명)스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래의 장르를 나타내는 문자열 배열 genres와 노래별 재생 횟수를 나타내는 정수 배열 plays가 주어질 때, 베스트 앨범에 들어갈 노래의 고유 번호를 순서대로 return 하도록 solution 함수를 완성하세요.  문제풀이)항상 그렇듯이 맵을 생성해서 장르를 저장한다. 하지만 이번엔 총 카운트가 필요해서 두개를 생성해서 담았다.그다음에 총 카운트를 해서 제일 많은 카운트의 장르순으로 정렬을 한다 .정렬을 한 다음 다시 순서대로 담으면 완성function solution(genres, plays) { var answer = []; const genreMap = new Map();..

문제설명)코니는 각 종류별로 최대 1가지 의상만 착용할 수 있습니다. 예를 들어 위 예시의 경우 동그란 안경과 검정 선글라스를 동시에 착용할 수는 없습니다.착용한 의상의 일부가 겹치더라도, 다른 의상이 겹치지 않거나, 혹은 의상을 추가로 더 착용한 경우에는 서로 다른 방법으로 옷을 착용한 것으로 계산합니다.코니는 하루에 최소 한 개의 의상은 입습니다. 문제풀이)저번에 풀었던 문제와 비슷하게 느껴져서 map.set 을 사용하면 좋을거 같다고 생각이 들었다.데이터를 처음에 맵에 넣어두고 이렇게 저렇게 다양한 시도를 해본 끝에 탄생먼저 데이터를 담을 맵을 생성옷갯수대로 포문을 돌리고 카테고리 중복 체크를 하기위해 +1 를 더한다그럼 맵안에 {옷 : 2, 모자 :1} 이런식으로 세팅이 된다따라서 맵을 다시 포문..

문제설명)전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성해주세요.  문제풀이)비교를 위해 목록을 정렬포문을 돌리면서 뒤에랑 비교function solution(phone_book) { var answer = true; // 전화번호 목록을 정렬 phone_book.sort(); for (var i = 0; i

문제설명)마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.  문제는 이런식이여서 처음엔 간단하게 풀어봤다.문제풀이)각각의 어레이를 정렬해서 비교길이를 맞추기 위해 completion에는 빈값 추가function solution(participant, completion) { var answer = ''; completion[completion.length] = ''; var arr1 = participant.sort(); var arr2 = completion.sort(); for(le..

https://school.programmers.co.kr/learn/courses/30/lessons/1845 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코테 준비를 하면서 각각의 알고리즘 관련 문제를 풀어보고 있다. 먼저 해시 알고리즘의 문제중 폰켓몬을 풀어봤다. 문제 요약) 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3, 1, 2, 3]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬..

그리디 알고리즘 : 문제를 해결하기 위해 선택 가능한 옵션 중에서 가장 최선의 것을 선택해 나가는 알고리즘 function greedyCoinChange(amount, coins) { coins.sort((a, b) => b - a); // 동전을 내림차순으로 정렬 let change = []; let remaining = amount; for (let coin of coins) { while (remaining >= coin) { change.push(coin); remaining -= coin; } } return change; } const coins = [25, 10, 5, 1]; const amount = 87; const result = greedyCoinChange(amount, coins)..

여러 개발자들과 같이 작업하면 conflict 이 일어나는 경우가 많다. 같은 파일을 작업하는 경우에 자주 생기는데 그중에 하나가 vscode HTML Format 이 안맞기 때문이다. 따라서 Prettier 를 사용해서 맞춰줘야된다. 하단 링크를 통해서 작동하는 방식을 볼수 있다. 참고바람 https://prettier.io/playground Prettier prettier.io 설정하는 방법! 1. Prettier vscode Extension 설치 2. Default Formatter 로 Prettier 선택하기. 설정 들어가 Editor: Default Formatter 를 선택.Format On Save도 체크 3. . prettierrc라는 파일 생성, 원하는 옵션값을 파일에 작성한다. //..