function tpye을 설정해 줄때는 Function을 사용하는 것 보다는 () => void 이런 식으로 사용하는것이 좋다. const function add(){ cosnoel.log("함수") } add:Function add: () => void // 이 방법이 더 좋다. Formik (example) form 라이브러리 이다. 보통 Yup 이라는 라이브러리와 같이 쓰인다. Yup은 input 의 값을 지정해주는 역할을 한다. firstName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Long!') .required('Required') lastName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Lo..

버튼 ts 전환을 끝마쳤다. 디자인이 나오면 세세하게 변경 사항이 있을것 같다. 회원가입 컴포넌트의 전환을 시작했다. 회원가입 form의 통일 컴포넌트 수정등의 작업을 진행해야 한다. 진행하기 전에 구조를 파악하고 redux, redux-saga, 소셜로그인에 대한 공부가 필요하다. redux 간단 정리 1. action 폴더 애플리케이션에서 사용하는 명령어(action type) 또는 API 통신과 같은 작업을 하는 액션 메서드(action creator)를 모아둔 폴더 2. resucer 폴더 리듀서는 액션 메서드에서 변경한 상태를 받아 기존의 상태를 새로운 상태로 변경하는 일을 한다. 3. store 폴더 index.js 파일 하나만 있으면 미들웨어를 설정한다. 4. connect() 메서드 컴포넌..

Circle 버튼의 TS 전환을 이어서 진행 하였다. 두가지 아이콘을 CircleButton에서 받기 때문에 분기 처리를 해주어야 했다. className을 내려주는 문제를 해결해야 되는 상황이였다. 이런 식으로 되어 있는 구조에서 Image 컴포넌트를 CircleButton 컴포넌트로 포함시켜서 다른 Image 컴포넌트와 분기를 시켜줘야 하는 작업 이였다. 그중 className을 props로 받는 Image 컴포넌트에 대한 문제가 있었다. Image 컴포넌트를 합치기 전에는 ...rest 를 통하여 className을 BaseButton 컴포넌트로 내려주어서 처리 했지만 그렇게 내려버리면 Image 컴포넌트에는 className을 내려줄 수가 없었다. 내려 주더라도 Image 컴포넌트의 classNa..

align을 타입 지정할때 아래와 같이 지정을 하면 길어지기도 하고 다른 요소를 추가할때 일일이 다 적어주어야 하는 불편함이 있다. 그래서 enum 타입을 지정하여 한번에 받도록 변경해 주었다. 코드가 훨씬 짧아지고 가독성도 높일수 있고 재사용성도 가지게 되었다. interface button { align: left | center| right } //enum type enum AlignLocation{ LEFT = 'left', CENTER = 'center', RIGHT = 'right', } interface button { align: AlignLocation } enum 참고 블로그 component의 태그를 결정하여 렌더 시켜주는 부분이 있었는데 타입스크립트로 바꾸면서type을 만들어주어야 ..

진행 하던 토이 프로젝트의 데이터들을 어떻게 분류하고 사용할지에 대해서 논의를 나눴다. 간단한 문제라고 생각했는데 생각보다 복잡하였다. 첫 출근을하여 typescript에 대해서 많은것을 알 수 있었다. (공부해야 할 것이 많다....) type 정의 방법 타입으로만 지정을 해줘야 하는줄 알았는데 아래와 같이 스트링으로 지정도 가능하였다. interface prop { size: "large" | "middle" | "small } defaultprops interface props { name?: string }; const defaultprops: props = { name: "John" }; props의 name 값이 없을 경우 props의 값을 지정해준다. name이 없다면 "Jhon"이 출력이 ..

DB로 엑셀파일을 넣는중 Cannot set headers after they are sent to the client 이런 에러가 발생하였다. 클라이언트로 중첩된 응답이 가게되어 발생하는 에러라고 한다. for문을 돌면서 계속 Response를 해준게 원인이였던것 같다. router.post("/", async function(req,res,next){ let workbook = XLSX.readFile(__dirname + "/../../adress.xlsx") let worksheet = workbook.Sheets["시트1"] for(let i = 1; i { // for문이 끝나면 요청을 보내주도록 해주었다. if(i === 1100){ res.json({ message: "성공" }) } })..