전체 글62 [TS] TypeScript 타입스크립트의 장점은 바로 안정성이다!!닉값 제대로 하는 타입스크립트 공부해보쟈. .타입스크립트2012년 마이크로소프트에서 개발했으며, 자바스크립트의 상위 집합으로 설계된 프로그래밍 언어다.즉, 자바스크립트에 정적 타입을 추가한 프로그래밍 언어다. 💡정적타입프로그래밍에서 변수나 표현식의 데이터 타입이 컴파일 시간에 결정 되고 확인되는 시스템을 말한다. 컴파일 시간 타입 검사코드가 실행되기 전에 타입 오류를 감지함빌드 과정에서 타입 불일치 문제를 발견명시적 타입 선언변수, 매개변수, 반환 값 등에 타입을 명시적으로 선언타입 안정성타입이 맞지 않는 연산이나 할당을 미리 방지런타임 타입 오류 가능성 감소개발 도구 지원IDE의 코드 자동 완성, 리팩토링 지원이 뛰어남문서화 효과가 있어 코드 가독성 향상타입 변.. 2025. 3. 16. [리액트 7기] 2주차 주간회고 💡핵심 3줄 요약과제 제출 성공 !밀리기 시작했다 !위기를 기회로 💡이번 주 목표[❌] 시간계획표를 작성해보자 ![❌] 생활패턴바꾸기 - 아침 기상 도전!![✅] 과제 제출하기💡칭찬하고 싶은 점- 아직까지 생존했다는 거. .💡고치거나 버려야 할 점- 생활패턴이 최악이다 ! 건강한 삶을 위해 바꾸려고 노력해봐야겠다.- 집중력이 자꾸 떨어진다.- 예습언제해 나💡일일 스프린트더보기03월 08일 (토)[✅] 리액트 졸업과제03월 09일 (일)[✅] 리액트 졸업과제 제출03월10일 (월)[✅] 고용센터 취업상담다녀오기 [✅] TypeScript 기초 강의 듣기 #1.5 ~ #2.1[✅] 퀴즈 제출 [✅] 블로그 작성[❌] ReactJS #7.0 - #7.10 복습03월 11일 (화) [✅] Type.. 2025. 3. 14. [JS] 전개연산자 ... 전개 연산자(Spread Operator, ...)란? 배열, 객체, 함수 인자 등을 펼쳐서 개별 요소로 분해하는 JavaScript 문법배열과 객체를 쉽게 복사하거나, 새로운 값을 추가하여 확장할 수 있다.1. 배열에서의 전개 연산자배열의 요소를 개별적으로 펼쳐서 새로운 배열을 만들거나, 기존 배열을 확장할 때 사용된다.(1) 배열 복사 ( 얕은 복사 )전개 연산자를 사용하면 원본 배열을 변경하지 않고 새로운 배열을 만들 수 있다.(배열 안에 객체/ 중첩 배열 제외)arr2 = arr1 을하면 같은 배열을 참조하지만, ...arr1을 사용하면 새로운 배열이 생성된다.const arr1 = [1, 2, 3];const arr2 = [...arr1]; // arr1을 복사console.log(arr2); .. 2025. 3. 12. [리액트] useState [리액트] Statestate란?state(상태) 는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하는 객체다.컴포넌트의 state가 변경되면 해당 컴포넌트가 자동으로 리렌더링된다. 💡 리렌더링( rerendering ) state나 props가zing829.tistory.com useState는 상태를 관리하는 훅이며, state는 useState를 통해 관리되는 실제 데이터다. useState리액트에서 상태(state)를 관리하는 데 사용하는 훅(Hook)으로, 함수형 컴포넌트에서 상태를 추가할 수 있게 해준다. 초기 상태 값을 인자로 받으며, 배열을 반환한다.배열의 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수다.const [state, setState] = useS.. 2025. 3. 10. [리액트] State state란?state(상태) 는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하는 객체다.컴포넌트의 state가 변경되면 해당 컴포넌트가 자동으로 리렌더링된다. 💡 리렌더링( rerendering ) state나 props가 변경될 때, 리액트가 컴포넌트를 다시 그림 리액트에서는 useState() 훅을 사용하여 state를 생성하고 업데이트할 수 있다.💡props와 state의 차이props : 부모 → 자식으로 전달되는 변경 불가능한(Read-only) 데이터 state : 컴포넌트 내부에서 관리하는 변경 가능한 데이터 state의 특징 state가 변경되면 리렌더링이 발생한다.state를 변경하면 React가 자동으로 해당 컴포넌트를 리렌더링하여 UI를 업데이트한다. 💡 리렌더링( rere.. 2025. 3. 10. [리액트 7기] 1주차 주간회고 💡핵심 3줄 요약미루고 미뤘던 헬스장 등록 성공!우선순위 정하고 우선순위부터 !어려워. .💡이번 주 목표[✅] 헬스장 등록하기 [✅] 강의 밀리지않고 듣기 [✅] 과제 전부 제출하기[✅] TIL 빠짐없이 작성하기 💡칭찬하고 싶은 점- 강의가 안밀렸다. . 미루는 습관 고치는중!!!! 우선순위는 강의듣기-과제하기-예습 -그외공부💡고치거나 버려야 할 점- 예습을 안하고 있다. 대참사를 막기위해서 예습을 우선순위에 넣어야겠다.💡일일 스프린트더보기03월 04일 (월)[✅] ReactJS #1.2 - #2.6 듣기[✅] 퀴즈 제출03월 05일 (화)[✅] ReactJS #3.0 - #3.3 듣기 [✅] 퀴즈 제출[✅] 헬스장 등록하기[✅] 블로그 작성하기03월 06일 (수)[✅] ReactJS #3.4 .. 2025. 3. 7. [리액트] props propsReact에서 props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방식이다.(단반향)컴포넌트 간의 데이터 흐름을 단방향으로 유지할 수 있으며, props는 컴포넌트의 재사용성을 높이는 중요한 역할을 한다.컴포넌트와 propsReact에서 컴포넌트는 JSX를 반환하는 함수이다. [리액트] Component컴포넌트(Component)리액트에서 컴포넌트(Component)는 UI를 구성하는 기본 단위로, 재사용이 가능한 코드 덩어리다.예를 들어, 버튼, 네비게이션 바, 카드 UI 같은 것들이 각각 하나의 컴포넌트가 될zing829.tistory.com 컴포넌트는 ( )괄호 안에 argument(인자)를 받는데 여기서 인자 이름은 props라고 부른다. props는 컴포넌트가 전달받는 유일.. 2025. 3. 7. [리액트] Component 컴포넌트(Component)리액트에서 컴포넌트(Component)는 UI를 구성하는 기본 단위로, 재사용이 가능한 코드 덩어리다.예를 들어, 버튼, 네비게이션 바, 카드 UI 같은 것들이 각각 하나의 컴포넌트가 될 수 있다. 리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트가 있는데,React 16.8 이후로는 함수형 컴포넌트가 주로 사용되며, 클래스형 컴포넌트는 거의 사용되지 않는다.즉, 리액트의 컴포넌트는 결국 "JSX를 반환하는 함수"라고 볼 수 있다. 컴포넌트의 특징(1) JSX를 반환하는 함수컴포넌트는 JavaScript 함수처럼 작동하며, JSX를 반환하는 함수다.즉, 컴포넌트를 실행하면 HTML처럼 보이는 JSX 코드가 반환되며, React가 이를 해석해 화면에 렌더링한다. JSX 사용 규칙.. 2025. 3. 7. [JS]구조 분해 할당 배열에서 여러 개의 값을 변수에 할당할 때, 인덱스를 사용하여 할당을 하게 되면 코드가 지저분해지고 길어진다.이럴때 구조 분해 할당을 이용하면 가독성이 좋아지고 짧아진다.구조 분해 할당이란? 배열이나 객체의 요소(값)들을 변수에 쉽게 할당하는 방법으로 배열의 요소들에게 이름을 붙여주는 것과 같다.배열 구조 분해 할당배열은 index 기반으로 값을 가져오기 때문에 대괄호 [ ]를 사용해 변수에 값을 할당한다. (1) 기본적인 배열 구조 할당배열의 구조 분해 할당은 배열의 순서인 index를 기준으로 값을 가져온다.const food = ["apple","tomato","grape"];const [first,second,third] = food;console.log(second); // tomato (2) .. 2025. 3. 6. 이전 1 2 3 4 5 6 7 다음
