I'm a Fig, Not a Pig

이틀 전부터 타입스크립트를 공부 중인데 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..

React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행한다.즉 React는 return에서 user.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 난다. 원래 1. 렌더링하고 2. useEffect 가 실행되고 데이터를 가져오고 3. 가져온 데이터를 이용해서 다시 렌더링한다.따라서 현재 1번에서 현재 에러가 난 상태이다.   해결방법1. &&을 이용한다.true && expression은 항상 expression으로 실행되고  false && expression은 항상 false로 실행된다. 따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 거짓이면 React는 무시하고 건너뛴다. {p..

1. 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요. Client Side Rendering (CSR)CSR은 클라이언트(브라우저)에서 웹 페이지를 렌더링 하는 것 이다. 동작방식은 다음과 같다. 사용자가 사이트에 접속하면 서버에서 index라는 HTML파일을 클라이언트에 보내준다. 이때 받는 index 파일은 body 안에는 id="root"만, 그리고 어플리케이션에서 필요한 자바스크립트 링크만 들어있는, 가장 추상적이고 심플하게 이루어져 있다. 따라서 HTML이 텅텅 비어져 있기 때문에 처음 접속 시 빈 화면만 보인다.이후 링크된 JS파일을 서버로부터 받아오는데 이 JS파일에는 어플리케이션에 필요한 로직들 뿐만 아니라 어플리케이션을..

styled-components로 생성한 요소에 prop으로 전달한 isActive 에서 아래와 같은 에러가 발생했다.읽어보면 React가 DOM 요소에서 isAcitve prop을 인식하지 못했으며, 의도적으로 custom attribute 을 나타낸 것이라면 소문자로 표시하라는 의미이다. 하지만 나는 prop을 카멜케이스로 작성하고 싶었고 해결 방안을 styled-components 공식문서에서 찾았다. transient props를 이용하면 이를 해결할 수 있다. transient props는 단순히 스타일로 지정된 prop이 기본 React 노드로 전달되어 DOM 요소로 렌더링 되는 것을 방지하게 해준다. 간단하게 $ 기호를 prop 앞에 추가하기만 하면 된다. const StyledNavLink..

1. git stash --include-untrackedgit 에서 stash 시 새 파일과 같은 untracked file은 stash에 포함해 주려면 따로 명령어를 추가해 줘야 한다.git stash --include-untracked  위 명령어를 사용해서 stash를 추가한 후 나중에 적용해주려면 git stash list 위 코드를 작성해서 stash들의 list를 확인해야 한다. 위 코드를 작성하면 아래와 같은 stash를 볼 수 있다.  stash@{0}: WIP on ... wip: ... 이후 git stash apply stash@{0}로 신규 파일이 들어있는 stash를 적용시켜주면 된다.    2. 에러해결나의 경우  git stash apply stash@{0}를 쳤더니 아래와 ..

1. useEffect의 실행 순서를 설명해주세요.컴포넌트가 렌더링되고 화면에 나타난다.useEffect 함수가 호출된다.만약 useEffect의 두 번째 매개변수로 의존성 배열이 제공되었다면, 이 배열에 지정된 의존성들이 변경될 때마다 useEffect가 재실행된다.컴포넌트가 언마운트되기 전에 필요한 정리(clean-up) 작업이 실행된다.  2. 자식 컴포넌트에서 props의 변경 가능 여부와 이유를 설명해주세요.자식 컴포넌트에서 props는 읽기 전용이다. 이는 자식 컴포넌트가 부모로부터 전달된 props를 변경할 수 없다는 것을 의미한다. 이는 React의 단방향 데이터 흐름을 유지하고 부모와 자식 간의 결합을 느슨하게 유지하는 데 도움이 된다. 만약 자식 컴포넌트에서 pro..