목록전체 글 (93)

뚝딱햄 탈출기

React-hook-form 적용기 : 공통 컴포넌트 설계 및 상태 동기화 문제 해결

지난달에 제공된 백엔드 서버를 이용해 JWT를 활용한 로그인/회원가입 + CRUD를 구현하는 개인 프로젝트를 진행했다. 각 잡고 회고를 작성하려고 하니 끝도 없이 미루게 되어서, 일단 React-hook-form을 적용한 부분에 대해 기록하려 한다.React-hook-form이란?폼 유효성 검사와 상태 관리를 처리할 수 있게 도와주는 라이브러리이다.처음 사용해봤는데 왜 이제 사용해봤나 싶을 정도로 편리했고, 친절하게 작성된 공식 문서와 많은 레퍼런스 덕에 쉽게 익힐 수 있었다!어디에 적용했냐면...내 프로젝트에는 총 네 개의 폼이 쓰였다.로그인회원가입글 생성글 수정각 폼에 react-hook-form을 적용한 방식과, 버튼만 다른 3) 글 생성 4) 글 수정 폼을 공통 컴포넌트화한 과정을 작성하겠다.1)..
web 2024. 12. 3. 21:06
[React] Infinite Scroll using Intersection Observer API

📌 프로젝트 가이드라인요구 사항1. 하나의 SinglePage에 Intersection Observer API를 이용해 무한스크롤을 구현하세요.2. 로딩 시 로딩 UI가 보여아 합니다.3. 현재 가져온 상품 리스트들의 액수들의 합계를 화면에 보여주세요. (ex. 현재 20개의 상품을 가져온 상태라면 20개 물품의 가격 총 합을 보여줄 것)유의 사항1. 무한스크롤 관련 라이브러리 사용 금지2. 비동기 상태 관리 라이브러리 사용 금지 (tanstack-query 등)제공된 mock data와 호출용 promise 함수const MOCK_DATA: MockData[] = [ { productId: "66e1c1df3594bb65169e0f9b", productName: "Elegant Grani..
web 2024. 10. 29. 21:57
[Git] 로컬 저장소에 원격 브랜치 가져오기, 브랜치 전환/생성/삭제/조회

📌 vs code에서 브랜치를 생성 / 삭제 / 전환 / 조회하는 방법은? vs code에서 github repository를 git clone한 후 local repository에서 작업하며 사용한 명령어들을 정리해보았다.브랜치 목록 보기원격 브랜치와 로컬 브랜치는 별개의 브랜치이기 때문에, 목록을 확인하기 위한 명령어가 다르다.git branch # 로컬 브랜치 확인git remote update # 원격 브랜치 정보 업데이트git branch -r # 원격 브랜치 확인git branch -a # 전체 브랜치 확인 (로컬, 원격)github에서 삭제한 브랜치가 조회된다면?간혹 원격 브랜치를 삭제했을 때, 로컬에서 여전히 조회될 때가 있다.나의 경우에는, github에서 이미 삭제한 브랜치가 git ..
git & github 2024. 8. 10. 20:04
[기술면접대비] CORS, SOP에 대해 알아보자 🧐

요약CORS(Cross-Origin Resource Sharing)는 서로 다른 도메인 간에 리소스 공유를 허용하는 웹 애플리케이션 보안 정책이다. 보안 상의 이유로 브라우저에서는 기본적으로 동일한 출처(프로토콜, 호스트, 포트)에서만 리소스에 접근을 허용하고 다른 출처에서는 보안 상의 이유로 접근을 차단하는 SOP(Same-Origin Policy)가 적용된다.하지만 CORS를 사용하면, 허용된 출처 외의 다른 출처에서도 특정 리소스에 접근할 수 있도록 서버 측에서 설정할 수 있다. 따라서 CORS를 사용하면 다양한 출처에서 리소스를 공유할 수 있으므로, 클라이언트와 서버 간의 커뮤니케이션을 보다 유연하게 구성할 수 있다.🙋‍♀️ SOP에 대해 먼저 알아보자SOP(same origin policy)란..
web 2024. 5. 2. 01:53
[기술면접대비] SPA vs. MPA, CSR vs. SSR, SEO, 정적 페이지와 동적 페이지

요약정적 페이지는 미리 작성된 HTML, CSS 및 JavaScript 파일로 구성되며, 동적 페이지는 서버 측 스크립팅 언어를 사용하여 생성된다.SPA는 하나의 HTML 페이지로 구성되고 JavaScript를 사용하여 동적으로 업데이트되는 반면, MPA는 여러 HTML 페이지로 구성되고 각 페이지는 서버에서 렌더링된다.CSR은 클라이언트 측 JavaScript를 사용하여 페이지를 렌더링하는 기술이고, SSR은 서버 측에서 HTML 페이지를 렌더링하는 기술이다.SPA와 MPAMPA (Multiple Page Application)여러 개의 페이지로 구성된 애플리케이션사용자가 페이지를 요청할 때마다 (= 화면이 전환될 때마다) 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹..
web 2024. 5. 2. 01:53
[기술면접대비] HTTP vs. HTTPS

HTTP vs. HTTPSHTTPS는 TLS 혹은 SSL을 사용하여 기존의 HTTP를 암호화한 프로토콜이다.따라서 HTTP와 HTTPS의 가장 큰 차이점은 데이터의 보안성이다.HTTP 포트 번호: 80, HTTPS 포트 번호: 443HTTPHTTP는 데이터 전송 과정에서 암호화를 하지 않는다.따라서 데이터가 평문으로 전송된다.이는 해커가 데이터를 가로채어 변조나 도용할 수 있는 위험이 있다.따라서, 비밀번호, 계좌번호, 신용카드 정보 등 민감한 정보가 포함된 웹사이트를 HTTP로 전송할 경우 보안상 취약점이 생길 수 있다.HTTPSSSL(Secure Socket Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 데이터를 암호화한다.TLS란 인터넷에서의 정보를 암호..
web 2024. 5. 2. 01:53
이전 Prev 1 2 3 4 ··· 16 Next 다음