내배캠 TIL 2022.12.05

09:30 ~ 11:00 : 국취제 상담

11:00am ~ 12:00am : 프로그래머스 n의 배수 고르기 문제 풀기

12:00pm ~ 12:30pm : ES6 특강

12:30pm ~ 01:00pm : react 원격 강의 듣기

01:00pm ~ 02:30pm : 점심 찜닭

02:30pm ~ 06:00pm : 리액트 입문강의

06:00pm ~ 07:00pm : 쉼

07:00pm ~ 09:00pm : 후발대 강의

 

알고리즘 - 자바스크립트

n의 배수 고르기

 

나의 답

function solution(n, numlist) {
  var answer = [];
  for (num of numlist) {
    if (num % n === 0) {
      answer.push(num)
    }
  }
  return answer;
}

 

filter()를 이용한 다른 사람의 답

function solution(n, numlist) {
    return numlist.filter(num => num % n === 0);
}

조건에 해당하는 것만 뽑아준다. 멋지군

 

React 입문

 

node 설치

yarn 다운로드

확장팩 prettier 설치 

gitbash에 yarn create react-app week-1 입력 (우리는 아직 초보니까 세트로 깔아주었다)

vscode에서 터미널 켜고 yarn start 했더니 오류가 났다

yarn : File C:\Users\Seon\AppData\Roaming\npm\yarn.ps1 cannot be loaded because running scripts i
s disabled on this system. For more information, see about_Execution_Policies at https:/goripts i.micros                                                                                   .micros
oft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ yarn start
+ ~~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

터미널 창을 gitbash로 켜고 다시 yarn start 했더니 react 창이 성공적으로 켰다. 

 

 

컴포넌트 만들기

기본 형태

const App=()=>{
	return
		<div>
		HTML을 사용하기위한 문법인 JSX를 쓸 수 있는 영역
		</div> 
}

 

컴포넌트 이름 첫글자는 대문자로

폴더이름은 CamelCase로

 

이벤트를 넣어줄 때 함수모양이 다르다. 

 <button onClick={handleclick}>클릭!</button>

 

컴포넌트끼리 연결하기

import React from "react";

function Child() {
  return <div>연결됐지롱</div>;
}

function Father() {
  return <Child />;
}

function GrandFather() {
  return <Father />;
}

function App() {
  return <GrandFather />;
}

export default App;

 

JSX란?

화면에서의 레이아웃 위치, 돔 구조를 나타낼 때 쓴다

Babel이라는 라이브러리가 javascript로 변환해준다.

 

JSX 문법

1. 태그를 안 닫아줄 때 오류

2. 하나 이상의 요소를 넣어줄 때 - <div> </div>로 감싸주지 않을 때 오류

3. javascript를 가져올 때 중괄호 써야한다

ex)  변수 가져올 때, 삼항연산자 써줄 때

function App() {
  const cat_name = "wandu";
  return (
    <div>
      <p>우리 고양이 이름은 {cat_name}입니다</p>
    </div>
  );
}

function App() {
  const number = 10;
  return (
    <div>
      <p>
        {number > 10
          ? number + "은 10보다 크다"
          : number + "은 10보다 작다"}
      </p>
    </div>
  );
}

 

4. class 대신에 className 이라는 것 사용

5.자스처럼 style=color:red, font-size:20px 이렇게 못쓰고 style = {color: 'red', font-size: '20px'}  JSON 형태로 중괄호와 따옴표가 필요함

객체 생김새로 묶어서 쓸 수도 

const styles = {

color: 'red',

font-size:'20px'

}

<p style={styles}> </p> 

 

 

Props, State

 

props:

부모 컴포넌트에서 받아온 모든 데이터

부모컴포넌트에서 자식 컴포넌트로 내려보내기 위해서 쓰는 것

그 데이터는 props 객체 안에 존재한다.

부모 컴포넌트 --> 자식 컴포넌트 단방향으로만 데이터 전달 가능 (자식 컴포넌트들끼리도 데이터 전달 불가능)

function GrandFather() {
  return <Mother />;
}

function Mother() {
  const name = "마덜";
  return <Child motherName={name} />;
}

function Child(props) {
  console.log(props);
  return <div>연결</div>;
}

객체 안에서 motherName에 접근하여 가져와서 이용하기

function Child(props) {
  console.log(props);
  return <div>울 엄마 이름은 {props.motherName}</div>;
}

 

객체분해가 헷갈려서 자바스크립트 기본 doc 에서 다시 보고 왔다

• 2) 객체 구조분해 할당 코드 비교
• 구조분해 할당을 사용하지 않을 때

const user = {name: "손석구", age: 10}; 
console.log(user.name) // 손석구 
console.log(user.age) // 10

• 구조분해 할당을 사용했을 때

const { name, age } = user

console.log(name) // 손석구
console.log(age) // 10

 

#구조분해 할당을 할 때 const {키값} = 객체명 이여야한다 키값 대신에 내 맘대로 넣어줬더니 객체구조분해 할당이 되지 않는다.