jineecode

src/Counter.js import React, { Component } from "react"; class Counter extends Component { constructor(props) { super(props); this.state = { //state의 초깃값 설정하기 number: 0; } } render() { const { number } = this.state; return ( {number} { this.setState({ number: number + 1 }); }} > +1 ); } } export default Counter; class Counter extends Component { constructor(props) { super(props); this.state = { ..

1. props 기본값 설정 App.js import React, { Component } from "react"; import "./App.css"; import MyComponent from "./MyComponent"; const App = () => { return ( ); }; export default App; App은 부모 컴포넌트, 는 자식 컴포넌트라고 한다. App이 갖고 있는 state 데이터를 자식 컴포넌트에게 props를 이용해 전송해줄 수 있다. 그래야만 자식 컴포넌트가 부모 컴포넌트가 가진 state를 쓸 수 있다. props를 쓰는 방법은 아래와 같다. 1. 부모 안에 있는 자식 컴포넌트 태그에 속성을 만들어준다. 2. 바깥에 있는 자식컴포넌트에 props 파라미터 사용 fun..

1. Q. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸 주어야 할까요? A. Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문 div로 꼭 감싸고 싶지 않을 때는 리액트v16 이상부터 도입된 혹은 으로 감싸면 된다. 2. JSX 내부의 자바스크립트 표현식에서는 if 문을 사용할 수 없다. JSX 밖에서 if문을 사용하거나 {} 안에 삼항연산자를 사용하면 된다. 혹은 &&연산자를 사용한다. (false를 렌더링 할 때는 아무것도 나타나지 않기 때문) 3. Q. 클래스형 컴포넌트와 함수형의 컴포넌트의 차이 A. 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 ..

async, await은 비동기를 다루지만, 프로미스와는 다른 사용법을 가지고 있고 프로미스를 이용한다. function myFunc() { } async function myAsync() { } console.log(myFunc); console.log(myAsync); 모양이 특이한 것을 볼 수 있다. 호출을 해보자. function myFunc() { return 'func'; } async function myAsync() { return 'async'; } console.log(myFunc()); console.log(myAsync()); promise가 나온다. function delayP(sec) { return new Promise((resolve, reject) => { setTimeou..

function delay(sec, callback) { setTimeout(() => { callback(new Date().toISOString()); }, sec * 1000); } console.log('start', new Date().toISOString()); delay(1, (result) => { console.log(1, result); }); console.log('hello'); function delay(sec, callback) delay라는 함수에 sec, callback 이라는 파라미터를 넣어줌. 그 안에 callback과 sec이 써여진 것을 볼 수 있다. (이는 정해진 메소드가 아니라 우리가 정한 것. 꼭 delay나 sec, callback이 아니어도 작동한다.) 콘솔의..

자바스크립트의 메인 스레드인 이벤트 루프가 싱글 스레드이기 때문에 자바스크립트를 싱글 스레드 언어라고 부른다. function yo() { setTimeout(function () { console.log('1.5초 타이머 끝!') }, 1500); for (let i = 0; i < 3; i++){ doSomething(); //가정 : 매번 1초가 걸리는 일 console.log(i); } console.log('3초 걸리는 for 문 끝'); } yo(); console.log('main 끝!'); Q. yo()를 실행할 경우, 몇 초 뒤에 '1.5초 타이머 끝!'이 실행될까? A. 약 3초 후에 실행됨 이유: JS는 싱글스레드이기 때문이며, JS의 큐에서 하나씩 꺼내고 콜 스택이 하나가 있는데 그..

코드를 보며 이해 먼저 하기 들어가기 전에... 자바스크립트 ES6부터는 const와 let을 이용해 블록 레벨 스코프도 지원하기 시작했습니다. 따라서 if 문 안에 var 대신 const나 let으로 변수를 선언하면, 다른 언어들처럼 참조하지 못합니다. const와 let은 블록 레벨 스코프, var와 같은 전통적인 자바스크립트의 변수는 함수 레벨 스코프라는 사실을 꼭 기억해두세요. ES5 function outer() { var a = 1; console.log(a); } outer(); // 1 outer a 1 a에 무슨 값이 들어있는지 찾는 '곳'이 스코프. 함수단위로 스코프가 생성된다. function outer() { var a = 1; function inner() { var a = 2; ..

2021년 1회 필기 시험의 합격률이 80%라는 소리를 듣자마자 불시험이 될 것이라고 모두가 예측했지만 뚜껑을 열어보니 약술형 문제는 전혀 나오지 않았고 시험 문제가 정말 쉬웠습니다. 굉장히 기초적인 문제를 물어봤고 심지어 ㄱㄴㄷ로 정답 중에 골라 쓰는 문제가 있었네요. 씹어줬으니 삼키라고 준 시험이라고 느껴졌습니다. SQL은 난이도 조절을 위해 SQL의 JOIN, 함수 문제가 나올 거라고 생각했는데 기초 중의 기초(count)가 나왔으며 심지어 한 문제 밖에 안 나왔네요. 그것도 출력 결과를 쓰라는 문제... 프로그램 활용 문제는 생성자, 오버라이딩, 오버로딩, 상속 문제 등이 나올 거라고 예상했지만 전혀 없었고 포인터 문제, 반복문 문제가 나왔네요. 파이썬은 틀렸어요 ㅠㅠ... (파이썬 깊게 공부하고..