Who I really am
const myObject = { first: 'apple', second: 'banana', third: 'carrot' } type KeyType = keyof typeof myObject; type ValueType = (typeof myObject)[keyof typeof myObject]; // 결과 // KeyType = "first" | "second" | "third" // ValueType = "apple" | "banana" | "carrot"
니즈 - 해당 화면을 모바일 화면크기로 보고있는지 앱 전체에서 알 필요X.. 일부 컴포넌트에서만(=부분적으로) 필요했음 - 무슨 디바이스로 접속했는지 등의 자세한 정보는 필요하지 않았음 - '모바일' 또는 '모바일아님' 이렇게 두 가지 상태로만 나뉘는 간단한 반응형 웹이었음 뭐 대단한 걸 요구하는 게 아니었기 때문에.. react-responsive와 같은 외부 모듈을 가져다 쓰는 것 보다는 간단한 custom hook을 만들어 쓰기로 했다. 커스텀 훅 만들기 // useMobile.ts import { useState, useEffect } from 'react' import { mobileSize } from 'src/styles/theme' const useMobile = () => { const ..
App/Index.tsx 파일 등이 themeProvider로 감싸져있는 상태에서 시작 // App.index import { theme } from 'src/styles/theme'; ... 자주쓰는 컬러 팔레트 만들기 1) theme.ts 파일에 원하는 색상값 설정 // theme.ts const myColor = { main: '#546de5', light: '#778beb', deep: '#3146ad', }; export const theme = { myColor, }; export type Theme = typeof theme; 2) styled.d.ts 파일에 인터페이스 설정 (타입스크립트 사용을 위함! styled.d.ts 파일 위치는 자신이 편한 곳에다 만들기) import { Theme..
let buttonX, buttonY, buttonRadius, buttonH; let sliderStartX, sliderEndX, sliderY, handleX, handleRadius; function setup() { createCanvas(windowWidth, windowHeight); init(); } function windowResized(){ resizeCanvas(); } function init(){ buttonX = width * 0.5; buttonY = height * 0.5 - 100; buttonRadius = 50; buttonH = 10; sliderStartX = width * 0.5 - 150; sliderEndX = width * 0.5 + 150; sliderY ..
scroll-snap-type 를 사용해서 스크롤 시 다음 섹션의 상단이 화면 위에 착! 붙는 액션을 구현해본다. MDN 문서 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type scroll-snap-type - CSS: Cascading Style Sheets | MDN The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one. developer.mozilla.org 포인트 - 부모인 콘테이너의 높이는 100vh고, 자식들(=각 섹션 div들)의 높이는 부모의 100%이다. HT..
쿠키 (Cookie) - 브라우저(클라이언트)에 저장되는 작은 파일 - 클라이언트의 상태 정보를 로컬에 저장했다가 참조 - 300개까지 저장 가능 - 하나의 도메인 당 20개의 값을 가질 수 있음 (하나 당 4KB까지 저장 가능) - 대부분의 브라우저가 지원 - 인증 유효 시간을 지정할 수 있고, 유효 시간이 정해지면 브라우저가 종료되어도 인증을 유지 - 사용 예시 : 로그인 자동완성, 쇼핑몰 장바구니, 오늘 더 이상 창을 보지 않음 팝업 등 로컬 스토리지 (Local Storage) - 브라우저 창을 닫더라도 데이터가 유지됨 (데이터 영구 저장 가능) - 서버에 불필요한 데이터를 저장하지 않음 - 약 5MB의 큰 용량 - 사용 예시 : 자동로그인 세션 스토리지 (Session Storage) - 로컬스..
CSR(Client Side Rednering) 과정 👉 유저가 앱에 접속한다 👉 앱은 브라우저에게 javascript 정보가 들어있는 빈 html 문서를 전달 👉 브라우저가 javascript 파일을 다운로드하고, 유저는 그동안 빈 화면을 봄 👉 다운로드가 끝나면 브라우저는 리액트 코드가 들어있는 js 파일을 실행 (=document.createElement과 같이 JS에서 HTML 태그를 생성하기 때문에, JS 파일이 실행되기 전까지는 빈화면인 것이다) 장점 새로고침이 발생하지 않아 자연스러운 UX 서버 부담이 적다 단점 첫페이지 로딩이 SSR에 비해서 느리다 SEO에 취약하다 SSR(Server Side Rendering) 과정 👉 유저가 앱에 접속한다 👉 서버에서 리액트를 실행하고, 리액트는 UI..
벡터 x, y를 묶어서 계산해주는 개념 기본 캐릭터 코드 function setup() { createCanvas(400, 400); } function draw() { background("tomato"); face(width/2, height/2); } function face(x,y) { push(); translate(x, y); //귀 ellipse(-150,0,60,60); ellipse(150,0,60,60); //얼굴 ellipse(0,0,300,300); //흰자 ellipse(-60,0,100,100); ellipse(60,0,100,100); //검은자 fill("black"); ellipse(-60,0,60,60); ellipse(60,0,60,60); //입 ellipse(0,80..
* rect 함수의 5,6,7,8번째 인자를 넘겨주면 모서리가 둥근 사각형을 만들 수 있다 * p5.js의 시스템변수 frameCount를 활용해서 자동으로 차체가 들썩거리는 듯한 모션을 주었다. frameCount 시스템 변수 frameCount는 프로그램 시작 이후 화면에 나타난 프레임의 개수를 측정합니다. setup() 함수의 기본값은 0이고, draw() 함수의 첫 번째 반복 실행이 마치면 1씩 증가하는 식입니다. 소스코드 function setup() { createCanvas(400, 400); } let carX = -90; function draw() { background(220); carX += 5; if(carX > width+90) { carX = -90; } car(carX, he..