-
Notifications
You must be signed in to change notification settings - Fork 1
TIL 2월 13일
GyuHyeon Park edited this page Feb 22, 2023
·
11 revisions
- 작업 속도가 생각보다 더디다..
- 처음부터 하나씩 뜯어보고 있다 잘못 사용하는 것들이 없도록 잘 진행하자
- 열심히보다는 잘 처리해야겠지?
- express 를 생성시, response.send 와 response.json 두가지로 일반적으로 생성을한다.
- 이 때, .send(obj) 를사용시, json(obj)를 사용하는 것 보다 추가적인 call 이 발생 및 직관성 떨어짐
- API변환시 socket의 정보를 받아와서 사용하는 작업에 대해 찾아봐야함
- somthing..
- somthing..
- somthing..
- 코드리뷰 복기
- 코드리뷰가 확실히 많은 도움이 되었음
- 백엔드 팀 db 디자인 -> api 명세서 만들고 -> 프론트에서 만듦 -> 이시기에 백엔드는 실제로 엔드포인트가 호출되는 컨트롤러를 만들어서 개발서버에 올리는데 이때 실제db를 넣는게 아니라 -> 가짜 데이터를 json이나 그런걸로 만들어서 컨트롤러에 끼워넣어서 만듦 -> 프론트에서 가짜데이터를 통해 ui를 만들고 -> 백엔드는 이 시기에 뒤에 있는 진짜 로직을 만들어서 개발 서버에 올림
- 골자는 최대한 피드백을 빨리 주는게 좋음 -> 테스트 코드를 통해서
- 가짜 데이터를 만들고 -> 테스트 코드를 작성
- 컨트롤러 자체는 postman으로도 가능하니까 -> 서비스만 빡세게 테스트 코드를 작성함
- cors 문제 해결했따이
image
image
- 묵은 체중이 싹 내려간다
- 사실 이전에 해결했을때는 어찌저찌 되어서 세세한 내용까지는 잘 몰랐는데 문제가 한 번 더 터져서 이 참에 꽤 배우게 되었다.
- curl 로 cors 테스트를 쉽게 해볼 수 있다.
- spring cloud gateway 와 spring security에 대한 cors 설정
- 정리 : https://devcamp.notion.site/corscorscors-408ef7f285d840d0b0d937b9d1547eeb
- 오늘 못했던 side car 해보고..
- 시간이 남으면 기능들 다시 한 번씩 검토해보고 리팩토링 진행해야할 거 같다.
메시지 보내기 입력 안되는 문제 해결하였다. image
문제의 원인
→ onChange에 들어가는 값 타입을 v:string으로 지정을 했는데,
const handleChange = (v: string) => {
onChange(v);
resizeTextAreaHeight();
};
정작 실제 onChange 함수에는 커스텀 훅인 useInput의 changeValue 함수를 넣어줘서 발생한 문제였다. useInput 커스텀 훅에서 changeValue의 타입은 다음과 같다.
import { ChangeEvent, useState } from "react"; type InputAndTextAreaType = [string, (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, () => void]; const useInput = (initial = ""): InputAndTextAreaType => { const [value, setValue] = useState(initial); const changeValue = ({ target: { value } }: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => setValue(value); const resetValue = () => setValue(""); return [value, changeValue, resetValue]; }; export default useInput;
두 번째 튜플의 값이 changeValue인데, 다음과 같이 (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void 로 주었기 때문에 타입이 맞지 않아 발생한 문제였다.
그래서 useInput을 사용하는 대신 useState를 사용하도록 하였고, onChange 함수는 타입을 동일하게 string으로 주도록 하였다.
const MessageFooter = () => { const { serverId: isServer } = useParams(); const [value, setValue] = useState(""); const onChange = (v: string) => setValue(v); return ( <MessageFooterContainer isServer={!!isServer}> <MessageBox value={value} onChange={onChange} onClick={() => null} nickname="허다은" /> </MessageFooterContainer> ); };
- 할 것이 많아지니 다시 멘탈이 흔들리기 시작하는 중이다.... 🥹 조급해하지 말고, 스트레스 받지 말고, 진정하고 하나씩 차근차근 하자.
안에 내용 없이 스타일만 변경하는 경우에는 children을 받을 필요 없이, styled-components만 반환해주면 된다.
예로 들어서, 이전 코드가 다음과 같았다면,
import { ReactElement } from "react"; import styled from "styled-components"; interface DarkModalProps { children: ReactElement; width: number; top?: number | null; right?: number | null; left?: number | null; bottom?: number | null; } const DarkModal = ({ children, width, top = null, right = null, left = null, bottom = null, }: DarkModalProps) => { return ( <DarkModalConainer width={width} top={top} right={right} left={left} bottom={bottom} > {children} </DarkModalConainer> ); }; const DarkModalConainer = styled.div<{ width: number; top: number | null; right: number | null; left: number | null; bottom: number | null; }>` position: absolute; border-radius: 4px; z-index: 9; padding: 8px; width: ${({ width }) => width}px; background-color: ${({ theme }) => theme.backgroundColor["voice-modal"]}; ${({ top }) => top && `top: ${top}px`}; ${({ right }) => right && `right: ${right}px`}; ${({ left }) => left && `left: ${left}px`}; ${({ bottom }) => bottom && `bottom: ${bottom}px`}; `; export default DarkModal;
아래 코드로 간단하게 바꿀 수 있다.
import styled from "styled-components"; interface DarkModalProps { width: number; top?: number | null; right?: number | null; left?: number | null; bottom?: number | null; } const DarkModal = styled.div<DarkModalProps>` position: absolute; border-radius: 4px; z-index: 9; padding: 8px; width: ${({ width }) => width}px; background-color: ${({ theme }) => theme.backgroundColor["voice-modal"]}; ${({ top }) => top && `top: ${top}px`}; ${({ right }) => right && `right: ${right}px`}; ${({ left }) => left && `left: ${left}px`}; ${({ bottom }) => bottom && `bottom: ${bottom}px`}; `; export default DarkModal;
또한 이전에는 children이 ReactElement라 하나의 태그(하나 이상의 태그를 사용한다면 주로 fragment를 사용)로 감싸줘야했다면,
변경된 코드는 스타일만 변경해주기 때문에 fragment 없이 여러 개의 태그를 바로 작성해줄 수도 있다.
만약 default값이 있다면, styled-components의 defaultProps를 사용해서 설정하면 된다.