코딩연습장

함수형 컴포넌트 import React from 'react'; function App() { const name = 'react'; return {name} } export default App; 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const name = 'react'; return {name} } } export default App; 클래스형 컴포넌트에는 세가지가 꼭 필요하다. 1) class라는 키워드가 필요하다. 2) Component로 상속을 받아야 한다. ----> ??아직 모름 3) render()메소드가 반드시 있어야한다. -----> ??아직 모름 일반적 차이 ..

Prop Drilling이란 뭘까? Prop Drilling이란 props를 '하위 컴포넌트로 전달하는 용도로만 쓰이는' 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다. 다시말해 props를 통해 데이터를 전달하는 과정에서 중간 컴포넌트는 그 데이터가 필요하지 않음에도 자식 컴포넌트에 전달하기 위해 props를 전달해야하는 과정을 말한다. props drilling의 장점 컴포넌트 간에 데이터를 가장 쉽고 빠르게 전달할 수 있다. 작은 규모의 application에서 컴포넌트를 잘게 분해해서 props drilling을 하게되면, 코드를 실행하지 않고 정적으로 따라가는 것만으로도 어떤데이터가 어디에서 사용되는지 쉽게 파악할 수 있으며, 수정..

npm install --save prop-types 터미널에 입력해 prop-types 설치. import React from 'react'; import PropTypes from 'prop-types'; function App() { return ; } function GrandFather() { const name = '전상국'; return ; } function Mother(props) { return ; } Child.propTypes = { grandFatherName: PropTypes.string, }; function Child({ grandFatherName }) { return {grandFatherName}; } export default App; import 해주고 사용. 특정..

문서객체 : HTML페이지에 있는 html, head, body, title, h1, div, span 등을 HTML에서는 요소라고하고, 자바스크립트에서 문서객체라 합니다. DOMContentLoaded 이벤트 : 문서객체를 조작할 때 사용합니다. //DOMContentLoaded에 오타가 나도 오류를 출력하지 않으므로 오타에 주의한다. document.addEventListener('DOMContentLoaded', () => { //문장 } HTML페이지가 코드를 읽는 순서 1 이 있으므로 HTML5문서이다 2 html태그가 있어 만든다. 3 head 태그가 있어 만든다. 4 title 태그가 있어 만든다. 5 body 태그가 있어 만든다. 위에서 아래로, 왼쪽에서 오른쪽으로 순서대로 코드를 읽습니다..

문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. 제한 조건 x는 1 이상, 10000 이하인 정수입니다. function solution(x) { var answer = true; let xarr = String(x).split('') //입력값을 배열화시킨다. let totalxarr = 0; //입력된 숫자를 다 더할 변수를 선언한다. for(i=0; i

문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인 경우에는 0을, 작업을 500번 반복할 때까지 1이 되지 않는다면 –1을 반환해 주세요. 제한 조건 입력..

문제 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 제한 조건 arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. 처음 문제를 풀 때 제한조건을 이해하지 못했었다. "인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다." 이게 중복 값이 없다는 뜻이다. function solution(arr) { var answer = []; let a = arr.indexOf(Math.m..

문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 제한 조건 n은 1이상, 50000000000000 이하인 양의 정수입니다. function solution(n) { var answer = 0; //sqrt-루트 / isInteger-정수인지 판별 if (Number.isInteger(Math.sqrt(n))) { //입력값의 제곱근이 정수인지 판별해 정수이면 진행 answer = (Math.sqrt(n)+1)*(Math.sqrt(n)+1) //(제곱근+1)의 제곱값을 반환 } else { //제곱근이 정수가 아닐때 an..

문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 제한 조건 n은 1이상 8000000000 이하인 자연수입니다. function solution(n) { var answer = 0; let a = n.toString().split('') //입력값을 문자열로 바꾸고 배열로 저장 let b = '' //빈 문자열 선언 for (let i=0; i

문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한 조건 n은 10,000,000,000이하인 자연수입니다. function solution(n) { var answer = []; let a = String(n).split('') //입력값을 배열로 만듦 for (let i=0; i parseInt(n)); } reverse까진 똑같고, map함수안에 parseInt()(10진법으로 바꾸기)를 사용해 숫자형태로 바꾸었다.