10.04

10.05

10.07

10.09

Q1. s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까요?

1. 리액트의 라우팅 방식이 전통적 링크 방식이 아니기 때문. (전통적 링크 방식의 경우 주소창에 적힌대로 html 파일을 받아 보여준다면, SPA는 하나의 html을 두고 주소창에 적힌 대로 내용을 갈아끼우는 방식)
2. s3 버킷의 정적 웹사이트 호스팅은 /login 경로에 맞는 html을 찾는 거고, 해당 html파일이 없기 때문에 404 에러가 나는 것.
3. 에러 해결 방법은? s3가 어떤 상황이건 index.html을 보도록 설정해주는 것

Q2. 리액트에서 각 페이지 컨텐츠에 맞는 미리보기(사이트 이미지, 사이트 설명 등)를 띄워주려면 어떻게 해야할까요?

• 메타 데이터를 직접적으로 index.html에 추가하는 방법이 있지만, 이는 SPA인 리액트에서 조건에 따라 동적으로 변경하기 어려운 단점이 있다.
  • 따라서 react-helmet 라이브러리를 사용하여 조건에따라 동적으로 메타 데이터를 변경시켜 각 페이지의 컨텐츠에 맞는 미리보기를 띄워준다.

Q3. 리덕스에서 미들웨어 청크의 역할은 뭘까요?

• 비동기 작업을 처리할 때 사용하는 미들웨어로 이를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있게 된다.

Q4. 프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요?

• 비동기(Asynchronous)적 처리는 작업을 요청하지만 결과는 그 자리에서 꼭 받지 않아도 되는 데이터 처리 방식이다.

• Promise는 비동기적으로 실행하는 작업의 결과(성공 or 실패)를 나타내는 객체이다. 여기서 주목해야 하는 점은 객체 라는 것인데, 비동기의 결과를 객체화 시킨다는 점이 Promise의 가장 큰 장점이자 특징이 된다.

  • Promise 성공시 then 메소드가 실패시 catch 메소드가 실행된다.

• 비동기는 데이터 처리 방식이고 promise는 비동기 작업의 단위.

Q5. TDZ(Temporal Dead Zone/일시적 사각지대)란?

• 우선 선언을 하면 실행 컨텍스트가 내용을 훑는데 여기서 초기화 작업이 일어난다. 초기화 작업은 메모리에 변수에 들어갈 공간을 미리 확보해 놓는 것이다. 때문에 변수가 선언되기 전에 사용한다는 것은 메모리 공간을 확보하기 전에 사용한다는 것이고 그렇기에 ReferenceError가 난다. 이렇게 변수가 선언되기 전, 호출할 수 없는 공간을 TDZ라고 부른다.

동기와 비동기

• 동기는 요청과 결과가 동시에 일어난다.
  • 직렬 구조를 가지고 있고 요청 후 결과를 받아야만 다음 동작이 일어난다.
• 결과가 주어질 때까지 아무것도 못하고 대기를 해야하는 단점이 존재한다.
  • 비동기는 요청과 결과가 동시에 일어나지 않는다. 시간이 걸리더라도 그 사이에 다른 작업이 가능하여 자원을 효율적으로 쓸 수 있는 장점
  • 비동기에서의 블록은 결과를 계속 기다리는 것, 논블록은 다른 작업을 하면서 기다리는 것

리덕스를 왜 쓰는지

• 리덕스를 왜 쓰는지에 대해 깊게 생각하지 못하다가 진성님이 해주시는 말을 듣고 다시금 왜 생각하게 되었다.
  • 부모 컴포넌트에서 자식의 자식의 ... 자식 컴포넌트에 props를 넘겨주는걸 리덕스를 사용하면 한 번에 줄 수 있다는 것 왜 이걸 잊고 있었을까 싶다~~

오늘의 TMI

• 이 코드가 어디서 오고 어디서 쓰이고 어디로 가는지에 대해 생각을 해야하는 연습을 하자. 감사합니다 승민님~
• 혜원님의 실력이 하위권이라는 것은 부정할 수 없겠지만 실력에 굴하지 않고 다른 사람의 의견을 듣기위해 사람들 앞에서서 발표를 한다는 것에서 큰 감동을 먹었다.
• 하나의 function은 하나의 목적

https://react.vlpt.us/redux/01-keywords.html

벨로퍼트 리덕스 강의 내용을 참고했다.

때늦은 리덕스 정리..

Action(액션)

상태에 변화가 필요하게 될 땐 액션이란 것을 발생시키며 이는 하나의 객체로 표현된다. 형식은 아래와 같다.

{
    type: "RANDOM"
}

액션 객체는 type을 필수적으로 가지고있어야 하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있다.

예시1)
{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}
예시2)
{
  type: "CHANGE_INPUT",
  text: "안녕하세요"
}

Action Creator (액션 생성함수)

액션을 만드는 함수. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

• 이러한 액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함.
• 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용
• 액션 생성함수를 사용하는 것이 필수는 아니다.
• 액션을 발생 시킬 때마다 직접 액션 객체를 작성할 수도 있다.

Reducer (리듀서)

리듀서는 변화를 일으키는 함수로 두가지의 파라미터를 받는다. 이전 상태값과 액션을 받아 새로운 상태를 만드는 함수를 만든다. 리듀서는 불변성을 유지해야 한다.

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다.

만약 카운터를 위한 리듀서를 작성한다면 다음과 같이 작성할 수 있습니다.

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

• 리덕스의 리듀서에서는 기존 state를 그대로 반환하도록 작성해야합니다.

• 리덕스를 사용 할 때에는 여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서 (Root Reducer)를 만들 수 있습니다. (루트 리듀서 안의 작은 리듀서들은 서브 리듀서라고 부릅니다.)

Store (스토어)

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 됩니다. 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다.

dispatch (디스패치)

디스패치는 스토어의 내장함수 중 하나입니다. 디스패치는 액션을 발생 시키는 것 이라고 이해하면 됩니다.

dispatch 라는 함수에는 액션을 파라미터로 전달합니다.. dispatch(action) 이런식으로 말이죠.

그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어줍니다.

subscribe (구독)

구독 또한 스토어의 내장함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.

리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없습니다. 그 대신에 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독합니다.

useSelector

리덕스 스토어 안에 들어있는 값을 조회할 때 사용하는 Hooks 이다. useSelector를 사용해서 리덕스 스토어의 상태를 조회할 땐 상태가 바뀌지 않았다면 리렌더링이 되지 않는다는 장점이 있다.

리덕스 모듈

리덕스 모듈엔

• 액션 타입

• 액션 생성함수

• 리듀서 세 개가 필요하다.

• Ducks 패턴을 따를 땐 액션의 이름에 접두사 넣기 > 다른 모듈과 액션 이름이 중복되는 것을 방지하기 위함이다. ㅉ

  Rootreducer

한 프로젝트에서 여러개의 리듀서가 있을 때는 이를 한 리듀서로 합쳐서 사용을 하는데 이를 루트 리듀서라고 부른다. 리듀서를 합칠 땐 리덕스에 내장된 combineReducers 함수를 사용한다.

프리젠테이션 컴포넌트

리덕스 스토어 없이 props로만 받아와서 사용하는 컴포넌트

컨테이너 컴포넌트

리덕스 스토어의 상태를 조회하거나 액션을 디스패치 할 수 있는 컴포넌트

middleware (미들웨어)

리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음 리듀서에서 해당 액션을 받아와서 업데이트 하기 전에 추가적인 작업을 할 수 있다.

• 특정 조건에 따라 액션이 무시되게 만들 수 있다.
• 액션을 콘솔에 출력하거나 서버쪽에 로깅을 할 수 있다.
• 액션이 디스패치 됐을 때, 이를 수정해서 리듀서에게 전달되도록 할 수 있다.
• 특정 액션이 발생했을 때, 이에 기반하여 다른 액션이 발생되도록 할 수 있다.
• 특정 액션이 발생했을 때, 특정 자바스크립트 함수를 실행시킬 수 있다.

리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리할 때이다. 예를 들어 백엔드 API를 연동해야 된다면 리덕스 미들웨어를 사용해서 처리하는 것이 있다.

오늘의 TMI

• 2기 수료하신 지영멘토님께 이것 저것 여쭤봤는데 이 분도 혼자만 늦는 거 같다는 고민을 하셨던 때가 있었구나 하면서 생각이 많아졌다. 그럼에도 불구하고 해내신 걸 보면 내 입장에선 그저 빛..
• 어디에서나 기초, 기본은 중요하단 생각은 변함이 없어서 항해 커리큘럼을 따라가기가 벅차다고 느끼는 것 같다.
  • 과연 포텐셜이 터질 것인가.. 다 자기 하기나름이겠지만
• 팀한테 민폐가 되지 않으려면 더 노오력을 하자~

로그인, 회원가입, 구매, 글작성 등 서비스를 제공하는 서버에 정보를 전송할 때 사용하는 글자를 입력하는, 무언가를 선택하는 것들을 form이라고 부른다. 사용자의 입력정보를 서버로 전송할 때 사용하는 것 !

Submit 버튼

<input type="submit" />

이렇게 생겼다. form을 제출하는 버튼!

<button type="submit" />

버튼에 submit 타입을 줘도 된다.

action을 통해 name을 담아 보낸다.

<form action="정보를 어디로 보낼 것인지 주소를 입력">

name이라는 속성을 통해 아이디는 "id", 비밀번호는 "pwd", 주소는 "address"란 이름에 담아 전송한다.

method

<form action="주소" method="POST 혹은 GET">

GET = URL 정보를 담아 보낸다.

POST = 다른 곳에 숨겨서 보내며 form은 높은 확률로 POST method를 사용한다.

실무에선 서버단의 엔지니어가 시키는대로 하면 된다고 한다. 😁😅

갑자기 form?

form태그를 물어보신 분이 계셨는데 잘 모르겠다고 답한 스스로가 부끄러워서 정리를 해봤다. 🤣

오늘의 TMI

• 백틱 ``` 옆에 html, jsx, javscript 등을 적으면 코드가 좀 더 이쁘게(?) 써진다는 것을 알았다.
• 5주차 강의까지 다 들었다. 듣긴 다 들었는데 역시 아직 내 지식이 아니라는 생각..
• 과제를 하되 과제를 목적으로 한다기보단 복습을 목적으로 해야겠다

복합쿼리는 firestore에서 한 콜렉션의 여러 필드를 한 쿼리로 묶을 때 필요하다. -> 여러 필드 내용을 가지고 쿼리를 쓰고 싶을 때 쓴다.

게시글에 아이디로 조건을 걸어 쿼리를 날린다. 작성한 일시 insert_dt로 정렬하기 위해 복합쿼리를 사용.

댓글

• 댓글 뷰 > 기능 > 댓글 텍스트를 리덕스에 삽입 > 파이어 스토어에 저장 > 리덕스에 데이터 업데이트

• 댓글 데이터 추가할 때 게시글 정보의 댓글 갯수 + 1을 해줘야 한다.

리덕스에 데이터를 저장하는 이유 다음번에 또 쓰기 위해

A - B - A 로 페이지를 이동할 때 매번 요청을 하는건 비효율적. => 각 게시글에 맞는 댓글 리스트를 저장할 공간을 만들어 저장한다.

댓글알림

파이어베이스의 실시간 데이터 베이스를 사용해서 데이터가 실시간으로 업데이트 되었음을 알려주는 리스너를 붙인다.

필요한 것은?

• 내가 작성한 게시글엔 내가 쓴 댓글은 알림이 가지 않아야 한다.
• 내가 아닌 사람이 댓글을 달면 파이어베이스에 저장해둔 { noti: {read:false} }의 false값이 true로 바뀌어야 한다.

Header, NotiBadge, firebase, comment,

키 프레스 이벤트

엔터키를 눌렀을 때에도 댓글 작성이 되게한다.

이런 이벤트를 키 프레스 이벤트라고 말한다.

onKeyPress 를 사용.

onKeyPress={(e) => {
            if(e.key === "Enter"){
              onSubmit(e);
            }
          }}

const 관련 에러

Unhandled Rejection (ReferenceError): Cannot access 'post' before initialization

초기화 전에는 게시물에 액세스 할 수 없다.

const post = getState().post.list.find(l => l.id === post.id);

변수 post_id 를 post.id 로 오타를 내버려서 위의 에러가 발생했다.

const로 선언된 변수는 (=) 우측에 있는 것을 먼저 평가한 후 왼쪽의 변수에 담는데 우측의 내용을 평가할 때 존재하지 않는 변수(post)의 프로퍼티에 접근을 하려니 위의 에러 메세지가 뜬 것이었다. const는 선언, 할당, 초기화가 동시에 되어야 함을 상기시키자~!

오타도 조심하자 ㅎㅎ..

오늘의 TMI

• 역시 강한 사람이 끝까지 남는게 아니라 남은 사람이 강한 사람..
• 방향이 틀린 것은 아닌 것 같으니 고만 흔들리고 킵 고잉~
• 역시 삽질로 얻는게 훨씬 많다~
• 오타를 조심하자고 해놓고 또 오타로 시간을 버렸다. 하 ~

무한 스크롤을 구현하기 위해 알아야되는 것 중 하나는 브라우저 창의 크기!

스크롤 할 수 있는 영역이 얼마나 남았나 계산을 해야한다.

✔ 계산을 하기 위해 웹 페이지 전체 크기와 얼마나 스크롤을 했는지를 알아야 한다.

✔ window.innerHeight은 가시적으로 보이는 브라우저 창 높이.(메뉴바 툴바 제외한 크기!)

✔ document.body.scrollHeight는 스크롤할 수 있는 높이.(눈에 안보이는 영역도 포함!)

✔ document의 scrollTop은 스크롤이 얼마나 움직였나 알려주는 값.

삼항 연산자와 && , ||

삼항 연산자는 {조건? 참 : 거짓 }의 형태로 쓰이는데

강의를 듣다가 { 조건 && 참 }의 형태로 구성된 코드를 봤다. 찾아보니 && 연산자는 조건(본인, 이하 조건)이 참이면 && 우측의 값을 return 하고, 조건이 거짓이면 조건을 그대로 return 한다.

|| 연산자는 조건이 참이면 조건을 그대로 return하고 거짓일 경우 && 우측의 값을 return한다.

{ 조건 ? 참 : 거짓} <- 이건 값이 있을 때, 없을 때 모두 보여줘야 할 것이 있을 때 쓰고

{ 조건 && 참 }, { 조건 || 거짓 } "" <- 이건 하나의 값만 보여주고 싶을 때 사용한다고 한다.

상세 페이지 연결

PostDetail.js

post_id를 통해 댓글이 어느 게시물에 달려있는지 알 수 있다. insert_dt로 글을 정렬한다. 역순으로 정리해서 최근 게시물이 제일 상단에 뜨도록 한다. post_id, insert_dt 두 가지로 필터링을 해서 query를 쓰면 파이어스토어에서 복합쿼리 설정을 해줘야 한다.

Post에서 클릭하면 PostDetail로 넘어가야 하므로 온클릭을 통해 페이지뷰를 전환한다.

객체

• 객체는 {}안에 key:value 형태로 구성된다.

• {}안에는 여러 쌍의 프로퍼티를 넣을 수 있고, 여러 타입의 데이터를 넣을 수 있다.

• key는 무조건 문자형이다.

• value에는 모든 자료형이 들어갈 수 있다.

const로 선언된 객체

const로 선언된 값은 재할당 할 수 없다.

but, const로 선언된 객체는 재할당 할 수 있다!

객체의 프로퍼티는 보호되지 않아서 변경이 가능하다

함수

😎함수도 객체이며 JS에선 함수를 특별한 값(?) 취급을 한다.

JS는 ()가 있음연 함수를 실행하고 ()가 없으면 함수를 문자형으로 바꿔 출력한다.

이를 응용하면 함수를 복사할 수 있고, 또 매개변수처럼 전달할 수 있다. return 값은 기본적으로 undefined를 반환한다.

• 함수 표현식에서 this는 그 함수 자체

• 화살표 함수의 this는 부모를 불러온다

• 내부변수가 외부변수보다 우선 순위가 높다

콜백함수

함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백 함수라고 한다.

promise

콜백 헬을 해결하기 위한 방법

• 비동기 연산이 종료된 이후에 결과를 알기 위해 사용하는 객체
• 프로미스는 생성자 함수를 가지고 만든다 (new)
• 비동기 작업을 수행할 콜백 함수를 인자로 전달받아서 사용한다.

const promise = new promise((resolve, reject) => {
    if(...){
        ...
        resolve("성공!");
    }
    else{
        ...
        reject("실패!");
    }
});

• pending: 비동기 처리 수행 전(resolve, reject가 아직 호출되지 않음)
• fulfilled: 수행 성공(resolve가 호출된 상태)
• rejected: 수행 실패(reject가 호출된 상태)
• settled: 성공 or 실패(resolve나 reject가 호출된 상태)

async, await

promise를 더 편히 쓰게 해주는 키워드

세션 스토리지

• HTML5에서 추가된 저장소. key:value 형태의 저장소
• 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거가 된다.
• 따라서 유지해야되는 데이터들(장바구나, 자동로그인)을 넣기엔 어렵다.

로컬 스토리지

• 따로 지워주지 않는다면 브라우저를 닫아도 데이터가 제거되지 않는다.
• 중요한 정보는 넣지 않는게 좋다.
• 쿠키와 마찬가지로 key : value 형태의 저장소이다.

그렇다면 토큰은 어디에 저장하면 좋을까?

• 프로젝트의 성향에 맞춰 저장 장소는 그때그때 달라져야 한다.

• 각각 장단점이 있기 때문에 쿠키에 저장하는 경우도, 로컬 스토리지에 저장하는 경우도 있다.

오늘의 TMI

• 강의 듣다가 잡생각이 들면 바로 일시정지 눌러라~!

리액트는 데이터 바인딩이 쉽다?

es6 destructoring

const [a, b] = [1, 2] 이면
const a = 1
const b = 2 가 된다.

state

1. 변수 대신 쓰는 데이터 저장공간
2. useState()를 이용하여 만들어야 한다.
3. 문자, 숫자, 배열(Array), object 다 저장가능
4. 자주 바뀌는, 중요한 데이터를 state로 저장해서 사용

state를 쓰는 이유?

1. 웹이 App처럼 동작하게 만들기 위해
2. state가 변경되면 새로고침 없이도 HTML이 자동으로 재렌더링이 됨

state를 변경하려면?

object state, Array 데이터 수정방법

1. 변경함수 사용, 변경함수(대체할 데이터)

   const [value, setValue] = useState();에서 두번째 인자인 setValue가 state 변경함수이다. 여기선 이 함수를 통해 value 값을 변경할 수 있다.

예제) []의 첫번째 요소 바꾸기
const [value, setValue] = useState([]);
function 함수이름(){
    let new_value = [...value]; >> 딥카피
    new_value[0] = '변경할 값이름'
    setValue(new_value);
}

Component

리액트를 쓰는 큰 이유 중 하나!

컴포넌트 만드는 법

1. 함수를 만들어 이름을 짓는다.
2. return문 안에 축약을 원하는 HTML을 넣는다.
3. 원하는 위치에서 <1에서 만든 함수명 />

• 이름의 첫 글자는 대문자로 한다.
• return문 안에 있는 태그는 하나로 묶어야 한다.
• function App() 도 일종의 컴포넌트.

어떤 것을 컴포넌트로 만들면 좋을까?

1. 반복적으로 나오는 HTML 덩어리들
2. 자주 바뀌는 HTML UI들
3. 다른 페이지를 만들 때

삼항연산자

{ } 중괄호 안에 if문은 작동하지 않는다. 대신, 삼항연산자를 사용한다.

{
    1 < 3 
    ? console.log('참') 
    : console.log('거짓')
}

위와 같이

조건식 ? 참일 경우 코드 : 거짓일 경우 코드

로 구성된다.

Modal창 on, off

모달창 on,off도 state 데이터를 이용한다.

let [modal, modal변경] = useState(false);
    <button onClick={ () => {modal변경(!modal)} }>스위치</button>
{ modal === true ? <Modal /> : null } // 삼항연산자 사용

난 무얼 놓쳤는가?

modal변경()의 인자에 !를 쓰는 것 자체를 생각을 못했다.

로직을 보면 첫 페이지 로드시엔 modal이 false 상태라 null 값을 가진다.
스위치 버튼을 클릭하면 modal변경 함수에 의해 modal이 !false가 되므로 true로 바뀐다.

반복문

{ } 중괄호 안에는 for와 같은 반복문을 사용할 수 없다. 그래서 중괄호 안에서 사용이 가능한 map을 쓴다. 이는 반복문이라고 하기 보단 배열에 붙일 수 있는 일종의 내장함수!

var 어레이 = [2,3,4];
어레이.map(function(a){ 
    return a * 10 (주고싶은 값)  // [20, 30, 40] 리턴
});

1. 소괄호 안에 콜백함수를 넣는게 기본
2. map안의 코드가 어레이 요소의 갯수만큼 실행이 된다. (여기선 3번)
3. map 함수는 원본을 변형시키지 않는다.
4. 파라미터에 들어가는 인수는 아무거나 입력

어떻게 씁니까?

{ 반복할데이터.map(() => { return <HTML> } )}

이렇게 써봤습니다

 {
    a.map((아무거나) => {
        return (
        <h2>
        { 아무거나 }
        </h2>
    )
    })
}

• 인수에 아무거나를 넣어주면서 a에 있던 배열이 차례대로 출력이 되는 것을 확인

props : 부모의 state를 가져다 쓰고 싶어요

props로 자식컴포넌트에 state를 전해주고 싶을 땐 이렇게

1. 데이터를 보내고 싶은 자식컴포넌트로 가서 <자식컴포넌트 작명={전송할 state} />
2. 자식컴포넌트에서 파라미터에 props(이름은 마음대로)를 입력
3. 자식컴포넌트에서 사용하고 싶은 곳에 props.작명[0] 이런 식으로 사용

이렇게 써봤습니다

let[글제목, 글제목변경] = useState(['제목 정하는 중', '뭐로 하지', '이걸로 할까']);
 <button onClick={ () => {modal변경(!modal)} }>스위치</button>
    // 1. 데이터를 Modal로 보냅니다. 작명센스부족에 글제목 state를 담습니다.
    { modal === true ? <Modal 작명센스부족={글제목} /> : null }
.
.
.

// 2. props를 인자로 받아오고
function Modal(props) {
  console.log(props.작명센스부족)
  return (
    <div className="modal">
        // 3. props.작명센스부족 은 3개의 배열을 가져옵니다. ( 위의 글제목 3개 )
        <h2>{props.작명센스부족[0]}</h2>
        // 첫번째 요소인 '제목 정하는 중'이 출력되겠네요~~~!
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  )
}

글을 state에 저장하기

답안

div className="publish">
    <input type="text" placeholder="Hello World" onChange={ (e) => {입력값변경(e.target.value)} }/>
    <button onClick={()=>{
      let new_글제목 = [...글제목];
      new_글제목.unshift(입력값);
      글제목변경(new_글제목)
    }}>저장</button> 
    </div>

내가 쓴 답

<div className="publish">
    <input type="text" placeholder="Hello World" onChange={ (e) => {입력값변경(e.target.value)} }/>
    <button onClick={()=>{
      let add_글제목 = [...글제목];
      add_글제목 = [...글제목, {입력값}];
      글제목변경(add_글제목);
    }}>저장</button> 
    </div>

뭘 잘못했나

1. 변수는 중괄호를 써야한다는 사실 때문에 배열안에서 {입력값}을 쓰고 있었다. (여기서 입력값은 input 값)
2. Objects are not valid as a React child 라고 분명히 콘솔에 찍혀있는데 또 영어가 무섭다고 검색을 안했다. 이는 객체는 React 자식으로 유효하지 않다는 말이다.
3. 중괄호 빼주니 정상적으로 작동한다. 😂
4. 순서를 바꿔 add=글제목 = [입력값, ...글제목]으로 해도 unshift(입력값)과 같게 작용한다.

오늘의 TMI

• 졸리면 자는게 낫겠다.. 지각을 결석 수준으로 해버렸다.
• CSS도 중요하지만 JS, 리액트가 더 중요하다! 본질에 집중하자
• 코드리뷰 제대로 하기, 도움이 아주~ 아주~ 많이 된다
• 하나 둘 나가기 시작했다.. 안나가려면 개처럼 해야된다 개처럼.. 하면 된다가 아니라 갈면 된다!

부족함을 느껴 다시 한 번 자바스크립트 공부를 했다. 일단 봐둬야 할 것들은

• 변수 var, let, const
• 조건문 if else
• 반복문 for
• 함수 function return
• 배열 array object
• 이벤트 addEventListener 이렇게 생각해놨다.

파라미터

function 알림창열기() {
    document.getElementById('alert').style.display = 'block';
}
function 알림창닫기() {
    document.getElementById('idName').style.display = 'none';
}

파라미터를 사용하여 ()안에 값을 입력하면

function 알림창열기('x'){
    document.getElementById('alert').style.display = x;
}

파라미터 값이 'x'에 들어가게 된다.

알림창열기('block');
알림창열기('none');  
두 줄로 위 두 개의 함수와 같은 역할을 수행할 수 있게 된다.

f(x) = x + 5 일 때, f(1) = 1 + 5, f(2) = 2 + 5 와 같이 파라미터가 x의 위치에 들어가는 것을 알 수 있다.

f(파라미터) = 파라미터 + 5 이런 식으로 되는 것 파라미터를 쓰려면 파라미터가 들어갈 위치만 있으면 된다.

기본값

함수의 파라미터의 인자에 기본 값을 설정하는 법

인자가 name 이라고 하면 인자에 (name = '기본값')을 작성하면 name의 기본값은 '기본값'이 된다.

함수 안에서 name이 할당되지 않으면 기본값이 사용된다.

파라미터? 아규먼트?

f(x)와 f(4) 가 있다고 하면

x 는 Parameter(파라미터)라고 하고 x에 들어가는 4는 들어가는 Arguement(아규먼트)라고 한다.

이는 파라미터의 값으로 아규먼트 4를 대입하였다. 라는 의미가 되겠다.

변수

let - 다른 값으로 변경이 가능함

const - 다른 값으로 변경이 불가능한 상수

1. 변수는 문자와 숫자, $와 _만 사용한다.
2. 첫글자는 숫자가 될 수 없다.
3. 예약어는 사용할 수 없다.
4. 가급적 상수는 대문자로 표기한다.
5. 변수명은 읽기 쉽고 이해할 수 있게 작성.
6. 먼저 const로 값을 주되, 변할 가능성이 있는 것들은 let으로 고쳐준다.

null과 undefined

null은 존재하지 않는 값으로, 객체 취급하지 않는다. (오류지만 하위 버전의 호환성 때문에 고치지 않는다고 한다.) undefiend는 값이 할당되지 않은 값

형변환

String() 괄호 안의 타입을 문자형으로 변환

Number() 괄호 안의 타입을 숫자형으로 변환

• Number(true) = 1
• Number(false) = 0
• Number() 안에 문자열이 들어가면 NaN(Not a number) 을 반환한다.
• Number(null) 0 을 반환한다.
• Number(undefined) NaN을 반환한다.

Boolean에서 false

• 숫자 0
• 빈 문자열 ''
• null
• undefined
• NaN

이 값들은 모두 false를 반환하고 이 외의 값들은 모두 true를 반환한다.

연산자

 + , - , * , / , %(나머지)

거듭제곱 **

증가연산자 let num = 10; let result = ++num; 증가 (num이 뒤에 있어 변경 O) let result = num++; 변동 없음 (num이 앞에 있어서 변경 X)

반복문

for

for (let i = 0; i < 10; i++){
    코드
}

( 초기값 ; 조건 ; 코드 실행 후 작업 ) 세 부분으로 나뉜다.

초기 값 설정 후 조건이 true면 코드가 실행되고 i값을 증가시켜준다.

이를 반복하다가 조건이 false가 되면 반복문이 멈춘다.

while

let i = 0; 
while (i<10) {
  코드   
  i ++;
}

명확한 횟수가 정해져 있으면 for문을, 그렇지 않으면 while을 사용하자

반복문을 빠져나오는 방법

break : 멈추고 빠져나옴 continue : 멈추지만 빠져나오지 않고 다음 반복문 진행

Switch

if/else문과 원리가 비슷하다.

Switch(평가) {
    Case A:
    A일 때 코드
    Case B:
    B일 때 코드
}

둘 다 같은 코드

if(평가 == A) {
    A일 때 코드
} else if (평가 == B) {
    B일 때 코드
}

switch 문은 break가 없다면 계속 진행한다.

함수 선언문과 함수 표현식

함수 선언문
function sayHello() {
    console.log('Hello');
}
sayHello();

위와 아래의 결과값은 같으나

함수 표현식
화살표 함수를 쓸 수 있다.
let sayHello = function() {
    console.log('Hello')
}
sayHello();

But

함수 선언문은 어디서든 호출이 가능하다. 이는 호이스팅 때문이다. sayHello(); 를 함수 위에서 써도 동작한다.

호이스팅 - 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동한다.
선언은 위에서 되는 반면 할당은 위에서 되지 않는다!

반면 함수 표현식은 코드에 도달하면 동작한다.

Object

객체는 중괄호{}로 구성하고 키(key)와 밸류(value)로 구성된다.

const superman = { name : 'clark', age : 33 }

접근

. (온점) superman.name

[] (대괄호) superman['name']

추가

superman.gender = 'male';

superman['hairColor'] = 'black';

삭제

삭제하고싶은 프로퍼티 앞에 delete

delete superman.hairColor;

for ... in 반복문

for in 반복문을 사용하면 객체를 순회하면서 값을 얻을 수 있다.

const Mike = {
    name : "Mike"
    age : 30,
    hobby : "football"
}

for (x in Mike){
    // x는 key값(name, age)를 반환한다.
    Mike[x] 는 Mike, 30, football을 반환한다.
}

객체를 반환하는 함수

function makeObject(name, age){
    // 리턴문에 {} >> 객체를 반환!
    return {
        name : name, 키:밸류 값이 같으므로 name,
        age : age,                       age, 로 표기 가능
        hobby : 'football'
    }
} 

const mike = makeObject("Mike",  30);
Mike = 

Object {
    name : "Mike"
    age : 30,
    hobby : "football"
}

객체가 출력된다.

객체에 함수를 추가 - method

const superman = {
    name : "Mike"
    age : 30,
    fly : function() {
        console.log('날아갑니다');
    }
}

superman.fly();
// 날아갑니다

객체 프로퍼티(키:값 한 쌍으로 구성)로 할당 된 함수를 method(메서드) 라고 한다.

배열(array)

:순서가 있는 리스트

• 배열은 대괄호로 묶어주고 쉼표로 구분할 수 있다.
• index는 0부터 시작한다.
• 배열은 문자, 숫지, 객체, 함수 등도 포함할 수 있다.
• .length는 배열의 길이를 구할 수 있다. 배열이 가지고 있는 요소의 개수를 반환한다.
• .push(): 배열 끝에 요소 추가, unshift(): 배열 앞에 추가
• .pop(): 배열 끝의 요소 제거, shift(): 배열 끝에 제거
• 배열을 쓰는 가장 큰 이유 중 하나는 반복을 위해서!

배열 반복문은 for in 보다 for of로 돌리기

하지만 인덱스를 못 얻는다는 단점이 존재함

예제)
let days = ['월', '화', '수'];
for(let x of days){
    console.log(x)
}

심화

변수

var, let, const

var

• 한 번 선언된 변수를 다시 선언할 수 있다.
• 선언하기 전에 사용할 수 있다. > 코드가 실제로 올라가진 않지만 최상위로 올라간 것 처럼 동작한다 (호이스팅) 하지만 할당은 호이스팅이 되지 않는다.

호이스팅이란 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동하는 것을 의미하는데 그렇다면 let 과 const는 왜 에러가 발생하는가?

TDZ (Temporal Dead Zone) 때문에 발생한다.

TDZ영역에 있는 변수들은 사용을 할 수 없는데 let과 const는 이 TDZ의 영향을 받아서 할당을 하기 전에는 사용 할 수 없게 되는 것이다. 이는 코드를 예측 가능하게하고 잠재적인 버그를 줄일 수 있게 하는 장점이 있다.

변수의 생성과정

1. 선언
2. 초기화
3. 할당

var는 선언 + 초기화 > 할당 / 함수 스코프

let은 선언 > 초기화 > 할당 / 블록 스코프

const는 선언 + 초기화 + 할당 / 블록 스코프

var name;
name = 'Mike'; (O)

let age;
age = 30; (O)

const gender;
gender = 'male' (X) > 에러

생성자 함수

function Item(title, price){
    //this = {}; 빈 객체 생성 >> 생략되어 있음
    this.title = title;
    this.price = price;
    // 메소드 생성
    this.showPrice = function(){
        console.log('가격은 ${price}원 입니다.');
    }
    //return this; >> 생략되어 있음 > 생략된 두 부분은 new로 호출하면 알고리즘에 의해 실행이 된다!
}

const Item1= new Item('인형' , 3000);
const Item2= new Item('가방' , 4000);
const Item3= new Item('필통' , 5000);

item3.showPrice();
showPrice 메소드에 의해 '가격은 5000원 입니다.' 가 출력된다

생성자 함수는 new를 꼭 붙여야 한다.

객체 메소드

Object.assign() : 객체 복제

여러 객체도 복제가 가능하다.

Object.keys() : 키 값만 배열로 반환

Object.values() : 밸류 값만 배열로 반환

Object.entries() : 객체를 배열로 반환

Object.fromEntries() : 배열을 객체로 반환

개인과제는 제출을 했으나 만족스럽진 않은 결과물이다.

다만 수요일까지의 시간이 생겨 부족했던 부분을 공부할 시간이 생겨서

노마드코더의 그림판 클론코딩 > JS > 리액트를 될 수 있는 부분까지 다시 공부해보려고 한다.

심화반 시작 전까지 기회라고 생각하면서 도전~😎

PaintJS_클론코딩

변수(상수)를 선언하고 로직 순서에 따른 함수작성을 한다.

거의 모든 JS가 context의 메서드와 toggle 함수로 구성, boolean(true,false) 값 사용)

콘솔로 계속 확인

값을 변경해보면서 어떻게 화면에 나타나는지도 확인

clientX,Y 는 윈도우 전체의 범위 내에서 마우스 위치 값을 나타냄.

오늘의 TMI

• 가끔 쉬는 것도 필요하구나 느꼈다. 일요일에 하루 쉬었더니 뭔가 집중이 잘 되는 느낌?
• 늦었지만 쉬지않고 클론 코딩을 끝냈다. 굳굳

클래스형

• Will 접두사가 붙은 메서드: 특정 작업을 작동하기 전에 실행되는 메서드

• Did 접두사가 붙은 메서드: 특정 작업을 작동한 후 실행되는 메서드 라이프 사이클은 크게 3가지 흐름으로 정리 된다.

• componentDidMount

  • DOM 트리에 삽입된 직후 즉, 초기 브라우저 화면을 갱신하기 전에 호출 되는 메서드이다.
  • fetch, 스크롤 이벤트,setInterval 같은 초기에 설정이 필요한 경우 이곳에서 작업을 한다.
  • 만약 스크롤 이벤트,setInterval 를 호출 했다면 componentWillUnmount() 메서드를 통해 해제 작업을 진행해야 한다.

• componentDidUpdate

  • 업데이트가 일어난 직후에 호출되는 함수이다.
  • 최초 랜더링시에는 호출되지 않는다.
  • DOM을 조작할 때 유용하다.

• componentWillunmount

  • 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
  • 컴포넌트를 DOM에서 제거할 때 실행된다.

함수형과 Hooks

리액트 훅스에서 side effect 로 라이프사이클을 조정할 수 있다. 훅을 사용하는게 클래스형의 라이프 사이클과 같다는 말은 아니다.

훅을 사용하면 생명주기 메서드를 기반으로 쪼개는 것 보다는, Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다.

클래스형과 함수형의 Hooks를 비교

위 링크에서 볼 수 있듯 Hooks를 사용하면 기본적으로 코드의 양을 많이 줄일 수 있다.

3주차 TIL 😂

09.27

09.28

09.29

09.30

3주차 TMI

• 심화반 강의를 들으면서부터 솔직히 머릿속에 정리가 되질 않아서 TIL을 쓰지 못했다.
• WIL은 더 다듬어야 할 필요를 느낀다.
• 지식이 한 데 모아져있는게 아니라 여기저기 퍼져있는 느낌을 많이 받고있다. 이게 좀 머릿속에서 묶였으면 하는데 강의 이해하기에도 급급한 요즘이라 정리하기가 어렵다.
• 강의를 들으며 느끼지만 속도보단 방향인 것 같다. 하지만 이렇게 기한이 정해져 있는 환경에서는 조금 어려울지도😂

2주차 팀

주특기를 배우기 시작했다. 선택한 주특기는 리액트고 추석 연휴 때 쉬면서 강의를 계속 들었다. 짧은 시간 내에 이해하려니 어려운 부분이 많았다.

그래서 일단은 4주차까지 듣고난 후 프로젝트를 직접 만들어 보면서 수강한 내용들을 이해하려고 했다.

아직 배포는 완료하지 못했다. 확실히 만들어보면서 강의에 대한 내용들이 이 부분에 해당하는 내용이었구나 하고 알게되는게 많았던 것 같다.

이번 주차에선 리액트의 구조, 리덕스에 대해 배웠는데 강의에선 함수형과 클래스형을 계속 왔다갔다 해서 많이 헷갈렸는데 그 부분이 프로젝트(과제)를 만들면서 이해가 돼서 다행이었던 한 주였다.

DOM (돔)

DOM(Document Object Model) 문서객체모델 DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있는데 이런 구조를 트리 구조라고 한다. 왜 이런 설명을 썼냐면 DOM도 트리 구조이기 때문이다.

HTML이란 코드로 설계된 웹페이지가 브라우저( = 크롬, 파이어폭스 etc..) 안에서 화면에 나타나고 이벤트에 반응하고 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태

DOM의 모든 요소들 html, div, radio, table 등 이것들은 모두 node로 부터 상속받는다. 모든 HTML요소들은 기본적으로 node이고 이는 모두 node의 기능을 가지고 있다는 말이 된다.

node는 클릭 등의 이벤트가 가해지는 EventTarget이기 때문에 이 요소들은 모두 addEventListener 등의 기능도 갖고 있다.

가상돔(Virtual DOM) 실제 DOM의 구조만 간결히 흉내낸 자바스크립트 객체로 가상DOM 에서 바뀐 부분들이 생기면 실제 돔과 비교하여 바뀐 부분들만 실제 DOM에 반영한다.

Serverless (서버리스)

서버리스(serverless)란 개발자가 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델.

웹이 동작하려면 클라이언트와 서버가 필요하다. 서버가 없다면 웹이 동작하지 않는다. 서버리스는 서버가 없다는 것이 아니라 직접 서버를 관리하지 않는 경우를 뜻한다.

서버리스가 나오기 전에는 아마존의 EC2와 같이 비용을 지불하고 하드웨어적인 부분을 빌려 서버를 사용했는데 이는 하드웨어 부분만 빌리는 것일 뿐 소프트웨어 부분은 직접 관리를 해줘야 했다.

그 후에 서버리스가 등장하게 됐는데 이 서버리스는 항상 돌아가는 것이 아니고 리퀘스트 요청이 왔을 때만 함수가 동작한다. 서버는 이용자가 몇 명이든 같은 돈을 내고 사용하지만 서버리스는 수행한 함수만큼 돈을 지불하고

서버는 항상 돌아가고 있기 때문에 바로바로 응답이 가능하지만 서버리스는 잠들어있는(?) 상태의 함수를 깨우는 것이기 때문에 미세하게나마 시간차가 생길 수 있다는 단점이 있다.

[수업 목표]

1. event listener를 사용할 수 있다.
2. React-router로 주소에 따라 다른 페이지를 보여줄 수 있다.
3. 미리 정해놓은 주소가 아닐 때, '앗! 잘못 찾아오셨어요!' 페이지를 보여줄 수 있다.
4. Redux로 상태관리를 해보고 아래의 상태관리 흐름을 이해한다. (기본 값이 있고 → 어떤 동작을 하면("어떤 동작을 하는 지 정하자! → 하면 뭐가 바뀌는 지 정하자!" 과정이 사전에 필요하다!) → 값이 변했잖아? → 컴포넌트한테 알려주자!)
5. Redux hook을 사용해본다.

1강 - Event Listner

Event Listner 는 사용자가 어떤 행동을하는지 아닌지 지켜보다가 알려주는 것.

리액트에서 요소는 Ref로 잡는다. 후에 addEventListner를 추가한다.

Event listener를 추가해주는 것을 구독한다 라고 한다.

e.target > 이벤트가 발생한 요소가 무엇인지 가지고 오는 것

this.circle.current.addEventListener(1 - 어떤 이벤트, 2 - 어떤 행동을 할지)

this.circle.current.addEventListener("mouserover", this.hoverEvent) 마우스 오버시 hoverEvent 실행

2강 - 라우팅

라우팅 - 브라우저 주소에 따라 다른 페이지를 보여주는 것을 라우팅이라고 한다.

리액트는 SPA(Single Page Application)로 구성되어 있는데 이는 서버에서 주는 HTML이 1개 뿐인 어플리케이션을 말한다.

하나만 주는 이유 중 제일 중요한 것은 사용성 때문인데 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러와 비효율적이다.

단점은 한 번만 정적자원(HTML, CSS, JS)를 받다보니 처음에 모든 컴포넌트를 받아오기 때문에 사용자가 사용하지 않을 페이지까지 전부 가지고 오고 이는 컴포넌트의 양에 따라 로딩 속도가 느려지게 된다.

4강 - 리액트에서 라우팅 처리하기

path가 "/"와 "/cat"이 있다고 했을 때

"/cat"으로 들어가게 되면 "/"에 있는 컴포넌트들도 화면에 불러와지게 되는데 이는 "/cat"에도 슬래쉬( / )가 포함되어 있기 때문이다.

이를 막기 위해 속성 exact를 사용한다. -> 정확한 입력이 필요해서 중복된 값으로 라우팅 되는 것을 막을 수 있다.

사용 예제)

<Route path="/cat/:cat_name" exact component={Cat}></Route>

페이지 이동 방법

1 - Link

링크를 임포트하고, to 다음 가고싶은 url 작성

<Link to="/" exact>Home으로</Link>
<Link to="/cat/cat_name" exact>Cat으로</Link>
<Link to="/Dog">Dog으로</Link>

2 - History

useHistory 훅을 사용한다.

import { useHistory } from "react-router-dom";
const Dog = (props) => {
    const history = useHistory();
    console.log(history);
    return (
        <div onClick={() => {
            history.push("/Cat");
        }}>
            Dog화면 입니다!
        </div>
    );
};

6강 - 잘못된 주소 처리

react-router-dom에서 제공해주는 Switch 를 사용

👇 자세한 설명 (https://baeharam.netlify.app/posts/react/why-switch-is-needed)

7강 - 리덕스(Redux)

전역 데이터 저장소로 하위 데이터에 데이터를 주려고 할 때 발생하는 props drilling을 막을 수 있다.

전역 데이터 저장소에서 바로 원하는 곳에 데이터를 주는게 가능하게 해주기 때문이다.

흐름

구독한 컴포넌트들이 수정 요청 >> 액션(디스패치) >> 리듀서 >> 스토어 수정 >> 다시 구독한 컴포넌트에 값을 내려줌

8강

리덕스의 특징

• store는 1개만 쓴다
• state는 action으로만 변경을 할 수 있다.
• 이전 상태는 수정하지 않고 변화를 준 새로운 객체를 return 해야한다.
• 파라미터(인자)가 같으면 항상 같은 값을 리턴해야 한다.(순수한 함수)

10강 - 컴포넌트와 store 연결

컴포넌트에 만들어둔 store를 주입한다. 라고 표현.

index.js 에서 임포트해온다.

import {Provider} from "react-redux";
import store from "./redux/configStore"
BrowserRouter와 같이 App을 <Provider>로 감싸준다.

11강 - 컴포넌트에서 리덕스 데이터를 사용하는 방법

리덕스 훅

useDispatch는 데이터를 업데이트할 때,
useSelector는 데이터를 가져올 때 사용.
import {useDispatch, useSelector} from "react-redux";

어떤 페이지를 만들 때의 순서?

뷰 - 라우터 - 기능

함수(function) (by. 드림코딩 엘리)

함수는 프로그램을 구성하는 기본적인 빌딩 블록

• 서브 프로그램이라고도 불리며 여러번 재사용이 가능하다는 장점이 있다.
• 한가지의 태스크나 어떤 값을 계산하기 위해 사용한다.

함수의 구조

function 이름(인자1, 인자2..) { 기능, return }

• 하나의 함수는 한 가지의 일만 하도록 만들어야 한다.
• 함수는 무언가를 동작하게 하는 것이기 때문에 동사형태로 이름을 지정
• JS에서 함수는 오브젝트로 간주되기 때문에 변수에 할당 할 수 있고, 파라미터(인자)로 전달이 되고, 다른 함수를 리턴 할 수 있다.

return

모든 함수엔 return이 들어가있는데 종종 없는 경우를 볼 수 있다. 이는 return undefined 이 들어가있는 것과 같고 이는 생략이 가능하다.

할당

익명 함수(anonymous function)를 할당

const print = function () {
   console.log(print)
}

함수 호출 print(); >> 로그에 print

const printAgain = print;

printAgain(); >> 로그에 print

Callback

어떤 상황이나 조건이 충족했을 때 호출되는 함수

화살표 함수 (Arrow function)

함수를 간결하게 만들어줌
항상 이름이 없는 익명함수

예제 1)

const simplePrint = function () {
    console.log('simplePrint');
};

    🔻🔻🔻🔻🔻🔻🔻🔻🔻

const simplePrint = () => console.log('simplePrint');

예제 2)

const add = function (a, b) {
    return a + b;
}
    🔻🔻🔻🔻🔻🔻🔻🔻🔻
const add = (a, b) => a + b;

중괄호

const A = () => {
    return console.log('A 입니다')
}

중괄호가 있는 경우 return문이 없다면 값이 반환되지 않는다.

오늘의 느낀점

• 컴퓨터는 실수를 안한다.

• 모든 실수는 내가 한다.

단방향 데이터 흐름

부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는 것

왜 단방향을 쓰는가?

양방향일 경우, 자식 데이터가 부모 데이터에 영향을 주면 부모 데이터는 리렌더링이 일어나고 
부모 데이터가 리렌더링이 됐으므로 자식 데이터 역시 렌더링이 일어난다. 그럼 또 다시 부모 데이터에 영향을 줘 리렌더링 > 자식 렌더링 > 부모 렌더링 > 자식 ... 무한 루프에 빠지기 때문에 단방향을 사용한다.

클래스형 컴포넌트에서 State 다루기

가상돔, 실제돔을 비교할 때 비교를 해서 바뀐 부분이 한 번에 올라가는데,
비교를 하기 위해서는 값이 필요한데 그 값이 'key'이다.
각 요소마다 key라는 내용이 자동으로 들어가는데 이는 Elements 탭에서는 확인이 불가능하다. 

 => 실제 돔에 들어가는 속성이 아니기 때문

생활코딩 리액트

컴포넌트는 반드시 하나의 최상위 태그가 필요하다.

Props는 사용자가 컴포넌트를 사용하는 입장에서 중요하고

State는 props의 값에 따라 내부의 구현에 필요한 데이터들이라고 생각하자.

어떤 컴포넌트가 실행될 때 render보다 먼저 실행되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드는 constructor 안에 코드를 작성한다.

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      content:{Title:"기본 제목", sub:"기본 내용"}
    }
  }
  render() {
    return(
      <div className="App">
      <Content Title={this.state.content.Title} Sub={this.state.content.sub}/>
      </div>
    );
  }
}

리액트에서는 Props의 값이나 State의 값이 바뀌면 state를 가지고 있는 컴포넌트의 렌더 함수가 다시 호출되면서 렌더 함수 하위의 컴포넌트들도 리렌더링 된다.(화면이 다시 그려진다.)

온클릭 이벤트

다른점
JS
onclick="function"
React
onClick={function(){}}

debugger;

개발자 도구 창에서 debugger 코드를 만나면 실행을 멈춘다. > sources 에서 확인 가능

bind()

const obj = {name:'jihoon'};
function bindTest(){
    console.log(this.name);
} >> 로그의 결과는 undefined

여기서 
bindTest.bind(obj); 바인드 함수를 사용하면 this의 값이 ()안의 값이 된다. 여기선 obj가 되겠다.

컴포넌트 밖에서 props를 수정하는 것은 가능하다.

컴포넌트 안(render 이하)에서 props를 수정하려면 이벤트(setState)를 통해 props의 state를 바꿔주면서 props를 수정해야한다.

this.state.mode = 'welcome' X
ㄹ
컴포넌트의 생성이 완료된 후 동적으로 state 값을 바꾸고 싶다면 setState를 사용한다.

this.setState({ mode:'welcome' }); O

리덕스(Redux)

데이터를 저장소에 저장해뒀다가 저장소의 값이 바뀌면 관련된 모든 컴포넌트가 알아서 바뀌게 하는 것.

concat()

let a = [1, 2] 
a.concat(3)
a = [1, 2]  >> 값이 담기지 않음

let a = [1, 2]
let b = a.concat(3)
b = [1,2,3] >> 새로운 변수에 담으면 값이 담긴다.

리액트의 동작 방식에 대해 배운다

컴포넌트

리액트는 조각 조각들을 모아서 웹페이지 하나를 완성하는데 이 조각 조각들을 컴포넌트(Component)라고 부른다.

라이프 사이클이란?

컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 말한다.

라이프 사이클은 크게 생성 / 수정 / 삭제 로 나뉜다.

수정되는 경우들

• 컴포넌트 자신의 데이터state가 바뀌었을 때
• 부모가 나한테 주는 데이터 props가 바뀌었을 때
• 부모가 리렌더링 되었을 때
• 강제 업데이트를 일으켰을 때

가상돔

👉 DOM : HTML 단위 하나하나를 객체로 생각하는, 트리구조를 갖고 있는 모델

왜 쓰는가?

OM트리 중 하나가 수정될 때마다 DOM을 찾고, 수정하고를 하게되면 필요없는 연산이 너무 많이 일어나기 때문에 이를 막기위해 사용

동작방식

모리에 가상DOM에 변경사항을 전부 다 넣고 진짜 DOM과 비교하여 바뀐 부분만을 변경해준다. => 이 때 render가 진행된다.

진짜 DOM은 페이지에 처음 진입했을 때와 가상돔을 이용해 데이터가 변경 될 때 나타난다.

2강

클래스형 컴포넌트 함수형 컴포넌트가 있다.

2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.

근데 왜 클래스형 컴포넌트를 배우는가?

여기선 클래스형 컴포넌트를 알아듣고 수정할 수 있을 정도로 알아두기 위해 배운다. 라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.

어떤 것(요소)이 바뀌느냐는 render의 return에 포함되어 있다. 이 요소들이 가상돔에서 실제 돔으로 올라가면 수정(업데이트)가 완료된 것

3강

컴포넌트 (Component)

리액트는 컴포넌트를 잘 나누는 것도, 잘 쌓아올리는 것도 중요하다.

컴포넌트가 쓰는 데이터 Props, State

Props

• 부모로부터 받아온 데이터 A라는 부모와 B라는 자식이 있다. A가 B에게 데이터를 주면 이 데이터는 B에게 props가 되는 것 props는 수정이 불가능하다.

State

• 내 데이터, 컴포넌트 자체의 데이터
• 수정, 생성이 자유롭다.

4강

export와 import

export default의 경우 중괄호가 필요 없지만 그냥 export만 쓸 경우엔 중괄호가 필요하다 export {BucketList};

import {BucketList} from "./BucketList" export default BucketList; import BucketList from './BucketList';

5강

함수형 컴포넌트를 클래스형 컴포넌트로 바꾸기

// 클래스형 컴포넌트 class App extends React.Component{ // 초기화 해 줄 초기화 함수가 필요, 생성자 constructor(props){ super(props); this.state = { list: ["영화관 가기", "강의 듣기", "카페 가기"], } }

// 돔에 표현되기 위해서 render를 만들어준다. JSX에선 1개 이상의 리턴 값이 필수 render () { console.log(this.state.list) return (

// 함수형 컴포넌트 function App() { return (

); }

---

# 7강

## React에서 CSS 사용하기

**마진 병합 상쇄 현상**
>자식 요소가 display: block; 값을 가지고 있을 때 이 요소의 margin이 부모 요소의 margin처럼 보여지는 현상을 마진 병합 상쇄 현상이라고 한다. 
이 때 부모 요소를 display: block이 아니게 두면 된다.


**height: vh;** > 화면 비를 기준으로 높이를 설정하는 값이다.

**width: vw;** > 화면 비를 기준으로 넓이를 설정하는 값이다.

**display: flex;** > flex를 먹인 요소의 **자식 요소**가 자기가 갖고 있는 컨텐츠의 사이즈 만큼만 차지한다.

---

# 8강

## styled-component 패키지 문법 익히기
>// 첫 글자는 대문자로
const MyStyled = styled.div`
 width: 50vw;
 min-height: 150px;
 background-color: ${(props) => (props.bg_color)} `;
>
백틱 (``) 안에서 ${} 사용할 수 있음 

>${(props) => (props.bg_color)}
위 아래 같은 기능
${(props) => {
    return props.bg_color;
  }}  
>
삼항 연산자 사용가능
${(props) => (props.bg_color? "red" : "purple")}

---

# 10강 - 리액트에서 돔요소 가져오기

## 다시 한 번 듣기
>getElementById 와 appendChild는 진짜 DOM을 건드린다. 
이 때 가상돔에는 있지만 실제돔에 없는 경우라면 당연히 에러가 뜨는데 그래서 DOM요소를 가져올 때 사용하는 것이 Ref

>Ref는 '이름표'라고 생각

>함수형 컴포넌트에선 라이플 사이클 메서드를 쓸 수 없어서 리액트 훅을 사용한다.

HTML CSS Javascript >> 정적자원이라고 부른다.

웹의 동작방식은 간단하게 말하면 클라이언트는 서버에 요청을 서버는 클라이언트에게 응답을 하는 것

DOM(Document Object Model) 문서객체모델 DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있는데 이런 구조를 트리 구조라고 한다. DOM도 트리 구조이다.

CamelCase 이름을 짓는 경우 띄어쓰기가 필요한 곳에 띄어쓰기 대신 대문자를 넣는데 이게 낙타 등 같다고해서 지어진 이름이라고 한다. 귀여워

변수 선언은 let, const로 한다. let은 재할당이 가능하다. 하지만 const는 재할당이 불가능하다. >> 변수가 아닌 상수

스코프(Scope)가 뭘까? 우리가 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 스코프라고 한다. var는 함수 단위 let, const는 block 단위 {} 증괄호 안에 든 내용을 block이라고 표현한다.

function scope(){
    const a = 0;
    let b = 0;
    var c = 0;
  >
    if(a === 0){
        const a = 1;
        let b = 1;
        var c = 1;
        console.log(a, b, c);
    }
    // 앗! c는 값이 변했죠? 
    // 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요.
    // let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠?
    console.log(a, b, c);
}

함수 표현식 :

    // 함수 이름은 생략해도 괜찮아요!
    let do_something = function [함수 이름]() { ... }

화살표 함수 >> 함수 표현식의 단축형!

    // 화살표 함수는 함수 표현식의 단축형입니다.
    // function까지 생력이 되었죠!
    let do_something = () => { ... }

*Spread 문법 * 어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내는 문법 let array = [1, 2, 3, 4, 5]; ... << 스프레드 문법 [...array]는 새로운 [ ]객체 안에 요소들을 넣어주는게 되겠다.

삼항 연산자

if문의 단축형태!

let is = 5
let e = is === 5? 3: 4;

물음표 앞 까지는 조건이 들어간다. >> 만약 is === 5 라면
콜론 앞은 참일 때의 값 세미 콜론 앞의 값은 거짓일 때의 값으로 여기선 참이므로 3이 출력된다.

## Array 내장함수

### map
>**원본 배열을 유지하면서 변환시켜 새로운 배열을 만들어낸다.**

![](https://images.velog.io/images/2_juzzang/post/0b27ae3e-ba07-40d2-a5ca-4d471d8164da/map.PNG)


### filter
>**어떤 조건을 만족하는 항목들만 골라서 새로운 배열을 만들어내지만 요소 자체를 변경할 수는 없다.**


### concat
>**배열들을 합칠 때 사용한다. 단, 중복 요소를 제거해주진 않는다.**
>```
ex) 
const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];
const pets = dogs.concat(cats);
>
console.log(pets) = ['검은 강아지', '노란 강아지', '흰 강아지', '검은 고양이', '복슬 고양이', '노란 고양이']

from

1. 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때 2. 새로운 배열을 만들 때 (초기화)

유사배열이 뭘까? [ 어떤 값들... ] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못하는 친구들입니다. DOM nodelist같은 게 유사배열이에요.**

//배열화
    const my_name = 'hoon'
    const my_name_array = Array.from(my_name);
    my_name_array = ["h", "o", "o", "n"] 

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
    const text_array = Array.from('hello', (item, idx) => {return idx});
    console.log(text_array);

// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.) // 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;}); console.log(new_array);

```

JSX

Javscript + XML

JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다. 뷰를 그리는 요소들이 자바스크립트 파일에 들어간다. 리액트는 HTML파일이 하나만 있다.

리액트 규칙

1. 태그는 꼭 닫아주기
2. 무조건 1개의 엘리먼트를 반환하기
3. JSX에서 javascript 값을 가져오려면?
4. class 대신 className! id는 그대로 id
5. 인라인으로 style 주기 , 스타일은 딕셔너리로 넘겨줘야 한다. {키:밸류}

return에서 if문을 사용할 수 없으므로 대신 삼항연산자를 사용,

HTML CSS Javascript >> 정적자원이라고 부른다.

웹의 동작방식은 간단하게 말하면 클라이언트는 서버에 요청을 서버는 클라이언트에게 응답을 하는 것

DOM(Document Object Model) 문서객체모델 DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있는데 이런 구조를 트리 구조라고 한다. DOM도 트리 구조이다.

CamelCase 이름을 짓는 경우 띄어쓰기가 필요한 곳에 띄어쓰기 대신 대문자를 넣는데 이게 낙타 등 같다고해서 지어진 이름이라고 한다. 귀여워

변수 선언은 let, const로 한다. let은 재할당이 가능하다. 하지만 const는 재할당이 불가능하다. >> 변수가 아닌 상수

스코프(Scope)가 뭘까? 우리가 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 스코프라고 한다. var는 함수 단위 let, const는 block 단위 {} 증괄호 안에 든 내용을 block이라고 표현한다.

function scope(){
    const a = 0;
    let b = 0;
    var c = 0;
  >
    if(a === 0){
        const a = 1;
        let b = 1;
        var c = 1;
        console.log(a, b, c);
    }
    // 앗! c는 값이 변했죠? 
    // 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요.
    // let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠?
    console.log(a, b, c);
}

함수 표현식 :

    // 함수 이름은 생략해도 괜찮아요!
    let do_something = function [함수 이름]() { ... }

화살표 함수 >> 함수 표현식의 단축형!

    // 화살표 함수는 함수 표현식의 단축형입니다.
    // function까지 생력이 되었죠!
    let do_something = () => { ... }

*Spread 문법 * 어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내는 문법 let array = [1, 2, 3, 4, 5]; ... << 스프레드 문법 [...array]는 새로운 [ ]객체 안에 요소들을 넣어주는게 되겠다.

삼항 연산자

if문의 단축형태!

let is = 5
let e = is === 5? 3: 4;

물음표 앞 까지는 조건이 들어간다. >> 만약 is === 5 라면
콜론 앞은 참일 때의 값 세미 콜론 앞의 값은 거짓일 때의 값으로 여기선 참이므로 3이 출력된다.

## Array 내장함수

### map
>**원본 배열을 유지하면서 변환시켜 새로운 배열을 만들어낸다.**

![](https://images.velog.io/images/2_juzzang/post/0b27ae3e-ba07-40d2-a5ca-4d471d8164da/map.PNG)


### filter
>**어떤 조건을 만족하는 항목들만 골라서 새로운 배열을 만들어내지만 요소 자체를 변경할 수는 없다.**


### concat
>**배열들을 합칠 때 사용한다. 단, 중복 요소를 제거해주진 않는다.**
>```
ex) 
const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];
const pets = dogs.concat(cats);
>
console.log(pets) = ['검은 강아지', '노란 강아지', '흰 강아지', '검은 고양이', '복슬 고양이', '노란 고양이']

from

1. 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때 2. 새로운 배열을 만들 때 (초기화)

유사배열이 뭘까? [ 어떤 값들... ] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못하는 친구들입니다. DOM nodelist같은 게 유사배열이에요.**

//배열화
    const my_name = 'hoon'
    const my_name_array = Array.from(my_name);
    my_name_array = ["h", "o", "o", "n"] 

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
    const text_array = Array.from('hello', (item, idx) => {return idx});
    console.log(text_array);

// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.) // 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;}); console.log(new_array);

## JSX 
**Javscript + XML**
> 
**JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서** 뷰를 그린다.
뷰를 그리는 요소들이 자바스크립트 파일에 들어간다.
리액트는 HTML파일이 하나만 있다.

### 리액트 규칙
>1. 태그는 꼭 닫아주기
2. 무조건 1개의 엘리먼트를 반환하기
3. JSX에서 javascript 값을 가져오려면?
4. class 대신 className! id는 그대로 id
5. 인라인으로 style 주기 , 스타일은 딕셔너리로 넘겨줘야 한다. {키:밸류}

return에서 if문을 사용할 수 없으므로 대신 삼항연산자를 사용,

사람들이랑 밤 새워가며 코딩을 하는게 요리대회를 나갔을 때랑 비슷해서 학부생 때의 기억이 떠올라 좋았다. 학생으로 돌아간 느낌이 들었다는거지..

같은 시간, 다른 결과물을 보고 잘 하시는 분들이 정말 많으면서 동시에 많이 부족했음을 느꼈다.
그리고 정말 좋은 분들이 많이 계시는 걸 다시금 느낄 수 있었다.

완성 결과물 : 보고 또 보고

시간 안에 낼 수 있을 것이다. 라는 기대와는 달리 제출 시간을 넘겼다는게 아쉬웠다. 왜 이렇게 늦어졌을까 생각을 해봤다.

*1. 깃을 써봤다고 처음부터 알려드렸던게 오히려 시간을 잡아먹지 않았나 생각이 든다. * 5일의 시간 중 따져보면 깃으로 허비한 시간이 많았던 것 같다. 나도 잘 아는게 아닌데 팀원들한테 알려주고 에러가 나면 내가 고치는 상황이 반복됐고 이게 누적되어 팀 프로젝트에 영향을 미쳤으리라 생각된다. 오히려 진자로 템플릿을 나눈 시점부터 깃을 썼으면 어땠을까 싶다.

2. 역할 분배에 실패했다. 와이어 프레임을 짜고 역할을 분배하는데 있어서 어떻게 나누면 좋을지를 몰랐다. 결국 필수 기능 2개를 2명씩 나누는 걸로 했는데 역시 크게 나누는 것보다 조금 더 세세하게 나눴으면 좋았을 것 같다. 하지만.. 난 몰랐는걸..

jinja2

진자는 이번이 두번째로 써보는 기회였다. 템플릿을 나누면서 직접 코드를 넣어보니 어떻게 구성이 되는지 이해가 잘 됐다. 역시 백문이 불여일견, 백견이 불여일행 ㅎㅎ..

• Jinja 템플릿은 Python Flask 패키지에 내장된 Template 엔진으로 동적으로 변하는 웹페이지를 쉽게 구현할 수 있도록 도와주고.

• 고정적으로 출력되어야 할 서식 html 코드가 존재하고 동적으로 변해야할 자리는 Jinja2 문법으로 비워둔다. >> 이 부분에서 틀이 있고 재료를 넣어 만들어 간다고 느낀 것 같다.
• html 안에서 파이썬 코드를 작성할 수 있도록 해준다.

써보면서 느낀 것은 뭔가 도자기 틀이 있고 거기에 재료를 넣어 만들어 나가는 느낌이었다. 상세한 사용방법은 여기

계속 매달렸던 회원가입 문제

결론은 render_template에도 메서드를 걸어줘도 된다고 한다.. 지금까지 보고 배운 것 중에서 메서드를 쓴 것을 본 적이 없었어서 당연히 쓰면 안되겠지 했는데 쓰고나서 에러가 발생하지 않으니 써도 되나..? 라고 의문을 가졌지 확신은 못했다. 결국 멘토분께 여쭤봤는데 써도 되는 거라고 하셔서 안도했다.😄

JWT를 이용한 로그인😂

웹 페이지에 로그인을 할 때 서버에선 내가 로그인을 하고 있다는 사실을 알고 있어야한다.

인증 Authentication 내가 이 사이트에 가입된 회원임을, 즉 특정 서비스에 일정 권한이 주어진 사용자임을 아이디와 패스워드를 통해 인증을 받는 것 인가 Authorization(권한부여) 인증을 받은 사용자가 이후 서비스 기능들을 사용할 때. 서비스 제공자가 (인증을 통해)이를 알아보고 기능을 사용할 수 있게 허가를 해주는 것

JWT(JSON Web Token)는 인가(Authorization)에 연관된 기술이다.

. 을 기준으로 세 부분으로 구분이 되는데, 차례대로 각각 header, payload, verifysignature(서명)로 구분된다.

header : 타입과 알고리즘으로 구성되어 있다. 타입 'JWT'는 고정값이고 알고리즘은 3번 서명값을 만드는데 사용 될 알고리즘이 지정된다. HS256 등 여러 암호화 방식 중 하나를 지정할 수 있다. JWT를 어떻게 검증하는가에 대한 내용을 담고 있다. 여기서 1번 헤더와 2번 페이로드, 서버에 감춰놓은 비밀 값 이 셋을 암호화 알고리즘에 넣고 돌리면 3번 서명값이 나오는 것이다.

payload : 이 토큰을 누가 누구에게 발급했는지, 언제까지 유효한지 등 서비스는 사용자에게 토큰을 통해 공개하기 원하는 내용을 서비스 측에서 원하는대로 담을 수 있다. 이렇게 토큰에 담긴 사용자 정보 등의 데이터를 Claim이라고 한다.

verify signature : 헤더와 페이로드를 합친 문자열을 서명한 값이다. 서명은 헤더의 alg에 정의된 알고리즘과 비밀 키를 이용해 성성하고 Base64 URL-Safe로 인코딩한다.

이 셋을 합치면 JWT가 완성된다.

장점 : 서버측 부하를 낮출 수 있고 능률적인 접근 권한 관리를 할 수 있다.

단점 : 서버에는 토큰을 보낸 사용자에 대한 정보가 없기 때문에 토큰이 탈취당한 경우 무효화 할 방법이 없다.

처음부터 로그인에 매달릴걸.. 코드를 붙여 넣은 것인데도 에러 때문에 꽤 오랜 시간이 걸렸다. 에러 메세지를 검색하고 시도해봐도 해결을 못 하고 제출 시간을 넘겼고 결국 주변 분들이 도와주셔서 해결 할 수 있었다.

디버그 모드를 적극 활용하기 -> 코드 하나하나 문제가 있는지 찍어볼 수 있었다.

API 😀

보다 쉽게 정리되어 있는 API 설명서

이번 프로젝트에서 API를 GET과 POST 방식으로만 구성했는데 이 외에도 더 있다는 것을 알게됐고, 사전 강의를 들으면서 모호했던 API 코드 부분을 계속 보고 어떤 순서로 작동이 되고 코드를 직접 짜보면서 이해가 좀 된 것 같다. 하지만 api에 대한 정의 부분은 잘 모르고 있던 터라 찾아보게 되었다.

현재 이해한 바로는 POST는 데이터를 수정하고 보낼 때 즉, 데이터에 변화를 줄 때 쓰는 것. GET은 서버에서 가져온 데이터를 보기 위해 사용한다고 느꼈다.

어제와 오늘 원격 db에 크롤링한 데이터들을 저장하려다가 시간을 다 쓴 것 같다. 계속 시간을 투자할 순 없어서 후순위로 순서를 미루고 api 연동을 했다. 모호하게 알고있던 api 통신에 대해 익힐 수 있어 좋은 경험이었다.

api가 무엇인지 어떻게 돌아가는건지를 찾아보고 해야되는데 그럴 시간이 없어서 주말을 이용해 찾아보기로 다짐한다.

프로젝트 중간에 gitignore를 만들었다가 실패한 것 같다. 3명은 됐는데 한 분의 pyCharm 파일 자체가 오류 난 것인지 셋팅이 아예 안되는 문제가 발생했다. 결국 다시 파자는 의견을 따라 git repo를 새로 만들게 됐다. 사실 git을 처음부터 알려드렸는데 결과가 이렇게 돼버려서 내가 잘못했음을 알아 상심이 컸지만 극복

Git 초기설정 1 Git 초기설정 2 저장소를 파본 적이 별로 없어서 해당 링크에서 많은 도움을 받을 수 있었다.

오늘의 교훈 git을 시작할 때 미리미리 gitignore 작성하기..메모..

🤣태초에 이슈가 있었습니다..

로그인, 회원가입을 눌러도 모달창이 열리지 않았습니다.

😎 근데 빛도 있었습니다..

사전 스터디 조원들이 도와줬습니다 2조 어셈블 ㅠ-ㅠ

다른 분이 짠 코드다보니 다른 곳에서 문제를 찾고 있었고 주석을 저렇게 달아놓으셔서 로그인, 회원가입 모달창이구나 라고 생각하고 넘겼다가 다시보니 이벤트 전파 관련 함수였음을 알았고 클릭시 카드들을 지워주고 새로운 카드를 뿌려주기 위해 저렇게 코드를 짰는데

$('#main').empty(); 찾았다 요놈..

여기서 id=main에 있는 내용을 삭제해주고 다시 뿌려주는 것을 발견했고 id01, id02를 찾지 못하는 콘솔을 참고해서 다시 index파일을 봤는데 id01, id02가 main id를 가진 엘리먼트 안에 포함되어 있음을 발견했습니다.

🙋‍♂️ 해결은 이렇게

그래서 main 밖으로 id01, id02 를 가진 엘리먼트를 빼주니 이슈가 해결되었습니다~!

짜잔! 또 이렇게 짜릿함을 한사발 들이킵니다. 그리고 역시 혼자보단 함께하는게 좋다는 생각을 또 하게 됩니다🤞

이제 로그인 공부하러..

JWT를 이용한 로그인 기능을 맡게 되었다. 팀원들의 깃이랑 씨름하느라 손을 못댔다. 큰일.. 오늘은 하루 종일 git add . / git commit -m "msg" 의 반복 타이핑이었다. 역할 분담을 해도 도와주고 하다보니 컨플릭트가 필연적으로 나게됐고 그걸 또 같이 보면서 수정하느라 시간을 쓰게 됐다. msg의 내용엔 처음에 조원들에게 아무말이나 적으라고 했는데

사전 스터디에서 미니 프로젝트를 할 때 pull이나 push를 하려고 하면 merge를 하라길래 아무것도 모르고 커밋 메세지에 "제발ㄹㄹㄹㄹㄹ" 이런 메세지나 담았다가 나중에 로그에 다 찍히는 걸 봤다. 팀원들이 그랬었다. 간절하신게 보인다고..🤣

근데 그걸 알고있는 내가 아무말이나 쓰라는게 생각해보니 좀 아니다 싶어서 메세지에 관해 검색해봤다가 위의 내용을 발견할 수 있었다.

이제 슬슬 서버쪽으로 넘어가야 하는데 아직도 틀을 짜고 있어서 걱정이 된다. 내가 해야할 것들에 대한 강의도 보고있질 못하니 걱정이다. 2일찬데 벌써 600시간 ㅎ-ㅎ 고쳐주세요 ㅠ

그래도 오늘 구현한 기능(?)이 없는 건 아니니.. 도와드리다보니 html, css에 대한 감을 익혀가고 있다.

.book:hover .list{
    display: block;
}

마우스오버 상태에서 메뉴바가 나오는 기능을 구현했다. display:none; 에서 display:block; 으로 바꿔줘야 하는 것이 핵심이었고 javascript를 통한 방법, css를 통한 방법이 있었다. 처음엔 js를 택했는데 메뉴바로 마우스를 이동하면 메뉴바가 사라져서 css를 택하게 되었다. 위 코드에서 book은 부모, list는 자식이 되고 부모태그에 호버를 할 경우 list의 display가 none;에서 block;으로 바뀌게 해줬다. 자식태그는 당연히 부모코드에 속해있어야 한다! 결과물