Javascript

Next.js 11 Wednesday, June 16th 2021

Next.js next/router useRouter 앱의 함수 구성 요소 내부에 있는 라우터 개체는 `useRouter` Hook을 사용하여 접근 할 수 있다.

React Query Overview React Query는 React 애플리케이션에서 서버 데이터를 가져와 캐싱하고, 동기화하고, 업데이트하는작업을 쉽게 도와준다.

reduceReducers 프로젝트에서 사용중인 reduceReducers에 대해서 정리하고자한다. 해당 모듈은 reduce-reducers 모듈로 중첩없이 reducer를 간단하게 병합시켜주는 역할을 한다.

Next.js Routing Next.js에는 파일시스템 기반의 페이지 라우터가 있다.

Next.js Fast Refresh는 React 컴포넌트 편집에 대한 즉각적인 피드백을 제공하는 기능이다. Next.js 9.4 이상에서 기본적으로 활성화된다. 이는 편집 내용이 컴포넌트의 상태를 유지한채로 1초내에 표시된다.

Next.js는 환경 변수에 대한 기본 지원을 제공한다.

Next.js Image Component and Image Optimization Next.js 버전 10.0.0 부터 이미지 컴포넌트 제공되어 이미지 최적화가 가능하다.

Next.js Built-In CSS Support 사용하면 Javascript 파일에서 CSS파일을 import 해서 가져올 수 있다.

Next.js Data Fetching 사전랜더링을 위해 데이터를 가져올 수 있는 세가지 함수가 있다.

Next.js Pages 페이지는 pages 디렉터리 하위의 .js .jsx .ts .tsx 파일에서 내보낸 React 컴포넌트이다. 각 페이지는 파일이름에 따라 경로로 구성된다.

type alias 타입 별칭이라고도 하며 인터페이스와 비슷하게 보이기도 하다.

tsconfig.json 파일을 기점으로 Typescript 프로젝트가 설정된 옵션들로 컴파일된다. tsc 커멘드 입력시 상위 디렉토리 체인으로 tsconfig.json 파일을 탐색해 나간다.

Redux Thunk 리덕에서는 비동기처리를 위해 여러 미들웨어를 사용한다.

React PropTypes 개발하는 앱이 커질수록 타입 확인을 통하여 미리 많은 버그들을 잡아낼 수 있다.

React에서 State는 컴포넌트의 상태 값을 가리킨다. setState 를 통해 상태 값 변경이 가능하고 상태 값이 변경되면 컴포넌트는 리랜더링 된다.

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.

React 에서 Redux를 사용할 수 있도록 도와주는 라이브러리로 Redux의 상태를 React View로 전달해주는 역할을 한다.

React에서 리스트 랜더링시 key 값을 지정하지 않을 경우 key값 지정에 대한 경고문이 노출된다.

HTML에서 input, textarea, select와 같은 폼 엘리머트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다.

requestAnimationFrame은 브라우저에게 다음에 수행할 애니메이션을 알려 브라우저 리페인트가 좀 더 원활하게 동작할 수 있게 한다.

Intersection Observer API는 타겟 요소와 상위 요소 또는 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다.

javascript에서 비동기 작업의 처리를 위해 ES6에서의 Promise를 사용한다. Promise는 비동기 연산이 종료된 이후 결과값이나 실패를 처리하기 위한 처리기를 연결 할 수 있도록 한다.

ECMAScript 6 (es6)에는 생성자 및 코루틴을 구현하기위해 yield 키워드가 도입되었습니다.

브랜드 배너 이미지 리스트를 Animation을 사용하여 좌우로 랜더링하는 작업을 하였습니다.

Javascript에서는 for 루프, map() filter() 등 컬렉션을 반복할 수 있는 많은 방법들을 제공합니다.

async function 선언은 Async Function객체를 반환하는 하나의 비동기 함수를 정의합니다.

에디터 구현시 사용했던 Element 구조의 형태가 Composite Pattern이였다는 것을 알고 구현에 사용했던 design pattern이 어떤 패턴에 해당하는 것인지 알고 구현했다면...

Javascript에서 숨기고 싶은 Private Properties를 가지고 싶을 때가 있습니다.

네트워크 보안 공격중 이름이 비슷한 sniffing snooping spoofing에 대한 용어 정리를 해볼까합니다.

사용자에게 주기적으로 Push 알람을 노출시켜 광고성 효과를 노리는 작업이 필요하여 Service Worker에 대해 공부하게 되었고 정리하게 되었습니다.

Javascript App에서 Drag and Drop 기능을 추가하기위한 많은 Library들이 존재합니다.

존재하지 않는 값에 대해 접근할 경우 발생하는 에러 Uncaught ReferenceError

Javascript 코딩중 깊은 복사를 하지 않아 의도치 않은 객체 속성 변경을 겪은적이 있을 것입니다.

Javascript Object의 속성 값을 변경하는 것은 너무 쉽습니다.

속성 접근자는 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해줍니다.

모든 Object는 단순하게 Key, Value 쌍만 존재하는 것이 아니라 속성을 보거나 지정하는데 도움을 주는 속성 설명자가 있습니다.

ES2015부터 class 키워드를 지원하기 시작했으나, 문법적인 양념일 뿐이며 자바스크립트는 여전히 프로토타입 기반의 언어다.

데이터베이스에서 크게 두가지로 나뉘는 관계형 데이터베이스와 No SQL에 대해 간략히 정리해봅니다.

HTTP 통신에서 Content-Type의 multipart/form-data에서 multipart가 무엇일까에 대해 정리해봅니다.

브라우저 랜더링 성능 개선을 위해서 중요한 Repaint와 Reflow에 관한 개념 정리를 해본다.

Javascript에서 전파되는 이벤트를 간단히 정리해 볼까한다.

프론트엔드 개발자 관련된 행사 진행을 보게되었다. 한번도 프론트엔드에 초점을 맞춰 진행한 행사에 참가해본적이 없어 굉장히 끌렸다.

React를 사용할때 많이들 사용한다는 Redux. React는 view를 담당하는 라이브러리이며 각 컴포넌트에서 상태를 관리할 수 있지만 좀 더 효율적인 상태 관리를 위하여 Redux를 사용.

배열이나 그와 유사한 자료구조의 내부의요소를 순회하는 객체, 시퀀스를 정의하고 종료시 잠재적으로 반환값을 정의하는 객체라고 한다.

ajax로 전송된 multipart/form-data에서 전송시 form data에 담아서 보낸 path 정보를 jsp에서 꺼낼 수 없냐는 문의가 있었다.

Webpack3에서 Webpack4로 진화... 성능향상, 설정방법 변경 등이 있어 간단히 정리해 보았다.

최근 개발자 커뮤니티 등에 관심을 가지던중, festa에 올라온 PWA 코드랩 세션을 보고 참가 신청을 하였다.

폴리필(polyfill)은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.

브라우저 엔진(browser engine)은 주된 모든 웹 브라우저의 핵심이 되는 소프트웨어 구성 요소이다.

node js는 이벤트 기반의 플랫폼. libuv라는 라이브러리가 이벤트 루프 기능을 제공

Javascript 선언식인 var let const를 정리해본다.

script를 HTML 파싱중 만난다면, HTML 파싱이 중단되고 스크립트를 가져와 실행한다.

브라우저에는 조그마한 저장소가 있다. cookie, sessionStorage, localStorage

PWA 코드랩에 참석하기전 PWA가 무엇인지 간단히 알아보기.

Javascript에서는 다른 도메인으로의 요청을 보안상의 이유로 제한하고 있다.

React Life Cycle 컴포넌트가 브라우저에 나타나고, 사라지고, 업데이트 될때의 과정을 알아보자.

클로저란? 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다

Javascript라는 언어의 특색중 하나이며, 현재 ES6 문법에서 제공되는 let, const 사용에 의해 크게 신경쓰지 않고 있지만 중요한 요소중 하나 인 것 같다.

Javascript Event Loop는 Javascript Engine의 Task Queue의 task들을 관리해주는 역활을 한다.

canvas toDataURL canvas의 이미지 표현을 포함하는 data url을 가져옴

canvas에 이벤트를 활용하여 간단한 그리기 도구 만들기

canvas에 이벤트를 활용하여 간단한 그리기 도구 만들기

HTML5에서 canvas는 그래픽들을 관리하는 컨테이너이다.

canvas에서 제공하는 그림자 속성을 사용하여 그림자 그리기

루프를 사용하여 만드는 패턴 외에 createPattern 메소드를 사용하여 패턴을 만들 수 있습니다.

다른 그래픽 프로그램들과 마찬가지로, 선형 및 원형의 그레이디언트를 사용할 수 있습니다.

canvas 도형에 색 및 스타일을 적용하는 방법

Angular CLI에서 애플리케이션 테스트 설정으로 자스민(Jasmine)과 카르마(Karma) 기본 도구를 사용해보자.

반복자(iterator)는 객체 지향적 프로그래밍에서 배열이나 그와 유사한 자료 구조의 내부의 요소를 순회(traversing)하는 객체이다.

Javascript는 단일 스레드로 동작하여, 하나의 스레드로 모든 작업을 수행한다면 시간이 많이 소요되는 작업이 있을 경우 오랜시간을 기다려야하는 문제가 발생할 수 있다.

컴퓨터 프로그래밍에서 Duck typing은 Duck Test와 같은 응용 프로그램입니다.

기본 타입 class constructor interface implements ...