- 전체보기(149)
- 코딩앙마(35)
- frontend(32)
- JavaScript(27)
- typescript(18)
- React(18)
- redux(16)
- 벨로퍼트(9)
- jest(7)
- 성능 최적화(5)
- 캡틴판교(5)
- hooks(4)
- webpack(4)
- redux thunk(4)
- 최지민(4)
- computer science(4)
- redux saga(4)
- 컴포넌트 성능 최적화(4)
- TIL(3)
- 반복문(3)
- CS(3)
- Front-end Test(3)
- next.js(3)
- Redux+TS(3)
- nextjs(3)
- React + TS(3)
- closure(2)
- redux-middleware(2)
- middleware(2)
- array(2)
- Immer(2)
- none(2)
- class(2)
- algorithm(2)
- instagram(2)
- 기록하고 싶은 코드(2)
- Bang & Olufsen(2)
- network(2)
- react-query(2)
- starbucks(2)
- 2020.12.11 TIL(2)
- break(2)
- promise(2)
- 함수(2)
- 변수(2)
- continue(2)
- Redux-thunk+TS(2)
- 데이터 타입(2)
- 변수 선언(1)
- position(1)
- math(1)
- hydration(1)
- D-day 계산(1)
- article(1)
- footer(1)
- nav(1)
- aside(1)
- section(1)
- refactoring(1)
- 깊은 복사(1)
- 연산자를 이용한 타입 정의(1)
- union type(1)
- min-width(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)
- MPA(1)
- float(1)
- 프로토타입(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)
- 버튼 디자인 (속성)(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)
- 가비지 컬렉터(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)
- async/await(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)
- this(1)
- setInterval(1)
- setTimeout(1)
- arrow function(1)
- cross browsing(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)
- CSR(1)
- SSR(1)
- Single Thread(1)
- splice(1)
- font(1)
- background image(1)
- 에러 해결(1)
- 구조 분해 할당(1)
- 생성자 함수(1)
- cons(1)
- localstorage(1)
- Pop(1)
- block(1)
- execution context(1)
- 화살표 함수(1)
- inline(1)
- 수학 method(1)
- 용어 정리(1)
- do while문(1)
- 클래스(1)
- 배열 메소드(1)
- Promises chaining(1)
- Mock Functions(1)
- Client-side Navigate(1)
- official Docs(1)
- 얕은 복사(1)
- shallow copy(1)
- 코로나 예방접종센터(1)
- extends(1)
- webpack dev server(1)
- 실행 컨텍스트(1)
- 심볼(1)
- Intersection Type(1)
- spa(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)
- 무한 루프(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)
- Link component(1)
- developer(1)
- else(1)
- if(1)
- enums(1)
- object.values(1)
- calendar(1)
- max-width(1)
- 뱅앤올라프(1)
- data structure(1)
- deep copy(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)
- web(1)
Nextjs | 3-1. 프로젝트 시작 (Link Component / Client-side Navigate)
프레임워크의 기능들 학습 & 장점 이해프레임워크의 모든 기능 다 사용 X.어떤 기능들이 있는지 알기 위해 어떤 기능을 제작 시, 어떤 기능들을 조합해서 제작 가능한지 알기 위해 → 블로그로 nextjs 프로젝트 진행할 것파일 시스템 기반 라우팅 구현 방법 : pa
Nextjs | 2-4. Routing
라우팅특정 주소가 있고 그 주소에 도달해서 그 주소가 제공하는 데이터들을 받아서 사용하는 일련의 과정주소가 변경되고 새 데이터에 접근하는 과정들네트워크 용어로 多 사용웹에서의 관련된 개념 url & url에 대응하는 페이지 리소스들 라우터이를 도와주는 도구리액트라우
Nextjs | 2-3. Pages / Layout / Image
url과 1:1 매칭됨Next.js는 모든 페이지를 기본적으로 pre-render모든 페이지 → 미리 그려 놓음JS빼고 기초적인 UI가 이미 그려져서 내려오는 것검색 엔진 최적화기능다양한 검색엔진들이 해당 사이트를 더 잘 읽어갈 수 있게 함 → 상위 노출 가능 하게 함
Nextjs | 2-2. Data Fetching
데이터를 가져오다왜 시작부터 Data Fetching 인가? 화면에 무언가 그리려면 결국 어디선가 Data를 가져와야 함 그린다: 데이터를 가져와서 그린다생성한다: 데이터를 가져와서 그려둔다재생성한다: (특정 주기로) 데이터를 가져와서 다시 그려둔다서버가 그린다의미
Nextjs | 1-2-1. 소개 및 도구 - 환경설정
프레임워크 vs 라이브러리 Reactjs 라이브러리를 표방.공식문서에 적힌 문구 A JavaScript library for building user interface (사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리) 장점개인이 해야 할 고민들을 프
Nextjs | 1-1. OT
DoNext.js웹서비스를 만드는 방법프론트엔드 개발자에게 도움이 될 꿀팁Don’tReact 에 대한 기초 지식Next.js 기본 학습간단한 토이 프로젝트 제작 실습Next.js 심화 학습포트폴리오를 대비한 커머스 서비스 제작 실습4~5 강의마다 Recap큰 챕터가 끝
JavaScript | 실행 컨텍스트 (execution context)
실행 컨텍스트실행할 코드에 제공할 환경 정보를 모아놓은 객체.전역 컨텍스트 (전역 공간에서 자동으로 생성), eval, 함수 실행에 의한 컨텍스트 등활성화되는 시점에 3가지 정보 수집 (VariableEnvironment, LexicalEnvironment, ThisB
Developer | Cross Browsing
만든 웹 사이트와 웹 앱이 허용 가능한 수의 웹 브라우저에서 작동하는지 확인하는 방법같은 CSS / Javascript를 작성해도 브라우저마다 다르게 연산하는 경우 有대응 순서타겟이 되는 (가장 점유율이 높은) 브라우저부터점유율 참고 사이트: statcounter.co
JavaScript | this
명시적 this 바인딩이 없는 경우 성립하는 규칙전역 공간에서의 this 전역 객체(브라우저 → window, Node.js → global)를 참조 어떤 함수를 메서드로서 호출한 경우 this 메서드 호출 주체(메서드명 앞의 객체)를 참조 어떤 함수를 함수로서
JavaScript | 얕은 복사와 깊은 복사
바로 아래 단계의 값만 복사중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사그러면 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리키게 됨. (사본을 바꾸면 원본도 바뀌고 원본을 바꾸면 사본도 바뀜.)예시 코드객체
JavaScript | 이벤트 버블링 / 캡쳐링
캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계버블링 단계 – 이벤트가 상위 요소로 전파되는 단계예시 테이블 안의 <td>를 클릭하면 어떻게 이벤트가 흐르는가? → <td>를 클릭하면 이벤트가
CS 07 | SSR vs CSR / SPA vs MPA
SSR vs CSR 구분 기준 브라우저에서 보는 화면을 어디서 최종적으로 만들어서 보여주느냐, 어떻게 개발 하느냐에 따라 구분
Nextjs | 사용 이유
따로 설정 필요 없이 SSR, SEO 부터 TypeScript까지 생산에 필요한 많은 기능들을 제공해주는 강력한 리액트 프레임워크SSR. 하지만, CSR방식으로 사용하면서 SPA의 장점 유지 가능SSR 검색 엔진 최적화 (SEO)에 중요한 역할을 함. 리액트 공식문
JavaScript | 자바스크립트가 싱글 쓰레드인 이유
맞다. 하지만 JS 자체는 싱글 쓰레드지만 JS 런타임은 싱글 쓰레드가 아님.JS를 싱글 쓰레드 언어라고 부르는 이유 event loop(JavaScript의 main thread)가 single thread이기 때문 그러나, 멀티 쓰레드 환경(웹 브라우저나 Nod
JavaScript | 비동기 (콜백 함수, Promise, async/await)
프로그래밍에서 비동기는 기초적이며 중요한 작업입니다.그래서 이번에는 비동기 작업에 관한 글을 작성해보았습니다. 동기와 비동기에 대해 알아보고 비동기 작업에 해당되는 콜백 함수, Promise, async/await에 대해 알아볼 것입니다.동기(synchronous)의
CS 06 | 브라우저 렌더링 (www.google.com 을 주소창에서 입력하면 일어나는 일)
URL들의 이름과 IP주소를 저장하고 있는 데이터 베이스‘웹 사이트를 위한 주소록’ 같은 것이라고 생각하면 됨.숫자로 된 IP주소(ex. 63.245.217.105) 대신 사용자가 사용하기 편리하도록 주소를 매핑해주는 역할전송제어규약 & 인터넷규약데이터가 어떻게 웹을
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 상태값을 동기 또는 비동기 방식을