본문 바로가기

2024/TIL8

[TanStackQuery] ReactQuery 개념 정리 React Query란? • 리액트에서 복잡한 데이터 상태 및 비동기 작업 관리를 간편하게 처리할 수 있는 기능을 제공하는 라이브러리• 데이터 캐싱, 리패칭, 뮤테이션 등과 같은 복잡한 작업들을 편하게 수행할 수 있게 해줌• 자동으로 데이터를 캐싱하여 네트워크 요청을 최소화함• 실시간 동기화를 지원하여 데이터가 변경될 때 자동으로 새로운 데이터를 업데이트함• 쿼리를 통해 서버 요청을 효과적으로 관리할 수 있음(중복 요청 방지, 요청 취소, 재시도)• 성숙한 생태계를 가지고 있고, 타입스크립트를 지원하고, Next.js와의 통합이 잘 되어 있으며, 비동기 작업 관리에 매우 편리함 React Query 주요 기능• 데이터 가져오기와 캐싱: useQuery 함수를 사용 하여 데이터 불러오기, 자동 캐싱, 중복.. 2024. 10. 20.
[Firebase] Auth, Store 사용하기 Firebase 설치yarn add firebase React 앱에서 Firebase 초기화import firebase from 'firebase/app'const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_MESSAGING_SENTER_ID, appId: process.env.REACT_APP_ID,};f.. 2024. 9. 25.
[AWS TechCamp] AWS 서버리스로 서버 고민 없이 웹 애플리케이션 구축하기 Intro개인 프로젝트를 하면서 AWS를 사용해보고 싶다는 생각에 공부해보려고 알아보던 중 테크캠프를 한다는 소식을 접하게 되었다. 서버리스로 웹 서비스 구현하는 2개의 과정이 있었고 전부 신청해서 들어보기로 마음먹었다. 첫날 들었던 건 4가지의 aws 서비스를 연계해서 서버리스로 웹서비스를 구현하는 것이었다. 알아야 하는 것은 s3, API Gateway, Lambda함수, DynamoDB 서비스이고 각각 웹, api, 서버 동작 기능, DB와 관련된 서비스들이었다.  1. DB 만들기구현하는 순서가 평소의 프론트엔드 구현 과정과 사뭇 달라서 흥미로웠다. 먼저 DB를 생성하고 테이블을 만들어 둔 뒤에 기능에서 호출해서 사용하려고 한다는 설명을 들었다. 여기에서 주의사항은 앞으로 설정하는 서비스들과 지역.. 2024. 9. 4.
[CSS] BEM(Block, Element, Modifier) 모델 BEM(Block, Element, Modifier) 모델은 CSS 클래스 네이밍을 체계적으로 관리하기 위한 방법론입니다. 이 모델은 CSS 코드를 구조화하고, 일관성 있게 유지하기 위해 고안된 것으로, 대규모 프로젝트에서 특히 유용합니다.BEM 모델의 핵심 개념1. Block (블록).menu { /* Block */ }블록은 독립적이고 재사용 가능한 UI 구성 요소입니다. 블록은 의미적으로 자율적이며, 다른 블록에 의존하지 않는 개별적인 기능을 수행합니다.예를 들어, 페이지의 헤더, 버튼, 메뉴, 폼 등의 UI 구성 요소가 블록에 해당됩니다.블록은 프로젝트 내에서 여러 번 재사용될 수 있으며, 다른 블록과 결합하여 복잡한 UI를 구성할 수 있습니다.2. Element (엘리먼트).menu__item .. 2024. 8. 29.
[독서] 선물받은 「나는 네이버 프런트엔드 개발자입니다」 책 읽기 이 책을 읽게 된 이유 솔직히 이야기 하면 나는 기술서적 말고 에세이같은 책은 잘 읽지 않는다. 그래서 이런 종류의 책을 살 생각은 한번도 안했던 것 같다. 이 책을 읽게 된 이유는 인턴을 하던 회사에서 CTO님이 인턴 끝날 때 선물해주셨기 때문이다. 원래는 클린코드를 주려고 하셨던 것 같지만 그 책은 이미 있어서 있다고 말씀드렸더니 고민끝에 주셨던 책이라서 흥미가 생겼다. 인턴이 끝날 때 많은 생각이 들었는데 그 중 가장 많이 든 생각은 프론트엔드 개발자로 일할 수 있을까? 사실은 적성에 안맞는데 오기로 버티는건가 하는 생각이었다. 시장이 안좋고 신입을 안뽑는 상황은 사실 예전부터 계속 있었는데 그 핑계로 내가 내 상태를 객관적으로 못보고 있나 하는 생각이 들었다. 이 책을 주실 때 하셨던 이야기가 지.. 2024. 8. 23.
[cs] Observer Pattern 왜 알아야 할까? 정보처리기사 준비하기 전 나는 옵저버를 사용한 적이 있지만 무엇인지 제대로 모른채 사용했었다. 사용하면 왜 좋은지, 사용하지 않으면 무슨 문제가 생길 수 있는지에 대해 큰 고민 없이 사용하라는 말에 무지성으로 코딩했었다. 그러다가 정보처리기사 시험 준비를 하면서 GoF의 무수히 많은 디자인 패턴을 보며 기가 질림과 동시에 익숙한 단어들을 발견하게 됐는데 그 중하나가 옵저버 패턴이었다. 프론트 개발자가 Observer Pattern을 알아야 하는 이유는 뭘까?  프론트엔드 개발에서는 유저와의 직접적인 상호작용이 많다. 유저의 액션 하나하나에 민감하게 반응하고 그 데이터를 효율적으로 관리하는 것은 필수이다. 예를 들어, 사용자가 버튼을 클릭하면 UI가 즉시 업데이트 되어야 하고, 입력 폼의 데이터가 실시간으.. 2024. 7. 11.
[React] 로컬 스토리지를 사용한 데이터 캐싱 문제개요상품 리스트 페이지에서 상품을 클릭해 상세 페이지로 이동 후, 뒤로가기 버튼을 눌렀을 때 페이지가 새로고침되면서 리스트의 상단으로 이동하기 때문에 UX가 떨어진다는 피드백을 받음.페이지에 카테고리와 필터가 중복으로 적용되고 있고 상품 데이터의 양이 많아 서버로부터 많은 리소스를 받아와야 함.위치값 사용의 문제화면의 높이값을 저장했다가 불러와서 로드해주는 방법을 사용했지만 새로고침이 되고 그 위치까지 자동으로 스크롤 되는 액션이 발생함위치까지 빠르게 이동하면서 그 사이의 데이터를 빠르게 받아와 보여주는 과정에서 많은 리소스가 낭비됨기획자의 요구사항새로고침 없이 이전 리스트 화면을 보여주기를 원함.현재는 페이지 위치값을 넘겨서 스크롤하는 방식으로 구현됨.런칭이 임박했고, 런칭 후 이벤트 때문에 유저.. 2024. 7. 1.
[React] 쉽지 않은 유효성 검사(Debouncing, Throttling) 1. 유효성 검사유효성 검사(Validation)는 입력된 데이터나 정보가 특정 조건이나 규칙에 부합하는지를 확인하는 과정입니다. 이는 데이터의 정확성과 일관성을 보장하기 위해 중요하며, 다양한 분야에서 사용됩니다. 유효성 검사는 주로 입력된 데이터가 예상된 형식과 범위 내에 있는지 확인하는 것을 목표로 합니다.주요 유효성 검사 종류형식 유효성 검사(Format Validation)데이터의 형식이 올바른지 확인합니다. 예를 들어, 이메일 주소 형식이 올바른지, 전화번호가 정해진 형식을 따르는지 등을 검사합니다.범위 유효성 검사(Range Validation)데이터가 특정 범위 내에 있는지 확인합니다. 예를 들어, 나이가 0 이상 120 이하인지, 점수가 0점에서 100점 사이인지 등을 검사합니다.존재 유.. 2024. 6. 23.

티스토리툴바