I'm a Fig, Not a Pig

원격(remote) 브랜치인 uptream/feature 를 추적(track) 하는 새로운 브랜치를 생성하는 방법은 다음과 같다.git checkout --track -b feature origin/featuregit checkout -t upstream/feature 1. git checkout --track -b feature origin/feature : 새로운 로컬 브랜치 feature를 생성하고 origin/feature를 추적하는 명령어이다.2. git checkout -t upstream/feature : upstream/feature를 추적하는 동일한 이름의 로컬 브랜치를 자동으로 생성하는 명령어이다. 만약 로컬 브랜치에서 원격 브랜치의 이름과 해당 브랜치의 내용을 동일하게 로컬 브랜치로 ..

타입스크립트에서의 배열은 다음과 같이 정의할 수 있다.let numArr: number[] = [1, 2, 3]    문자열 배열 타입 정의만약 문자열을 담는 배열의 타입을 정의한다면 다음과 같이 하면 된다.let strArr: string[] = ["hello", "im", "winterlood"];    객체 배열 타입 정의객체를 담는 배열을 정의할 수 도 있다. 예시로 다음과 같은 객체 배열이 있다고 해보자.type Post = { title: string; content: string; author: { id: number; name: string; age: number; };};let posts: Post[] = [ { title: "첫 번째 게시글", con..

공식문서를 보면 Index Signature에 대한 내용으로 다음과 같이 적혀있다. Index SignaturesSometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values. In those cases you can use an index signature to describe the types of possible values. 쉽게 말해 인덱스 시그니쳐는 객체의 프로퍼티의 key과 value의 타입을 정해주는 것을 말한다. 인덱스 시그니쳐는 객체의 모든 프로퍼티가 특정 타입을 갖도록 강제하며, {[key : T] : U} 형식이다. 예제를 통해 살펴보자...

1. JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.타입 시스템은 크게 정적 타입 시스템과 동적 타입 시스템으로 나뉜다. 정적 타입 시스템은 코드 실행 전에 모든 변수의 타입을 고정적으로 결정하고 동적 타입 시스템은 코드를 실행하면서 유동적으로 변수의 타입을 결정한다. 정적 타입 시스템을 사용하는 언어에는 C나 Java 같은 엄격한 문법을 가진 언어들이 있고 동적 타입 시스템을 사용하는 언어에는 Python, JavaScript, Ruby와 같이 유연한 문법을 가진 언어들이 있다. JavaScript는 동적 타입 언어이다.배우기 쉽고 타입을 미리 설정하지 않아도 되지만, 실행 도중에 예상치 못한 타입이 들어와 타입 에러를 발생하는 경우가 있다. 또한 ..

저저번주에 모던 JS 스터디 하면서 클래스에 대해 공부했는데, 이번에는 TypeScript를 공부하며 또 만나게 되었다. 아직 class에 익숙하진 않지만, 알아갈 수록 유용하다고 생각된다. 오늘은 TypeScript에서 클래스를 사용하는 방법에 대해 살펴 볼 예정이다. 우선 JS 에서의 클래스를 먼저 간단하게 짚고가자.  1. JS Class클래스 선언class Student { } 클래스는 객체를 생성하는 틀이다. 붕어빵이 객체라면 붕어빵 기계는 클래스라고 볼 수 있다.   필드 선언class Student { // 필드 name; age; grade;}   생성자 선언생성자는 특수한 메서드로, 실질적으로 객체를 생성하는 함수이다.class Student { // 필드 name; a..

이틀 전부터 타입스크립트를 공부 중인데 any 타입이랑 unknown 타입이 헷갈린다. 둘 다 변수에 어떤 타입의 값이든 할당할 수 있는 것 같아 비슷하게 느껴져, 오늘은 둘의 차이점을 공부해보려 한다.  any 타입 타입 계층도를 보면 unknonw은 전체 집합이고 any는 치트키 같은 역할이다.any 타입이 치트키인 이유는 any 타입은 타입스크립트에서만 제공되는 특별한 타입으로 타입 검사를 받지 않기 때문이다. 예를 들어 다음과 같이 범용적으로 사용되어야 하는 변수가 있다고 가정해 보자.let anyVar = 10;anyVar = "hello"; // 오류 발생!변수 anyVar는 number 타입의 값 10으로 초기화 되었지만 이후 string 타입의 값 "hello"를 저장해야 한다. 타입스크립..

1.  type, interface 차이점type-alias는 모든 타입을 선언할 때 사용될 수 있고, interface는 객체에 대한 타입을 선언할 때 사용될 수 있다. 둘 다 객체에 대한 타입을 선언하는 데 사용될 수 있는데, 확장 측면에서 사용 용도가 달라진다.  확장이 불가능한 타입을 선언하려면 type-alias를 사용하면 되고, 확장이 가능한 타입을 선언하려면 선언 병합이 가능한 interface를 사용하면 된다. 2.  아래 두 타입의 부모,자식 관계와 마지막 문장에 있는 두 객체 타입간의 호환성을 설명해주세요type Book = { name: string; price: number;};type ProgrammingBook = { name: string; price: number; ..

팀 프로젝트 초기 세팅 하다가 새롭게 알게 된 부분이 있어 정리해보려 한다. CRA로 프로젝트를 생성하면 로컬에 자동으로 README.md 가 생성된다.나는 로컬에서 작업을 완료한 뒤 깃허브에서 repo를 생성하고 둘을 연결하기 위해 git pull origin main --allow-unrelated-histories 를 했는데 pull 이 정상적으로 되지 않고, 소스 컨트롤 메세지에 Merge branch 'main' of ~ 뜨면서 README.md 파일을 merge하라고 떴다. 이유를 알아보니, 다음과 같은 이유에서 merge를 해야했었다.git pull origin main --allow-unrelated-histories 명령은 로컬 브랜치와 원격 브랜치 간의 병합을 수행한다.이때 --allo..

프로젝트 폴더명에 대문자가 있어서 뜨는 에러이다1. 프로젝트 폴더 이름을 소문자로 변경하고2. npx create-react-app .입력하여 현재 디렉토리에 리액트 생성하면 된다.

페이지 네이션은 여러 컴포넌트에서 쓰일 수 있기 때문에 훅을 이용하는게 컴포넌트 재사용이라는 측면에서 유용하다. 그래서 구현중인데.. 쉽지않다..1. 첫 시도맨 처음 getAllProductsAsync()로 usePagination.js에 { page, pageSize: PAGESIZE, orderBy }를 넘겨주고, 다음 버튼과 이전 버튼 내에 함수가 실행되도록 로직을 짰다.// FleaMarketPage.jsfunction FleaMarketPage() { const [products, setProducts] = useState([]); const [orderBy, setOrderBy] = useState("recent"); const [allProductsError, getAllProducts..