1:45 5/31
jayprogram.tistory.com
1:45
jayprogram.tistory.com
Hello Jay's Programming World!https://jayprogram.tistory.com/
프로그래밍 관련 블로그입니다.
저작도구: tistory
최종 피드 수집: 2024-04-01 02:18
전체 (26)
5M
5M
9M
[React] 이벤트 리스너에서 현재 상태가져오기
이벤트 리스너 내부에서 상태를 접근하면 최신의 상태를 가져올 수 없습니다. 이벤트 리스너가 등록될 시점의 상태로만 접근이 가능합니다. 그렇다면, 최신의 상태를 가져오기위해서는 어떻게 해야할까요?useRef를 이용해 이 문제를
React
REACT
State
+ 더보기
useRef
useState
리액트
상태
이벤트
이벤트리스너
1y
[Recoil] Selectors 기본 알아보기
selectors는 atoms이나 다른 selectors를 입력으로 받아드리는 순수 함수이다.selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다. 이 말은, 최소한의 상태만 atoms에 저장하고, a
React
ATOM
REACT
+ 더보기
recoil
Selector
리액트
상태관리
1y
Recoil이란?
React를 위한 상태관리 라이브러리.Recoil을 사용하면, atoms(공유 상태)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다.
Atoms
상태의
React
Atoms
REACT
+ 더보기
recoil
selectors
리액트
2y
[TypeScript] 인터페이스 (Optional, readonly, extends)
자바스크립트에서 데이터를 그룹화하고 전달하는 방법으로 Object를 사용합니다. 타입스크립트에서는 Object Type을 통해 Object를 표현합니다. Object Type에 이름을 지정하기 위해 인터페이스를 사용합니다.int
JavaScript
extends
Interface
+ 더보기
optional
readonly
typeScript
인터페이스
타입스크립트
2y
2y
[프론트엔드 서버] Docker란?
Docker란?컨테이너 기반의 오픈소스 가상화 플랫폼
컨테이너
격리된 공간에서 프로세스가 동작하는 기술.
하나의 서버에 여러개의 컨테이너를 실행하면 서로 영향을 미치지 않고 독립적으로 실행
이미지
컨테이너 실행에 필요한 파일과
React
Conatainer
Docker
+ 더보기
Dockerfile
IMAGE
layer
도커
레이어
이미지
컨테이너
2y
[프론트엔드 서버] Amazon S3 + CloudFront에 대해
Amazon S3확장성, 데이터 가용성 및 보안과 성능을 제공하는 객체 스토리지 서비스.
특징
모든 종류의 데이터를 원하는 형식으로 저장
저장할 수 있는 데이터의 전체 볼륨과 객체 수에는 제한이 없음
Amazon S3는 간단한
React
amazon
aws
+ 더보기
Cloudfront
Front
frontend
s3
서버
프론트서버
프론트엔드
프론트엔드 서버
2y
2y
npm을 이용하여 yarn 설치하기
yarn을 설치해보겠습니다. yarn은 npm package manager를 이용하여 설치하는 것을 추천합니다.아래 명령어를 터미널에 입력합니다.
npm install --global yarn
저는 access 관련 에러
Tool
Manager
npm
+ 더보기
package
terminal
Yarn
2y
[Next.js] ESLint, Prettier 설정하기 (Typescript/VSCode)
ESLint란?JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구.
Prettier란?
코드 포멧터(Code Formatter)
Next.js 프로젝트에 ESLint/Prettier 적용하
React
eslint
Next.js
+ 더보기
prettier
typeScript
vscode
2y
2y
2y
[Node.js] 노드 서버에서 브라우저 화면 캡처하기(puppeteer)
안녕하세요. Jay입니다.오늘은 서버 환경에서 브라우저 화면을 캡쳐하는 방법에 대해서 알아보도록 하겠습니다. 일반적으로 브라우저를 사용한다고 하면 당연히 클라이언트에서 브라우저 화면을 띄워서 사용해야한다고 생각합니다. 하지만,
JavaScript
chrome
Chromium
+ 더보기
Headless
node.js
puppeteer
server
2y
[Network] HTTP 상태 코드
100번대 정보를 제공하는 응답200번대 성공적인 응답
200 OK
요청이 성공했다.
300번대 리다이렉트
400번대 클라이언트 에러
400 Bad Request
잘못된 문법으로 인하여 서버가 요청을 이해할 수
Network
100
200
+ 더보기
300
400
500
CODE
http
HTTP response status codes
network
3y
[JavaScript] 다각형의 무게 중심(Centroid) 구하기
다각형의 무게 중심을 구하고 Raphaeljs를 이용하여 이를 그려봤습니다.결과 및 코드는 아래 JSFiddle을 통해 확인할 수 있습니다.
JavaScript
CenterOfGravity
Centroid
+ 더보기
무게중심
자바스크립트
3y
[Node.js] cli(command-line interface) 프로그램 생성하기(commander.js)
회사에서 신규 프로그램에 사용할 데이터를 자동으로 가공하는 프로그램을 만들고 있습니다. Node 기반으로 프로그램을 작성하고 있는데, cli를 이용하여 입력 값을 받아 동작하도록 구현했습니다.이를 구현하기 위해 command
JavaScript
CLI
commander
+ 더보기
commander.js
js
Node
nodejs
npm
노드
자바스크립트
3y
3y
[WebStorm] JavaScript에서 작은 따옴표('') 사용하기
저는 개인적으로 JavaScript 문자열에서 작은 따옴표를 사용하는 것을 선호합니다. 웹스톰(WebStorm)을 설치해서 사용하고 있는데, 계속 큰 따옴표로 사용되서 불편했습니다. 그래서 작은 따옴표를 사용할 수 있도록 설정을Tool
JavaScript
quotes
+ 더보기
WebStorm
따옴표
설정
웹스톰
자바스크립트
작은따옴표
큰따옴표