전체 글

우아한 타입스크립트 스터디 회고스터디 시작 동기React, Vue, Next 등 어떤 프레임워크를 사용하더라도 자연스럽게 타입스크립트를 사용해왔습니다. 하지만 조금만 복잡한 타입을 작성하거나 읽어야 할 때마다 어려움을 겪으면서, 제가 타입스크립트를 자주 사용하면서도 제대로 이해하지 못하고 있다는 생각이 들었습니다.사실, 취업 준비를 하면서 자바스크립트나 리액트는 책을 읽고 인강을 보며 개념적인 부분을 공부했지만, 타입스크립트는 따로 학습한 적이 없었습니다. 그러던 중 타입스크립트 공부의 필요성을 절감했고, 회사 동기들에게 이 고민을 이야기했더니 모두 비슷한 고민을 하고 있었습니다. 그렇게 자연스럽게 스터디를 시작하게 되었습니다.스터디 진행 방식회사에서 처음으로 진행하는 스터디였기 때문에 어떻게 운영할지에..

배포 사이트 들어가며 저번 추상화강의에 이어서 비즈니스 로직과, Compound Componenet, 그리고 캡슐화에 대한 내용까지 들었습니다. 저도 프로젝트를 진행하면서 재사용성을 올릴 수 있는 방법에 대해 고민했었고, 비즈니스 로직까지 구분했던 경험이 있었습니다. 이런 경험을 바탕으로 내 프로젝트에 어떻게 적용할 수 있을까를 고민하며, 강의를 들었더니 '이거 조금 분리할 수 있겠는데?'라는 아이디어를 얻었고, 직접 리팩토링까지 해보게 되었습니다. 우선 저의 목표는 아래 컴포넌트의 비즈니스 로직을 분리하는 것입니다. 아래 컴포넌트는 이모지를 클릭시 바로 서버에 데이터를 전송하고, 이용자에게 평가가 반영되었다는 토스트 메시지를 이용자에게 보여주는 컴포넌트입니다. // FeedbackSele..

원티드 수업을 통해서 액션, 데이터, 계산을 나누어 컴포넌트 및, 함수를 추상화하는 방법에 대해 배웠습니다. 저 역시 사라 마라 웹 서비스 프런트엔드 개발을 하며 고치긴 해야 했는데, 그 방법을 찾지 못해 고민이었던 코드가 있었는데, 이번 기회에 일단 액션, 데이터, 계산을 담당하는 코드를 분리하는 작업부터 리팩토링을 해보았습니다. 코드 설명 위 코드는 챗 GPT한테 할 질문을 이용자에게 받고 대답받는 로직을 수행하는 모듈화 한 훅입니다. 하지만, 그 과정에서 너무 많은 역할을 하고 있습니다. 사용자에게 받은 데이터를 서버에 전송합니다(initial 단계) 전송후, questionId를 받으면, ReactQuery를 활용하여 응답이 완성될 때까지 확인하는 데이터요청을 보냅니다. (process 단계) 응..

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/ Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy. 프로젝트를 할 때마다, 이러한 에러들이 콘솔에 찍히는 경험이 있습니다. 웹 개발자라면 당연히 만나는 에러지만 만날 때마다 썩 좋은 경험은 아닙니다. 이번에야 말로 CORS..