티스토리

8 Days A Week

검색하기

블로그 홈

8 Days A Week

jaystacks.tistory.com/m

Jaaaay 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

6개월 간의 프론트엔드 개발 인턴 생활 회고 🏢 입사 학부생으로서의 마지막 학기를 ICT 인턴십 제도를 통해 IT 스타트업에서 보내게 됐다. 감사하게도 여러 곳에서 좋은 소식을 들을 수 있었고, 그 중 강남에 위치한 시리즈 A 규모의 한 스타트업(앞으로 B사 라고 부르겠습니다)을 최종적으로 선택하게 됐다. 👔 환경 B사에서 나는 프론트엔드 개발 업무를 맡게 됐고, 한창 개발 중인 한 서비스의 어드민 페이지의 프론트 개발을 첫 업무로 맡았다. 내가 속한 웹 서비스 관련 팀은 약 6명의 인원으로 구성되었으며 최근 가파르게 성장하는 회사 분위기에 맞게 현 인원으로 구성된지 오래되지 않았다. 2명 정도로 팀을 구성하던 과거의 업무 방식은 더 이상 유효하지 않았고, 젊은 IT 스타트업 특유의 변화를 즐기는 분위기에 힘입어 한창 개발적으로나 문화적으로나 많은.. 공감수 2 댓글수 0 2023. 4. 24.
nextjs hydration 에러 / state props 넘기는 과정에서 원본 export default function Header({ currentMonth, setCurrentMonth, setCurrentWeek, }: { currentMonth: Date; setCurrentMonth: React.Dispatch; setCurrentWeek: React.Dispatch; }) { const changeMonthHandle = (btnType: string) => { if (btnType === 'prev') { setCurrentMonth(subMonths(currentMonth, 1)); } if (btnType === 'next') { setCurrentMonth(addMonths(currentMonth, 1)); } }; const changeWeekHandle.. 공감수 0 댓글수 0 2023. 1. 24.
Axios Interceptor에서 hook 사용하기 요구사항: API 요청에서 header에 hash key를 담아 보내야 하는 상황에서 URL에 있는 키 정보를 next/router를 통해 추출해 사용하고자 했음. 기존 Axios client 파일에서는 hook을 사용할 수 없어 해결방안을 모색. 구글링을 통해 본 대부분의 경우는 header에 key를 담는 경우에 대해서 local storage 값을 사용하고 있었다. 이를 해결하기 위해서 자체를 감싸줄 수 있는 훅을 생성했다. // axiosInterceptor.tsx import axios, { AxiosResponse } from 'axios'; import React, { useState, useEffect } from 'react'; import { useRouter } from 'next/r.. 공감수 0 댓글수 0 2023. 1. 24.
react 환경에서 라우트 이동 시 스크롤 초기화 페이지 라우트 이동 시 스크롤 구현 및 스크롤 애니메이션 추가 import React, { useEffect } from "react"; import { useLocation } from "react-router-dom"; type ScrollProps = { children: React.ReactNode; }; function ScrollToTop(props: ScrollProps) { const { pathname } = useLocation(); useEffect(() => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }, [pathname]); return {props.children}; } export default ScrollToT.. 공감수 0 댓글수 0 2023. 1. 15.
[react] Tailwind css, react-beautiful-dnd, 불변성, React.memo, useCallback, useMemo, localStorage Tailwind CSS Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. 장점 Tailwind CSS는 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 Uitility Class를 활용하는 방식으로 HTML에서 스타일링 할 수 있다. 빠른 스타일링 작업이 가능 class 혹은 id명을 작성하기 위한 고생을 하지 않아도 된다. 유틸리티 클래스가 익숙해지는 시간이 필요할 수 있지만 IntelliSense 플러그인이 제공돼서 금방 익숙해질 수 있다. react-beautiful-dnd 리액트에서 드래그앤드랍에 대한 기능을 제공하는 npm 라이브러리 https://github.com/atlassian/react-b.. 공감수 0 댓글수 0 2022. 8. 25.
[interactive web] 3d 스크롤, resize 핸들링, 마우스 좌표 3d 스크롤 window.addEventListener("scroll", function () { console.log(document.body.offsetHeight - this.window.innerHeight); }); 전체 문서 높이 - 현재 창 높이 = 전체 스크롤할 수 있는 범위 (function () { const houseElem = document.querySelector(".house"); let maxScrollValue = document.body.offsetHeight - this.window.innerHeight; window.addEventListener("scroll", function () { console.log(pageYOffset / maxScrollValue); }).. 공감수 0 댓글수 0 2022. 8. 23.
[interactive web] 스크롤 다루기/ 이벤트- transition, animation/ 타이밍 제어 스크롤 다루기 (function () { const outputElem = document.querySelector(".output"); window.addEventListener("scroll", function () { outputElem.innerHTML = window.pageYOffset; }); })(); window.pageYOffset 속성으로 페이지 Y축 픽셀 위치를 얻을 수 있다. (function () { const outputElem = document.querySelector(".output"); const ilbuniElem = document.querySelector(".ilbuni"); window.addEventListener("scroll", function () { //.. 공감수 0 댓글수 0 2022. 8. 22.
[interactive web] Event Handler 리팩토링 - DOM, querySelector 개선 Event Handler 만들 때 주의 위 코드는 DOM 요소를 계속 선택하기 때문에 효율적이지 못하다. 리팩토링 1 변수를 따로 밖에 선언한 후 사용한다. 리팩토링 2 한 함수에 많은 기능이 들어가있기 때문에 함수를 분리해준다. 추후 개선이 용이하다. 공감수 0 댓글수 0 2022. 8. 21.
[interactive web] translate3d 장점, script 태그 위치, classList 메서드 translatex 또는 translatey를 사용하는 것보다 translate3d를 사용하면 하드웨어 가속을 사용할 수 있어 좋다. 이런 식으로 작성해주면 좋다. https://developer.mozilla.org/ko/docs/Web/API/Element/classList Element.classList - Web API | MDN **Element.classList**는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다. developer.mozilla.org 공감수 0 댓글수 0 2022. 8. 21.
[React] 리액트 개요 리액트는 라이브러리 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다. 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다. 프레임워크는 여러개의 라이브러리를 포함하고 있다고 생각할 수 있다. 리액트가 라이브러리인 이유는 리액트가 전적으로 UI를 렌더링하는데 관여하기 때문이다. 리액트 컴포넌트 컴포넌트(Component)는 리액트로 만들어진 앱을 이루는 최소 단위이다. 리액트 컴포넌트는 두가지가 있다. 클래스형 컴포넌트(Class Components) 함수형 컴포넌트(Functional Components) 리액트 Hooks의 등장 이후로는 함수형 컴포넌트를 이용해서 개발을 주로 한다. 브라우저가 그려지는 원리와 가상돔 CRP과정으로 그려지는 브라우저에서 DOM이 어떤 인터렉션으로.. 공감수 0 댓글수 0 2022. 8. 21.
[JS] 이벤트 위임 적용해보기 event delegation 이벤트 위임 function clickHandler(e) { this.parentNode.removeChild(this); } for (let i = 0; i < ilbuniGroup.length; i++) { ilbuniGroup[i].addEventListener("click", clickHandler); } 이벤트를 각각 등록해주는 것은 객체 길이가 많아질 경우 비효율적이다. 부모 컴포넌트에 이벤트를 위임한다. const stage = document.querySelector(".stage"); function clickHandler(e) { if (e.target.classList.contains("ilbuni")) { stage.removeChild(e.target); } } stage.addE.. 공감수 0 댓글수 0 2022. 8. 20.
[React Test] not wrapped in act 경고 Not wrapped in act 경고 리액트에서 act 경고는 컴포넌트에서 아무것도 일어나지 않을 것으로 예상하고 있을 때 컴포넌트에 어떤 일이 일어나면 나오는 경고이다. act 함수로 감싸주어야 한다. act(()=>{ // fire event that update state }); 지금까지 act로 감싸준 적이 없는데 잘 된 이유 react-testing-library 내부 API에 act를 이미 내포하고 있어서 따로 설정하지 않아도 됐다. (리액트 콜 스택 안에 있을 때) 에러가 난 이유 컴포넌트가 비동기 API 호출로 렌더링이 일어나기 전에 테스트가 종료되는 경우 act로 감싸주어야 한다. (리액트 콜 스택 밖에 있어서) 이 때는 waitFor API를 사용해 테스트가 끝나기 전에 컴포넌트가 다.. 공감수 0 댓글수 0 2022. 8. 19.
[React Test] React Context 적용 React Context를 이용한 상품 가격 처리 리액트에서 데이터 흐름 컨트롤하는 법 (state 관리하기) state와 props를 사용해 컴포넌트 간 전달 React Context 사용 mobx 사용 redux 사용 context 사용해서 컴포넌트에 데이터 제공하기 Context - React Context 생성 Context는 Provider 안에서 사용가능하기 때문에 Provider 생성 더 복잡한 로직을 구현하기 위해 Provider를 위한 함수 생성 OrderContextProvider 함수로 orderContext 사용할 컴포넌트 감싸기 orderContext 사용하기 자세한 사용법은 문서 참고! context wrapper 추가로 테스트 에러 제거 테스트를 진행하면 render로 불러온 .. 공감수 0 댓글수 0 2022. 8. 18.
[algorithm][Quiz] 만들 수 없는 금액 문제 주어진 N개의 동전으로 만들 수 있는 값 중 최소를 구하는 문제. 출처 - [이것이 코딩 테스트다] 교재 Q4 풀이과정 각각의 합으로 만들 수 있는 금액 중 최소를 구하는 데에 효율적인 구현이 생각나지 않았다. (1개~N개 동전을 모두 쓸 수 있는 점이 헷갈림) 모든 합계의 경우를 구하고 해당하지 않는 최소를 구할까 싶었지만 바람직하지 않음 정답 책에 기술된 내용 화폐를 기준으로 오름차순 정렬한다. 이후 1부터 차례로 특정한 금액을 만들 수 있는지를 확인한다. 1부터 target-1까지의 모든 금액을 만들 수 있다고 가정해보자. 우리는 화폐 단위가 작은 순서대로 동전을 확인하며, 현재 확인하는 동전을 이용해 target 금액 또한 만들 수 있는지 확인하면 된다. 만약 target 금액을 만들 수 있.. 공감수 0 댓글수 0 2022. 8. 16.
[React Test] 쿼리 사용 우선 순위, userEvent, Mock Service Worker Query 사용 우선 순위 지금까지 getByTestId 쿼리를 이용해서 엘리먼트에 접근해서 테스트를 진행했지만 testing library에서 추천하는 쿼리 사용 우선 순위가 따로 있다. getByRole을 우선으로 사용하는 것이 좋다. About Queries | Testing Library userEvent > fireEvent userEvent는 fireEvent를 사용해서 만들어졌다. userEvent는 fireEvent에 비해 엘리먼트 타입에 따라 더욱 적절한 반응을 보여준다. userEvent API를 사용하는게 더 추천되는 방법이다. Mock Service Worker 백엔드에서 데이터를 가져오는 부분을 테스트하기 위해서 실제로 서버에서 호출하는 end-to-end 테스트를 할 수 있지만 .. 공감수 0 댓글수 0 2022. 8. 16.
[React Test] 간단히 만들어보기 - ESLint Plugins, FireEvent 등 ESLint Plugins 설치 및 설정 Plugins 란? eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러그인을 통해 사용할 수 있다. 라이브러리 설치 npm install eslint-plugin-testing-library eslint-plugin-jest-dom --save-dev .eslintrc.json 작성 { "plugins": ["testing-library", "jest-dom"], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:jest-dom/recommended" ] } 테스트 주도 개발(Test Driven Development) Test Driven Developme.. 공감수 0 댓글수 0 2022. 8. 13.
[React Test] 리액트 테스트에 대해서 - RTL, Jest, 쿼리함수 테스팅의 이유 안정적인 어플리케이션을 위해서 이점 디버깅 시간의 단축 및 유닛 테스팅으로 버그 위치 발견의 용이 안정적인 어플리케이션 구현 재설계 및 확장 구현 시간의 단축 React Testing Library란? React Testing Library | Testing Library React Testing Library(이하 RTL)는 DOM Testing Library를 기반으로 구현됐다. CRA는 기본적으로 이를 지원하지만 그렇지 않은 경우 npm을 통해 별도로 추가할 수 있다. npm install --save-dev @testing-library/react RTL은 에어비앤비에서 만든 Enzyme을 대처하는 솔루션이다. 구성 요소의 구현 세부 정보를 테스트하는 대신 RTL 개발자를 React.. 공감수 0 댓글수 0 2022. 8. 10.
[React 최적화] 실습 4. 이미지 갤러리 페이지(3) - 병목함수 memoization 적용 병목 함수에 memoization 적용 병목함수 memoiztion 적용은 pure function일 때만 가능하다. const cache = {}; export function getAverageColorOfImage(imgElement) { if (cache.hasOwnProperty(imgElement)) { console.log('cache has the key', cache); return cache[imgElement]; } console.log('cache dont have the key', cache); const canvas = document.createElement('canvas'); const context = canvas.getContext && canvas.getContext('.. 공감수 0 댓글수 0 2022. 8. 8.
[React 최적화] 실습 4. 이미지 갤러리 페이지(2) - useSelect 렌더링 문제, Redux reselect useSelect 렌더링 문제 해결 react devtools를 설치했다면 브라우저 개발자 도구에서 기능을 사용할 수 있다. Components → 설정 → Highlight updates when components render 켜주기 불필요한 렌더링이 일어남을 확인할 수 있다. useSelector 동작 원리 useSelector로 구독하는 값이 dispatch 후 결과값이 달라지면 리랜더링을 실행한다. 여기서 객체로 구독을 하면 내용이 같아도 객체 자체는 변경된 것으로 인식하기 때문에 랜더링이 일어난다. useSelector 문제 해결 방법 Object를 새로 만들지 않도록 State 쪼개기 새로운 Equality Function 사용 : equality function으로 shallowEqual을.. 공감수 0 댓글수 0 2022. 8. 4.
[React 최적화] 실습 4. 이미지 갤러리 페이지(1) - Layout Shift, react-lazyload 실습내용 이미지 지연(lazy) 로딩 → 로딩 성능 최적화 Layout Shift 피하기 useSelector 렌더링 문제 해결 Redux Reselect를 통한 렌더링 최적화 병목 함수에 memoization 적용 병목 함수 로직 개선하기 → 렌더링 성능 최적화 Layout Shift 피하기 화면 상의 이미지, 텍스트 등의 엘리먼트들이 위치, 크기 등에 변화가 일어나는 것 performance 탭과 Lighthouse에서도 Layout Shift가 일어난 것을 확인할 수 있다. Layout Shift 원인 사이즈가 정해져 있지 않은 이미지 사이즈가 정해져 있지 않은 광고 동적으로 삽입된 컨텐츠 web font(FOIT, FOUT) 문제점 화면 상 위치를 다시 계산해야해 성능에 영향을 줌 사용성에 영향을.. 공감수 0 댓글수 0 2022. 8. 3.
[React 최적화] 실습 3. 일반 홈페이지(3) - 캐시, css 최적화 캐시 최적화 cache policy에 대한 알림이 있다. 캐시 최적화가 제대로 적용되어 있지 않음. 네트워크 탭에서도 캐시에 대한 설정이 딱히 돼있지 않다. 캐시 메모리 캐시(RAM) 디스크 캐시 Cache-Control Cache-Control을 통해 캐시 설정을 할 수 있다. no-cache: 캐시를 사용하기 전에 서버에 검사 후, 사용 결정 (max-age = 0 과 같음) no-store: 캐시 사용 안함 public: 모든 환경에서 캐시 사용 가능 private: 브라우저 환경에서만 캐시 사용, 외부 캐시 서버에서는 사용 불가 max-age: 캐시의 유효시간 캐시가 만료돼도 브라우저가 서버에 Etag를 기반으로 만료된 데이터인지 여부를 확인한다. 수정사항이 없는 경우 그대로 사용한다. // se.. 공감수 0 댓글수 0 2022. 8. 1.
[React 최적화] 실습 3. 일반 홈페이지(2) - 동영상, 폰트 최적화 동영상 사이즈 최적화 동영상을 압축하는 작업을 통해 최적화를 진행한다. 만약 동영상이 주요 서비스인 경우에는 추천하지 않는 작업이다. 예시 사이트 비디오 압축기 | 온라인 비디오 파일 크기 줄이기 webp와 비슷하게 구글에서 만든 webm이라는 확장자가 있다. 압축 완료 적용해보기 비디오도 이미지와 마찬가지로 확장자 우선순위를 지정해준다. // 예시 Sorry, your browser doesn't support embedded videos. 폰트 최적화 웹 폰트의 문제점 FOUT(Flash of Unstyled Text) 기본 폰트로 텍스트 로딩 후 폰트 로딩 완료 시 적용 IE, Edge FOIT(Flash of Invisible Text) 폰트 로딩 이후에 적용된 텍스트 표시 Chrome, Safa.. 공감수 0 댓글수 0 2022. 7. 30.
방학 중간점검 보호되어 있는 글입니다. 공감수 0 댓글수 0 2022. 7. 29.
[TS] 실습 4. 엄격한 타입 적용 strict 옵션 tsconfig.json compileOptions에 "strict": true 추가 TSConfig Reference - Docs on every TSConfig option { "strictNullChecks": true, "strictFunctionTypes": true, "strictBindCallApply": true, "strictPropertyInitialization": true, "noImplicitThis": true, "alwaysStrict": true, } 즉 strict를 설정하면 위와 같은 설정들이 true로 설정된다. null 타입 오류 및 함수 타입 오류 해결 1. 'Event' 형식에 'MouseEvent' 형식의 altKey, button, button.. 공감수 0 댓글수 0 2022. 7. 28.
[React 최적화] 실습 3. 일반 홈페이지(1) - 이미지 레이지 로딩, 최적화 실습내용 이미지 레이지(lazy) 로딩 이미지 사이즈 최적화 동영상 최적화 폰트 최적화 캐시 최적화 불필요한 CSS 제거 → 로딩 성능 최적화 이미지 지연(lazy) 로딩 (intersection observer) 네트워크 탭에서 속도 제한 걸어주기 문제점 홈페이지의 주요 컨텐츠인 동영상 로딩이 초기에 Pending된다. 해결책 이미지를 빠르게 다운로드 나중에 이미지를 다운로드 하도록 해서 동영상을 먼저 로드 → 2번이 적합하다 생각된다. 이미지는 스크롤 위치에 따라 lazy loading하면 적합하다. → 스크롤에 따라 함수를 주면 함수 호출이 너무 자주 발생 → intersection observer 활용 Intersection Observer API - Web API | MDN 사용예시 functi.. 공감수 0 댓글수 0 2022. 7. 27.
[TS] 실습 3. 외부 라이브러리 모듈화 Definitely typed 타입 definition 라이브러리와 패키지 타입 검색기 https://github.com/DefinitelyTyped/DefinitelyTyped Search for typed packages 타입 선언 라이브러리가 제공되지 않는 외부 라이브러리 대처 방법 tsconfig.json에 typeRoots 추가 따로 지정해주지 않은 때는 typeRoots가 기본적으로 node_modules/@types 를 가르킴 { "compilerOptions": { "allowJs": true, "target": "ES5", "outDir": "./built", "moduleResolution": "Node", "lib": ["ES2015", "DOM", "DOM.Iterable"], "n.. 공감수 0 댓글수 0 2022. 7. 26.
[React 최적화] 실습 2. 올림픽 사이트(2) 애니메이션 최적화 ... const BarGraph = styled.div` position: absolute; left: 0; top: 0; width: ${({width}) => width}%; transition: width 1.5s ease; height: 100%; background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)' : 'rgb(198, 198, 198)'}; z-index: 1; ` 해당 컴포넌트에 대해 transform을 적용시켜보자 const BarGraph = styled.div` position: absolute; left: 0; top: 0; width: 100%; transform: scaleX(${({wid.. 공감수 0 댓글수 0 2022. 7. 25.
[React 최적화] 실습 2. 올림픽 사이트(1) 실습내용 애니메이션 최적화(Reflow, Repaint) → 렌더링 성능 최적화 컴포넌트 Lazy Loading (Code Splitting) 컴포넌트 Preloading 이미지 Preloading → 로딩 성능 최적화 애니메이션 분석(Reflow와 Repaint 이론) 애니메이션 쟁크를 자세히 확인하고 싶다면 performance에서 CPU 쓰로틀링 설정을 할 수 있다. 쟁크(애니메이션이 버벅이는 증상)은 예를들어 초당 60 Frame(60FPS)을 표현하는 모니터에서 브라우저가 그보다 못한 프레임으로 애니메이션을 출력할 경우 발생한다. 브라우저 렌더링 과정 DOM + CSSOM → Render Tree → Layout → Paint → Composite Reflow width, height(위치나 크.. 공감수 0 댓글수 0 2022. 7. 25.
[python] 이진 탐색 bisect 라이브러리 bisect를 통해 이진탐색을 쉽게 구현할 수 있고 관련 기능을 사용할 수 있다. (그래도 이진탐색 코드 정도는 숙지하고 있도록 하자) bisect - Array bisection algorithm - Python 3.10.5 documentation from bisect import * li = [1, 2, 2, 3, 3, 4] print(bisect_left(li, 2)) # 1 print(bisect_right(li, 2)) # 3 print(bisect_left(li, 4)) # 5 print(bisect_right(li, 4)) # 6 insort(li, 2) print(li) # [1, 2, 2, 2, 3, 3, 4] bisect_left()는 찾고자 하는 값의 맨 처음 인덱스를 반환한다. b.. 공감수 0 댓글수 0 2022. 7. 19.
[TS] 실습 2. 점진적인 타입 적용 절차 및 설정 자바스크립트 프로젝트에 타입스크립트 적용하는 절차 1. 타입스크립트 프로젝트 환경 구성 프로젝트 생성 후 NPM 초기화 명령어로 package.json 파일을 생성 프로젝트 폴더에서 npm i typescript -D 로 타입스크립트 라이브러리를 설치한다. 타입스크립트 설정 파일 tsconfig.json 을 생성하고 기본 값을 추가한다. 서비스 코드가 포함된 JS 파일을 TS 파일로 변환한다. tsc 로 TS 파일을 JS 파일로 변환한다. 2. 엄격하지 않은 타입 환경(loose type)에서 프로젝트 돌려보기 프로젝트에 테스트 코드가 있다면 테스트 코드가 통과하는지 먼저 확인 js 파일을 모두 ts 파일로 변경 타입스크립트 컴파일 에러가 나는 것 위주로 에러가 나지 않게 수정 기능 사소하게라도 변경 x.. 공감수 0 댓글수 0 2022. 7. 19.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.