[Day 39] 2022-0817

🐈오늘 공부한 것

✔️express.js 미들웨어 복습

https://friedegg556.tistory.com/199

미들웨어에 대해 좀 더 이해해 보기 위해서 별도의 글을 작성해 정리해 보았다. (원래는 라우팅까지 정리하려고 했는데, 분량도 많고 시간도 오래걸려서 중간에 끊었다. 내일 추가로 정리할 예정) 미들웨어는 요청과 응답 사이클 사이에서 중간중간 정해진 목적을 수행하는 함수를 의미한다. 크게 두 가지 방법으로 사용할 수 있는데, 하나는 정해진 메서드와 정해진 경로에 대해서만 수행하하도록 하는 방법, 또 하나는  app.use(<미들웨어>) 이렇게 사용하여 모든 요청에 대해 수행하도록 할 수 있다. 모든 프리플라이트 요청에 대해 cors 설정을 해주는 cors() 함수도 미들웨어이고, request의 body를 파싱해주는 express.json 도 미들웨어에 속한다. express의 소개에서 라우팅 및 미들웨어 프레임워크라고 되어있을만큼 express에서는 중요한 개념이다. 

 

미들웨어에서 특히 이해가 안되었던 부분이 next 호출이다. 직접 코드를 바꿔가며 실험해보니 미들웨어 함수에서 res.send 로 응답을 처리하면 요청에 대한 응답이 완료되어서 next가 없어도 괜찮지만, 미들웨어에서 응답을 처리하지 않는 경우 next가 반드시 필요하다. 지금 정리하면서 생긴 궁금증은, 여러 미들웨어를 메서드 체인처럼 체이닝해서 사용할 수 있는가? 인데, 아마 콜백의 콜백을 넣어서 실행하면 되지 않을까라는 생각도 든다. 

✔️styled-component 사용 연습

오늘 리액트 리팩토링을 시도하면서, CSS IN JS 방식을 사용해보고자 styled-component를 간단하게 연습해 보았다. 일단 styled 컴포넌트를 사용하기 위해서는 모듈 설치가 필요하다.

npm i styled-componenet

코드 안에서 이를 import 해서 사용할 수 있는데, 이름에서 알 수 있듯 styled-componenet는 스타일링이 되어 있는 컴포넌트를 만들어서 사용할 수 있도록 해주는 것이다. 예시로 아래와 같이 작성해볼 수 있다.

// StyledComponenet.jsx
import styled from 'styled-components';

const StyledElement = styled.div`
  width: 100%;
  height: 200px;
  background-color: white;
`;

function StyledComponent() {
  return <StyledElement />;
}

export default StyledComponent;

참고로 import styled from ... 코드에서 이름 첫 글자를 대문자로 하면 화면에서 잘 작동하지 않았다. 딱히 에러가 뜬 것은 아니라 자세한 원인은 모르겠다. StyledElement  선언하고 styled.div 혹은 styled.input 과 같이 스타일을 줄 element를 지정하여 백틱 안에 작성해주면 된다. 이런 스타일 이외에 컴포넌트에서 엘리먼트 호출시에 props 를 전달하면 해당 값을 엘리먼트에서 props로 접근하여 설정하는 기능이 있다. 이런 기능 때문에 값을 동적으로 바꿀 수 있어서 편리한 부분이 있는 것 같다. 

 

styled-component의 장점 중 하나는, 컴포넌트 위주로 스타일을 적용하기 때문에 클래스 이름 중복에서 좀 자유로워 진다는 것이다. 스타일코드가 컴포넌트별로 구분되기 때문에.. 그러면 전체 html에 공통 스타일을 적용하려면 어떻게 해야하는지? 궁금증이 생길 수 있는데, 이를 위해서 createGlobalStyle이라는 것을 제공하고 있다. 아래와 같이 작성한 코드를 최상위 컴포넌트에 import 하면, 전체 html 파일에 글로벌 스타일을 적용할 수 있다! 

// GlobalStyle.jsx
import {createGlobalStyle} from 'styled-components';

const GlobalStyle = createGlobalStyle`
    * {
        box-sizing: border-box;
    }

    body {
        padding: 0;
        margin: 0;
       }
`;

export default GlobalStyle;

추가적으로 styled-component를 vs code 에서 사용할 때 자동완성이 안되어 답답할 수 있는데, 이는 extenstion을 설치하여 해결할 수 있다. 

해당 익스텐션을 설치하면 자동완성을 적용할 수 있음!

✔️Todo List 만들기 - 체크박스 상태변경 시도...

체크박스 체크 상태를 동적으로 변경하고 이를 기존 데이터에 업데이트하려고 시도했는데, 상태가 변하지도 않고 저장도 되지 않는 묘한 상태가 되었다. state 설정이 좀 잘못되어서 그런 것 같은데...

체크박스를 눌렀을 때 변하는 값도 state로 만들어 주었고, list 자체를 state로 만들어서 체크박스를 눌렀을 때 ...

1. 체크박스 state 변경 2. 업데이트된 값으로 새 todo 만들고 3. 해당 todo로 list state를 업데이트하여 리렌더링 이런 식으로 접근하려고 한다. 지금 어려운 부분은 기존 list에서 todo를 새롭게 추가하는 것이 아니라 기존 상태를 변경해서 업데이트 하는 것인데, 그렇다면 todo item 자체를 state로 만들어야 하는건가? 뭔가 state를 최소한으로 줄이고 싶은데 방법을 더 찾아봐야겠다. 으 뭔가 처음부터 깔끔하게 짜려고 하니까 더 어려운 것 같은데 어떤게 좋은 방법인지 모르겠다. 일단 지저분 하더라도 되는 것이 중요한거겠지? 다 작성한 뒤에는 useReducer 같은 것을 사용해 더 효율적으로 바꿔보고싶다. 

🐈더 공부할 것

1. express 라우팅 공부해서 정리하기

2. 투두 리스트 체크박스 해결하고 삭제 기능 만들기

🐈오늘의 느낀 점

1. 이번주 들어서 공부하는게 진짜 진짜 힘들다. 막상 시작하면 재미있는데 책상 앞으로 가는게 너무 힘들다. 생활 패턴이 무너져서 체력 회복이 안되는 것도 문제점이다. 더 근본적인 문제점은 목표가 명확하지 않다고 느껴지는 것이다. 단순히 프론트엔드 개발자, 단순하게 내 서비스 만들고 싶다 이걸 넘어서 목표를 더 구체적으로 정리해야 될 것 같다. 체력이 떨어져서 집중도가 확 떨어진게 너무너무 크게 느껴진다. 섹션 3 들어가기 전까지 다시 재정비하고 힘내봐야지..!