원티드 프리온보딩 챌린지 강사님의 추천대로 realworld를 구현해보고자 한다. 상대적으로 보강이 필요하다고 생각되는 typescript와 redux를 사용해서 구현할 예정이다. realworld 깃허브 : https://github.com/gothinkster/
빨간색 => 초록색으로 갈 수록 효율성이 높다. 어떤 사건 혹은 일이 일어날 수 있는 경우의 가짓수를 수로 표현 순열: 서로 다른 n개의 원소 중에서 r을 중복없이 골라 순서에 상관있게 나열하는 경우의 수 (nPr)조합: 서로 다른 n개의 원소 중에서 r을 중복없이
기업과제 도중 로컬 캐싱을 이용하여(react-query 사용 제외) api 호수을 줄이는 과제가 있었는데 캐싱처리를 한번도 해보지 않아서 검색을 통해 다양한 방법 중 캐시 스토리지를 사용해 보기로 결정 했다. 로컬 스토리지가 아닌 캐시스토리지를 사용하는 이유는 로컬
src폴더 내에 pages, components, apis 폴더로 구분하였습니다. 서로 연관성이 있는 파일끼리 분리되어 있으며 다른 사람들이 봤을 때 이해하기 쉬운 직관적인 구조이기 때문에 보다 유지보수가 쉽다고 생각합니다.재사용성이 높은 ui는 유지보수에 용이하고
자동화된 툴을 사용하는 것은 프로젝트에 있어서 가장 중요하다! 서로 다른 형태의 코딩 스타일은 가독성이 떨어지기 때문이다. 코딩 스타일을 통일 시키기 위해서는 ESlint, Prettier와 같은 도구들이 필요하다. ESlint는 문법을 , Prettier는 코드포멧을
\-> Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화프로젝트 코드를 작성할 때 <div>를 무의식적으로 많이 사용했는데<div>를 사용하면 HTML의 DOM 구조에도 <div>는 적용되기 때문에 <div>대신 frag
아직 값이 없는 상태이기 때문에 있는지 확인해야 에러를 해결 할 수 있다. => &&연산자를 추가하여 데이터의 값이 존재하는 경우로 한정시켜주어 에러가 나오지 않게 해결 이외에도 if문을 활용하거나 ?연산자를 사용하여 에러를 해결 할 수 있다. 프로젝트할 때도 종종 했
지금 만들고 있는 더치페이 웹을 만들기에 앞서 우선 테스트 코드를 먼저 작성했다.test 코드를 먼저 작성하는 TDD 방식을 처음으로 진행해보았는데 기능단위로 테스트를 하기 때문에 스스로 어떤 문제가 발생하는지 인지 할 수 있어서 오류를 줄여주는 좋은 효과가 있다고 생
store 폴더 생성store폴더 안에 -context.js(케밥케이스)작성 app.js에 들어가서 해당되는 범위를 AuthContext.Provider로 묶어준다.이 값에 접근하려면 리스닝을 해야한다. 이때 Context.Consumer(6번) 혹은 리액트 훅(us
React 공식 문서에 따르면 포털은 다음과 같다. PortalsPortal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.외부에 존재하는 DOM노드를 React App DOM 계층에 존재하는 것 처럼 연결해주
여태까지 styled-component를 사용해서 개발을 했었는데 css module를 사용하는 강의를 듣게 되었다. 글로벌로 정해놓지 않으면 하나의 버튼을 정의할 때 각 파일에서 따로 정의해야하는 불편함이 있었다. 그리고 리액트는 컴포넌트 단위로 개발하는 것이 좋다고
LoadingHTTP 모듈 또는 파일 시스템으로 전달 받은 리소스 스트림을 읽는 과정DOM TreeHTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)CSSOM TreeCSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴
JavaScript 클로져에 대해서 설명하세요.클로저란 반환된 내부함수가 lexical scope을 기억하여 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수입니다. => 이거를 풀어서 설명할 수 있어야함함수는 생명주기가 있고 주기가 끝나면
클론 코딩을 진행하던 중 잘 정리되어있지 않거나 몰랐던 css를 적어보려고 한다. 한번도 사용하지 않았던 속성인데 아이템이 flex-basis의 값보다 작아질 수 있는 지 여부를 결정한다. flex-shrink에 들어가는 값은 0보다 큰 경우 유연한 박스이며 flex
1\. CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요.SCSS와 SASS는 CSS의 Preprocessor(전처리기)이다. CSS보다 쉬우면서, 추가 기능이 있는 CSS의 확장판 같은 역할이다.코드 중복을 줄일 수 있다.CSS의 특성상, 셀렉터를 중복해서