Category | Frontend
-
Rxjs 알아보기
RxJS는 비동기적이고 이벤트 기반의 프로그램을 다루기 위한 라이브러리이다. RxJS는 observable한 sequence를...
-
Javascript 비동기 에러핸들링
유틸 함수로 만든 함수에서 에러 핸들링에 작성한 코드가 작동하지 않는 것을 발견했다. 원인을 분석하다가 단단히 잘못 작성했다는...
-
React 모바일 디바이스 100vh 사용하기
브라우저는 정책이 시시때때로 바뀌어서 언제 에러가 발생할지 모른다. 모바일 디바이스의 경우 iPhone은 하단바 때문에 를 사...
-
React 컴포넌트 테스트 하기
테스트에 사용한 라이브러리는 과 이다. React 뿐만 아니라 UI 컴포넌트 테스트를 위한 툴을 가지고 있는 패키지이다. te...
-
NextJS 14 AWS Amplify로 배포하기
Amplify로 새 애플리케이션을 만들고 자동으로 선택되는 이미지는 Node v16을 사용해 Next.js 빌드 과정에서 에러...
-
Webpack Bundle Analyzer
페이지 로드 속도는 매우 중요한 요소이다. 페이지 컨텐츠가 전부 그려지지 못하더라도 무언가 화면에 그려지는 first pain...
-
React typescript type 지정하기
각종 리액트 변수 및 함수들을 파라미터로 넘기려는 데 type을 알 수 없어서 몇 번 검색하다가 자주쓰는 건 정리해놓기로 했다...
-
React에서 setInterval 사용하기
React에서 를 사용했는데 설정한 것 보다 여러번 실행되었다. 문제를 찾아보니 컴포넌트가 리로드 될 때마다 hook으로 감싸...
-
React class component lifecycle
외부 라이브러리를 다운받아 쓰다보니 class 컴포넌트를 쓸 일이 있어서 한 번 정리하기로 했다. lifecycle 순서 DO...
-
Next.js란
Next.js란 풀스택 애플리케이션을 만들 수 있게 해주는 React 프레임워크이다. React를 사용해 프론트를 개발한 뒤 ...
-
Typescript reducer object key type
문제 를 이용해 빈 객체에 대상 배열의 string 값을 key로 사용해 값을 지정하려고 했더니 타입 에러가 발생했다. 해결법...
-
[React] ref 전달하기
React에서 자식 컴포넌트에 ref를 전달하려고 하면 오류가 발생한다. 위 코드를 실행하면 의도한대로 동작하지 않는 것을 볼...
-
[React] setInterval 내부에서 state 업데이트 하기
[React] setInterval 내부에서 state 업데이트 하기...
-
[Javascript] Closure란
클로저란 함수의 레퍼런스와 함수를 둘러싼 state, 즉 lexical 환경을 합쳐서 부르는 말이다. 클로저는 내부 함수에서 ...
-
context로 global data 관리
React에서는 주로 parent 컴포넌트에서 child 컴포넌트로 를 이용해 데이터를 넘긴다. 이때 많은 데이터에서 공통적으...
-
Reat hooks 정리
사용할 때마다 틈틈이 정리해놓기 ✨ useMemo 리렌더링 과정에서 사용할 수 있는 캐싱 기법이다. 함수형 컴포넌트는 과정을 ...
-
React useRef hook 사용하기
는 렌더링이 될 필요 없는 값을 참조하기 위한 리액트 훅이다. 사용법 는 라는 한 개의 프로퍼티를 가지는 object를 반환한...
-
head meta 태그로 Kakao 메세지 미리보기 설정하기
og (Open Graph) Tag 카카오톡 메세지에 URL만 붙여넣어도 컨텐츠의 이름, 썸네일, 설명이 나타날 때가 있다. ...
-
Typescript declare
는 이미 다른 파일에서 정의된 변수를 사용할 때 type 오류가 발생하는 것을 막는 용도로 사용할 수 있다. html 파일에서...
-
Web Components
Web Components는 재사용이 가능한 커스텀 element를 만들 수 있게 해주는 기술이다. 캡슐화를 함으로써 나머지 ...
-
[HTML] 모바일 디바이스에서 double-tap 줌인 disable
모바일 디바이스에서 더블탭 동작 시 화면인 줌인 되는 이벤트가 있다. 추가 구현중인 기능에 해당 동작이 방해가 되어 disab...
-
create-react-app 에러
문제 을 실행하려고 하는데 아래와 같은 에러로 실행이 되지 않았다. 옛날에 create react app을 설치한 적이 있어서...
-
SSR & CSR 그리고 NextJS
SPA (Single Page Application) 현재의 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션이...
-
Github OAuth 로그인
Github OAuth 로그인 깃허브에서 제공하는 API를 사용하면 쉽게 유저 정보를 불러와 사용할 수 있다. 위 공식문서를 ...
-
Event handler의 등록 및 삭제
Event handler의 등록 및 삭제 이벤트 등록 EventTarget.addEventListener() Argument ...
-
Webpack file-loader 경로 오류
Webpack file loader 경로 오류 문제 jpg, gif 등 이미지 파일 처리를 위해 검색을 하다보면 ’file l...
-
Webpack loader 사용하기
Webpack Loader Webpack은 기본적으로 자바스크립트 번들러이기 떄문에 다른 형식의 파일을 번들링 하기 위해서는 ...
-
Webpack
Webpack이란 webpack 은 Javascript용 static module bundler이다. 한 개 이상의 entry...
-
React 기본 내용 정리
리액트 라이브러리를 설치함으로써 시작할 수 있다. 기본적으로 Node.js가 설치되어있어야 한다. 리액트 프로젝트를 처음부터 ...
-
Gulp.js
Gulp.js Gulp는 오픈소스 자바스크립트 toolkit이다. Node.js로 만들어진 task runner로 시간을 잡아...
-
window.resize throttle 설정
window.resize throttle 설정 이벤트에 리스너를 걸게되면 사이즈가 바뀌는 매순간 이벤트가 발생하기 때문에 성능...
-
Javascript 30 Day 17
Day 17 Sort Without Articles Articles : 관사, 즉 관사 없이 영어 문자열을 배열하는 방법이다....
-
Javascript 30 Day 16
Day 16 Mouse Move Shadow 마우스 이동에 따라 텍스트에 그림자 효과 주기 완성본 <style .hero { ...
-
for in, for of, forEach의 차이
for in, for of, forEach의 차이 forEach 는 자료형의 prototype이다. 따라서 와 같은 유사 배열...
-
closer / curring
:rotating light: 초보자를 위한 Node.js 200제 정리 내용 closer 클로저 클로저는 내부함수가 참조하는...
-
[Javascript] Generator
Generator 는 여러 개의 값을 필요에 따라 하나씩 반환( )할 수 있는 함수이다. 일반 함수는 하나 또는 0개의 값만을...
-
ES6 문법
ES6 ES5에서 ES6로 넘어오면서 표준안이 생기게 되었고 많은 문법상 변화가 생겼다. 편리한 기능이 많이 추가되었고 최근에...
-
Promise
Promise 는 비동기 로직을 구현할 때 유용하게 사용되는 기능이다. ES6부터 도입된 기능으로 JS의 다양한 비동기 함수들...
-
Hoisting
Hoisting Hoisting이란 선언되기 전에 호출한 변수나 함수를 사용하더라도 JS 특성상 사용이 가능한 특징이다. 출력...
-
[css] @media을 사용하는 반응형 웹
반응형 웹 페이지 css 속성에서 자주 보던 속성이다. 태블릿이나 휴대폰 등 다양한 크기의 디바이스에서 웹에 접속하는 트렌드에...
-
[css] position 속성
:rotating light:CSS 속성을 정리한 자료입니다. CSS 배치 HTML 엘리먼트의 위치를 설정하는 속성이다. po...
-
[css] flex
:rotating light:CSS Flex완벽 가이드정리 내용입니다. 는 html요소의 수평 배열을 아주아주 간단하게 구현해...
-
CSS 복합 선택자
CSS 복합 선택자 Basic Combinator E 와 F를 동시에 만족하는 요소를 선택한다. 이면서 class인 요소를 선...
-
Javascript 30 Day 15
Day 15 Local Storage local storage에 값을 저장해 새로고침을 해도 데이터가 유지되는 페이지를 만든다...
-
Javascript 30 Day 14
Day 14 Javascript References vs Copying value copy & reference copy 어느...
-
Javascript 30 Day 13
13. Slide in on Scroll 스크롤을 내릴 때 마다 본문에 포함된 이미지들에 없어져다가 나타나는 효과를 적용한다....
-
[HTML] 태그
태그 구성요소 w head 태그에는 웹페이지에 대한 정보를 담는다. 페이지 인코딩 방식이나 css 파일 링크, 페이지의 제목 ...
-
Javascript 30 Day 12
Key Sequence Detection(KONAMI CODE) Konami Code 위키피디아 Konami Code란 몇몇 ...
-
Javascript 30 - Day 11
Javascript30 Day11 Custom Video Player <br/ <link href="/images/test.c...
-
[css] Block & Inline block
Block & Inline Block HTML element는 블럭 요소와 인라인블럭 요소로 나뉜다. Block 종류 div ...
-
[css] margin & padding
margin 은 element의 바깥 여백 속성이다. 두 요소가 붙어있을 경우 marign이 상쇄되는 상황이 있는데 잘 정리된...
-
Javascript 30 Day 10
Javascript30 Day10<br Hold Shif and Check Checkboxes 프로그램 기능 구현해야 하는 기...
-
Javascript 30 - Day 9
Javascript30 Day9 Dev Tools Domination Javascript로 수행하는 동작을 확인하기 위해서는 ...
-
Javascript 30 - Day 8
Javascript30 Day8 Fun with HTML5 Canvas W3C 튜토리얼 HTML element는 웹 페이지에서...
-
Javascript 30 - Day 7
Javascript30 Day7 Array Cardio Day 2 Array 자료형의 유용한 메서드를 공부한다. test da...
-
Javascript 30 - Day 6
Javascript30 Day6 Type Ahead fetch를 사용한 서버와의 비동기적 통신을 이용해 필요하 데이터를 불러와...
-
Javascript 30 - Day 5
Javascript30 Day5 Flex Panel Gallery Flex box를 다루는 방법을 공부한다. Flex flex...
-
Javascript 30 - Day 4
Javascript30 Day4 Array Cardio Day 1 Array 자료형에 내장된 여러 유용한 함수들을 사용하면, ...
-
Javascript 30 - Day 3
Javascript30 Day3 CSS Variables css 속성을 웹 페이지에서 실시간으로 수정하는 기능을 자바스크립트로...
-
Javascript 30 - Day 1
Javascript 30? Javascript30 위 링크에서 누구나 무료로 들을 수 있는 30여개의 자바스크립트 강의 동영상...