가수면

노드 = 데이터(value) + 다음 노드 참조 링크(next) 자바스크립트 ver. class Node { constructor(val) { this.val = val; this.next = null; } } 파이썬 ver. class Node: def __init__(self, data): self.data = data self.next = None push 매소드 만들기 자바스크립트 ver. class SinglyLinkedList { constructor() { this.head = null; this.tail = null; this.length = 0; } push(val) { let newNode = new Node(val); if (!this.head) { this.head = newNode..

url을 입력할 때 params에 특수문자가 들어가는 경우 키 값과 혼동될 수 있다. 예를 들어 ?query=검색어&range=all 라는 검색 url에서 검색어 자리에 &이 들어간다면 어떨까? '?'가 들어간다면? 이런 경우 온전히 키 값을 보내기 위해 인코딩을 해주는 기능이 있었으니 그게 바로 encodeURIComponent()다. 해당 함수를 value에 사용하면 된다. `...?query=${encodeURIComponent("검색어")}&range=${encodeURIComponent("all")}` 그리고 이것과 같이 쓰기 유용한 매소드로 Object.entries()가 있다. Object.entries() const object1 = { a: 'somestring', b: 42 }; con..

서비스를 여기 저기 돌아다니며 인터렉션 테스트를 하다가 스크롤을 내리지도 않았는데 내가 보지도 않을 모든 슬라이드들이 렌더링 되는 것이 너무 비효율적이라는 생각이 들었다. 이에 렌더링을 최적화 하려다가 아예 프로젝트 최적화 작업을 지금 시점에서 대대적으로 하기에 이르렀다. 그렇게 준비한 최적화의 진행 순서는 코드 정리 리팩토링 -> 메모이제이션 -> 코드 스플리팅 -> 레이지 로딩 먼저, 최적화가 잘 이루어졌는지 측정할 항목들은 다음과 같다. 측정 항목: 'App', 'Home', 'Slide' 컴포넌트 a. 'Home' 페이지에서 새로고침을 했을 때 측정 항목의 렌더링 시간을 측정한다. b. 다른 페이지로 왔다 갔다 하다가 'Home' 페이지로 다시 돌아왔을 때 측정 항목의 렌더링 시간을 측정한다. c..

리액트에서 DOM메서드를 사용하면 안 된다는 것은 쉽게 접할 수 있는 이야기다. 그렇다면 왜 리액트에서 직접 DOM을 조작하면 안 되는 것일까? 이것을 알기 위해선 먼저 리액트가 변경 사항을 어떻게 업데이트시키는지 동작 원리를 살펴볼 필요가 있다. 재조정 (Reconciliation) 리액트에서는 상태의 불변성을 강조한다. 상태를 직접 수정하면 안 된다는 것이다. 만약 상태를 직접 수정하게 되면 어떻게 될까? 당연히 업데이트되지 않는다. 그 이유는 리액트 업데이트의 모든 출발이 setState로부터 시작되기 때문이다. 리액트는 두 개의 가상DOM을 활용해 변경사항을 업데이트한다. 기존의 가상DOM과 새로 만들어진 가상DOM을 비교하는 방식 말이다. 그리고 새로운 가상DOM을 만드는 역할을 해주는 게 바로..

offsetLeft / offsetTop 해당 요소가 부모 요소 내에서 위치한 좌표값. 해당 요소의 경계선 왼쪽 위 모서리부터의 거리를 나타냄. scrollY 스크롤 된 높이 clientWidth / clientHeight 요소의 내부 너비, 높이(px). 패딩은 포함되지만 테두리, 여백 및 가로 스크롤 막대(있는 경우)는 제외됨 clientX / clientY 브라우저 화면에서 마우스 클릭 위치의 좌표값. 브라우저의 왼쪽 위 모서리에서 해당 위치까지의 거리를 나타냄. pageX / pageY 문서 전체에서 마우스 클릭 위치의 좌표값. 문서의 왼쪽 위 모서리에서 해당 위치까지의 거리를 나타냄. screenX / screenY 모니터 화면에서 마우스 클릭 위치의 좌표값. 모니터의 왼쪽 위 모서리에서 해당 ..

HTML요소에 'data-'만 붙이면 어떤 데이터든 꺼내 사용할 수 있음 예시) ... 자바스크립트로 사용하기 let article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars" css에서 사용하기 article::before { content: attr(data-parent); } 선택자로도 사용할 수 있음 article[data-columns='3'] { width: 400px; } article[data-columns='4'] { width: 600px; } 타입스크립트 적용 // Mou..

event.stopPropagation(); event: React.MouseEvent event를 props로 넘겨줄 때 // MouseEvent를 import해줘야 하는 듯? import React, { MouseEvent } from "react"; interface UseTooltipResult { onMouseEnterHandler: (event: MouseEvent) => void; } form const onChangeHandler = (event: React.ChangeEvent) => { const onSubmitHandler = (event: React.FormEvent) => {

Wrapper에 임시로 200vh를 주고 작업하던 것을 삭제하니 스크롤이 두 개 생기는 문제가 발생했다. 스크롤 없애는 거야 overflow 속성을 사용하면 된다지만, 어떤 놈이 스크롤을 발생시키고 있는지 감이 잡히질 않았다. 세로 영역을 지정해준 것은 Wrapper가 유일했었기 때문이다. 그렇게 한참을 찾아 헤매다가 나는 슬라이드가 한 개일 경우 스크롤이 정상적으로 한 개가 표시되지만, 두 개일 때부터 스크롤이 추가 생성되는 것에 주목했다. 이 얘기는 곧 SlideBox와 SlideItemRowBox는 용의선상에서 제외라는 소리였다. 이것들이 문제였으면 슬라이드가 한 개만 있을 때도 스크롤이 두 개여야 했으니까. 그래서 SlideContainer의 css 속성을 들여다보다가 그간 몰랐던 것에 대해 알게..

깃은 대소문자를 잘 구분하지 않기 때문에 로컬 파일과 원격 레포지토리의 경로명이 달라 오류가 발생하는 경우가 생기기도 한다. 해결 방법 1. git이 대소문자 구분하도록 설정을 바꾸기 git config core.ignorecase false 설정 후 캐쉬초기화 git rm -r --cached . git add . 이후 커밋 2. 설정은 놔두고 명령어로 폴더명 혹은 파일명 바꾸기 예시) Components를 components로 바꾸기 $ git mv Components aaa $ git mv aaa components 아무 이름으로 바꾼 뒤 원하는 이름으로 변경 이미 추적된 파일 .gitignore로 제외시키기 git rm --cached src/main/resources/springboot.p12

넷플릭스 클론코딩 도중 슬라이드를 똑같이 구현하는데 생각보다 많은 시간을 보내고 있다. 잦은 코드 변경이 있었는데, 그 과정에서 꽤 유익한 공부를 하게 되어 간만의 일지를 적는다. 문제 발생 opacity 조작과 관련해 슬라이드의 여러 기능이 얽혀 어려움을 겪고 있는데, 구현하려는 주요 기능은 다음과 같다. A = '슬라이드 이동 화살표' B = '슬라이드 페이지네이션 인디케이터' 1. 초기엔 A와 B가 보이지 말아야 한다. 2. 슬라이드에 마우스가 호버되면 A와 B가 나타나야 한다. 3. 슬라이드 아이템에 호버하고 0.5초 뒤 scale이 커지면 A와 B가 다시 사라져야 한다. 4. scale이 커지기 전까진 슬라이드 내에서 마우스를 움직여도 A와 B가 사라져선 안 된다. 5. 슬라이드 '이동 버튼'에..

import { forwardRef } from "react"; import styled from "styled-components"; type SliderNumProps = { page: number; maxPage: number; opacity: number; }; const SliderNum = forwardRef(({ maxPage, page, opacity }, ref) => { let sliderNumBox = []; for (let i = 1; i < maxPage + 1; i++) { sliderNumBox.push(); } return ( {sliderNumBox} ); }); export default SliderNum; const SliderNumBox = styled.ul` posi..

rgba(0, 0, 0, 불투명도) opacity: 불투명도 (0~1) opacity가 있는데도 rgba를 쓰는 이유 색상과 불투명도를 한번에 조작할 수 있다. 자식 요소에 opacity를 지정해주어야 할 경우 상속 문제에서 자유롭다. opacity를 사용할 때의 이점 어떤 요소의 불투명도를 상태값에 따라 유동적으로 바꾼다고 가정해보자. 이 경우 렌더링 과정에서 rgba속성은 페인트 과정이지만, opacity는 페인트 이후의 레이어를 합성하는 과정에 포함되기 때문에 렌더링 최적화에 이점을 가진다.

인터섹션 타입두 개 이상의 타입을 결합하여 새로운 타입을 만들어내 여러 타입을 모두 만족시키는 타입을 의미한다.예시)interface IPerson { name: string; age: number;}interface IEmployee { company: string; position: string;}type IEmployeePerson = IPerson & IEmployee;keyof객체의 키 값들을 숫자나 문자열 리터럴 유니언으로 생성enum의 경우는 keyof typeof로 사용type Point = { x: number; y: number };type P = keyof Point; // “x” | “y”enum LogLevel { ERROR, WARN, INFO, DEBUG}// 'ERR..

1. 패키지 설치 npm i gh-pages --save-dev yarn add -D gh-pages 2. pakage.json에 추가 // package.json "homepage": "https://깃허브이름.github.io/레포지토리이름" // package.json "deploy": "gh-pages -d build", // Vite일 경우 "deploy": "gh-pages -d dist" "predeploy": "npm run build" 3. 라우터의 base url을 다음과 같이 수정 4. 커밋 후 푸쉬 5. 터미널 입력 npm run deploy 6. 배포 주소로 가서 확인 배포에 5분 정도 소요될 수 있음

리액트 쿼리로 가져오는 데이터가 배열이거나 객체일 때 아래처럼 리액트 쿼리에 제네릭을 먹이면 에러가 뜬다. 이럴 경우 제네릭을 여러 개 먹여도 해결되지 않는다. 해결법 받아올 때 타입을 지정해주지 말고 가공할 때 타입을 지정해 주면 된다. 보너스 위처럼 select옵션을 이용해 가공하려고 할 때 역시 제네릭을 없애고 select에서 가공한 후, 사용할 때 타입을 지정해 주면 된다.

let height = 0; alert(height || 100); // 100 alert(height ?? 100); // 0 논리곱은 0을 falsy 한 값으로 취급. 널 병합 연산자는 height가 정확하게 null이나 undefined일 경우에만 100이 됨. 따라서 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합

JSX.Element children이 단일 React 요소여야 하는 경우 사용. 여러 요소는 허용하지 않는다. type Props = { title: string, children?: JSX.Element, }; const Page = ({ title, children }: Props) => ( {title} {children} ); 여러 children 사용 가능. 그러나 이렇게 해도 문자열은 허용하지 않는다. type Props = { title: string, children?: JSX.Element | JSX.Element[]; }; 이렇게하면 문자열도 가능. 그런데 숫자는 불가능... type Props = { title: string; children: | JSX.Element | JSX.E..

translateX 말고도 position: absolute일 때 화면 정중앙에 오도록하는 법 left: 0; right: 0; margin 0 auto; 사용자 화면 크기 window.outerWidth : 브라우저 전체의 너비 window.outerHeight : 브라우저 전체의 높이 window.innerWidth : 브라우저 화면의 너비 window.innerHeight : 브라우저 화면의 높이 align-self 그리드 또는 플렉스 항목의 align-items 값을 재정의함 이미지 관련 object-fit콘텐츠가 박스 내 위치할 지점 설정 aspect-ratio 가로 세로 비율

svg stroke - 테두리 색 fill - 색 path태그의 fill을 currentColor로 설정해줄 경우 기본 색상 혹은 스타일드 컴포넌트의 색상이 적용된다. img 엑박 방지 referrerPolicy="no-referrer"

npm install framer-motion 애니메이션 scaleX: 가로 크기 transform-origin: 요소 변형의 원점을 설정 x: 가로 좌표 y: 세로 좌표 pathLength: 테두리 길이 (initial: 0, animate: 1로 설정해줄 경우 테두리가 서서히 그려짐) transtion type ㄴspring: 통통 튕김(x 또는 scale은 spring이 자동 적용 됨) ㄴtween: spring효과 없이 딱 멈춤(opacity 또는 color는 tween이 자동 적용 됨) ㄴmass: 무게감 bounce: type: "spring"일 때 튕김 정도(탄력), 0 ~ 1 사이값 damping: 반대힘. 0으로 설정하면 스프링이 무한정 진동 duration: 시작부터 끝까지 실행되는 시..