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. 첫 시도맨 처음 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..
useEffect에 대해 공부하던 중 공식문서에서 useEffect 내에 fetch를 사용하면 race condition이 발생할 수 있다는 것을 알게됐다. 공식문서에서는 race condition을 해결하기 위해 boolean flag를 사용했는데, 처음 보는 방법이라 정리해두려 한다. 1. Race condition Race condition(경쟁 상태)이란 여러 개의 프로세스가 공유 자원에 동시 접근 할 때 실행 순서에 따라 결과값이 달라질 수 있는 현상이다. Race condition은 컴퓨터의 입장에서 큰 문제이다. 이유는 똑같은 코드를 실행할 경우 실행 결과가 항상 같아야 하는데, Race condition이 발생하면 결과가 달라질 수 있기 때문이다. 이러한 문제를 방지하기 위해서 공유 메모리..
- Total
- Today
- Yesterday
- javascript
- 프론트엔드
- 비제어 컴포넌트
- 비동기
- 옵셔널 체이닝 연산자
- CSS
- 유사배열객체
- 배열
- arguments
- Target
- 객체
- font-size:initial
- 제어 컴포넌트
- GitHub
- 코드잇 스프린트
- html
- 중급 프로젝트
- 취업까지달린다
- js
- Git
- 동기
- innerhtml
- currentTarget
- nullish 병합 연산자 '??'
- 코드잇스프린트
- react
- 리액트
- map
- 스프린트프론트엔드6기
- rest parameter
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |