일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- 코드스테이츠
- 회고
- 토익
- codestates
- 제로초
- 토익 900
- til
- 리액트
- 파이썬
- js
- 렛츠기릿 자바스크립트
- 타임어택
- 프로그래머스
- 알고리즘
- 타입스크립트
- 코어 자바스크립트
- 4주 프로젝트
- HTTP
- LeetCode
- 백준
- programmers
- 2주 프로젝트
- 리덕스
- SQL 고득점 Kit
- Async
- javascript
- 자바스크립트
- 정재남
- 타입스크립트 올인원
- 손에 익히며 배우는 네트워크 첫걸음
- Today
- Total
목록Front (80)
Jerry
필자는 현재 코드스테이츠 Immersive 수료 후에 취업 준비 과정 중에 있다. 취업 준비 과정에서 리액트에 다시 개념 공부도 하고 있기도 하고 스터디원들과 기술 면접 리스트를 가지고 준비하는 과정에서 이번에 "리액트 최적화"라는 주제가 내 눈길을 사로잡아 이번 기회로 잘 정리해보려고 한다. 이번 주제와 관련해서 공식 문서와 여러 잘 정리된 블로그 글들을 보고 너튜브 영상도 찾아서 보았다. 참고한 자료들을 나름 집대성해보려고 했으나 양이 비대해지는 걸 막지 못해 핵심적인 부분 위주로 구성을 해보았다. 각 내용의 자세한 내용들을 참고한 자료의 출처에 대한 내용들을 보시면 더 이해가 잘 될 것이다. 만약, 한 번 보고 이해가 안 가신다면 그건 당연하다고(?) 말씀드리고 싶고 꼭 필자의 글만 볼 필요 없고 ..
리액트에서는 상태와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처를 배웠다면, 리덕스에서는 컴포넌트와 상태를 분리하는 패턴을 배웁니다. 상태 변경 로직을 컴포넌트로 분리하여 복잡하게 얽힌 경우에서 단순한 컴포넌트로 만들 수 있게 됩니다. 리덕스는 리액트의 하위 라이브러리라는 오해가 있다고 하는데, 리덕스는 리액트 없이도 사용할 수 있는 상태 관련 라이브러리라고 합니다. 목표 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다. Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다. Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다. Presentational 컴포넌트와 Contain..
이틀간 스프린트 결과물이다. 아직 많이 부족하지만, 주말에 보강해보고 부족하면 더 시간 날 때마다 해볼 생각이다. 스프린트 내용은 밑에 적어 놓았다. 스프린트 설명 이번 스프린트는 클라이언트 사이드 프로젝트와 서버 사이드 프로젝트를 따로 만드는 스프린트다. 테마는 Personal Portfolio이며, 즉 자신의 포트폴리오를 만들기다.! Bare minimum Requirement로는 클라이언트 사이드 React를 사용해야 합니다. SPA(Single Page App)로 만들어야 합니다. 클라이언트 상에서 페이지 라우팅을 적용하십시오. React Router를 사용해봅시다 Stateful 한 컴포넌트를 두 개 이상 만드세요. (다음 예시를 참조하세요. 라이브러리를 사용하지 마세요.) 메뉴 선택 (sele..
Achievement Goals React 기본 React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다. 요즘 웹페이지는 유저와 많은 interaction이 일어나(ex. button) 수많은 상태 관리가 필요하다. 돔 관리와 상태 관리 말고 기능 구현에 집중하고 싶은 욕구가 있었고, React, Angular, Vue가 탄생했다. 리액트는 component (하나의 의미를 가진 독립적인 단위 모듈) 개념에 집중하고 있는 라이브러리다. 직관적과 재사용성이 증가한다. JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다. 리액트는 기본적으로 ES6를 사용한다. Destructuring, Spread operator, rest parameters, default paramete..
웹, 데스크톱, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리. 이전에 나는 페이지 단위의 DOM 개발을 다뤘다면, 이제는 컴포넌트 단위의 개발을 다룬다. React React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. React 리액트는 유저 인터페이스(Ui)를 빌딩하기에 선언적, 효율적이며 유연한 자바스크립트 라이브러리다. 리액트는 컴포넌트라고 불리는 작고 독립된 코드 조각들을 가지고 복잡한 UI들을 ..
PoiemaWeb // URL Java, C++과 같은 클래스 기반 객체지향 프로그래밍 언어와 달리 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어이다. 따라서 자바스크립트의 동작 원리를 이해하기 위해서는 프로토타입의 개념을 잘 이해하고 있어야 한다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메서드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype 객체 또는 줄여서 Prototype이라 한다. 프로토타입 객체는 생성자 함수에 의해 생성된 각각의 객체 공유 프로퍼티를 제공하기 위해 사용한다. w3school // URL 모든 자바스크립트 객체는 프로토타입으로 부터 ..
#1과 #2, 두 부분으로 나누어 정리해보았습니다. #1을 MDN의 내용을 참조하였고, #2는 코드스테이츠 자료를 참조하였습니다. #1 Inheritance in JavaScript Inheritance in JavaScript This article has covered the remainder of the core OOJS theory and syntax that we think you should know now. At this point you should understand JavaScript object and OOP basics, prototypes and prototypal inheritance, how to create classes (constructors) a developer.moz..
1. 객체 지향 프로그래밍이란? 라이브러리 특정 언어를 지칭하는 것이 아닌 프로그래밍의 철학 객체 지향 프로그래밍에서 모든 것은 self-sustainable 객체로써 그룹화됨 -> 재사용성 우리가 클래스라고 부르는 것(data model of blueprint)을 코드로 구현한 것 1-1. 그렇다면 클래스란 무엇인가? 클래스는 객체 생성을 위한 객체의 Blueprint이자 Idea 임 객체는 클래스의 인스턴스 클래스는 객체를 생성하는 constructor를 가지고 있다. 1-2. 객체지향 프로그래밍의 기본 개념 4가지 1. 캡슐화 : 캡슐화는 single 단위로 데이터를 wrapping up(뜻: 감싸다) 하는 것으로 정의된다. 이 메커니즘은 코드들을 묶거나 데이터를 조작할 수 있다. 또한, 바깥에서의..