전체 글

CHAPTER5 함수5.1 함수 매개변수function sing(song: string) { console.log(song);}sing("Hello");변수와 마찬가지로 타입 애너테이션을 통해 타입을 선언해 준다. 5.1.1 필수 매개변수JS에서는 인수의 수와 상관없이 함수를 호출할 수 있지만, TS에선 함수에서 선언된 모든 매개변수가 필수라고 가정하여 잘못된 수의 인수로 호출하면 타입오류가 발생한다.function singTwo(first: string, second: string) { console.log(`${first} ${second}`);}singTwo("do"); //Expected 2 arguments, but got 1singTwo("do", "re"); 5.1.2 선택적 매개변수JS..

2주차 입문 내용2025.02.16 - [항해99 플러스/React 스터디] - [React 스터디] 2주차 입문 단계 [React 스터디] 2주차 입문 단계11. 불변성 & 순수함수11.1 불변성1. 불변성이란?불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 원시데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 s-o-o-min.tistory.com1. Styled Components - 소개, 사용리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지다.기본적인 사용 방식은 꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식이다.// src/App.jsimport React from "react";// sty..

11. 불변성 & 순수함수11.1 불변성1. 불변성이란?불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 원시데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없다.  2 .변수를 저장하면, 메모리에 어떻게 저장이 될까?만약 우리가 let number = 1 이라고 선언을 하면, 메모리에는 1이라는 값이 저장되는데, number라는 변수는 메모리에 있는 1을 참조하게 된다. 다음 let secondNumber = 1 라는 또다른 변수를 선언했다고 가정했을 때 JS는 이미 메모리에 생성되어 있는 1이라는 값을 참조한다. 두 변수는 이름은 다르지만, 같은 메모리의 값을 바라보고 있다. let number = 1;let secondNumber = 1;console.log(n..

CHAPTER3 유니언과 리터럴이전 챕터에서는 타입시스템의 개념과 타입시스템이 타입을 이해하기 위해 값을 읽는 방법을 배웠다.이번 챕터에 TS가 해당 값을 바탕으로 추론을 수행하는 두 가지 핵심 개념을 확인해 보자.유니언(union): 값에 혀동된 타입을 두개 이상의 가능한 타입으로 확장하는 것내로잉(narrowing): 값에 허용된 타입이 하나이상의 가능한 타입이 되지 않도록 좁히는 것유니언과 내로잉은 코드 정보에 입각한 추론을 해내는 강력한 개념 3.1 유니언 타입let mathematician = Math.random() > 0.5 ? undefined : "Mark Goldberg";'이거 혹은 저거'와 같은 타입을 유니언이라 한다. 1. 유니언 타입 선언let thinker: string |..

들어가기 전항해 플러스를 신청한 이유는 React를 흡수하기 위해서다.지금 프론트엔드 시장에선 React는 default기 때문에 시작하지 않으면 난 바보가 될 것 같았다.그렇다고 독학으로 시작하기엔 React는 진입장벽이 Vue보다 높고, 자유도도 또한 높기 때문에 어떤식으로 코드를 짜야할 지도 막막했다.항해 플러스를 마칠 때 리액트 챌린저까진 아니더라도 플래티넘이 되게끔 목표로 잡고 있다.본격적으로 항해 플러스가 시작되기 전에 React의 기본적인 내용이라도 알고 가지 않으면 자존감이 맨틀을 뚫고 내핵으로 향할 것이 분명했기 때문에 사전 스터디를 신청했다.최근에 강의를 보면서 React를 맛봤기 때문에 아마 기초적인 내용은 머릿속에 맴돌고 있을 것이니 차근차근 시작해 보자.1. React 소개1.1 ..

들어가기 전스터디에서 채택한 도서는 한빛미디어에 러닝 타입스크립트라는 책이다.애초에 타입스크립트는 찍먹만 해봤기 때문에 이번엔 푹먹으로 학습 해보자.나는 windows를 사용하기 때문에 windows로 작성하겠다.들어가자.  CHATER1 자바스크립트에서 타입스크립트로 1.1 자바스크립트의 역사1995년 넷스케이프에서 웹사이트에 쉽게 접근하고 사용할 수 있는  JS를 개발했는데, 그 당시 개발자들은 별난 특성과 결점을 조롱했다고 한다. 그 이후로 JS기반의 ECMA 스크립트를 출시했고, 다른 최신 언어에서 제공하는 기능에 맞춘 새로운 기능들을 제공 했다. JS는 브라우저, 임베디드 애플리케이션(PC가 아닌 장치에 내장된 특수 프로그래밍), 런타임을 포함한 다양한 환경에서 새로운 버전과 이전버전과의 호환성..

Hook의 규칙   1. Hook은 무조건 최상위 레벨에서만 호출해야 한다.  첫 번째 규칙은 훅은 무조건 최상위 레벨에서만 호출해야 한다는 것인데, 여기서 말하는 최상위 레벨은 리액트 함수 컴포넌트의 최상위 레벨을 의미한다.  따라서 반복문이나 조건문 또는 중첩된 함수들 안에서 훅을 호출하면 안된다는 뜻이며, 이 규칙에 따라서 훅은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 한다.  이렇게 해야 리액트가 다수의 useState 훅과 useEffect 훅에 호출해서 컴포넌트의 state를 올바르게 관리할 수 있게 된다.  function MyComponent(props) { const [name, setName] = useState("수빡"); if (name !== '') { ..

useMemo()  useState, useEffect 외에 자주 사용하는 useMemo를 학습해보자.  useMemo 훅은 Memoized value를 return 하는 훅이다.  useMomo 훅과 바로 뒤에 나올 useCallback훅을 이해하기 위해서는 먼저 Memoized value가 무엇인지 알고있어야 한다.  useMemo와 useCallback 훅에서는 memoization이라는 개념이 나오는데, 컴퓨터 분야에서 memoization은 최적화를 위해서 사용하는 개념이다.  비용이 높은, 즉 연산량이 많이 드는 함수의 호출 결과를 저장해 두었다가 같은 입력 값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해 놨던 호출 결과를 바로 반환하는 것이다.  이렇게 하면 결과적으로 함수 ..

HooksHook이란 Hook은 리액트가 처음 나왔을 때부터 있던 개념은 아니고 리액트 v16.8에서 새롭게 등장한 개념이다.리액트로 개발을 할 때 대부분 훅을 사용하기 때문에 훅에 대해 잘 이해하는 것이 중요하다.앞서 학습 글에서 리액트 컴포넌트는 두 가지 종류가 있다고 했었다.하나는 Class Component 다른 하나는 Function Component 였다.또한 컴포넌트에는 state라는 중요한 개념이 등장했었는데, 이 state를 이용해서 렌더링에 필요한 데이터를 관리했었다.클래스 컴포넌트에서는 생성자, Constructor에서 이 state를 정의하고 setState() 함수를 통해 state를 업데이트 하였다.이처럼 클래스 컴포넌트는 state와 관련된 기능뿐만 아니라 컴포넌트의 생명주기 ..

Vue3에서는 v-for를 사용하여 elements를 생성할 때 각각의 key 값을 줘야했었다.React에서도 마찬가지인 것 같다.  render() { return ( {this.state.notifications.map((notification,i) => { return ; })} ); } map을 사용했던 부분에 key를 주어 에러가 해결  render() { return ( {this.state.notifications.map((notification, i) => { return ; })} ); }  생명주기가 두번 발생하는 오류import Re..