- 전체보기(133)
- 코딩앙마(35)
- frontend(32)
- JavaScript(21)
- React(18)
- typescript(18)
- redux(16)
- 벨로퍼트(9)
- jest(7)
- 캡틴판교(5)
- 성능 최적화(5)
- webpack(4)
- computer science(4)
- 컴포넌트 성능 최적화(4)
- redux thunk(4)
- redux saga(4)
- hooks(4)
- 반복문(3)
- TIL(3)
- CS(3)
- Front-end Test(3)
- React + TS(3)
- Redux+TS(3)
- 함수(2)
- redux-middleware(2)
- array(2)
- middleware(2)
- 2020.12.11 TIL(2)
- closure(2)
- class(2)
- Redux-thunk+TS(2)
- Immer(2)
- network(2)
- instagram(2)
- starbucks(2)
- 기록하고 싶은 코드(2)
- Bang & Olufsen(2)
- react-query(2)
- none(2)
- break(2)
- 변수(2)
- algorithm(2)
- continue(2)
- 데이터 타입(2)
- web(1)
- 변수 선언(1)
- position(1)
- math(1)
- D-day 계산(1)
- article(1)
- footer(1)
- nav(1)
- aside(1)
- section(1)
- refactoring(1)
- 연산자를 이용한 타입 정의(1)
- union type(1)
- min-width(1)
- promise(1)
- if 조건문 예제풀이(1)
- JS Functions(1)
- responsive web(1)
- 데이터 타입 종류(1)
- 데이터 할당(1)
- absolute(1)
- osi 7 layers(1)
- D-day(1)
- header(1)
- relative(1)
- 오픈 API(1)
- lodash(1)
- html-webpack-plugin(1)
- push(1)
- 뱅앤올룹슨(1)
- prompt(1)
- projects(1)
- Symbol(1)
- ADT(1)
- 불(boolean), 비교 연산자, 논리 연산자(1)
- literal types(1)
- bind(1)
- 동적 라우팅(1)
- how the web works(1)
- Thread(1)
- stack(1)
- queue(1)
- 호이스팅(1)
- process(1)
- Proxy(1)
- 데이터 타입 배경 지식(1)
- for문(1)
- 첫 프로젝트(1)
- 개요(1)
- right(1)
- style-loader(1)
- skip(1)
- boolean(1)
- lifecycle(1)
- connect()(1)
- clean-webpack-plugin(1)
- sequence(1)
- generator(1)
- 프로미스 체이닝(1)
- typesafe actions(1)
- Template literal 장정(1)
- 객체 메소드(1)
- 나머지 매개변수(1)
- key concepts(1)
- 정보처리기사(1)
- Redux Basics(1)
- array method(1)
- 반응형 웹(1)
- garbage collection(1)
- Spread Syntax(1)
- float(1)
- 프로토타입(1)
- Inherit(1)
- 필요한 경우(1)
- Document(1)
- Recoil(1)
- 개발자 도구(1)
- while문(1)
- Prototype(1)
- sessionStorage(1)
- 타입스크립트를 쓰는 이유(1)
- ts(1)
- useEffect(1)
- Utility Types(1)
- 비교 연산자(1)
- 인터섹션 타입(1)
- async await(1)
- left(1)
- only(1)
- fixed(1)
- img(1)
- 코로나(1)
- for ~ in(1)
- semantic tags(1)
- 기본 타입(1)
- Temporal Dead Zone(1)
- file-loader(1)
- number(1)
- 버튼 디자인 (속성)(1)
- css-loader(1)
- return(1)
- while(1)
- for(1)
- 메서드체이닝(1)
- polling(1)
- reverse proxy(1)
- &&(1)
- pagination(1)
- 타입스크립트 연습(1)
- react-virtualized(1)
- string methods(1)
- implements(1)
- Redux 기본 개념(1)
- main(1)
- Matchers(1)
- Flexbox(1)
- 콜백 지옥(1)
- 교차 타입(1)
- 가비지 컬렉터(1)
- div(1)
- Template literal 단점(1)
- hoisting(1)
- 첫 팀 프로젝트(1)
- 팀 프로젝트(1)
- inline-bloc(1)
- 문자열 메소드(1)
- 문자열(1)
- Reusing(1)
- @media(1)
- let(1)
- var(1)
- 클로저(1)
- Import Cost(1)
- Abstract Data Type(1)
- String(문자열)(1)
- 계산된 프로퍼티(1)
- filter(1)
- Rest parameters(1)
- application(1)
- 인터페이스(1)
- build(1)
- String(1)
- mini-css-extract-plugin(1)
- tree(1)
- callback Hell(1)
- BFS(1)
- 리액트 컴포넌트 테스트(1)
- structural sharing(1)
- 코어 자바스크립트(1)
- instagram instamg(1)
- media query(1)
- useMemo(1)
- useReducer(1)
- ReactDOM.render(1)
- 리팩토링(1)
- setInterval(1)
- setTimeout(1)
- arrow function(1)
- 작업 환경 준비(1)
- DOM(1)
- axios(1)
- Custom Hooks(1)
- 스냅샷 테스트(1)
- 특정부분 font(1)
- 기본 개념(1)
- 함수 표현식(1)
- button(1)
- object.entries(1)
- 버튼(1)
- useCallback(1)
- import 모듈(1)
- 브라우저 동작 원리(1)
- promise.race(1)
- react 18(1)
- splice(1)
- font(1)
- background image(1)
- 에러 해결(1)
- 구조 분해 할당(1)
- 생성자 함수(1)
- cons(1)
- localstorage(1)
- Pop(1)
- block(1)
- 화살표 함수(1)
- inline(1)
- 수학 method(1)
- 용어 정리(1)
- do while문(1)
- 클래스(1)
- 배열 메소드(1)
- Promises chaining(1)
- Mock Functions(1)
- official Docs(1)
- 코로나 예방접종센터(1)
- extends(1)
- webpack dev server(1)
- 심볼(1)
- Intersection Type(1)
- 난수(1)
- Query String(1)
- display(1)
- redux-actions(1)
- 객체 지향 기법(1)
- 유니온 타입(1)
- instamg(1)
- code splitting(1)
- 상속(1)
- bundle(1)
- FrondEnd(1)
- array methods(1)
- cookie(1)
- slice(1)
- computed property(1)
- semantic web(1)
- Generics(1)
- 무한 루프(1)
- redux-devtools-extension(1)
- atomic design(1)
- 불(1)
- object.keys(1)
- Map(1)
- describe()(1)
- DFS(1)
- template literal(1)
- 리터럴 타입(1)
- 메소드(1)
- TDZ(1)
- Object methods(1)
- else(1)
- if(1)
- enums(1)
- object.values(1)
- calendar(1)
- max-width(1)
- 뱅앤올라프(1)
- data structure(1)
- promise.all(1)
- Git test(1)
- 이넘(1)
- range(1)
- 보이기(1)
- OS(1)
- static(1)
- scope(1)
- apply(1)
- call(1)
- git(1)
- 백틱(1)
- redux-devtools(1)
- 논리 연산자(1)
- 전개 구문(1)
- 감추기(1)
- 사용 패턴(1)
- 3가지 규칙(1)
- 타입스크립트로 리액트 상태 관리(1)
- 테스트 전/후 작업(1)
- 숫자 method(1)
- else if문(1)
- Movie Search App(1)
- destructuring assignment(1)
- object(1)
- 배열(1)
- cors(1)
- 버튼 테두리 없애고 싶다면(1)
- front end(1)
React-Query | 개념 (concept)
서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용서버, 클라이언트 데이터를 분리주로 아래와 같이 프론트 개발자가 구현하기 귀찮은 일들을 수행캐싱get을 한 데이터에 대해 update를 하면 자동으로 get을
[개인 프로젝트] Movie Search App
👉 화면 확인 : 배포 링크👉 코드 확인 : 깃헙 링크영화를 검색하고 즐겨찾기 등록이 가능한 앱개발자: 정선미기간: ‘22.5.9 ~ 5.15 (Design + Development)React + Recoil + TypescriptIntersection Observ
Recoil | Core Concepts
Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph 제작 가능.Atoms컴포넌트가 구독할 수 있는 상태의 단위Selectorsatoms 상태값을 동기 또는 비동기 방식을
[❗️ 팀 프로젝트] Todo List App
TIL 4
날짜 선택(메인) 페이지월 선택 페이지년도 선택 페이지메인페이지에서 navi 버튼에서 년도(2022)를 선택하면 년도 선택 페이지로 월(May)을 선택하면 월 선택 페이지로 전환하며 그에 맞는 데이터로 변경하고 레이아웃도 변경한다.페이지별 특징 분석 표./src/com
TIL 3
캘린더에 보여줄 날짜 산출 방법 (with dayjs)보편적인 캘린더 제작 방식 및 적절한 시간 라이브러리 파악, 적절한 레퍼런스 등을 찾느라 많은 시간이 갔다캘린더를 직접 커스텀하는 경우가 많으니 좋은 경험이 될 것이다.보편적인 캘린더 제작 방식 및 적절한 시간 라이
TIL 2
Todo listOrganization으로 Git repo 생성Figma로 UI 디자인 완성 신기했다. 앞으로 (개인 플젝 등) 활용하면 좋을 것 같다. 컴포넌트를 기준으로 역할 분배 그간 페이지 단위로 나눈 것과 다르게 한 페이지에 컴포넌트 별로 쪼개어 역할 분
TIL 1
실력도 중요하겠지만 자기 PR을 잘하는 것이 중요하다검색 잘되는 사람이 되자각종 채용 사이트에 자신의 이력서를 올려라항상 업데이트 된 pdf파일로 들고 다녀라.til 쓰기module.css 좋다.이벤트 핸들러밖에 선언하라안에 바로 함수 선언 하지 말라 map 돌리고
React-Query | Official Docs 1
React를 위한 강력하고 성능 좋은 데이터 동기화"전역 상태"를 건드리지 않고 React 및 React Native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트합니다.선언적 & 자동 데이터를 가져오는 로직을 손으로 작성하는 것은 끝났다. React Que
CS 05 | 용어 정리
하나의 장치(또는 프로그램)가 충돌 회피 또는 동기화 처리 등을 목적으로 다른 장치(또는 프로그램)의 상태를 주기적으로 검사하여 일정한 조건을 만족할 때 송수신 등의 자료처리를 하는 방식을 말한다.참고wikipedia - 폴링 (컴퓨터 과학)
Algorithm | BFS, DFS
대표적인 그래프 탐색 알고리즘일반적인 BFS, DFS 시간 복잡도노드 수: V간선 수: E시간 복잡도: O(V + E)그림으로 보기 https://github.com/KoEonYack/PracticeCoding/blob/master/Article/Algori
Jest | [에러 해결] ReactDOM.render no longer supported in React 18
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's
Jest | 리액트 컴포넌트 + 스냅샷 테스트
npm test 또는 npm test aCreate React App으로컴포넌트 제작 (src/component/Hello.js)컴포넌트 import (src/App.js)불필요한 코드 제거Hello 컴포넌트 import화면잘 보임 (Hello)user 제작 후, 전달
Data Structure | ADT (Queue, Stack, Tree)
데이터의 추상적 형태와 그 데이터를 다루는 방법만을 정해놓은 것 (어떤 데이터의 구체적인 구현 방식은 생략)널리 사용되는 ADT 큐 (Queue), 스택(Stack), 트리(Tree) FIFO(First In First Out) : 먼저 집어넣은 데이터가 먼저 나옴
Jest | 목 함수(Mock Functions)
테스트 하기 위해 흉내만 내는 함수즉, 실제 함수를 구현한 것이 아니라 그저 흉내만 낸, 테스트 하기 위해서 만든 일종의 모형mock 의 사전적 의미 모의의, 가짜의 mock up 의 사전적 의미 모형, 모의 어떤 작업을 테스트 할 때, 목 함수로 간단히 테스트
Jest | 테스트 전/후 작업, describe, only, skip
테스트를 작성하다보면 테스트 전후에 해줘야될 작업들이 생김. → 이런 처리 가능 하도록 Jest는 help 함수 제공 > 🔍 테스트 방법 npm test 🔍 공통 사항 [옵션] timeout(milliseconds) 사용 가능 기본 timeout : 5초 → 해당: beforeEach/All, afterEach/All, only �...
Jest | 비동기 코드 테스트
test함수에 콜백 함수를 전달하지 않았을 경우3초(3000ms) 이상 걸려야 하는데 바로 통과(1ms)되고 종료3초 후에 이름을 알려주는 함수 작성 (fn.js)사용하는 코드 작성 (fn.test.js)테스트npm test결과 확인테스트 하니, 바로 통과실패하는 코드
JavaScript | async, await
기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줌.즉, 가독성 ↑ (Promise의 then 메소드를 chain형식으로 호출하는 것보다)함수 앞에 async를 붙여주면, Promise 반환→ 함수 호출 후, then 사용 가능예시 코드값 그대로
JavaScript | 프로미스(Promise)
Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄비유로 이해하기가정 상황상점에서 물건 주문 시, 나올 때 까지 시간이 걸림.언제 완료 될지 모름 & 가끔 물건 제작 실패하는 경우 有소비자의 대안10초에 한 번씩 묻기 (❌)다 됐나
Jest | 유용한 Matchers
Jest | Basics 1 (소개 / 설치 / 간단한 Test)설치 방법‘예시 | 간단한 Test’의 ‘1. fn.js 제작’객체 인스턴스의 모든 속성을 재귀적으로 비교 ("deep" equality 라고도 함).toBe 와 비슷하게 사용 가능toEqual(), to