전체 글125 2차 데모데이 피드백과 반영 2차 데모데이를 진행했다. 본격적인 개발에 들어간 기간이기 때문에 백엔드/프론트엔드 나누어 현재 진행 상황에 대해 발표했다. Webpack을 사용한 프로젝트 환경 세팅 CRA를 사용하지 않고 Webpack을 사용해 프로젝트 환경 세팅을 했다. CRA를 사용하면 우리가 사용하지 않는 기능까지 딸려오기 때문에 우리의 입맛에 맞게 설치하고 구성했다. 미리 Webpack을 사용해하는 방법을 연습해 보고 각자의 방법을 조합해 만들었다. 자세한 내용은 CRA 없이 리액트 세팅하기 참조,,, 디자인 시스템 구축 공통 컴포넌트를 따로 배포하여 디자인 시스템을 구축하였다. chakra를 참고하여 만들었고, 당장 필요한 컴포넌트부터 만들고 본 프로젝트에 붙이는 식으로 작업하였다. 이 디자인 시스템에 대해서는 할 말이 많은.. 2023. 10. 14. 재사용 가능한 컴포넌트 Grid 오류 문제 상황 Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System chakra-ui.com Chakra UI를 보면서 재사용 가능한 컴포넌트를 만들었다. 그중 Grid의 Starting and ending lines를 참고해 row와 column의 시작점과 끝점을 정의했다. gridColumn: col === 'auto' ? 'auto' : `span ${c.. 2023. 9. 18. nvm: command not found nvm을 사용해 node 버전을 낮춰야 하는데 nvm: command not found이라는 오류가 난다. 이때 어떻게 해결해야 하는지 적어보려고 한다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash 위 명령어를 실행하면 .bashrc 파일에 nvm 관련 설정이 추가된다. 입력한 터미널을 닫았다가 다시 키자. source ~/.bashrc 위 명령어를 입력해 변경 사항을 적용한다. 그리고 다음 코드를 입력한다. export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm".. 2023. 9. 8. 프론트엔드 성능개선2 3️⃣ 같은 건 매번 새로 요청하지 않기 CDN을 적용하고, 한 번 요청한 리소스는 CDN 캐시에서 불러와야 한다. GIPHY의 trending API를 Search 페이지에 들어올 때마다 새로 요청하지 않아야 한다. 도구 CloudFront Chrome DevTools > Network WebPageTest 키워드 CDN HTTP Cache Cache Policy memoization 캐시란? 캐시란 어떠한 데이터를 임시 저장하는 장소를 말한다. 만약 서버로부터 리소스를 받기 위해 API 통신을 한다고 가정해 보자. 이미 존재하는 데이터를 요청하는 것은 불필요한 요청이다. 이 경우 서버의 부하를 높이고 웹 성능이 저하되는 문제가 발생한다. 캐싱은 리소스의 복사본을 저장하고 있다가 요청 시 해당 복사본을.. 2023. 9. 6. 프론트엔드 성능개선 1 개선 전 이번 과제는 움짤을 볼 수 있는 'memegle' 사이트 개선하기이다. 깃허브 페이지 배포 후 라이트하우스로 성능을 측정하였다. 배포 ... 그전에 개념 S3란? Simple Storage Service로, AWS에서 제공하는 인터넷 스토리지 서비스이다. S3를 사용하면 데이터를 안전하게 저장하고 필요할 때 언제든지 접근할 수 있다. S3의 장점 ✦ 확장성 무제한으로 확장 가능한 객체를 저장할 수 있다. ✦ 내구성 추후 어떤 데이터가 손상되더라도, 복제본을 통해 내구성을 높일 수 있다. 하지만, 내부 복제가 모두 완료되지 않은 상태라면 S3는 각각 다른 객체로 요청에 대해 응답해 사용자별로 받은 응답 결과가 다를 수 있다. S3 버킷은 내부 복제를 통해 안정적으로 보관을 제공한다. ✦ 보안 암호.. 2023. 9. 5. 1차 데모데이 피드백과 반영 1차 데모데이를 진행했다. 전체적인 프로젝트에 대한 설명과 진행했던 내용, 앞으로 진행할 내용에 대해 발표했다. 프로젝트 설명 프로젝트 배경 어떻게 프로젝트가 탄생하게 되었는지, 왜 필요한지에 대해 정리했다. 현재 외식 물가가 비싸지면서 많은 대학생, 직장인들이 편의점 이용이 많아졌다는 것을 도표로 보여주고 편의점 리뷰는 여러 플랫폼에 나뉘어 있어 한눈에 보기 어렵다는 것을 어필했다. 따라서, 편의점을 이용하는 사람들이 리뷰를 편하게 작성하고 확인할 수 있는 것을 목표로 삼았다. 페르소나 우리 편의점 서비스를 사용할 것 같은 이용자를 크게 2가지로 나누어 정의했다. 편의점 서비스를 통해 새로운 음식에 도전하고 싶은 '눈팅러'와 정보를 올리며 사람들의 반응을 즐기는 '편진러'로 나누어 어떤 사용자들이 관심.. 2023. 8. 30. 이전 1 2 3 4 5 6 ··· 21 다음
