Build the Needs

🎁컴포넌트(Component) 컴포넌트는 우선 불록이고 함수입니다 컴포넌트 = 화면을 구성하는 하나의 단위 레고 블록을 코드로 만들면 // App 컴포넌트 function App (){ return } 리액트 세계에서 말하는 컴포넌트는 함수 컴포넌트를 만들라고 한다면 우리는 html을 return 하는 함수를 만들면된다 👉 리액트에서 컴포넌트는 클래스형 Component와 함수형 Component가 있으며 둘의 차이점은 상태값과 Life Cycle의 유무에 따라 다릅니다. 💥 하지만 리액트 버전 16.8부터는 훅(Hook)에 의해 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성할 수 있게 되었습니다. 📌클래스형 Component 🟥 클래스형 컴포넌트는 상태값을 가질 수 있으며 리액트 컴포넌트의..

우선 양방향 바인딩에 들어가기 전에 데이터 바인딩이란 무엇인가에 대해 들어갈 필요가 있다. 🎁 데이터 바인딩이란? 두 데이터 또는 정보의 소스를 일치시기는 방법으로 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 자바스크립트 Object(객체)를 일치시키는 것을 말합니다. 예시로 MVC모델에서 model과 view를 서로 묶어서 model과 view를 자동 동기화하는 것을 말합니다. 🎁 양방향 데이터 바인딩은 그럼 무엇일까? 쉽게 말하자면 양방향 데이터 바인딩은 Back-end의 Model과 Front-end의 뷰 양쪽의 데이터 일치가 모두 가능한 것이다. 데이터의 변화를 감지하여 템플릿과 결합해 화면을 갱신하거나 화면 입력에 따라 데이터를 갱신하게 되는 것입니다. 뷰에서 사용자가 특정 데..

🎁 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 📌 JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. Javascript변수는 만들었을때 바로 특정 타입 값으로 연결되지 않으며 어떤 타입의 값으로 할당할수도 있으며 또한 재할당 할 수도 있습니다. 흔히 자바스크립트는 untyped 또는 weakly-typed언어라고도 많이 부릅니다. 예를 들어 "12345" 라는 문자열과 1이라는 숫자를 곱하게 되면 원래는 문자열에 int라는 type을 자바에서는 설정해주겠지만 자바스크립트에서는 그냥 "12345 * 1 === 해도 결과값은 12345로 숫자로 나오게 됩니다. 그러므로 자바스크립트는 weakly-typed라고 볼수 있지요. 그리고 ..

문제 설명 다트 게임 카카오톡에 뜬 네 번째 별! 심심할 땐? 카카오톡 게임별~ 카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의 합계로 실력을 겨루는 게임으로, 모두가 간단히 즐길 수 있다. 갓 입사한 무지는 코딩 실력을 인정받아 게임의 핵심 부분인 점수 계산 로직을 맡게 되었다. 다트 게임의 점수 계산 로직은 아래와 같다. 다트 게임은 총 3번의 기회로 구성된다. 각 기회마다 얻을 수 있는 점수는 0점에서 10점까지이다. 점수와 함께 Single(S), Double(D), Triple(T) 영역이 존재하고 각 영역 당첨 시 점수에서 1제곱, 2제곱, 3제곱 (점수1 , 점수2 , 점수3 )으로 계산된다. 옵션으로 스타상(*) ,..

문제 설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를..

문제 설명 실패율 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로 게임 시간을 늘려서 난이도를 조절하기로 했다. 역시 슈퍼 개발자라 대부분의 로직은 쉽게 구현했지만, 실패율을 구하는 부분에서 위기에 빠지고 말았다. 오렐리를 위해 실패율을 구하는 코드를 완성하라. 실패율은 다음과 같이 정의한다. 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수 / 스테이지에 도달한 플레이어 수 전체 스테이지의 개수 N, 게임을 이용하는 사용자가 현재 멈춰있는 스테이지의 번호가 담긴 배열 stages가..

문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫..

문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 array의 길이는 1 이상 100 이하입니다. a..

문제 설명 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. 제한사항 absolutes의 길이는 1 이상 1,000 이하입니다. absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. signs의 길이는 absolutes의 길이와 같습니다. signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다. 입출력 예absolutessignsresult [4,7,12] [true,false,true] 9 [1,2,3] [false,false,t..

문제 설명 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ numbers의 길이 ≤ 9 0 ≤ numbers의 모든 원소 ≤ 9 numbers의 모든 원소는 서로 다릅니다. 입출력 예numbersresult [1,2,3,4,6,7,8,0] 14 [5,8,4,0,6,7,9] 6 입출력 예 설명 입출력 예 #1 5, 9가 numbers에 없으므로, 5 + 9 = 14를 return 해야 합니다. 입출력 예 #2 1, 2, 3이 numbers에 없으므로, 1 + 2 + 3 = 6을 return 해야 합니다. 우선 num..