이번주 정리 및 주요 코드 정리

1. (주특기 기본) TodoList(Only useState) 완료

• 생각보다 일찍 구현해서 여유 있게 코드를 공부할 시간이 있었다. 마지막에 컴포넌트 나누는데서 곤욕을 치르긴 했으나 이중 mapping 같은 구조를 몰라서 벌어진 일들이라 해결했다.
• 내 코드를 팀원에게 설명할 수 있을 정도로 본 것 같다. 나중에 되면 다시 까먹겠지만 그래도 리액트 기본은 어느 정도 익힌 것 같다.

2. 구현 테스트

• 구현 테스트는 TodoList에서 CRUD 중 C 부분, 즉 추가하기 부분만 나왔다. 2시간 동안 구현하는 과제였고 배포까지 얼마 걸리지 않았다. 비교적 쉽게 풀었다.
• CSS 등 구체적으로 넣어야할 것이 생겼다면 더 오래걸렸을 것이다..

3. (주특기 심화) Redux공부 소감 및 이번주 과제 주요 포인트

• 전반적인 소회는 쉽지 않다는 것. 사실 리덕스도 리덕스지만 url 연결하는 부분이 더 어렵다. 이 부분은 완성해가는 코드를 보며 계속 복습해야 할 것 같다.
• 리덕스의 흐름은 조금은 쓰다보니 알 것도 같다. 그래도 코드 보며 익혀야겠다. 어느 부분이 뭘 전달받아서 어떤 값이 나오고 하는 논리적인 부분을 이해하는데 하루 정도 쓴 것 같다. 이후에는 계속 과제에 전념했다. 현재 상세보기 눌렀다가 홈으로 돌아올 때 filter를 못해주는 에러가 발생해서 이것만 해결되면 될 거 같다. 이건 기술적인 문제라 매니저님 지원을 좀 받고 싶다.

주요 포인트 코드

1. input 빈칸 통제

  const onSubmitHandler = (e) => {
    e.preventDefault();
    if(todo.title === "" || todo.body === "" || todo.title === undefined || todo.body === undefined) {
      // 하나만 넣으면 undefined가 뜬다.
      return alert("빈칸을 입력해주세요")
    }

2. submit 후 깊은 복사로 input 값 초기화

    setTodo(() => {
      return {...todo, title: "", body : ""}
    })
    // 깊은 복사로 빈값으로 바꾸기

3. 마지막 리턴값에 따라 isDone 값 리턴 되는 것 다르다.(한참 헷갈렸던 것)

ase CHANGE_TODOLIST:
        return {
          ...state,
          todos : state.todos.map(todo => {if(todo.id === action.id){
          todo.isDone = !todo.isDone
          return todos
          // todos가 리턴되어야지 true, false값이 리턴되어봤자 필터링이 todolist컨테이너에서 되지 않는다.
          }}),
          todos : state.todos,
        }

4. 키워드 정리(State, Props, 리렌더링 발생 조건)

1. State :

• 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 데이터 객체.

2. Props :

• 어떤 값을 컴포넌트에 전달하기 위해 사용하는 객체

1과 2의 차이점 : 둘 다 일반 자바스크립트 객체이지만 props는 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리된다.

같이 사용하는 이유 : 사용하는 쪽고 ㅏ구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것.

실제 1, 2를 사용해본 소감 :

• state와 props 모두 뭔가 변화시키기 위해 사용하는 값이지만 props는 뭔가 값을 넘겨주는 것에 사용했다면 state는 안에서 사용하는 느낌을 받았다.

3. 리렌더링 발생 조건 : 정리본 여기 참고

내 블로그

4. DOM :

1. 정의 : 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface (by MDN)

웹페이지 : 일종의 문서, 이게 브라우저로 해석되어 화면에 나타나거나 HMTL 소스 자체로 나타나기도 한다는 것.

2. 생성 & 보여짐 : HTML과 달리 내용과 구조가 객체모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점. (노드트리)

3. 수정 : 웹페이지의 객체지향 표현이며 JS와 같은 스크립트 언어로 수정이 가능한 형태

4. 결론

• 항상 유효한 HTML "형식"
• JS에 의해 수정될 수 있다.
• 가상 요소를 포함하지 않는다.
• 보이지 않는 요소를 포함한다.

그니까 HTML과는 뭔가 차이가 있고 (형식은 같으나 그렇다고 같지는 않다.) 돔트리에 의해 움직이는 객체모델이라고 보면 될 것 같다. 단독으로 보는 것보단 나중에 렌더링 구조와 함께 보면 될 듯. & 리액트 Virtual Dom과 같은 것처럼

5. 서버리스 :

1. 정의 : 개발자가 서버를 관리하 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 클라우드 네이티브 개발 모델. 서버가 존재하기는 하지만 추상화 되어 있다.

배포하고 나면 필요에 따라 자동으로 스케일이 업되거나 다운된다.

2. 장단점

• 장점 : 낮은 비용 / 간편한 확장성 / 간단한 백엔드 코스 / 시간 단축
• 단점 : 속도가 중요한 애플리케이션에서는 다소 안 맞을 수 있음 등... (아마 속도 관련된 문제가 있는 듯 싶다.)

프론트 / 백엔드가 나눠져 있는 것 같은데 이건 면접 준비 시 좀 더 알아봐야겠음.