- 전체보기(70)
- TIL(16)
- 알고리즘(13)
- 프로그래머스(12)
- 리액트(9)
- 1단계(8)
- React(8)
- 면접대비(4)
- CSS(3)
- 에러로그(2)
- DOM(2)
- portals(2)
- 데이터베이스(2)
- sql(2)
- 스택(2)
- linux(2)
- 파이널프로젝트(2)
- 인증(1)
- component(1)
- hooks(1)
- promise(1)
- 백엔드(1)
- every(1)
- 풀스택(1)
- 순열(1)
- 에러핸들링(1)
- 오름차순(1)
- realworld(1)
- 세션(1)
- 쿠키(1)
- lifecycle(1)
- 약수의 합(1)
- 카카오(1)
- 유효성검사(1)
- 파일업로드(1)
- 리덕스툴킷(1)
- 리덕스(1)
- TDD(1)
- MVC(1)
- 프론트엔드(1)
- 캐시스토리지(1)
- 아키텍처패턴(1)
- useState(1)
- 조합(1)
- 환경변수(1)
- 문자열 다루기(1)
- 나머지가 1이 되는 수 찾기(1)
- udemy(1)
- ESLint(1)
- Prettier(1)
- UI(1)
- JWT(1)
- 배열중복제거(1)
- 회원가입(1)
- 다른사람풀이(1)
- Math.min(1)
- context(1)
- 2단계(1)
- State(1)
- useContext(1)
- useMemo(1)
- Sort(1)
- 사용권한(1)
- 리팩토링(1)
- imgbb(1)
- 핸드폰 번호 가리기(1)
- 카카오문제(1)
- useCallback(1)
- 로컬캐싱(1)
- 내적(1)
- split()(1)
- isNaN(1)
- 인증/보안(1)
- 시저암호(1)
- new Set(1)
- 토큰(1)
- Database(1)
- 기초(1)
- Props(1)
- 큐(1)
- 보안(1)
- redux(1)
- Fragements(1)
- 정수 내림차순으로 배치하기(1)
- 이미지업로드(1)
- 투두리스트(1)
- Reat.memo(1)
- apply(1)
- 아코디언(1)
- test(1)
- typescript(1)
- 정규표현식(1)
realworld 시작!
원티드 프리온보딩 챌린지 강사님의 추천대로 realworld를 구현해보고자 한다. 상대적으로 보강이 필요하다고 생각되는 typescript와 redux를 사용해서 구현할 예정이다. realworld 깃허브 : https://github.com/gothinkster/
알고리즘 1) 수학 기분 이론
빨간색 => 초록색으로 갈 수록 효율성이 높다. 어떤 사건 혹은 일이 일어날 수 있는 경우의 가짓수를 수로 표현 순열: 서로 다른 n개의 원소 중에서 r을 중복없이 골라 순서에 상관있게 나열하는 경우의 수 (nPr)조합: 서로 다른 n개의 원소 중에서 r을 중복없이
캐시 스토리지 사용해서 api 호출 회수 줄이기!
기업과제 도중 로컬 캐싱을 이용하여(react-query 사용 제외) api 호수을 줄이는 과제가 있었는데 캐싱처리를 한번도 해보지 않아서 검색을 통해 다양한 방법 중 캐시 스토리지를 사용해 보기로 결정 했다. 로컬 스토리지가 아닌 캐시스토리지를 사용하는 이유는 로컬
프로젝트 구현 원리
src폴더 내에 pages, components, apis 폴더로 구분하였습니다. 서로 연관성이 있는 파일끼리 분리되어 있으며 다른 사람들이 봤을 때 이해하기 쉬운 직관적인 구조이기 때문에 보다 유지보수가 쉽다고 생각합니다.재사용성이 높은 ui는 유지보수에 용이하고
ESlint와 Prettier
자동화된 툴을 사용하는 것은 프로젝트에 있어서 가장 중요하다! 서로 다른 형태의 코딩 스타일은 가독성이 떨어지기 때문이다. 코딩 스타일을 통일 시키기 위해서는 ESlint, Prettier와 같은 도구들이 필요하다. ESlint는 문법을 , Prettier는 코드포멧을
TIL Fragments / Portals
\-> Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화프로젝트 코드를 작성할 때 <div>를 무의식적으로 많이 사용했는데<div>를 사용하면 HTML의 DOM 구조에도 <div>는 적용되기 때문에 <div>대신 frag
12.08 [에러로그]Cannot read properties of undefined
아직 값이 없는 상태이기 때문에 있는지 확인해야 에러를 해결 할 수 있다. => &&연산자를 추가하여 데이터의 값이 존재하는 경우로 한정시켜주어 에러가 나오지 않게 해결 이외에도 if문을 활용하거나 ?연산자를 사용하여 에러를 해결 할 수 있다. 프로젝트할 때도 종종 했
11.27 TIL TDD(Test-Driven-Development)
지금 만들고 있는 더치페이 웹을 만들기에 앞서 우선 테스트 코드를 먼저 작성했다.test 코드를 먼저 작성하는 TDD 방식을 처음으로 진행해보았는데 기능단위로 테스트를 하기 때문에 스스로 어떤 문제가 발생하는지 인지 할 수 있어서 오류를 줄여주는 좋은 효과가 있다고 생
Cannot redeclare block-scoped variable 'router'.ts(2451)
11.15 TIL useContext
store 폴더 생성store폴더 안에 -context.js(케밥케이스)작성 app.js에 들어가서 해당되는 범위를 AuthContext.Provider로 묶어준다.이 값에 접근하려면 리스닝을 해야한다. 이때 Context.Consumer(6번) 혹은 리액트 훅(us
11.14 TIL Portals(modal)
React 공식 문서에 따르면 포털은 다음과 같다. PortalsPortal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.외부에 존재하는 DOM노드를 React App DOM 계층에 존재하는 것 처럼 연결해주
11.13 TIL 컴포넌트 단위의 UI
여태까지 styled-component를 사용해서 개발을 했었는데 css module를 사용하는 강의를 듣게 되었다. 글로벌로 정해놓지 않으면 하나의 버튼을 정의할 때 각 파일에서 따로 정의해야하는 불편함이 있었다. 그리고 리액트는 컴포넌트 단위로 개발하는 것이 좋다고
11.10 TIL 면접대비(4)
LoadingHTTP 모듈 또는 파일 시스템으로 전달 받은 리소스 스트림을 읽는 과정DOM TreeHTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)CSSOM TreeCSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴
11.07 TIL 면접대비(3)
11.02 TIL 면접 대비(2)
JavaScript 클로져에 대해서 설명하세요.클로저란 반환된 내부함수가 lexical scope을 기억하여 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수입니다. => 이거를 풀어서 설명할 수 있어야함함수는 생명주기가 있고 주기가 끝나면
10.31 TIL 왓차피디아 클론 코딩 중 css 지식
클론 코딩을 진행하던 중 잘 정리되어있지 않거나 몰랐던 css를 적어보려고 한다. 한번도 사용하지 않았던 속성인데 아이템이 flex-basis의 값보다 작아질 수 있는 지 여부를 결정한다. flex-shrink에 들어가는 값은 0보다 큰 경우 유연한 박스이며 flex
10.30. TIL CSS 면접대비(1)
1\. CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요.SCSS와 SASS는 CSS의 Preprocessor(전처리기)이다. CSS보다 쉬우면서, 추가 기능이 있는 CSS의 확장판 같은 역할이다.코드 중복을 줄일 수 있다.CSS의 특성상, 셀렉터를 중복해서