코딩연습장

Prop Drilling이란 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기위해 여러 중간 컴포넌트를 통해 값을 내려주는 것을 의미한다.중간 컴포넌트에서 사용되지 않더라도 자신이 원하는 컴포넌트에서 사용하기 위해선 꼭 지나쳐야하는데 이때 부모에서 원하는 자식 컴포넌트까지 prop이 뚫고 내려가는 모양을 prop drilling이라 한다.import React from 'react';function App() { return ;}function GrandFather() { const name = '할아버지'; return ;}function Mother(props) { return ;}function Child({ GrandFatherName }) { console.log(G..

1. 태그는 꼭 닫기import React from 'react';function App() { }export default App;이렇게 input 태그를 닫지 않으면 에러가 발생한다. 2. 한개의 엘리먼트만 반환하기import React from 'react';function App() { return 하나! 둘!}export default App;엘리먼트를 하나만 반환하지 않으면 에러가 발생한다.으로라도 하나로 묶자. 3. JSX에서 JS값을 가져오려면, {}를 사용하자.import React from 'react';function App() { const name = 'DIDI'; return hello {name}!;}export default Ap..

내가 작성한 코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = line.split(' ');}).on('close', function () { console.log(input.join(''))}); join() 메소드를 사용해 배열 내 문자열들을 붙여서 출력했다.인덱스별로 + 연산자를 활용하여 출력할 수도 있다.

내가 작성한 코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = line.split(' ');}).on('close', function () { console.log(`${Number(input[0])} + ${Number(input[1])} = ${Number(input[0])+Number(input[1])}`);});백틱을 사용하여 원하는 출력형태로 출력하도록 작성하였다.깔끔하진 않다고 생각한다.  다른사람이 작성한..

내가 작성한 코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});rl.on('close', function () { console.log(`!@#$%^&*(\\'"?:;`)}); js에서 특수문자는 다양한 역할을 하기도 한다.따라서 백틱`에 넣어 문자로 출력되도록 하고, \를 출력하기위해 \\를 사용한다.

내가 작성한 코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = [line];}).on('close',function(){ str = input[0]; let out = '' for (let i = 0; i 반복문과 조건문을 사용하여 문자열의 인덱스마다 대소문자를 구분하고 상황에 맞게 바꾸도록 만들었다. 다른사람이 작성한 코드const readline = require('readline');const rl =..

문자열 str과 정수 n이 주어집니다.str이 n번 반복된 문자열을 만들어 출력하는 코드를 작성해 보세요.제한사항1 ≤ str의 길이 ≤ 101 ≤ n ≤ 5입출력 예입력 #1string 5출력 #1stringstringstringstringstring 내가 작성한 코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = line.split(' ');}).on('close', function () { str = input[0..

정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요.제한 조건num은 int 범위의 정수입니다.0은 짝수입니다.입출력 예numreturn3"Odd"4"Even"내가 작성한 코드function solution(num) { var answer = ''; if (num%2 === 0) { answer = "Even" } else { answer = "Odd" } return answer;} 다른사람이 작성한 코드function evenOrOdd(num) { return num % 2 ? "Odd" : "Even"}삼항 연산자를 사용하여 바로 return에 작성하였다. 간단하다.

프레임워크프레임워크 : 코드 기본 구조와 규칙을 제공하는 도구, 프레임워크가 제공하는 규칙과 인터페이스에 따라 코드를 작성해야함.프레임워크는 애플리케이션의 흐름과 제어를 관리하고 필요한 기능과 도구를 제공한다.백엔드 - Spring / 프론트 - Angular, Vue 라이브러리라이브러리 : 재사용 가능한 코드의 집합, 특정 기능을 수행하는 함수, 클래스, 모듈 등으로 구성개발자가 필요한 기능을 호출하여 사용할 수 있다.프레임워크와 달리 개발자가 코드의 흐름과 제어를 관리한다.jQuery, React, Express, Axios 등이 있다. 주된 차이점은 '누가 제어를 주도하는가'이다. 프레임워크는 자체가 제공하는 규칙을 개발자가 따라야 하는 방면, 라이브러리는 개발자가 제어권을 가진다. 리액트는 UI ..

얕은 복사 : 복사할 때 원본의 참조 값(주소 값)을 복사한다.깊은 복사 : 복사할 때 원본의 실제 값을 복사한다.위 그림과 같이 깊은 복사는 원 데이터를 복사한 것이고, 얕은 복사는 원본 값의 주소값을 복사해간 것이다.얕은 복사는 원본 참조(주소)값을 복사해 간 것으로, 복사된 값에 변화를 주어도 원본값이 변하게되므로, 원본데이터의 변화를 주게 되어 조심해야한다. 얕은 복사얕은 복사를 하는 방법은 다음과 같다.//JSON.stringfy, JSON.parse 이용let origin = [1,2,3];let copy = JSON.parse(JSON.stringfy(origin))//lodash 라이브러리 이용//전개연산자 이용let origin = {a:1, b:2, c:3}let copy = {...o..