비동기 통신과 전역 상태 관리의 최신 흐름 우리는 지금까지 아래의 행동들을 배웠다. 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를 이해하는 타입 추론을 사용 ▪ 추가적인 코드 없이도 훌륭한 도구를 ..

자바스크립트는 왜 어려울까? 프로그래밍은 원래 쉽지 않아요. 쉽지 않기 때문에 학습에 시간이 걸립니다. 시간을 많이 투입하면 빨리 성장하지만 그래도 단기간에 급성장하기는 어려울 수 있어요. 진입 장벽이 어느 정도 있는 편이기 때문에 타 업종과 비교할 때 대우가 좋은 편입니다. 어느 정도의 진입 장벽이 있다는 것은 유리한 면도 있어요. 자바스크립트를 어떻게 공부하는 것이 효율적일까? "효율적인 학습 방법"은 무엇을 의미할까요? 최소 비용 최대 효과의 원칙("가장 적은 노력으로 큰 효과를")이 통할까? 투입 시간과 성장은 비례합니다. 재능보다 투입 시간이 성장에 더 중요합니다. 의식적인 연습을 꾸준히 반복하면 반드시 성장합니다! 프로그래밍 수련법 메타 인지 메타 인지 : 내가 아는지, 모르는지를 아는 것. ..

주제 예습 https://www.youtube.com/watch?v=YuqB8D6eCKE https://www.youtube.com/watch?v=iZ9csAfU5Os 웹이 빌드되고 유저에게 전달되어 브라우저에 랜더링 되기 까지의 과정 브라우저가 이해할 수 있도록 트랜스파일을 진행한다. 모듈을 하나의 어플리케이션으로 만들기 위해 하나의 파일로 합치는 것을 모듈 번들링이라고 한다. 웹팩을 사용한다! create react app 안에 웹팩이 있다. build map이란 ? 소스 map 사전 질문 Q&A script tyle="module" 이라고 적혀있으면 모듈로서 사용하기 위해서는 돔 파싱을 막으면 안되기 때문에 defer를 적은 것과 같은 역할을 한다. script를 다 다운받지 않은 것 같은데 밑에 ..

7월 4일 월요일, 최종 면접을 보고 커넥to 프론트엔드 도전 후기를 작성해보려고 한다. 우선 선발 과정은 다음과 같다. [지원서 제출] - [역량 테스트] - [자기소개서 제출] - [1차 합격] - [인성 면접] - [최종 합격] 1. 지원서 제출 지원서는 제로베이스 사이트에 들어가서 자기의 정보를 typeform으로 제출하면 된다. 2. 역량 테스트 제로베이스 자체 플랫폼에서 코딩 테스트를 본다. 문제는 제로베이스 프론트엔드 스쿨에서 나오는 Medium ~ hard 문제들이 출제되는 것 같았다. 하지만 프로그래머스 스쿨 플랫폼을 사용하는 것이 아닌 제로베이스 자체 플랫폼을 사용하기 때문에 난의도가 훨씬 어렵게 느껴졌다. 일단 제로베이스 플랫폼을 사용하게 되면 이전 문제를 넘기고 다음 문제를 해결할 ..

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-..