728x90 반응형 자바스크립트29 [TypeScript/타입스크립트] 기본 문법 정리 -1 이번에 프로젝트를 하면서 타입스크립트를 처음 써봤다. 대충 구글링하면서 프로젝트 진행 중이긴한데, 제대로 공부하고 싶어서 강의 들으면서 기본부터 정리해보려고 한다. JavaScript & TypeScript 1. 정적 타입 vs 동적 타입자바스크립트: 동적 타입 언어로 변수의 타입이 런타임에 결정된다. 타입을 명시할 필요가 없기 때문에 유연하지만 타입 관련 오류가 런타임에 발생할 수 있다. 타입스크립트: 정적 타입 언어로 변수의 타입이 컴파일 타임에 결정된다. 타입을 명시할 수 있으며, 타입 추론을 통해 코드의 안전성을 높일 수 있다. 타입 관련 오류를 컴파일 단계에서 잡아낼 수 있어 자바스크립트보다 타입 오류 잡기가 쉽다. 2. 컴파일링자바스크립트: 인터프리터 언어로, 코드를 작성하면 브라우저나 No.. 2024. 6. 14. [React+JS/리액트] 웹 스터디 7주차 탭 UI 만들기 버튼 3개와 박스 3개를 미리 만들어놓고 버튼을 누를 때 마다 그에 맞는 박스를 보여주는 탭 UI 를 만들어보려고 한다. 다시 상기시켜보는 동적 UI 만드는 방법1. html, css 디자인 미리 완성시켜 놓고2. UI 의 현재 상태를 저장할 state 만들기3. state 에 따라서 UI 가 어떻게 보일지 작성 - html, css 로 디자인 미리 완성하기 리액트 부트스트랩 사이트에서 아래의 코드를 복사해서 가져오고, Nav 를 import 하기여기서 defaultActiveKey 는 페이지 로드시 어떤 버튼에 눌린 효과를 줄지 결정하는 부분으로 원하는 버튼을 넣으면 된다. import { Nav } from 'react-bootstrap'; 버튼0 .. 2024. 6. 5. [React+JS/리액트] 웹 스터디 6주차 컴포넌트의 Lifecycle 과 useEffect - 1 useEffect() 나 componentDidMount() 같은 함수를 쓰기 위해서는 컴포넌트의 lifecycle 을 알아야 한다. 컴포넌트의 인생을 알아야 컴포넌트 인생 중간에 간섭을 할 수 있기 때문이다. 컴포넌트의 인생은 3가지로 나뉜다.1. 생성 (mount)2. 재렌더링 (update)3. 삭제 (unmount) 컴포넌트의 인생에 간섭을 하려면 'Hook' 이라는 걸 달아야 한다. 훅 안에 실행할 코드를 넣으면 mount / update / unmount 시에 코드를 실행해주는데 Lifecycle hook 이라고 부른다. 옛날 리액트에서 Lifecycle hook 쓰는 법 예전 class 문법으로 컴포넌트를 만들 때, 안에 함수명.. 2024. 6. 3. Promise 객체 Promise 객체비동기 작업을 처리하기 위한 객체비동기 작업이 완료되면 값을 알려줄 것을 '약속'함일단 Promise 를 돌려주고 나중에 작업이 완료되면 결과값을 Promise 에 채워 넣어줌 Promise 객체의 3가지 상태 1. Pending (대기): 초기상태로, 작업이 아직 완료되지 않은 상태2. Fulfilled (이행): 작업이 성공적으로 완료된 상태3. Rejected (거부): 작업을 실패한 상태 Promise 객체의 상태는 상태 전이(Transition) 을 통해 변경된다. then 메소드Promise 객체가 fulfilled 상태가 되었을 때 호출등록한 콜백함수의 반환값으로 다시 Promise 객체를 반환 catch 메소드Promise 객체가 rejected 상태가 되었을 때 호출.. 2024. 5. 27. 이전 1 ··· 3 4 5 6 7 8 다음 728x90 반응형
