강태풍의 개발블로그

🚀 개요 사진 압축 JS 라이브러리 Broswer-Image-Compression 을 사용해 보니 다음과 같은 장점을 느꼈습니다. 손쉬운 사용, 직관적이고 강력한 옵션, 용량 자체가 다른 라이브러리에 비해 가벼웠습니다. 반면에 사진의 압축 시 원본의 변형이 생각보다 더 많이 일어났습니다 😵 사진 용량에 낭비가 심하다 기존에 작업한 프로젝트에서 유저 이미지 파일을 받는 부분이 있는데, 화면에서 100px X 100px 정도의 작은 사이즈임에도 큰 리소스를 잡아 먹는 것을 보고 사진을 압축하기로 결정했습니다 화면에 정말 작은 사이즈가 나타남에도 큰 용량과 큰 사이즈의 사진을 받기도 합니다. 위 사진은 사진의 원래 크기 564*352 px 이지만 실제 화면에 보이는 크기가 가로 세로 100px 이므로 쓸데 없..

🚀 개요 프론트엔드에서의 지속적인 통합과 지속적인 배포의 자동화에 대해 적용을 하여 최적화를 진행한 경험과 방법을 공유하고자 합니다. 우선 현재 프로젝트 환경에 대해 간략히 이야기 하겠습니다. 두 명이서 2주동안 진행하는 소규모 프로젝트이다 보니, Dev 브랜치에서만 Pull 과 Push를 하며 협업하기로 합의했습니다. 현 상황에 맞게 Dev 브랜치로 Push가 발생한다면 Github Actions에 의해 자동으로 Main 브랜치로 지속적인 통합을 해주며, 바뀐 Main 브랜치의 커밋을 감지하여 Netlify에 의해 자동으로 지속적인 배포를 해주는 자동화 로직을 구현하였습니다. 추가적으로 자동으로 테스팅하려면 `package.json`의 script에 test와 관련된 라이브러리(vitest, jest)..

😸 요약 Skeleton UI를 적용해서 성능면에서 LightHouse 성능점수 6점 향상, CLS 점수를 0점(Good)으로 바꾸었습니다. 또한 시각적으로 사용자에게 편안함을 줄 수 있었습니다. 🚀 개요 기존의 홈페이지를 보자. 메인 이미지를 불러오는데 시간이 걸린다. 그리고 이미지가 다 로드 됐을 경우, img태그의 Height와 Width가 지정되면서, 이전에 로드된 나머지 DOM 요소 Layout을 아래로 미는 것을 확인할 수 있다. 사용자가 봤을 경우 아래로 밀리는 것이 시각적으로 덜컥거림이 느껴져 불편하고, 성능적으로도 Layout의 변화가 일어남으로 불필요한 Reflow를 불러일으킬 수 있다. 이를 방지하고자 스켈레톤 UI를 적용할 수 있다. 유튜브와 같이 아래 video 영상들과 제목 등과..

🚀 개요 이전 게시물에서 이어집니다, [패스트캠퍼스X야놀자 FE 부트캠프] HTML/CSS/JS 리팩토링1 - Intersection Observer 🚀 개요 야놀자 X 패스트캠퍼스 프론트엔드 개발 부트캠프에서 이전 토스 클론 코딩하여 배포한 것을 멘토님과 피어리뷰를 통하여피드백을 받고 이를 리팩토링 할 시간과 기회를 얻게 됐다. 성 koeyhhh.tistory.com 멘토님과 동료님들의 피드백을 확인할 수 있다. 성능 측면에선 크게 두가지 피드백을 받았다. 1. 기존 scroll 이벤트들이 등록되다보니 메모리 누수가 발생할 가능성이 높고 성능 저하가 일어난다. => CSS나 JS 내장 애니메이션을 통하여 개선하는 것이 좋아보인다. 2. Opacity가 0 1로 바뀌는 부분에서 Reflow가 발생할 수 ..

🚀 개요 야놀자 X 패스트캠퍼스 프론트엔드 개발 부트캠프에서 이전 토스 클론 코딩하여 배포한 것을 멘토님과 피어리뷰를 통하여피드백을 받고 이를 리팩토링 할 시간과 기회를 얻게 됐다. 성능개선을 통한 최적화와 코드 가독성 측면으로 항상 관심이 있어서, PR과 주석을 통하여 웹 브라우저 렌더링 성능과 Indent가 중첩되어 사용한 것을 가독성이 보기 좋은 방법이 있는지에 대해 현직 FE개발자신 멘토님께 여쭤봤다. 아래에 멘토님과 동료님들의 피드백을 확인할 수 있다. 성능 측면에선 크게 두가지 피드백을 받았다. 1. 기존 scroll 이벤트들이 등록되다보니 메모리 누수가 발생할 가능성이 높고 성능 저하가 일어난다. => CSS나 JS 내장 애니메이션을 통하여 개선하는 것이 좋아보인다. 2. Opacity가 0..

🚀 개요 토스 홈페이지 클론 코딩 중, Javascript만을 이용하여 스크롤 이벤트를 구현했다. 토스 홈페이지에서의 대부분의 애니메이션은 특정 요소가 화면에 보이기 시작하는 순간에 애니메이션이 시작된다. 이를 감지하기 위해 스크롤 이벤트 핸들러를 사용하였다. 그리고 이벤트 핸들러 내부에서는 화면에 요소가 나타났는지 확인을 하기 위한 조건으로서 window.outerHeight와 element.getBoundingClientRect() 을 적절하게 조합하여 사용하였다. 또한 요소에 걸리는 애니메이션은 opacity와 transform을 이용한 간단한 애니메이션이어서 바닐라 JS로 구현하기 적당한 난이도이다. 애니메이션을 사용한 몇 가지 유형을 소개시키고자 글을 쓴다. 최종 결과물은 다음 경로에서 확인 할..

최종 완성 애니메이션 1. 만들게 된 계기 Ethreum NFT 프로젝트 진행 중 Sns 링크를 홈페이지 어디에서든 볼 수 있게 유저친화적인 디자인을 구상중 트위터 디자인에서 아이디어를 얻어 위와 같은 Sns 아이콘 링크들의 리스트 꼴의 형태 디자인을 생각 해 내었다. 하지만 아이콘 세개가 화면에 계속 떠있을 경우 화면을 상당히 가리는 문제가 발생하였고, 사용자 측면에서의 편함을 위하여 + , x 모양의 아이콘을 react-icons 라이브러리에서 불러와 +버튼 클릭시 애니메이션과 함께 sns 아이콘들이 나타나고, x버튼 클릭시 sns 아이콘들이 사라지게 되는 형태의 sns bar를 구현하게 되었다. 2. 구현 설계 및 과정 일단 처음엔 컴포넌트의 리턴 부분은 다음과 같이 구현하였다. [opensea.s..

본인은 리액트 타입스크립트를 이용한 프로젝트를 진행하면서 MySQL을 이용한 DB 사용을 위해 React TS와 Express를 이용한 서버, AWS로 구축된 MySQL 로 작성된 DB에 접근하는 생전 처음 겪는 일을 맡게 되었다. 해본거라곤 HTML CSS JS TS React Python C 뿐이었지만 구글링과 구글링, 그리고 구글링을 통해서 서버의 개념과 DB 쿼리문 등에 대해 고민해보고 이것저것 알게 되었다. 참고로 처음 리액트 프로젝트를 사용하는 사람들은 eslint나 prettier 다운받아 설정하여 일관성 있는 코드 작성을 추천하나 본인은 현재 프로젝트에서 사용하는 속성이 있으므로 따로 설치하는 과정은 생략한다. 일단 먼저 리액트 프로젝트를 생성한 후 서버 폴더에 서버 파일을 작성하여 클라이..

1️⃣ 개요 환경은 React와 typescript, styled-components 를 사용했습니다. Styled-Components 는 Props 를 받아서 CSS 속성을 동적으로 변경해줄 수 있습니다. npm install -D styled-components Progress Bar가 위 그림에서 회색 전체 진행바 부분이고, 파란색 부분은 Progress 입니다. 파란색 Progress의 width를 조정하여 왼쪽부터 채우는 원리다. 위 사진에 border-radius를 씌우면 귀염귀염한 진행 바를 확인할 수 있다. import {useEffect, useState, useRef} from "react"; import styled from "styled-components"; interface IT..

하던 프로젝트 중 넣을 애니메이션을 찾는데 원하는 애니메이션이 없어서 직접 만들었다. 본 프로젝트는 React로 제작하였으나, HTML, CSS로 구현가능해서 HTML, CSS 로 제작하였다. 그림 사이즈는 300X300이고 마우스 호버시 원래 이미지는 대각선 아래로, 호버 이미지는 대각선 위에서 등장한다. 사진 2개를 같은 위치로 잡기 위해 parentDiv 안에 position absolute인 div, position relative인 img 태그가 위치해 있다. 보통 이 parentDiv를 복붙하면 position absolute인 div가 마음대로 움직일 경우 있는데 적절하게 위치 수정을 하면 된다. .parentDiv{ width: 300px; height: 300px; position:rel..

본 글은 Youtube 코딩애플님의 강좌를 재구성하였으며, 강의 내용을 정리한 글입니다. https://www.youtube.com/watch?v=LclObYwGj90&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy 본 내용은 Node 의 설치, VSCode 설치를 가정한다. React JS프로젝트 시작 - Visual Studio Code에서 폴더를 만들어 연다 - 터미널은 Powershell npx create-react-app [프로젝트명] 하고, 필요할 때 y 타이핑하면 리액트 프로젝트에 필요한 파일들을 자동으로 다운받아 준다. 자동으로 다운받아진 파일은 리액트 라이브러리인 node_modules, img파일 등 static 파일을 모아 놓은 폴더인 public 폴더, 우리..