전체 글

git add . git commit -m "record web study" git push
카테고리 없음

입사 6개월 차 회고 (feat. 기술부채)

회사에 처음 들어온 지 반 년 정도가 지났다. 그동안 프로젝트의 완성도를 위해 끊임없이 이슈를 해결해왔다. 기능개발업무가 생기면 최선을 다했다. 그 과정에서 배울점도 많았다. 기획부터 디자인과 API를 거쳐 클라이언트까지, 그리고 돌아오는 소중한 CS까지도… 진행되는 일련의 과정들이 너무 재밌고, 뿌듯했다. 이런 과정들을 통해 프로젝트에 애정도 상당했다. 업무가 없을 때는 가시적인 이슈를 스스로 찾고 개선했다. 이슈티켓의 5할은 내가 발행했을 정도이다. 그런데, 지나고보니 기술부채가 잔뜩 쌓였다. nextjs, manifest 등 버전 최신화, cf도입, axios로직개선 등 무수한 레거시 코드들.. 상환해야할 기술부채가 많지만, 상환할 능력이 부족했다. 실무능력이 부족하다기 보다 기획진을 설득할 능력이..

FrontEnd

[Next.js] 웹페이지 전환속도 최적화를 위해 Back/Forward Cache 적용하기

적용하게 된 계기현재 개발중인 프로젝트의 프론트엔드 서버는 두 서버로 분리되어 있습니다. 그리고 사용자는 분리된 서버 간 이동을 자주 경험하고 있습니다. 근데, 두 서버 중 한 서버에서 웹 캐싱이 이루어지지 않고 있다는 사실을 발견하게 되었고, 그동안 사용자가 두 서버 간 이동을 할 때 이전 상황이 캐싱되지 않아 페이지 전환 시마다 맨 처음화면으로 돌아가는 현상을 겪고 있다는 것을 알게 되었습니다. 원인은 Cache-Control값에 따른 Back/Forward Cache 적용 여부에 차이가 있다는 것이었고, 해당 글을 통해 Back/Forward Cache 적용방법을 공유하고자 합니다. Back/Forward Cache란? Back/Forward Cache는 브라우저의 뒤로가기/앞으로가기 시 즉각적인 ..

FrontEnd

[Typescript] 커스텀 훅에서 제너릭 활용하기

개요 프로젝트를 진행하면서 custom Hook을 사용해야할 일이 있었다. 다양한 곳에서 custom hook을 활용하기 위해선 generic 활용이 필수라는 것을 느꼈고, 학습 후 코드에 적용해보게 되었다. generic은 Java나 C++ 등의 정적타입 언어에서 동적타입 기능을 제공해주는 역할을 하고있기 때문에 정적타입 언어에서 중요한 문법이라고 볼 수 있다. Javascipt는 동적 타입 언어이지만, Typescript를 통해 정적타입 언어로 코드를 관리하기 때문에, 동적타입 기능을 제공해주는 generic에 대한 이해가 필요하다. 이에 따라 generic에 대해 학습해보고 이전에 진행했던 프로젝트에 적용해봄으로써 실전활용도 해보고자 한다. 제너릭(generic)이란? generic은 컴포넌트에 대..

CS 스터디

[운영체제] CPU 스케줄링 알고리즘

이 글은 "면접을 위한 CS 전공지식 노트(주홍철 저)" 를 읽고 정리한 글 입니다. 면접을 위한 CS 전공지식 노트 - YES24 디자인 패턴, 네트워크, 운영체제, 데이터베이스, 자료 구조, 개발자 면접과 포트폴리오까지!CS 전공지식 습득과 면접 대비, 이 책 한 권이면 충분하다!개발자 면접에서 큰 비중을 차지하는 CS(Comp www.yes24.com CPU 스케줄링 알고리즘은 OS가 프로세스의 CPU 점유를 강제로 뺏을 수 있는 지의 여부에 따라 비선점형 방식 / 선점형 방식 으로 나뉜다. 비선점형 CPU 스케줄링 FCFS (First Come First Served) 가장 먼저온 것을 가장 먼저 처리하는 알고리즘 장점 구현이 쉽다. 단점 길게 수행되는 프로세스 때문에 준비 큐에서 오래 기다리는 ..

CS 스터디

[운영체제] 운영체제의 구조 / 컴퓨터의 요소

이 글은 "면접을 위한 CS 전공지식 노트(주홍철 저)" 를 읽고 정리한 글 입니다. 면접을 위한 CS 전공지식 노트 - YES24 디자인 패턴, 네트워크, 운영체제, 데이터베이스, 자료 구조, 개발자 면접과 포트폴리오까지!CS 전공지식 습득과 면접 대비, 이 책 한 권이면 충분하다!개발자 면접에서 큰 비중을 차지하는 CS(Comp www.yes24.com 운영체제는 CPU 스케줄링, 프로세스 관리, 메모리 관리, 디스크 파일 관리, I/O 디바이스 관리 등의 역할을 수행한다. 운영체제의 역할을 보면 주로 소프트웨어와 하드웨어를 이어주는 구름다리 역할을 하는 듯 하다. 그렇다면, 운영체제는 어떤 구조로 이루어져 있을까? 운영체제의 구조 운영체제는 위와같이 사용자가 실제 사용하는 응용프로그램 밑에 GUI,..

CS 스터디

[네트워크] HTTP (HTTP/1.0, HTTP/1.1, HTTP/2, HTTPS, QUIC)

HTTP/1.0 하나의 연결 당 하나의 request를 처리함 RTT의 증가 발생. (3-way-handshake 하나당 두번의 RTT) 💡 RTT : 패킷이 목적지에 도달하고 나서 다시 출발지로 돌아오기까지 걸리는 시간. 즉, 패킷 왕복 시간을 의미. RTT 증가를 해결하기 위한 방법 이미지 스플리팅 많은 이미지를 이어붙혀 하나의 이미지로 다운받는 방법. css 의 background-position을 이용하여 이미지를 자른다. 코드 압축 코드의 개행문자, 빈칸 등을 없애서 코드의 크기를 최소화하는 방법. ex) webpack 이미지 base64 인코딩 이미지 파일을 64진법으로 이루어진 문자열로 인코딩하는 방법. 이미지에 대한 HTTP요청을 줄일 수 있다. 아예 이미지 자체를 문서에 저장하기 때문이다..

caseBread
caseBread's devlog