📝 도입 배경 본 프로젝트 (삐삐:Best Interior)는 인테리어 정보 교환을 위한 커뮤니티로, 고화질의 사진 리소스를 사용하는 작업이 많았고, 서버에서 고용량의 사진 데이터를 받아오는 과정에서 발생 할 수 있는 사용자 불편함을 고려해야 하는 상황이었습니다. 또한, 고화질의 사진 리소스들은 불러오는데 많은 네트워크 비용이 들고, 장애 발생 가능성 또한 고려해야만 했습니다. 이러한 상황을 고려하여, 2가치 최적화 방안을 도입하였습니다. 🔨 최적화 방안 - (1). Pagenation 구현 고용량의 사진 데이터를 받아오면서 발생할 긴 로딩을 방지하기 위해, Pagenation을 구현하였음 각 페이지(쇼룸, 팁)에 12개의 개시글 단위로 Pagenation을 구현하였으며, 이를 통해 리소스가 큰 요청들을..
⚡️ useState는 동기? 비동기? 삐삐 프로젝트를 진행하며, 멘토님과 얘기를 하던 도중 useState는 동기일까 비동기일까에 관련된 내용이 나오게되었다. 단순히 useState는 상태를 관리하는 훅으로만 알고 있었던 나를 반성하며, useState의 정체를 파헤쳐 보도록 할 예정이다. 📌 useState는 비동기 이다! 결론부터 얘기하자면 useState는 비동기 이다. 좀 더 자세히 얘기하자면, 상태를 변경시키는 setter 메소드인 setState가 비동기적으로 동작한다. Q. 리액트는 왜 setState를 통해서만 상태를 변경시키는 걸까? A. 직접 상태값을 변경하지 말아야하는 이유는, 이전 상태값을 바탕으로 업데이트된 상태값을 비교해 리액트가 감지하기 때문이다. 리액트는 가상 DOM(Vir..
📝 배경 본 프로젝트 (삐삐:Best Interior)에서는 인테리어 관련 게시글, 팁관련 게시글을 작성할 수 있으며, 사용자는 댓글과 답글을 작성 할 수 있도록 기획하였다. 여기서 댓글은, 말그대로 게시글의 댓글, 답글은 댓글의 댓글이다. 🚨 문제 상황 - (1). 새로 작성한 댓글의 답글이 작성이 안되는 버그 새로운 댓글을 작성할 경우, 답글작성이 안되는 오류가 발생하였다. 오류: TypeError: Cannot read property 'push' of undefined 하지만, 새로고침을 할경우에는 정상적으로 답글이 작성되는 현상임을 확인하였음 🔍️ 원인 파악 에러 메세지에서 확인이 가능하듯이, 배열이 아닌 undefined에 push를 하려고 해서 발생하는 오류임을 파악 // 수정 전 코드 co..
📝 배경 본 프로젝트 (삐삐:Best Interior)에서는 서버가 클라이언트를 인증하는 방식 중 하나인 JWT를 이용하여 로그인 기능을 구현하기로 함 또한, 토큰은 로컬스토리지에 저장하는 방식을 택했으며, 이렇게 저장된 토큰은 매 요청 헤더에 담아 적절한 인증 과정을 거친 사용자인지 판단하는 인가(Authorization)를 구현함 이를 위해, axios 통신시 interceptors 를 이용하여 헤더에 토큰 정보를 담아 보내는 token.js라는 컴포넌트를 만들었으며, token 컴포넌트를 활용하여 useAxios라는 커스텀훅을 만들어서 통신로직을 추상화하고 재사용성 및 코드 가독성을 향상시키고자 했음 🚨 문제 상황 - (1). api 요청시 헤더에 엑세스토큰을 담아 보냇으나, 403에러 발생 로그인..
📝 배경 프로젝트가 50% 정도 진행되었을때, *S3를 통해 클라이언트 빌드파일을 배포하고 테스트를 진행하였다. 서버는 EC2를 통해 배포하였음 분명 로컬에서 테스트 했을 때에는 api호출이 정상적으로 이루어졌던 상황이었음 * S3 란? Amazon Simple Storage Service(Amazon S3)는 업계 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스입니다. 모든 규모와 업종의 고객은 Amazon S3를 사용하여 데이터 레이크, 웹 사이트, 모바일 애플리케이션, 백업 및 복원, 아카이브, 엔터프라이즈 애플리케이션, IoT 디바이스, 빅 데이터 분석 등 다양한 사용 사례에서 원하는 양의 데이터를 저장하고 보호할 수 있습니다. Amazon S3는 특정 비즈니스, 조..
⚡ UX 란 ? "User experience" encompasses all aspects of the end-user’s interaction with the company, its services, and its products. UX(User experience, 사용자 경험) 위에 내린 정의를 풀이하자면, UX란 사용자가 어떤 시스템이나 서비스, 제품, 서비스 등을 직, 간접적으로 이용하면서 느끼는 총체적인 경험이라고 할 수 있습니다. 예를들어 쇼핑앱에서 과자를 산다고 할때, 과자에 대한 정보가 명확하게 제공 되는지, 결제 과정이 직관적인지, 주문 과정에서 오류가 생겼을때 어떻게 대응하는지와 같은 모든 과정상의 경험이 UX라고 할 수 있습니다. ❗️ 훌륭한 UX를 위한 조건 고객을 번거롭게 하지 ..
📝 기술면접 질문 목록 (JavaScript) Promise의 기능과 필요한 이유에 대해서 설명해 주세요. (React) React의 state와 props에 대해서 설명해 주세요. (HTTP / 네트워크) CSR과 SSR의 차이점에 대해서 설명해 주세요. (웹서버) Same-Origin Policy와 CORS에 대해서 설명해 주세요. 🔒 (JavaScript) Promise의 기능과 필요한 이유에 대해서 설명해 주세요. 🔑 Promise는 자바스크립트에서 네트워크요청, 파일 로딩, 데이터베이스 조회 등과 같은 비동기 작업을 효과적으로 다루기 위한 기능입니다. 이를 통해 비동기 작업의 성공과 실패를 보다 직관적으로 나타내며, 작업의 순서와 관계를 명확하게 표현할 수 있습니다. 🔑 Promise의 필요성 ..
