🤔 어떤 에러가 발생하였을까? SignUpPC라는 부모 컴포넌트 안에 SignUpButton라는 자식 컴포넌트가 있다. 회원가입 버튼 클릭 시, SignUpButton 컴포넌트 안에서 Naver maps Geocoding을 통한 경도, 위도 정보 가져오는 기능을 구현하던 도중, 다음과 같은 에러가 발생하였다. 에러 메시지 Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. at thro..

비동기 통신과 전역 상태 관리의 최신 흐름 우리는 지금까지 아래의 행동들을 배웠다. API 호출하기 전역 상태 관리하기 API 호출하고 전역 상태에 Update 하기 🤷‍♀️ 그런데 API 호출하고 전역 상태를 update 해주는 게 어렵고 복잡하지 않는가? redux-toolkit의 createAsyncThunk 예시 하나의 API에 대한 코드가 위의 코드이다. 이 때, 여러 API를 호출하고 전역 상태 관리를 한다면....? 프로젝트의 크기가 커질 수록 API 호출 후 전역 상태를 업데이트 해줘야 하는 상황마다 작성해야 하는 코드가 많다. store의 크기도 비대해진다. 😭 전역 상태를 이렇게 관리하는 게 맞을까...? API 호출 후 응답 데이터 ➡ Se..

📌 Type annotation const val: number = 123 Type annotation: 변수 뒤에 ': number'로 타입을 지정해주는 것 형식은 다음과 같다. value: type 🐵 원시 타입 Primitive (원시값) : 불변, 객체가 아닌 값들 String Number BigInt Boolean Symbol null undefined const str: stirng = 'STRING' const num: number = 123 const bool: boolean = true const big: bigint = 100n 자바스크립트에서 이런 간단한 타입들은 타입 추론을 할 수 있기 때문에 굳이 타입을 지정하지 않아도 된다. 오히려, 타입 추론을 유도하는 것이 더 좋다. 원시값은..

👵 과거의 TypeScript "TypeScript는 JavaScript의 Super Set이다" = typescript가 javascript를 포함하고 있다. 👩 현대의 TypeScript "TypeScript is JavaScript with syntax for types." 👉 타입 구문이 있는 JavaScript JavaScript and More A Result You Can Trust Safety at Scale ▪ JavaScript에 추가 구문 ▪ IDE와 통합 ➡ 오류 캐치 ▪ JavaScript로 변환 ▪ JavaScript가 지원되는 모든 곳에서 실행 (브라우저, Node.js, Deno 등) ▪ JavaScript를 이해하는 타입 추론을 사용 ▪ 추가적인 코드 없이도 훌륭한 도구를 ..

7월 20일, 어제 최종 합격을 받고 난 후 도전 후기를 적어보려 한다. 서론 우선 선발 과정은 다음과 같다. [지원서 제출] - [면접] - [최종 발표] 인턴으로 선발되면 하는 일은 다음과 같다. 저번 면접 폭망(...) 경험 이후로 면접 연습을 많이 해보자! 라는 마음으로 가볍게 지원을 했었다. 옥소폴리틱스는 인턴십 온라인 설명회를 개최했는데, 여기서 좋은 인상을 많이 가져갈 수 있었다. 옥소폴리틱스 인턴십 온라인 설명회 팀 분위기가 매우 자유롭고, 대표님 마인드가 직원들의 '행복'을 중요시 여긴다는 것이 인상적이었다. 전원 재택 근무이고, 휴가도 무제한으로 쓸 수 있다고 한다. (물론... 일을 잘해야 휴가를 쓸 수 있겠지?😂) 면접 면접은 총 15분으로 5분 자기소개와 10분 질의응답으로 이루어..

JSX 설명 JSX 문법 사용 O JSX 문법 사용 X 두 코드를 비교했을 때, JSX 문법을 사용한 코드가 가독성이 훨씬 좋다. JSX 공식 문서 링크 : https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아니다. JSX라 하며 JavaScript를 확장한 문법이다. JSX는 React “엘리먼트(element)” 를 생성한다. JSX란? 더보기 React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시..

HTML, CSS JavaScript 프로젝트에 리액트를 추가하는 방법 웹사이트에 React 추가 React는 처음부터 점진적으로 도입할 수 있게 설계되었다. 그래서 React는 필요한 만큼만 사용하면 된다. 아마 기존 페이지에 "상호작용'이라는 조미료를 첨가하기만 하고 싶을 수도 있다. 이럴 때 React 컴포넌트를 쓰면 좋다. 오늘날 웹사이트의 대부분은 싱글 페이지가 아니고 그래야 할 필요도 없다. 빌드 도구 없이 몇 줄의 코드만으로 웹 사이트의 작은 부분에 먼저 React를 도입해보아라. React의 비중을 천천히 늘릴 수도 있고 아니면 동적인 위젯을 몇 개 추가하는 것으로 끝낼 수도 있다. react 공식 문서 링크 : https://ko.reactjs.org/docs/add-react-to-a-..

리액트의 모듈화 아이디어 React는 무엇이고, 사람들은 왜 쓸까? React가 어떤 문제를 해결해주는지 이해해 보자. 지금까지 웹사이트를 만들기 위해 배웠던 방식들 1.index.html에서 style.css와 script.js 파일을 불러오기 2. index.html에 태그와 태그로 css, javascript 코드를 바로 작성하기 하지만 우리가 실제로 만들어야 하는 웹사이트는 이렇게 간단하지 않다. 구현해야 하는 기능이 많아져서 JavaScript가 복잡해지면 하나의 script.js파일 안에 모든 코드를 넣기가 힘들어 진다. ex) 이 script 코드가 어떤 element를 제어하고 있는지 잘 파악하기 힘들고, 가독성도 안 좋아짐 ex) 변수 선언 시 겹치지 않도록 계속 신경써줘야 함 ➡ 여러 ..