분류 전체보기

갑자기 Redux를 시작했다. 강의에서는 따라치는 수준으로만 가르치고 Redux에 대해 근본적으로 강의하지는 않는 것 같아서 인프런 생활코딩 Redux 강의를 보고 Redux 공부를 해보기로 함 강의는 이거 이 퀄리티에 공짜 넘 조하요.. [지금 무료]생활코딩 - Redux 강의 | Egoing Lee - 인프런Egoing Lee | , [임베딩 영상] 1. 강의 소개 생활코딩의 Redux 수업은 예측 가능한 애플리케이션의 상태 저장소인 Redux를 다루는 강의입니다. 이 강의에서는 순수한 웹기술인 HTML, JavaScript와 Redux만을www.inflearn.comImmutablity먼저, Redux를 시작하기 전에 Javascript Immutablity 개념부터 짚어보자.Immutability..

React는 상태 기반 UI 라이브러리라고 부를 수 있을 만큼 state(상태)가 중심이 되는 구조다. 오늘은 React 앱을 구성할 때 가장 기본이자 본질적인 다음 네 가지 주제를 기반으로 리액트 기초 핵심과 컴포넌트 구현을 알아보려고 한다.useState로 상태 만들기구조 분해 할당으로 props와 state 깔끔하게 처리하기배열 데이터 반복 처리(map)setInterval을 활용한 실시간 시계 구현🦝StateReact에서 상태의 개념React의 기본 철학은 UI는 상태에 따라 자동으로 갱신되어야 한다는 것이다. 여기서 상태(state)란 다음 조건을 만족하는 데이터를 말한다.사용자 입력, 네트워크 응답, 시간 흐름 등에 따라 변화 가능변경될 때마다 화면(UI)를 자동으로 다시 렌더링해야 하는 값..

React는 프론트엔드의 사고방식을 완전히 바꾼 라이브러리이다. DOM을 직접 다루는 imperative 방식에서 컴포넌트를 통해 UI를 선언적으로 구성하는 방식으로 전환시켰다. 그리고 그 핵심에는 JSX라는 독특한 문법이 있다. JSX는 처음보면, HTML과 Javascript를 섞은 조금 이상한 모습(ㅎㅎ)으로 보인다. 하지만 내부적으로는 놀라운 일관성과 효율성을 갖춘 문법이다. 오늘은 React와 JSX가 왜 등장했고, 어떤 철학과 구조로 설계되었는지 알아본다React의 등장 배경 - DOM 지옥 탈출하기2010년대 초반, 프론트엔드의 복잡도는 급격히 증가했다. DOM 조작은 점점 어려워졌고 상태와 뷰를 수동으로 동기화하는 코드가 넘쳐났다.const div = document.createEleme..

객체 리터럴 타입타입스크립트에서는 객체의 구조를 명확히 지정할 수 있으며, 이를 객체 리터럴 타입이라 한다. 객체가 가져야 할 속성과 그 타입을 명시함으로써 타입 안정성을 확보한다.const user: { id: number; name: string } = { id: 1, name: "Alice",};필요 시 선택적 속성(?)이나 읽기 전용 속성(readonly)도 사용할 수 있다.const config: { readonly port: number; debug?: boolean } = { port: 3000,};이 방식은 간단한 객체 구조를 일시적으로 정의할 때 유용하며, 반복 사용이 필요한 경우에는 별도의 타입 별칭이나 인터페이스로 분리하는 것이 좋다.유니언 타입유니언 타입은 하나의 값이 여러 타..

배포 후 확인했더니 흰 화면만 보이는 상황- 콘솔 확인해보니 404 오류 발생.- index-BqqmCf3n.js가 버킷에 없거나 잘못된 경로로 요청되어 발생한는 문제파일은 잘 있는데...왜? 생각하며 버킷을 확인해보니 assets 폴더가 안올라가 있다.파일 추가 버튼을 눌러 dist 내 파일 전체 드래그해서 추가했기에 당연히 들어갔을 것이라 생각했는데...폴더 추가 버튼으로 추가해야 제대로 버킷에 업로드된다. 배포 성공github actions도 확인해봤는데응 역시 한번에 성공할거라곤 기대도 안했음deploy.yml 파일에서 SOURCE_DIR 경로가 잘못된건가 싶어서 assets로 변경해보았는데, 이러니 assets 하위 파일만버킷에 업로드 됨 문제는 --acl public-read 옵션이었음.s3 ..

TypeScript는 JavaScript에 정적 타입(type system)을 추가한 언어로, 코드의 안정성과 가독성을 높이는 데 큰 도움이 된다. 이 글에서는 TypeScript의 핵심 기초 개념들을 정리한다. 데이터 타입 추론부터 타입 명시, 인터페이스, 열거형(enum)까지 차근차근 살펴본다🧠 데이터 타입과 추론TypeScript는 명시적인 타입 선언 없이도 변수의 타입을 자동으로 추론(type inference) 한다. 이는 코드의 간결함을 유지하면서도 타입 안정성을 확보할 수 있도록 해준다.let message = 'Hello, TypeScript'위 코드에서 message 변수는 별도로 타입을 지정하지 않았지만, TypeScript는 string 타입으로 추론한다. 만약 이후에 숫자를 할당하..