![]()
인스턴스 메모리가 부족해서 로컬에서 파일을 빌드하고 넘겨줄 예정이다. 이 과정을 쉽게 해결할 수 있는 오픈 소스 프로그램을 알아보자. FileZilla 파일질라(FileZilla)는 무료로 사용 가능한 오픈 소스 프로그램이다. 워드프레스 운영자들에게 웹 호스팅 서버와의 파일 전송 및 관리를 간편하게 해주는 도구로 널리 사용된다. 1. FileZilla 설치하기 FileZilla 공식 웹 사이트에서 최신 버전의 ZileZilla를 다운로드한다. 다운로드가 완료되면 설치 파일을 실행한다. 설치 프로세스를 진행하고, 사용자 정의 설정이 필요한 경우 적절한 옵션을 선택하여 설치를 완료한다. Desktop Icon은 생략해도 됩니다. 2. FileZilla 사용법 1. 서버 연결 설정 FileZilla 실행 후 ..
![]()
react-app(web server)을 배포하기 위하여 vercel이나 netlify와 같은 무료 호스팅 툴을 이용하여 웹 사이트를 배포할 수도 있지만, 트래픽 제한이 있기 때문에 언젠가 AWS 클라우드를 빌려 배포해야되는 순간이 올 것이다. 현재 무료 호스팅 툴인 vercel을 이용하여 미니쿡을 배포해둔 상태이다. 이 웹 서버를 AWS EC2 인스턴스로 배포해보도록 하겠다. 전체적인 순서는 다음과 같다. 웹 사이트 배포 AWS 가입 인스턴스 생성 인스턴스 접속 깃 클론 후 빌드 (Git & Node) 포트 없애기 (nginx & fowarding) 💡 1. AWS 가입 AWS는 가입 1년간 프리티어를 제공한다. 프리티어라고 모두 공짜가 아니라, 일정 유형의 인스턴스에 일정 시간 동안 무료로 제공한다...
![]()
메인 페이지 캐러셀 문제 발생 웹 너비 사이즈를 변경했을 때 고정된 이미지 이동 값 때문에 이미지가 밀리는 문제 발생 간단하게 overflow 되는 것을 보이지 않게 처리하고 클릭 이벤트가 발생할 때마다 보여지는 이미지의 위치를 x축으로 이동시키는 식으로 구현했다. 반응형으로 캐러셀을 구현하기에 꽤나 복잡할 것으로 보이고 시간적인 여유가 없어서 라이브러리의 도움을 받기로 했다. 가장 많이들 사용하는 라이브러리는 swiper와 react/slick 정도 일 것 같다. swiper vs react-slick (2024.04.12 기준) npm 패키지의 다운로드 순위를 보여주는 사이트 npm trend를 참고해 보면 다음과 같다. 물론 swiper는 리액트에 국한된 라이브러리가 아니니 개인적인 생각으로는 리액..
![]()
성능개선 이어서 들어가 봅시다! Debounce 적용하기상황프로젝트 검색 기능을 구현할 때, 한 글자씩 입력할 때마다 API 요청하도록 구현했었다.분석위와 같은 방법으로 기능을 구현하면 필요 이상의 요청이 발생할 것이라고 판단했다.검색 input 값을 콘솔창에 출력해봤더니 키워드 완성 전 필요 없는 값들이 입력이 발생할 때 마다 출력되고 있었다. 이렇게 순간적으로 많은 양의 데이터를 서버에 요청하면 서버에 부하가 발생하여 응답 속도가 느려질 것이다. 이 문제에 대한 해결책을 찾기 위해 구글링해본 결과, Debounce라는 기술을 활용할 수 있다고 한다. Debounce는 검색 기능 등에 자주 활용되는 기술로, 서버 요청 횟수를 효율적으로 개선할 수 있다고 한다. 이를 적용하여 개선해 보자. 💡 D..
![]()
지난 편에 이어서 LCP 최적화를 진행해 보도록 하겠습니다. LCP 개선하기 - Reduce unused JavaScript 번들사이즈 줄이기 LightHouse - Reduce unused JavaScript 조언은 웹페이지나 앱이 로드될 때 필요하지 않은 JavaScript 코드가 있을 경우 해당 코드를 최적화하여 성능을 향상하라는 의미입니다. 웹 페이지나 앱에서 사용되지 않은 JavaScript 코드가 많을 수록 페이지 로딩 시간이 늘어나고 사용자 경험이 저하될 수 있습니다. 따라서 사용되지 않은 JavaScript 코드를 식별하고 제거함으로써 페이지 로딩시간을 단축하고 사용자가 더 나은 경험을 할 수 있습니다. 먼저 제 프로젝트의 해당 항목의 분석 결과를 살펴봅시다. LigtHouse 측정 결과 ..
![]()
현재 상황 모든 페이지 화면 및 기능 구현 -> mock 데이터로 구현 다음 과제 api 연동 -> React-query 사용해 볼 예정 테스트 배포 마이페이지 성능 측정하기 초기 측정 결과 : 48점 초기 점수 : 48점 측정 도구 : LighHouse 성능을 많이 신경 못써서 점수가 낮게 나올거라고 생각하긴 했지만 48점은 충격적이네요. 빨간색이라 더 충격적.. 간단하게 최적화 할 수 있는 방법으로 점수를 조금 올려보겠습니다 React.Memo, useCallback React.Memo : React에서 제공하는 고차 컴포넌트로 성능 최적화를 위해 사용된다. 부모 컴포넌트가 리렌더링 될 때 자동으로 자식 컴포넌트들도 리렌더링 된다. 이때 불필요한 리렌더링이 발생하여 성능에 부정적인 영향을 미칠 수 있..
![]()
현재 상황 : Redux 사용해서 user reducer 생성해서 전역에서 사용 중 => 더미 데이터로 테스트 헤더에서 로그인 여부에 따라 UI 다르게 보여주는 기능 구현 다음 과제 : user api 연동 어려웠던 점 로그인 유지하기 (리렌더링의 잘못된 이해, Redux) 목표 : 로그인 성공하면 메인페이지로 이동 후 헤더 UI 바꾸기 상황 : /login에서 메인페이지로 이동했음에도 불구하고 메인페이지에 있는 헤더가 로그인 상태를 반영 안 함 분석 메인페이지가 리렌더링이 되고 있는지 확인 먼저 로그인이 성공하면 localStorage에 user를 저장해 둔다. 메인페이지가 리렌더링 되면 다시 마운트 될 것이므로 useEffect()를 적어두어 마운트시 해당 코드가 실행되는지 확인한다. => 실행이 안..
![]()
💡 로그인 & 회원가입 페이지 현재 상황 : 로그인&회원가입 페이지 마크업, CSS 스타일링 완료 임시 서버 구축해서 postman으로 api 일부 테스트 완료 다음 과제 : 회원인증 api 만들기 (feat. JWT) 로그인 여부에 따라 헤더 UI 동적 표시 (로그인, 회원가입 -> 마이페이지, 로그아웃) 진행 과정 서버 개발자님.. 회원인증 해주기로 했잖아요.. 돌아오세요... 서버 구축하기 (feat. Koa, JWT, 도망간 서버개발자님) 상황 서버 개발자님의 개인적인 사유로 인해 서버 개발 진행이 뒤로 밀려난 상황 (약 3개월?..) 간단한 api만 만들면 되므로 express기반 라이브러리 Koa로 임시 서버 구축하기로 결정 express보다 Koa가 커뮤니티와 생태계가 부족하지만 기능들이 단..
![]()
💡 레피시 상세 페이지현재 상황 : 페이지 마크업, CSS 스타일링 완료레시피별 단계 화면에 출력하기 완료(mock 데이터)다음 과제 : 레시피 저장하기 기능 추가 어려웠던 점컴포넌트 재사용목표 : RecipeCard 컴포넌트 재사용하기상황 : RecipeCard 컴포넌트는 클릭 이벤트와 CSS가 각 페이지 마다 다름 선택 페이지 : hover시 그림자가 생김, 클릭시 상세페이지로 이동상세 페이지 : hover시 그림자가 없음, 클릭시 반응 처리 없음분석:이벤트는 props를 이용해서 조건문으로 처리하면될 것 같은데 CSS에 조건을 걸어서 적용하는 방법을 모르겠다.해결법조건부 스타일링을 사용한다. isDetail 이라는 스타일 props를 내려받고 해당 값에 따라 CSS를 다르게 적용시킨다. 발생한 ..
![]()
기능명세서에 대한 개념과 작성하는 방법이 궁금하다면 아래 링크를 확인해 주세요 https://neuri.tistory.com/entry/사이드-프로젝트-3편-기능명세서-작성하기-Notion [기능명세서] 기능명세서 개념 및 중요성 기능명세서 (Functional Specification) 아이디어를 정리했으면 서비스로 표현해야겠죠? 서비스로 표현하기 전에 먼저 가능한 기능인지 점검해야 합니다. 💡 기능명세서란? 구현하고자 하는 서비스의 neuri.tistory.com 저번에 와이어프레임 작성하고 오늘 바로 프로젝트 초기세팅에 들어가려고 했으나 기능에 대한 완벽한 정리를 해놔야 마음이 편할 것 같아서 기능명세서를 작성하게 되었습니다. 제가 저번에 올렸던 와이어프레임을 기반으로 화면마다 들어가야 하는 기능들..
