211201

리액트 타입스크립트 사용

• fucntion 키워드를 사용하는 typescirpt 컴포넌트는 children 을 가지지 않는다. (React.FC 를 명시하지 않을 경우) React.FC 로 선언한 컴포넌트는 children을 가진다.
• children 의 타입은 React.ReactNode
• styled Components를 사용할때나 여러가지 상황에서 굳이 React.FC를 선언하면 불편해진다. 명확하게 표시하고 싶을때 사용해도 되지만 굳이 사용하지 않아도 무방하다.
• useReducer 를 사용할땐 Action 타입을 지정해 준다.

알고리즘

• 그리드 알고리즘 : 매순간 최적이라고 생각하는 것을 선택한다. 하지만 반드시 답을 보장하지는 않는다.

수업

npm i express-generator ( express 탬플릿을 만들어줌)

styled components

• theme 를 관리하기 위해서 styled compoents 에 ThemeProvider, ThemContext 조합을 사용한다. 이렇게 theme 을 주입하면 모든 컴포넌트에서 props로 theme 변수에 접근할 수 있다.
• useContext 를 사용해 인수로 ThemeContext 를 넘겨주면 컴포넌트 내에서 변수로 사용할 수 도 있다. 여기서 테마를 바꾸는 setTheme 같은 작업을 수행할 수 있다.
• 테마 같은 경우는 theme 폴더에 파일별로 관리하되 id 를 주어서 어떤 테마인지 식별할 수 있도록 하면 현제 내 테마 상태가 어떤건지 id로 쉽게 판별할 수 있다.

backend express

• app.use(express.urlencoded({extended:false})) ⇒ html form → body 로 변환 해 주는 것
• cors: 클라이언트와 서버가 다른 도메인에 있다면 원칙적으로는 어떤 데이터도 받을 수 없다. 서버에서 Access-Contorol-Allow-Origin 설정 되어 있어야 함. Access-Contorol-Allow-Methods 로 가능한 메서드 설정해 주어야 함. 이럴 때 사용하는 미들웨어 cors → app.use(cors( { origin: [‘http~’]})) , option으로 origin, optionSuccessStatus, credentials → Access-Contorols-Allow-Credintial 설정
• 그 밖에 자주 사용되는 미들웨어 : cookie-parser (req.cookie 로 읽을 수 있도록 함.), morgan (어떤 요청, 얼마나 걸렸는지 로그를 남기고 싶을때) app.use(morgan(‘combined’)) <compbine → 포맷임, 다른건 깃헙에서 찾아보길>, helmet(보안에 필요한 헤더를 추가해줌)