분류 전체보기 70

6개월 간의 프론트엔드 개발 인턴 생활 회고

🏢 입사 학부생으로서의 마지막 학기를 ICT 인턴십 제도를 통해 IT 스타트업에서 보내게 됐다. 감사하게도 여러 곳에서 좋은 소식을 들을 수 있었고, 그 중 강남에 위치한 시리즈 A 규모의 한 스타트업(앞으로 B사 라고 부르겠습니다)을 최종적으로 선택하게 됐다. 👔 환경 B사에서 나는 프론트엔드 개발 업무를 맡게 됐고, 한창 개발 중인 한 서비스의 어드민 페이지의 프론트 개발을 첫 업무로 맡았다. 내가 속한 웹 서비스 관련 팀은 약 6명의 인원으로 구성되었으며 최근 가파르게 성장하는 회사 분위기에 맞게 현 인원으로 구성된지 오래되지 않았다. 2명 정도로 팀을 구성하던 과거의 업무 방식은 더 이상 유효하지 않았고, 젊은 IT 스타트업 특유의 변화를 즐기는 분위기에 힘입어 한창 개발적으로나 문화적으로나 많은..

write 2023.04.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..

web 2023.01.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..

web 2023.01.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..

web 2022.08.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); })..

web 2022.08.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 () { //..

web 2022.08.22

[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

web 2022.08.21

[React] 리액트 개요

리액트는 라이브러리 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다. 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다. 프레임워크는 여러개의 라이브러리를 포함하고 있다고 생각할 수 있다. 리액트가 라이브러리인 이유는 리액트가 전적으로 UI를 렌더링하는데 관여하기 때문이다. 리액트 컴포넌트 컴포넌트(Component)는 리액트로 만들어진 앱을 이루는 최소 단위이다. 리액트 컴포넌트는 두가지가 있다. 클래스형 컴포넌트(Class Components) 함수형 컴포넌트(Functional Components) 리액트 Hooks의 등장 이후로는 함수형 컴포넌트를 이용해서 개발을 주로 한다. 브라우저가 그려지는 원리와 가상돔 CRP과정으로 그려지는 브라우저에서 DOM이 어떤 인터렉션으로..

web 2022.08.21