타미의 개발 블로그

Written by@타미
공부하고 경험한 내용을 글로 작성합니다. 지적, 보충은 언제나 환영입니다 🙂

GitHub

우아한테크코스가 전부였던 2023년 회고

나에게 2023년은 정말 특별했던 해였다. 올해를 마무리하기 위해 짧게 회고를 해보려고 한다. 인턴 한 달 정도 짧게 스마일게이트스토브 인턴을 했다. 이 짧은 기간에 정말 소중한 친구를 만났다. 중간에 우테코에 붙어서 인턴을 그만두게 되었는데 헤어지기 싫어서 정말 많이 울었다. 언젠간 우리가 돌고 돌아 같은 회사, 같은 팀으로 만나면 정말 행복할 것 같다…

펀잇팀의 무한스크롤 개발기

펀잇 서비스에는 ‘상품 목록’을 보여주는 화면과 상품 상세 페이지에서 ‘리뷰 목록’을 보여주는 화면이 있다. 이러한 긴 목록들을 보여주는 방법에는 페이지네이션과 무한스크롤이 있다. 그 중에서 우리 팀은 무한스크롤 방식을 선택했고 왜 이 방식을 선택했는지, 그리고 어떤 방식으로 구현 했는지 글을 작성해보려고 한다. 페이지네이션 페이지네이션은 화면 하단의 숫…

펀잇의 SEO 개선하기

구글에 펀잇 혹은 편의점을 검색했을 때 우리 서비스는 노출되지 않는다.. 🥺 검색으로 유입을 모을 수 있을 것이라고 생각되어 SEO 개선을 해보기로 했다. 1. Google Search Console 등록하기 구글 서치 콘솔을 사용하면 얼마나 검색이 잘 되고 있는지 유입에 대한 정보를 얻음과 동시에 사이트맵 제출을 통해 SEO 개선을 도와준다고 한다. 이…

[최적화] 요청 크기 줄이기 (minify, image optimization, code splitting)

프론트엔드에서 성능은 크게 로딩 성능과 렌더링 성능으로 나눠볼 수 있다. 로딩 성능은 페이지가 얼마나 빨리 보이는지, 렌더링 성능은 사용자의 인터랙션에 얼마나 빠르게 반응하는 지라고 볼 수 있다. 로딩 성능을 개선하는 방법에는 웹페이지를 불러올 때 요청하는 파일의 용량을 낮추는 방법이 있다. 이번 포스팅에서는 어떤 방법으로 로딩 성능을 최적화 할 수 있을…

리액트에서 SvgSprite 컴포넌트 사용하기

웹 어플리케이션을 만들게 된다면 화면에 아이콘이 들어가는 경우가 많다. 펀잇의 메인페이지에도 많은 아이콘들이 들어간다. 이런 아이콘들을 모두 이미지로 넣게 된다면 로딩 시간이 걸리게 될 것이고 좋지 않은 사용자 경험을 제공하게 된다. 안 그래도 메인 페이지에서 5개 이상의 api 호출이 일어나고 있는데 아이콘이라도 부담을 덜어주는 것이 좋을 것이다. (이…

CRA없이 웹팩으로 React, Typescript 환경 구축하기

펀잇 프로젝트를 구축하며 CRA를 사용하지 않고 웹팩을 사용하여 프로젝트 세팅을 진행했다. CRA를 사용하면 명령어를 통해 아주 간편하게 리액트 환경을 구축할 수 있지만 사용하지 않는 모듈까지 포함이 되고 path alias 설정 등 커스터마이징이 어렵다는 단점이 있다. vite로 마이그레이션 하는 움직임들도 많이 보이지만 아직까지는 webpack으로 …

우아한테크코스 레벨3을 시작하며

2주 방학을 끝내고 드디어 팀프로젝트를 진행하는 레벨3가 시작됐다. 방학동안에 팀들이 선정되었고, 나는 운이 좋게 내가 제시한 ‘편의점 음식 리뷰 서비스’가 선정되었다. 우리 팀은 백엔드 로건, 망고, 오잉, 우가와 프론트엔드 나, 해온, 황펭이 함께하게 되었다. 우리 팀은 줄여서 로망오우타해황이라고 부른다. 😎 2주마다 데모데이를 하다보니 정~~~말 할…

tsconfig.json의 설정들

프로젝트를 타입스크립트 기반으로 만들게 된다면 위와 같은 파일을 생성하게 된다. 는 타입스크립트를 자바스크립트로 변환할 때 필요한 컴파일 설정을 가지고 있는 파일이다. 미션을 하면서 이전에 사용했던 값들을 복사해서 사용해왔는데 모르고 쓰는 설정들이 너무 많아서 한 번 정리해보려고 한다. extends extends 속성은 다른 위치의 파일의 설정을 …

NPM 라이브러리 배포하기(feat. react, typescript, webpack)

서론 페이먼츠 미션에서 사용한 모달을 라이브러리로 배포하게 되었다. 간단한 모달이지만 이렇게 오픈소스 라이브러리를 배포해보는 경험은 처음이라 글로 남겨보기로 정했다. 그리고 한 번도 프로젝트 설정을 직접 해본적이 없어 CRA가 아닌 웹팩을 사용하기로 결정했다. 배포된 라이브러리 보러가기 CRA없이 리액트 프로젝트 만들기 npm init 명령어를 통해 n…

React의 virtualDOM

Virtual DOM이란? 등장 배경 DOM 조작을 통해 웹페이지의 내용을 변경하게 된다면 변경 대상 element를 업데이트하는 과정에서 렌더트리를 갱신하고 UI를 리렌더링 하게 되어 성능 저하가 발생할 수 있다. Virtual DOM이란? 실제 DOM 구조와 비슷한, 사용자 인터페이스를 나타내는 자바스크립트 객체 Virtual DOM의 동작과정 나…