코딩연습장

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..

프레임워크프레임워크 : 코드 기본 구조와 규칙을 제공하는 도구, 프레임워크가 제공하는 규칙과 인터페이스에 따라 코드를 작성해야함.프레임워크는 애플리케이션의 흐름과 제어를 관리하고 필요한 기능과 도구를 제공한다.백엔드 - 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..

trim() : 문자열 양쪽 끝의 공백을 없앤다.let st = " 안녕 "st.trim()// st = "안녕"필요없는 공백이나 줄바꿈을 없앨 수 있다. split() : 문자열을 특정 문자로 구분하여 나눌 수 있다.let st = "안녕나는개발자야!"st.split('\n')//st = ["안녕", "나는", "개발자", "야!"]원하는 문구를 기준으로 문자열을 나누어 배열화 시킬 수 있다.  Math.random() : 0~1사이 랜덤한 난수를 만들 수 있다.let num = Math.random()//num = 0.1235512843265462random 메소드를 사용하여 암호화가 필요한 코드에 사용할 수 있다.다만, 만에하나라는 생각으로 난수생성 라이브러리를 사..

toFixed() 로 숫자 N번째 자릿수까지 반올림하여 출력한다.const l = 123.456798l.toFixed(2)>'123.46' isNaN(), isFinite()로 NaN(Not a Number)인지 Infinity(무한)이 아닌지 확인할 수 있다.NaN != NaN이기때문에 isNaN()으로 확인해야한다.const m = Number('숫자로 변환불가')m === NaN>falseNumber.isNaN(m)>trueconst n = 10/0InfinityNumber.isfinite(n)>Falseconst l = -10/0-InfinityNumber.isfinite(l)>FalseisFinite는 유한할때 true이고 무한일때 false이다.

배열엔 '인덱스'와 '요소'가 있듯이, 객체에는 '키'와 '밸류'가 있다.let arr = [0,1,2,3,4]let dict = { '가':'나', '다':'라', '마':'바', '사':'아', '자':'차'}밸류에 접근하기 위해선 배열에서 인덱스를 사용한것과 비슷하게 사용할수도 있다.let dict = { '가':'나', '다':'라', '마':'바', '사':'아', '자':'차'}dict['가'] >>> '나'dict.가 >>> '나' 객체의 속성 중 함수 자료형인 속성을 메소드라 한다. 또한 메소드 안에서 this를 사용하여 객체의 자료를 사용할 수 있다.const pet = { name: '구름', eat: function (..

setTimeout(함수, 시간) // 특정 시간 후에 함수를 한 번 호출한다.setInterval(함수, 시간) // 특정 시간마다 함수를 호출한다. setTimeout(() => { console.log('1초 후에 실행됩니다.')}, 1000)let count = 0setInterval(()=?{ console.log(`1초마다 실행됩니다.(${count}번째)`) count++}, 1000)//1초 후에 실행됩니다.//1초마다 실행됩니다.(0번째)//1초마다 실행됩니다.(1번째)//1초마다 실행됩니다.(2번째)//1초마다 실행됩니다.(3번째)...clearTimeout(타이머_ID) // setTimeout() 함수로 설정한 타이머를 제거합니다.clearInterval(타이머_ID) // s..

전에 사용한 map(), filter()메소드를 쉽게 사용하고자 화살표 함수를 사용한다.(매개변수) => {} map()의 콜백함수로 화살표함수를 사용한다면 이렇게 사용한다.const array = [0,1,2,3,4,5,6,7,8,9]array.map((value) => value*value )//(10) [0,1,4,9,16,25,36,49,64,81]const array = [0,1,2,3,4,5,6,7,8,9]array .filter((value)=> value%2 ===0) .map((value) => value*value) .forEach((value) => { console.log(value) })//0//4//16//36//64 이전에 프로젝트에서 사용했던 코드가 있..

자바스크립트에서 함수도 하나의 자료형이므로 매개변수로 전달할 수 있는데, 함수를 매개변수로 전달하는 함수를 콜백함수라 합니다.function callThreeTimes (callback) { for (let i =0; i callThreeTimes(function (i) { console.log(`${i}번째 함수 호출`)})이렇게 익명함수 형태로 작성할 수도 있다. 콜백함수는 forEach(), map(), filter()에 주로 사용된다.let numbers = [273, 52, 103, 32, 57]numbers.forEach(function (value, index, array) { console.log(`${index}번째 요소 : ${value}`)})//0번째 요소: 273//1번째 요소: ..