profile
프론트엔드 개발자가 되고싶습니다!!
태그 목록
전체보기 (111)React(68)Daily study(24)Recoil(3)js(3)typescript(2)try catch(2)closure(2)Shallow Copy & Deep Copy(2)Apollo client(2)async await(2)scope(2)@media , Responsive Design(1)git(1)수정하기(1)routing(1)undefined(1)Immutable & Mutable(1)virtual DOM(1)NoSQL vs SQL(1)cors(1)component(1)Hydration-Issue(1)regular expression(1)Cross-Site-Script(XSS)(1)web editor(1)Firebase/ BAAS(1)container - presentation(1)every(1)SPA vs MPA(1)swr(1)LazyLoad vs PreLoad(1)npm trends(1)차이(1)lifting state up(1)dynamic routing(1)session storage(1)token, XSS, CSRF(1)library(1)Graphql-codegen(1)Throttling & Debouncing(1)iamport(1)Utility Type(1)Open-API/ Public-API(1)cloud storage(1)Under-Fetching(1)HOC & HOF(1)assign(1)memoization(1)validation(1)state prev(1)Class Component(1)refetch(1)callback(1)SEO (CSR, SSR, SSG)(1)React-router vs Next-router(1)key / index(1)Shallow Routing(1)HTTPS vs HTTP(1)null(1)React Currting(1)Over-Fetching(1)useEffect(1)Event-Bubbling / Event-Delegation(1)event loop(1)등록하기(1)prevState(1)Component 재사용(1)권한 분기(1)node.js(1)class(1)&&(1)pagination(1)conditional rendering(1)Postman / Playground(1)observable(1)optional chaining(1)layout(1)login(1)query(1)hoisting(1)Import & Export(1)CI/CD(1)template literals(1)Promise vs Callback(1)Node(1)REST API(1)JWT(1)TS Generic(1)Optimistic UI(1)http status code(1)const(1)let(1)var(1)docker(1)Eslint / Prettier / Husky(1)filter(1)react-daum-postcode(1)Browser-Rendnering(1)Http / API / Graphql / Rest(1)todo(1)Atomic Pattern(1)삼항연산자(1)local storage(1)entries(1)values(1)원시자료형(1)State(1)useRef(1)this(1)setTimeout(1)React sate(1)참조자료형(1)Diffing / Hydrarion(1)Graphql/ Apollo-Server(1)Context API(1)reduce(1)Search/ Pagination(1)Promise All(1)EventLoop / TaskQueue(1)구조 분해 할당(1)Debouncing & Throttling(1)flatten, unflatten(1)this binding(1)Jest / Cypress / TDD(1)HoF(1)infinite scroll(1)Database ORM(1)setState(1)Functional Component(1)ES6의 특징(1)HoC(1)JSX(1)OOP vs FP(1)cookie(1)GRAPHQL-API(1)Domain, DNS, Hosting(1)static routing(1)Recursive Functions(1)object.keys(1)cloud provider(1)Database(1)State Lifting(1)state lifecycle(1)Map(1)mutation(1)image-process(1)Props(1)Global styles(1)Pagination vs Infinite Scroll(1)JS V8 Engine(1)mobx(1)redux(1)modal(1)component-lifecycle(1)

promise vs callback

함수에 함수넣기 가능다른 함수에 인자로 들어가는 함수를 callback(콜백) 함수라고 부른다.로직 안에서 같이 실행 시켜주기 위해 사용한다.전에 async await 가 없을 때 비동기 작업을 동기 작업으로 실행 시키고 싶을 때 콜백 함수를 통해 해결 했다.

2022년 7월 1일
·
0개의 댓글
·

this, binding

this는 현재 실행되는 코드의 실행 컨텍스트를 가리킨다.this binding은 this에 실행 컨텍스트의 주체를 연결 짓는 것, 즉 this가 무엇을 가리킬지 연결하는 것this binding은 실행 컨텍스트가 활성화 될 때 한다.실행 컨텍스트는 이 컨텍스트를 지닌

2022년 7월 1일
·
0개의 댓글
·
post-thumbnail

JS V8 Engine

V8은 Google Chrome과 Node.js에서 사용되고 있는 구글에서 제작한 자바스크립트 엔진이다.웹 브라우저 내부에서 자바스크립트의 속도 개선을 위해서 고안되었다. 자바스크립트 엔진은 웹 특성상 유저와 상호작용을 위해서 즉시성이 있는 인터프리터 방식을 사용하는데

2022년 7월 1일
·
0개의 댓글
·

Docker

Docker란 Go언어로 작성된 리눅스 컨테이너 기반으로하는 오픈소스 가상화 플랫폼이다.현재 Docker 0.9버전 부터는 직접 개발한 libcontainer 컨테이너를 사용하고 있다. 이제는 향상된 컴퓨터의 성능을 더욱 효율적으로 사용하기 위해 가상화 기술이 많이

2022년 7월 1일
·
0개의 댓글
·

observable

RXJS (Reactive eXtensions For JavaScript) 는 리액티브 프로그래밍을 Javascript 에서 지원하기 위해 만들어진 라이브러리 입이다.리액티브 프로그래밍이란 이벤트나 배열 같은 데이터 스트림과 전파를 중심으로 하여 변화에 유연하게 반응하

2022년 7월 1일
·
0개의 댓글
·
post-thumbnail

Day 38) 마지막

큰서비스웹, 안드로이드, ios 따로 개발을 한다.웹: 앱이 있어도 반응형 웹을 만든다. (모바일, 태블릿)오프라인기능, 주소클릭하면 바탕화면에 아이콘 설치프로그레시브 웹앱을 사용하면, 핸드폰으로 쓰는 기능을 작동시킬 수 있다.웹중심의 회사다!웹 버전, 태블릿 버전,

2022년 7월 1일
·
0개의 댓글
·

Event Loop

Callback Event Queue에서 하나씩 꺼내서 동작시키는 Loop를 말한다.자바스크립트는 싱글 스레드 기반 언어이기 때문에, 한번에 하나씩 작업을 진행한다.그러나 자바스크립트가 사용되는 환경을 생각해보면, 많은 작업이 동시에 처리되고 있는 것을 알 수 있다.예

2022년 7월 1일
·
0개의 댓글
·

OOP vs FP

Object Oriented Programming의 약자로써 class와 object에 기반한 프로그래밍 패러다임(디자인 패턴) 이다. 관련된 데이터끼리 묶어서 class를 형성하고 그 안에서 object instance를 만듬으로써 프로그램을 디자인한다.코드의 재사용

2022년 7월 1일
·
0개의 댓글
·

NoSQL vs SQL

SQL을 사용하면 RDBMS에서 데이터를 저장, 수정, 삭제 및 검색 할 수 있다.관계형 데이터베이스에는 핵심적인 두 가지 특징이 있다.데이터는 정해진 데이터 스키마에 따라 테이블에 저장된다.데이터는 관계를 통해 여러 테이블에 분산된다.데이터는 테이블에 레코드로 저장되

2022년 7월 1일
·
0개의 댓글
·

TS Generic

제너릭 타입은 타입에 유연성을 제공하여 컴포넌트 등에서 재사용을 가능하게 해주는 타입이다.타입의 유연성이란 :string, :number 등과 같이 고정된 타입이 아닌 사용에 따라 여러 타입을 사용하게 해준다는 것이다.generic: 일반적인arg: string: 들어

2022년 7월 1일
·
0개의 댓글
·
post-thumbnail

Day 37 )

도커개발/ 배포환경 통일프로그램 미리 설치가벼운 가상 컴퓨터

2022년 6월 30일
·
0개의 댓글
·

Atomic Pattern

아토믹 디자인 패턴 아토믹 디자인은 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념이며, 일관된 UI를 만들고 유지보수성을 향상시켜준다. 아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이

2022년 6월 29일
·
0개의 댓글
·

React-router vs Next-router

결론적으로는 Next.js는 React를 감싸고 있는 프레임워크라고 보면 된다. React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 있어서 오히려 더 배운다고 보면된다.Nesxt.js는 라우팅을 할때 쉽게 하지만 React는

2022년 6월 29일
·
0개의 댓글
·

Immutable & Mutable

Immutable 객체는 내용이 변하지 않는 객체를 말한다. 객체는 다양한 이유로 불변적일 수 있는데, 예시로 아래와 같은 경우가 있다.성능을 향상시키기 위함객체가 미래에 변할 계획이 없을 때메모리 사용을 줄이기 위함전체 객체를 복사하지 않고 객체 참조를 만듦Threa

2022년 6월 29일
·
0개의 댓글
·

Virtual DOM

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념이다.이 과정을 재조정이라고 한다.“virtual DOM”은 특정 기술이라기보다는 패턴에

2022년 6월 29일
·
0개의 댓글
·

Browser-Rendnering

브라우저 렌더링 동작 과정렌더링의 기본적인 동작 과정은 다음과 같다.HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)두 Tree를 결합하여 Rendering Tree를 만든다. (Style)Rendering Tree에서 각 노드의 위치와

2022년 6월 29일
·
0개의 댓글
·

HTTP status code

상태 코드는 3자리 숫자로 만들어져 있으며, 첫번째 자리는 1에서 5까지 제공된다.첫번째 자리가 4와 5인 경우는 정상적인 상황이 아니기 때문에 사이트 관리자가 즉시 알아야 하는 정보이다.1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.2xx(성공) : 요

2022년 6월 29일
·
0개의 댓글
·

Scope

스코프현재 실행되는 컨텍스트를 말한다.여기서 컨텍스트는 값과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다.만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다.스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접

2022년 6월 29일
·
0개의 댓글
·
post-thumbnail

Shallow Copy & Deep Copy

데이터 자체를 통째로 복사한다.복사된 두 객체는 완전히 독립적인 메모리를 차지한다.value type의 객체들은 깊은 복사를 하게 된다.이때, arr1에 있는 모든 string들은 깊은 복사가 일어나서 새로운 배열을 생성하여 arr2에 할당한다. (String은 val

2022년 6월 29일
·
0개의 댓글
·

Hoisting

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다.반면 let과 const로 선언한 변수의 경우 호이스팅

2022년 6월 29일
·
0개의 댓글
·