반응형 전체 글174 토이 프로젝트 나만의 반려식물 만들기 이전부터 만들어 보고 싶었던!!!! 푸망처럼 나만의 맞춤형 테스트를 만들고 싶었다!예전부터 생각은 했지만 어떤 주제로 할까 계속 고민이 많았다.처음에는 세계문학 책들 중 취향을 찾아서 맞춤형 책들을 추천하는 식으로 하려고 했는데 내가 관련 책들을 많이 안 읽어서 잘 모르기도 하고 데이터 수집해서 기획하기도 번거로워서 계속 미루고만 있었다. (하지만 올해 안에 이 주제로도 꼭 만들어야지) 🌱 이 테스트를 만들게 된 이유그러다 작년부터 함께한 식물 모임에서 기획 아이디어가 떠올랐다.우리 모임은 반려 식물을 키우며 자연과 함께 힐링하는 활동을 중심으로 하는데 모임원들이 어떤 식물을 키울지 고민하는 시간이 꽤 길게 걸린다는 걸 느꼈다. 여기서 만들게 보자고 결심하게 된 이유가 총 세 가지가 있는데, 1️⃣ .. 2025. 2. 16. CORS 와 SOP 개념 정리 1. SOP 동일 출처 정책? ▶ SOP(Same-Origin Policy) 웹브라우저의 보안정책으로, 서로 다른 출처의 리소스 간 데이터 접근을 제한한다.동일 출처란?먼저 출처(Origin): 프로토콜 + 도메인 + 포트로 구성되어 있다. 이 세가지가 동일해야지만 동일 출처이다! ▶ SOP의 역할보안강화 : 동일출처 정책은 위험할 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주는 역할을 수행한다 만약 이런 제약이 없다면 CSRF (Cross-Site Request Forgery) 나 XSS(Cross-Site Scripting)등의 공격에 매우 취약해질 가능성이 생긴다.자동 로그인 예시: 브라우저는 로그인시 발급된 토큰이나 쿠키를 저장한다. 동일한 출처에 재접속 시 이 정보가 자동으로 포.. 2025. 2. 2. [React] 초기로딩속도 줄이기! 최적화 방법 로딩 속도가 3초가 넘어가면 50%이상의 사용자가 떠나며 5초를 넘으면 90%의 사용자가 떠난다는 통계가 있다. 그만큼 초기 렌더링 속도 개선은 중요하다.그런데 지금 회사 내 React 초기 렌더링 속도가 굉장히 느려서 속도 개선이 필요하다고 생각했고 최적화에 대해서도 알아보고 싶었기에 하나도 모르는 상태에서 호기롭게... 도전을 하게되었다. 하나씩 검색하면서 찾아보게 된 여러 최적화 방법들을 정리한 기록들이다. Lighthouse 이용하기여러 블로그들을 돌려보니 lighthouse랑 pageSpeed Insights가 많이 나왔다.Lighthouse는 웹페이지 품질을 개선하는데 도움이 되는 오픈소스 자동화 도구이며 성능, 접근성, 검색엔젠 최적화 등 Lighthouse 툴을 이용해서 웹사이트를 분.. 2025. 1. 19. 2024 개발 회고록 2023년 연말에 썼던 2024년도 목표를 다시 보았다.그 어느 하나 제대로 지킨 게 없는....🥲 이게 맞나사실 회고록을 써야 할지 말아야 할지 고민도 엄청 했다.슬프지만 일단 반성문 같은 회고록을 써야겠다. 이래저래 잘 모르겠지만 일단 고... [ 인강 공부 ]React 인강을 사 놓았지만, 처음부터 끝까지 하나씩 다 봐야겠다고 생각했음에도 필요한 부분만 부분적으로 보았다. 완강을 꼭 해야겠다고 마음먹었지만 다 듣지 못한 것이 아쉽다는 생각이 들었다. 오히려 유튜브에 나와있는 개념 동영상들을 더 열심히 들었었다. 유료 강의를 사놓고 무료 강의들을 들은 게 웃기긴 하지만, 이래저래 나에게 도움이 되었다면 괜찮지 않나 싶다. [ 프로그래밍 책 읽기 ]시작과 동시에 덮어버렸던 모던 자바스크립트 딥다이브... 2025. 1. 5. 코드스플리팅(Code splitting) Code splitting은 왜 하는걸까?웹 애플리케이션은 점점 더 복잡해지고 규모가 커지고 있다. 이런 변화 속에서 애플리케이션의 코드 역시 방대해지고, 모든 코드를 하나의 번들 파일로 묶는 방식은 초기 로딩 속도와 사용자 경험에 있어 한계를 보이게 된다. 이런 문제를 해결하기 위한 기술이 코드스플리팅이다. 자바스크립트 프로젝트 만들 때 모든 코드를 하나의 번들로 묶어서 만들게 되는데 앱이 비교적 간단한 편이면 괜찮지만 프로젝트가 커지면서 전달해야 하는 파일도 커지고, 유저의 브라우저가 파싱(parsing) 해야하는 정보도 많아지기 때문에 퍼포먼스 문제들이 생길 수 밖에 없다. 코드 스플리팅은 애플리케이션의 코드를 더 작은 단위로 나눠 필요한 코드만 로드하고, 나머지 코드는 필요한 순간에 로드하도록 .. 2024. 12. 22. [React] react-hook-form과 zod로 validation 유효성 검사 회사에서 react-hook-form을 쓰는데 zod로 유효성검사를 하는데 할 때마다 헷갈렸던 부분 한번 정리해보려고 한다. React hook formReact Hook Form은 React에서 폼을 관리하기 위한 경량 폼 라이브러리이다. 최소한의 리렌더링과 간결한 API를 통해 폼 상태를 효율적으로 관리할 수 있다. 주요 장점:간단한 API: useForm 훅을 사용하여 폼 상태와 검증 로직을 선언적으로 관리할 수 있음.퍼포먼스 최적화: 입력 필드별로 리렌더링을 최소화하여 성능을 높임.유연한 검증: 사용자 정의 검증 로직 및 다양한 검증 라이브러리와 통합 가능. React Hook Form(RHF)의 다양한 기능들1. resolver역할: 외부 검증 라이브러리(Zod, Yup 등)를 React H.. 2024. 11. 24. 이전 1 2 3 4 5 ··· 29 다음 728x90 반응형
