전체 글 54

Codeit Sprint 11기, 지난 6개월 동안

이전 직장을 그만두고 프론트엔드 개발자로 전향하는 것은 큰 결심이 필요했다. 개발자 취업이 어렵다는 것은 이미 잘 알고 있었고, 이전 직장에서 본 수많은 지원자를 보며 경쟁이 얼마나 치열한지도 실감하고 있었다. 하지만 더 늦기 전에 도전하지 않으면 나중에는 더욱 어렵게 느껴질 것 같았고 무엇보다도 개발에 대한 호기심과 궁금증이 컸던 것 같다.처음 웹 퍼블리셔를 준비할 때부터 프론트엔드 개발자가 되는 것이 최종 목표였다. 그러나 실무에서 퍼블리싱 업무를 하다 보니 개발과 점점 멀어지는 듯한 느낌을 받았고, "퍼블리싱과 개발은 다르다"는 이야기도 종종 들었다. 그래서 막연한 불안감이 있었고, 정말 내가 프론트엔드 개발자로 전향을 할 수 있을지 의문이 들었다. 그럼에도 불구하고 도전하기로 마음먹은 이유는 지금..

Front-End 2025.03.07

[Weekly Paper] 서버 상태와 클라이언트 상태의 차이

1️⃣ React Query가 만들어진 이유와 이점React Query는 서버 상태 관리의 복잡성을 줄이기 위해 만들어졌습니다. React의 기본 상태 관리 방식은 클라이언트 상태를 관리하는데 적합하지만, 서버 상태를 관리할때 아래의 문제들이 발생합니다. 데이터 동기화 문제서버 데이터와 UI 간의 동기화를 수동으로 처리해야 합니다. 캐싱과 갱신 문제서버에서 가져온 데이터를 효율적으로 캐싱하고 필요한 경우 새로 고쳐야 합니다. 로딩, 오류 상태 관리의 복잡성데이터 fetching과 관련된 로딩 및 에러 상태를 따로 관리해야 합니다. 의존성 관리여러 쿼리가 서로 의존성을 가지는 경우, 이들의 데이터 흐름을 관리하기 어렵습니다. React Query는 위 문제들을 해결하기 위해 설계된 라이브러리로, 서버 상태..

Weekly Paper 2025.01.09

[React Query] React Query 기초 정리

React Query 개념과 활용법React Query는 React 애플리케이션에서 서버 상태 관리를 간편하고 효율적으로 처리할 수 있게 해주는 라이브러리입니다. 서버 데이터를 가져오고, 캐싱하고, 동기화하며, 업데이트할 때 강력한 기능을 제공합니다.useQuery() Hook`useQuery()`는 데이터를 가져오는데 사용됩니다. 컴포넌트가 마운트되면 `queryFn`에 정의된 함수가 자동으로 실행되어 데이터를 가져옵니다.const { data, isLoading, isError } = useQuery({ queryKey: ['posts', username], queryFn: () => getPostsByUsername(username), staleTime: 60 * 1000, // 60초 동안 fre..

[Weekly Paper] 세션 기반 인증과 토큰 기반 인증 비교

1️⃣ 세션 기반 인증과 토큰 기반 인증을 비교해서 설명해 주세요.세션 기반 인증 작동 방식사용자가 로그인하면 서버에서 사용자의 인증 정보를 확인한 뒤, 고유한 세션 ID를 생성합니다.이 세션 ID는 서버에 저장되고, 사용자에게는 쿠키를 통해 전달됩니다.이후 사용자가 서버에 요청을 보낼 때, 쿠키에 포함된 세션 ID를 통해 서버에서 사용자 정보를 조회하여 인증을 처리합니다. 특징서버 저장소 필요 : 서버는 활성 세션 ID를 저장하고 관리해야 합니다.상태 유지 : 세션 상태는 서버에서 유지되므로 서버는 stateful로 작동합니다.쿠키 의존성 : 세션 ID는 보통 쿠키에 저장됩니다.보안 : 서버에서 세션 데이터를 관리하므로 제어가 쉽지만, 세션 탈취 공격에 취약할 수 있습니다. 장단점서버에서 사용자 상태를..

Weekly Paper 2024.12.05

[GitHub] GitHub Actions 활용하여 이슈 생성 시 브랜치 자동 생성

GitHub Actions 활용하여 이슈 생성 시 브랜치 자동 생성‼️ 이슈 생성하면서 브랜치 자동 생성을 설정하기 위해서는 토큰을 먼저 발급 받아야 합니다. 1. 개인 프로필 Setting → Developer settings → Tokens (classic)2. 토큰 이름과 만료 기간을 설정하고, repo, workflow 체크하고 하단의 Generate token 클릭‼️ 토큰이 생성되면 토큰 값이 노출되는데 다시 확인이 불가하므로, 저장해야 합니다.3. Repositorie → Setting → Secrets and variables → Actions → New repository secret4. 토큰 이름을 입력하고, Secret에 생성한 토큰 값을 넣고 Add secret 클릭‼️ 여기서 토큰..

Git & GitHub 2024.12.05

[GitHub] develop Branch 생성, Default branch 변경

develop Branch 생성, Default branch 변경 1. Repositorie → View all Branches 클릭2. New branch 클릭하고, New branch name에 생성할 브랜치 이름을 입력하여 생성합니다. 3. Repositories → Settings → General → Default branch이미지에 표시된 버튼을 클릭하여 Default branch를 develop 브랜치로 변경합니다. ‼️ 이슈가 자동으로 닫히는 트리거는 PR이 병합되는 브랜치가 기본 브랜치(default branch)일 때만 작동하므로 Default branch를 develop으로 변경합니다.

Git & GitHub 2024.12.05

[Github] Pull Request 규칙 설정하기

Pull Request 규칙 설정하기1. Repositorie → Settings → Branches → Add branch ruleset2. Ruleset Name을 입력하고, Enforcement status를 Active로 설정하고, Target branches에 규칙을 설정할 브랜치를 추가합니다.3. Require a pull request before merging 를 체크하여 병합 전 PR을 요구합니다.Required approvals 로 필요한 승인 수를 설정합니다.Require conversation resolution before merging 를 체크하면 PR의 코드에 리뷰가 달려 대화가 생성되었을 때, 대화를 해결해야 병합이 가능하도록 합니다. (필수 ❌)4. 하단의 Create 버튼..

Git & GitHub 2024.12.05

[Weekly Paper] CORS 에러와 SEO에 대해서

1️⃣ CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.CORS(Cross-Origin Resource Sharing) 에러는 웹 브라우저가 다른 도메인에서 리소스를 요청할 때 발생하는 보안 메커니즘입니다. 브라우저는 동일 출처 정책을 따르며, 이를 통해 스크립트가 다른 출처의 리소스에 무단으로 접근하지 못하도록 제한합니다. 동일 출저 정책 : 웹 사이트의 도메인, 프로토콜, 포트 번호가 모두 같아야 요청을 허용하는 보안 정책. 만약 요청을 받는 서버가 CORS 설정을 통해 특정 도메인의 요청을 허용하지 않는다면, 브라우저는 요청을 차단하고 CORS 에러를 발생시킵니다. CORS 에러에 대한 경험이전 직장에서 개발 서버와 운영 서버 모두 동일한 API 서버를 사용했지만, API 서버가..

Weekly Paper 2024.11.25

[Next.js] Google Fonts 최적화

Next.js에서 Google Fonts를 활용하는 방법많은 웹 사이트에서 Google Fonts를 활용하고 있습니다. Next.js는 Google Fonts를 손쉽게 사용하고 최적화할 수 있는 기능을 제공합니다.Google Fonts 설정하기패키지 import 및 객체 생성// /pages/_app.jsimport { Noto_Sans_KR } from '@next/font/google';const notoSansKR = Noto_Sans_KR({ weight: ['400', '500', '700'], // 사용할 폰트 굵기 설정}); `weight` : 폰트 굵기를 문자열 형태로 지정폰트 적용하기1. 클래스 이름을 사용하여 적용생성된 폰트 객체의 `className` 속성을 활용하여 특정 요소에 폰..

카테고리 없음 2024.11.25