모모의 IT성장수첩

테스트 코드를 작성하면서 개발하는 방식(TDD, Test-Driven Development)이나 개발 후 테스트를 추가하는 방식은 장점과 단점을 모두 가지고 있습니다. 각각을 살펴보면 다음과 같습니다.장점코드 품질 향상: 테스트 코드를 작성하면 코드가 예상대로 동작하는지 지속적으로 확인할 수 있어 버그를 예방하고, 코드 품질을 높일 수 있습니다. 잘 작성된 테스트는 코드의 신뢰성을 크게 향상시킵니다.리팩토링 용이성: 테스트 코드가 있으면 리팩토링 시 코드를 수정해도 기능이 동일하게 동작하는지 쉽게 검증할 수 있습니다. 리팩토링 과정에서의 실수를 미연에 방지할 수 있어 코드 유지보수가 쉬워집니다.안정적인 코드 배포: 기능을 배포하기 전에 테스트를 통해 버그를 사전에 발견할 수 있어, 배포 후 발생할 수 있..

성장일지 2024. 10. 4. 21:50

Storybook을 사용하면 React와 같은 컴포넌트 기반 UI 라이브러리를 개발할 때 많은 이점들을 기대할 수 있습니다. 주요 장점은 다음과 같습니다:컴포넌트 중심 개발: Storybook은 각 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공합니다. 이렇게 하면 애플리케이션 전체를 실행하지 않고도 컴포넌트의 다양한 상태와 변형을 쉽게 확인할 수 있어 개발 효율이 높아집니다.시각적인 테스트: UI 컴포넌트를 브라우저에서 직접 확인하고 다양한 상태를 시각적으로 테스트할 수 있습니다. 컴포넌트의 다양한 props와 상태 변화를 실시간으로 확인하면서 개발이 가능합니다.문서화: Storybook은 자동으로 컴포넌트를 문서화하는 도구를 제공합니다. 각 컴포넌트의 사용 예시와 설명을 함께 관리할 수 ..

성장일지 2024. 10. 4. 21:47

서버 상태와 클라이언트 상태는 웹 애플리케이션 개발에서 관리하는 두 가지 주요 상태 유형입니다. 이 둘은 역할과 관리 방식에서 중요한 차이가 있습니다.1. 서버 상태 (Server State)서버 상태는 외부 서버에서 제공하는 데이터나 리소스에 대한 상태를 의미합니다. 이 상태는 클라이언트 애플리케이션이 직접 관리하지 않고 서버로부터 받아오는 정보를 사용합니다. 예를 들어, 데이터베이스에 저장된 사용자 정보나 API로부터 받아오는 상품 목록 등이 서버 상태에 해당합니다.서버 상태의 특징:외부 소스 의존: 서버 상태는 API 요청을 통해 외부 서버에서 가져와야 하므로, 애플리케이션이 이 상태를 직접 소유하지 않습니다.비동기 처리 필요: 서버 상태는 보통 네트워크 요청을 통해 받아오기 때문에, 로딩 상태, ..

성장일지 2024. 9. 25. 10:08

React Query는 주로 서버 상태 관리를 간편하고 효율적으로 처리하기 위해 만들어졌습니다. React 애플리케이션에서 데이터 페칭, 캐싱, 동기화 및 업데이트가 필요할 때 이 라이브러리를 사용하면 많은 이점을 얻을 수 있습니다. 이를 사용하게 된 이유와 장점을 설명하겠습니다.React Query가 만들어진 이유:React에서 API 요청이나 서버 상태 관리가 복잡해질 수 있는데, 특히 다음과 같은 상황에서 문제가 발생합니다:데이터 페칭 중 로딩 상태 관리: 데이터를 요청하는 동안 로딩 상태를 관리해야 하는데, 이를 수동으로 관리하려면 반복적인 코드가 필요합니다.캐싱과 재검증: 페칭된 데이터를 캐시하고, 필요한 경우 이를 최신 상태로 동기화하는 일은 복잡하고 오류가 발생하기 쉽습니다.데이터 갱신: 데..

성장일지 2024. 9. 25. 10:05

두번째 프로젝트 회고를 기록해본다.이번 프로젝트는 처음부터 끝까지 혼자서다 만들어보았다. 중간에 몸이 좋지 않아서팀프로젝트가 아닌 개인 프로젝트로 돌려달라고 요청하였다. 오히려 할일이 많았지만,위기를 기회로 삼아 혼자서 다 만들고 배포하면서기능 공부를 더 할 수 있었다고생각한다.시현 영상 우선 시현 영상이다. 사실 전체적으로 코드 부터 자연스런 ui 전환이 아쉽다. 하지만 토스트 기능 / context api / access token 을 통한유저관리를 적용하면서로직에 대한 이해도를 올릴 수 있었던 프로젝트이다.   서비스 소개 및 선정 이유 UI를 그리는 페이지가 가장 단순했다.단기간에 혼자서 할 수 있는 난이도를 선택해야 했기에 가장무난한 기능이 있는 걸로 선택 했다.  서비스 소개 'Linkbra..

성장일지 2024. 9. 19. 13:17

구글 소셜 로그인은 OAuth 2.0 프로토콜의 Authorization Code Grant Flow를 사용하며, OpenID Connect(OIDC)를 통해 사용자 인증을 수행합니다. 이 과정에서 유저, 프론트엔드, 백엔드, 그리고 구글(OpenID Connect 프로바이더) 사이에 여러 단계의 상호작용이 이루어집니다. 각 단계를 상세히 설명하겠습니다.1. 유저가 로그인 요청유저 행동:사용자가 웹 애플리케이션의 "구글로 로그인" 버튼을 클릭합니다.2. 프론트엔드에서 구글로 인증 요청프론트엔드에서 구글로 리디렉션:프론트엔드는 사용자를 구글의 인증 서버로 리디렉트합니다. 이때 포함되는 주요 파라미터는 다음과 같습니다:client_id: 구글 개발자 콘솔에서 발급받은 클라이언트 ID.redirect_uri:..

성장일지 2024. 8. 22. 18:45

세션 기반 인증과 토큰 기반 인증은 모두 웹 애플리케이션에서 사용자를 인증하고 보호하는 방법이지만, 작동 방식과 장단점에서 차이가 있습니다. 두 방식을 비교하면서 설명하겠습니다.1. 세션 기반 인증 (Session-based Authentication)작동 방식:서버 상태 유지: 세션 기반 인증에서는 사용자가 로그인하면 서버는 세션 ID를 생성하고, 이를 서버의 메모리나 데이터베이스에 저장합니다. 이 세션 ID는 클라이언트(브라우저) 측의 쿠키에 저장됩니다.요청 처리: 사용자가 서버에 요청을 보낼 때마다 이 세션 ID가 쿠키를 통해 서버로 전송됩니다. 서버는 이 세션 ID를 조회하여 사용자의 신원을 확인하고, 적절한 응답을 제공합니다.세션 만료: 서버에서 세션의 유효 기간을 설정하며, 일정 시간이 지나면..

성장일지 2024. 8. 22. 18:45

SEO(Search Engine Optimization)란?SEO(Search Engine Optimization)는 검색 엔진 최적화를 의미하며, 웹사이트나 웹 페이지가 검색 엔진 결과 페이지(SERP)에서 더 높은 순위를 차지하도록 최적화하는 작업을 말합니다. SEO는 웹사이트의 가시성을 높여 더 많은 트래픽을 유도하고, 궁극적으로 비즈니스 목표를 달성하는 데 중요한 역할을 합니다.검색 엔진(예: 구글, 네이버, 빙)은 웹 크롤러를 통해 웹사이트의 콘텐츠를 분석하고, 특정 검색어(키워드)에 대한 관련성과 품질에 따라 순위를 매깁니다. SEO는 이 과정에서 웹사이트의 가시성을 최적화하기 위해 다양한 전략과 기술을 사용하는 것입니다.SEO 개선을 위한 주요 작업SEO를 개선하기 위한 작업은 크게 온페이지..

성장일지 2024. 8. 22. 18:44

CORS(Cross-Origin Resource Sharing) 에러란?CORS(Cross-Origin Resource Sharing) 에러는 브라우저가 보안상의 이유로 다른 출처(도메인, 프로토콜, 포트)에서 리소스를 요청할 때 발생하는 문제입니다. 예를 들어, http://example.com에서 실행 중인 웹 애플리케이션이 http://api.example2.com에서 데이터를 가져오려고 할 때, 이 요청은 다른 출처에서 발생한 것이므로 기본적으로 브라우저는 이를 허용하지 않습니다.이러한 제약은 보안을 위해 설계된 것으로, 악성 웹 페이지가 사용자의 브라우저를 통해 다른 출처에서 정보를 무단으로 가져오거나 서버와 상호작용하는 것을 방지하기 위한 것입니다.CORS 에러의 원인CORS 에러는 서버가 올..

성장일지 2024. 8. 22. 18:44

Next.js에서 서버 사이드 렌더링(SSR)과 하이드레이션(hydration)은 중요한 개념으로, 서버와 클라이언트 간의 렌더링 과정과 상호작용을 다룹니다. 각각의 개념을 자세히 살펴보겠습니다.1. 서버 사이드 렌더링 (SSR)서버 사이드 렌더링은 서버에서 HTML을 미리 렌더링하여 클라이언트에 전달하는 방식입니다. 이를 통해 페이지의 초기 로딩 속도를 개선하고, SEO 최적화에 유리합니다.SSR 실행 과정요청 수신: 사용자가 웹 페이지를 요청하면, 클라이언트(브라우저)는 Next.js 서버에 HTTP 요청을 보냅니다.페이지 데이터 준비: Next.js 서버는 페이지를 렌더링하기 전에 필요한 데이터를 준비합니다. 이 과정에서 getServerSideProps 함수를 사용하여 데이터 fetch 작업을 수..

성장일지 2024. 8. 10. 04:37

리액트(React)와 Next.js를 비교할 때, Next.js를 사용하는 이유는 여러 가지가 있습니다. Next.js는 리액트의 기능을 확장하고, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등 여러 기능을 추가하여 더 강력한 웹 애플리케이션을 구축할 수 있게 합니다. 주요 이유는 다음과 같습니다: 1. 서버 사이드 렌더링 (SSR)리액트만 사용할 때: 리액트는 클라이언트 사이드 렌더링(CSR)만 지원합니다. 즉, 페이지의 초기 렌더링이 클라이언트에서 이루어지며, 이는 검색 엔진 최적화(SEO)와 초기 로딩 성능에 영향을 미칠 수 있습니다.Next.js 사용 시: Next.js는 서버 사이드 렌더링을 지원하여 페이지를 서버에서 미리 렌더링하고, 클라이언트에 HTML을 전달합..

성장일지 2024. 8. 10. 04:36

TypeScript의 동작 원리는 주로 컴파일러(tsc)와 관련된 몇 가지 핵심 단계로 설명할 수 있습니다. 이 과정에서 TypeScript 코드는 JavaScript로 변환되고, 정적 타입 검사가 수행됩니다. 아래에 TypeScript의 동작 원리를 단계별로 설명하겠습니다.  1. 작성 단계 (Authoring)TypeScript는 .ts 또는 .tsx 확장자를 사용하는 파일로 작성됩니다. 이 파일은 JavaScript와 거의 동일한 구문을 사용하지만, 추가적으로 타입 주석(type annotations)을 포함할 수 있습니다.// example.tsfunction greet(name: string): string { return `Hello, ${name}!`;}const user: string =..

성장일지 2024. 8. 3. 02:12