221205_TIL

오늘 공부한 내용

• 항해99 4주차

• 주특기언어 4주차 과제 기능구현 완료

 

궁금한 내용 / 부족한 내용

• todlist의 기능(추가하기,삭제하기,취소&완료하기)을 redux로 상태관리하기.
• 저번주차에 만들었던 내용에서 reducer,action,store만 만들어도 되지만, 코드리뷰도 다시 하는 의미로 처음부터 만들어 보았다. todolist를 만드는 기능중에서 역시 취소&완료하기 기능이 가장 어려웠다. useState에 상태만 저장해서 props로 전달하던 것을 이제는 reducer에 새로운 state를 반환하여  store에 저장해야 했다. 

 

// action creator
export const updateList = (payload) => {
  return {
    type: UPDATE_TODO,
    payload,
  };
};

//reducer
const initialState = {
  todos: [],
};

const todoList = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_TODO:
      return {
        todos: state.todos.map((todo) => {
          if (todo.id !== action.payload) {
            return todo;
          }
          todo.isDone = !todo.isDone;
          return todo;
        }),
      };

    default:
      return state;
  }

 

저번주에도 토글기능을 만들때도 실수했던 부분이 있었는데, state를 저장할때 id가 일치하는 리스트와 일치하지 않는 리스트 전부를 넣어줘야한다는 것을 생각하지 못했었다. 일치하는 부분만 넣다보니 전환할때 전체 리스트 중에서 일치하는 하나의 리스트만 들어가있는 결과값이 반환되어버린 것. 

 

 

useNavigate 와 Link 의 차이?

useNavigate는 함수이다. 그렇기 때문에 어떠한 조건을 만족했을 때, 이동을 할수 있도록 하는것이 가능하다.

반면에 a 태그와 같이 사용하기 위해서는 Link를 사용한다. 보통 클릭을 하게 되면 조건없이 바로 이동을 하는 용도로 사용된다.

 

 

childeren 이란?

children은 주로 자식 컴포넌트 또는 html 엘리먼트가 어떻게 구성되어있는지 모르는데, 화면에 표시해야 하는 경우 사용.

Layout을 만들어서 Component를 전달해야 하는 경우, 안에 들어가는 내용만 바뀌는 경우에 사용한다.

상위컴포넌트 아래에 children으로 넘기고 싶은 하위컴포넌트를 넣은 후 render하는 부분에서 children을 호출한다.

원래는 함수형 컴포넌트이므로, (props)를 받아야하지만, 이렇게 비구조화 할당(구조분해할당)함으로써 가독성을 높일 수 있다.

 

function Layout({ children }) {
  console.log(children);
  return (
    <div>
      <Header />
      <div style={{ ...layoutStyles }}>{children}</div>
    </div>
  );
}

 

 

URI이란 ? URL과 차이점은?

URI(Uniform Resource Identifier)는 인터넷에 있는 자원을 어디에 있는지 자원 자체를 식별하는 방법이다.

URI의 존재는 인터넷에서 요구되는 기본조건으로서 인터넷 프로토콜에 항상 붙어 다닌다.

 

프로토콜(protocol): 일반적으로 https 또는 http로 리소스에 접근하는 방법을 지정.

 

URL(Uniform Resource Locator)은 터넷에 있는 자원을 나타내는 유일한 주소다. 흔히 웹사이트 주소라고도 부르며 브라우저 주소창에서 쉽게 확인할 수 있다.

URI가 URL의 상위 개념인 샘이다.

예를들어 http://www.google.com:80/search?q=JavaScript인 경우 http://www.google.com:80/까지가 URL, 뒤에붙은 search?q=JavaScript이 URL을 포함한 URI(자세하게 말하자면 URN).

 

더 자세한 개념을 확인 하고 싶으시다면?

[네트워크/기본] URI, URL 및 URN의 차이점 - 하나몬

 

느낀점

children 이라는 개념을 배워서 신기했었다. 어떤 페이지로 가던 어떤 요소들이 남아있는 상태에서 페이지가 바뀌는 경우를 봐서 어떻게 저렇게 할까라는 막연한 궁금증만 가지고 있었는데 오늘에서야 해결되었다. 

리덕스 개념은 아직도 헷갈리는 부분이 많고 어려운 것 같다. 하지만 생각보다 시간이 지날수록 눈에 익어가는게 느껴져서 흐름자체는 이해를 한 상태라 마음은 한결 편해졌다. 마음고생 많이 한 나 칭찬해~

또 다른 분들과 함께 코드를 작성하는 와중에 에러를 해결해보거나 기능을 어떻게 만드는지에 대해 이야기해보면서 반복해서 개념을 다지고 숙지하는 기회를 가졌다. 서로에게 도움이 되는 기분 좋은 하루였다.

내일 할 일

• 리덕스의 개념공부하기( 리덕스 공부는 끝이 없지 ㅠ)
• 알고리즘 한 문제정도는 풀어보자
• 개인적인 시간이 날 경우 공부해 보고 싶었던 것들을 공부해보자.