컴포넌트 종류 1. 클래스형 컴포넌트 import React, { Component } from 'react' export default class List extends Component { render() { return ( List ) } } 2. 함수형 컴포넌트 2-1. 일반 함수형 import React from 'react' export default function List() { return ( List ) } 2-2. 화살표 함수형 import React from 'react' const List = () => { return ( List ) } export default List 여러 프레임워크나 라이브러리에 따라 다양한 종류가 있겠지만 내가 택한 것은 강의에서 추천한 위의 snippe..

웹페이지(브라우저) 렌더링 과정 렌더링 엔진은 HTML 파일과 SytyleSheet를 해석해서 렌더트리를 만든다. HTML 해석 -> DOM Tree SytyleSheet 해석 -> CSSOM Tree // CSS Object Model DOM Tree + CSSOM Tree -> Render Tree Render Tree는 화면에 표시되는 모든 노드의 컨텐츠와 스타일 정보를 포함하고있고 렌더트리가 형성되면 레이아웃 단계로 진행이 된다. 브라우저 내에서 뷰포트와 노드들의 정확한 위치와 크기들을 계산하는 단계를 레이아웃(Layout)이라고 하고 전문용어로 리플로우(Reflow)라고 합니다. Reflow(Layout이라고도 함), Repaint(Redraw라고도 함) 그런데 브라우저 렌더링 과정과 reflo..

블랙잭은 지겨워 문제 평범한 블랙잭 게임에서 수시로 패배하자 흥미가 떨어진 김코딩은 박타짜에게 게임룰을 변형하여 새로운 카드 놀이를 해 볼 것을 제안합니다. 새로운 룰은 다음과 같습니다. 1. 숫자로 이루어진 카드를 여러 장 받습니다. 2. 3장씩 카드를 고르고, 3장에 적힌 숫자들의 합이 소수인지 확인합니다. 3. 받아든 카드로 만들 수 있는 소수의 개수가 많은 사람이 이기게 됩니다. 예로, [1, 2, 3, 4]라는 카드를 받았을 때 만들 수 있는 숫자는 6, 7, 8, 9이고, 소수는 7 하나이기 때문에 가지고 있는 소수의 개수는 1개입니다. [2, 3, 4, 8, 13]라는 카드를 받았을 때 만들 수 있는 숫자는 9, 13, 18, 14, 19, 23, 15, 20, 24, 25이고, 소수는 13..

새로운 치킨 소스 레시피 문제 개업 이래로 항상 승승장구하는 '승승장구 치킨집'의 비결은 소스에 있다. 수많은 타사 브랜드 치킨집들이 승승장구 치킨집의 소스 비결을 알아내려고 했으나 빈번히 포기했다. 그 이유는 5대째 내려오는 '비밀의 승승장구 치킨 소스 비율 레시피'는 70억 인구 중 사장님만 알고 있기 때문이다. 최근, 누리꾼 사이에서 이 레시피의 일부분을 발췌했다는 소문을 듣게 되었다. 그 소문은 다음과 같다. N 가지의 재료 중에 단 M 가지만을 사용하여 조합한 모든 경우의 수 중 하나이다. 재료는 0과 1로만 이루어진 숫자로 암호화가 되어 있고, 항상 1로 시작하며 복호화를 할 수 없다. 재료의 순서에 따라 맛이 달라지기 때문에, 재료를 넣는 순서가 다르다면 다른 레시피이다. 이 소문을 참고하여..

가위바위보 문제 가위바위보 게임은 2인 이상의 사람이 동시에 '가위, 바위, 보'를 외치고 동시에 가위, 바위 또는 보 중에서 한 가지를 의미하는 손 모양을 내밀어 승부를 결정짓는 게임입니다. 세 판의 가위바위보 게임을 할 경우, 한 사람은 세 번의 선택(예. 가위, 가위, 보)을 할 수 있습니다. 세 번의 선택으로 가능한 모든 경우의 수를 구하는 함수를 작성합니다. 입력 없음 출력 2차원 배열(arr[i])을 리턴해야 합니다. arr[i]는 전체 경우의 수 중 한 가지 경우(총 세 번의 선택)를 의미하는 배열입니다. arr[i]는 'rock', 'paper', 'scissors' 중 한 가지 이상을 요소로 갖는 배열입니다. arr[i].length는 3 주의사항 최종적으로 리턴되는 배열의 순서는 가중치..

보드 게임 문제 N * N의 크기를 가진 보드판 위에서 게임을 하려고 합니다. 게임의 룰은 다음과 같습니다. 좌표 왼쪽 상단(0, 0)에 말을 놓는다. 말은 상, 하, 좌, 우로 이동할 수 있고, 플레이어가 조작할 수 있다. 조작의 기회는 딱 한 번 주어진다. 조작할 때 U, D, L, R은 각각 상, 하, 좌, 우를 의미하며 한 줄에 띄어쓰기 없이 써야 한다. 한 번 움직일 때마다 한 칸씩 움직이게 되며, 그 칸 안의 요소인 숫자를 획득할 수 있다. 방문한 곳을 또 방문해도 숫자를 획득할 수 있다. 보드 밖을 나간 말은 OUT 처리가 된다. 칸 안의 숫자는 0 또는 1이다. 획득한 숫자를 합산하여 숫자가 제일 큰 사람이 이기게 된다. 보드판이 담긴 board와 조작하려고 하는 문자열 operation이..

편의점 알바 문제 편의점에서 아르바이트를 하고 있는 중에, 하필이면 피크 시간대에 손님에게 거스름돈으로 줄 동전이 부족하다는 것을 알게 되었습니다. 현재 가지고 있는 동전은 1원, 5원, 10원, 50원, 100원, 500원으로 오름차순으로 정렬되어 있고, 각 동전들은 서로 배수 관계에 있습니다.동전 개수를 최소화하여 거스름돈 K를 만들어야 합니다. 이때, 필요한 동전 개수의 최솟값을 구하는 함수를 작성해 주세요. 입력 인자: k number 타입의 k 1 18 문제풀이 function partTimeJob(k) { // 동전의 금액을 큰 순서대로 정렬한 배열 const coins = [500, 100, 50, 10, 5, 1]; // 각 동전의 개수를 누적할 변수 let coinCount = 0; //..

짐 나르기 문제 김코딩과 박해커는 사무실 이사를 위해 짐을 미리 싸 둔 뒤, 짐을 넣을 박스를 사왔다. 박스를 사오고 보니 각 이사짐의 무게는 들쭉날쭉한 반면, 박스는 너무 작아서 한번에 최대 2개의 짐 밖에 넣을 수 없었고 무게 제한도 있었다. 예를 들어, 짐의 무게가 [70kg, 50kg, 80kg, 50kg]이고 박스의 무게 제한이 100kg이라면 2번째 짐과 4번째 짐은 같이 넣을 수 있지만 1번째 짐과 3번째 짐의 무게의 합은 150kg이므로 박스의 무게 제한을 초과하여 같이 넣을 수 없다. 박스를 최대한 적게 사용하여 모든 짐을 옮기려고 합니다. 짐의 무게를 담은 배열 stuff와 박스의 무게 제한 limit가 매개변수로 주어질 때, 모든 짐을 옮기기 위해 필요한 박스 개수의 최소값을 retu..