신입개발자

문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 제한 사항 seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다. 입출력 예 seoul return ["Jane", "Kim"] "김서방은 1에 있다" 초기화면 function solution(seoul) { var answer = ''; return answer; } 글쓴이 풀이 function solution(seoul) {..

1. 동기적(Synchronous) 동기적으로 작업을 처리한다면 1번이 작업중이라면 2번은 작업 준비상태이고 1번이 끝이 나야 2번이 작업을 합니다 2. 비동기적(Asynchronous) 비동기적으로 작업을 처리한다면 동시에 여러가지 작업을 처리할 수도 있고 기다리는 과정에서 다른 함수를 호출할 수도 있습니다 예시 동기적 function work() { const start = Date.now(); // 현제 시간을 표시해줍니다 for(let a = 0; a < 100000000; a++){} const end = Date.now(); console.log(end - start + 'ms'); } work(); // 521ms console.log('다음작업'); // 다음작업 코드윗줄부터 순서대로 실행..

1. spread와 rest-spread 연산자(ES6의 도입) // spread 펼치다 퍼트리다 라는뜻을 가지고 있습니다 // 기존 객체를 포함한 새로운 객체를 만들고 싶을때 spread 연산자를 사용할수 있습니다 const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribut: 'cute' } const purpleCuteSlime = { name: '슬라임', attribut: 'cute', color: 'purple' } console.log(slime); // Object {name: "슬라임" } console.log(cuteSlime); // Object {name: "슬라임", attribut: "cute"} console...

1. 삼항연산자 condition ? true : false // 조건 ? 결과가 true 일시 : 결과가 false 일시 2. Truthy and Falsy // Falsy 한 값 : false와 비슷한 값 console.log(!undefined); // true console.log(!null); // true console.log(!0); // true console.log(!''); // true console.log(!NaN); // true console.log(!false); // true // Truthy 한 값 : true와 비슷한 값 console.log(!3); // false console.log(!'hello'); // false console.log(!['array']); //..

useCallback은 useMemo와 상당히 비슷한 함수입니다 주로 렌더링 선능을 최적화해야 하는 상황에서 사용하는데 이 Hook을 사용하면 만들어 놨던 함수를 재사용할 수 있습니다 2021.06.26 - [공부/React] - [ React-Hooks ] useMemo 사용하기 에서 구현한 Average컴포넌트를 보면 onChange와 onInsert라는 함수를 선언해줬었습니다 이경우 이러한 방식은 문제는 없지만 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분은 메모리 효율이 좋지 않습니다 그래서 최적화해주는 게 좋습니다 1. useCallback 평균구하기 최적화 import React,{useState, useMemo, useCallback} from "rea..

1. 평균값 구하기 useMemo를 사용한다면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있습니다 useMemo.js import React,{useState} from "react"; const getAverage = numbers => { console.log('평균값 계산 중..'); if(numbers.length === 0) return 0; const sum = numbers.reduce((a,b) => a+b); return sum / numbers.length; } const Average = () => { const [list, setList] = useState([]); const [number, setNumber] = useState(''); const onChange =..

useReducer 선언하기 // 1 카운터 구현하기 function reducer(state, action){ // action.type에 따라 다른 작업 수행 switch (action.type){ case 'INCREMENT' : return { value : state.value + 1}; case 'DECREMENT' : return { value : state.value -1}; default: // 아무것도 해당되지 않을 때 기존 상태 반환 return state; } } // 2 인풋 상태 관리하기 function reducer(state, action) { return { ...state, [action.name] : action.value }; } 1. useReducer 카운터 App..

문제 설명 124 나라가 있습니다. 124 나라에서는 10진법이 아닌 다음과 같은 자신들만의 규칙으로 수를 표현합니다. 124 나라에는 자연수만 존재합니다. 124 나라에는 모든 수를 표현할 때 1, 2, 4만 사용합니다. 예를 들어서 124 나라에서 사용하는 숫자는 다음과 같이 변환됩니다. 10진법 124나라 10진법 124나라 1 1 6 14 2 2 7 21 3 4 8 22 4 11 9 24 5 12 10 41 자연수 n이 매개변수로 주어질 때, n을 124 나라에서 사용하는 숫자로 바꾼 값을 return 하도록 solution 함수를 완성해 주세요. 제한사항 n은 500,000,000이하의 자연수 입니다. 입출력 예 n result 1 1 2 2 3 4 4 11 초기화면 function soluti..

문제 설명 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이) 제한사항 a, b의 길이는 1 이상 1,000 이하입니다. a, b의 모든 수는 -1,000 이상 1,000 이하입니다. 입출력 예 a b result [1,2,3,4] [-3,-1,0,2] 3 [-1,0,1] [1,0,-1] -2 입출력 예 설명 입출력 예 #1 a와 b의 내적은 1*(-3) + 2*(-1) + 3*0 + 4*2 = 3 입니다. 입출력 예 #2 a와 b의 내적은 (-1)*1 + 0*0 + 1*(-1)..

useEffect 선언 방법 1. 마운트 될 때만 실행하고 싶을 때 useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링 될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 비어있는 배열을 넣어주면 됩니다 Effect.js import React, {useEffect, useState} from "react"; const Effect = () => { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); useEffect(() => { console.log('마운트될 때만 실행 됩니다'); },[]); const onChangeName = e => { setName..