heyday2024 님의 블로그

인증(Authentication)과 인가(Authorization)인증로그인하여 사용자가 등록된 회원인지 확인하는 절차.예: 아이디와 비밀번호를 입력해 로그인 성공 여부를 확인.인가인증된 사용자가 특정 리소스에 접근할 권한이 있는지 확인.예: 마이페이지에서 개인정보를 요청할 때, 해당 리소스에 접근 가능한지 확인.Q&A 예시질문: 유저가 마이페이지에서 개인정보 요청 시 서버는 인증인가요, 인가인가요?답변: 인가유저가 이미 로그인하여 인증된 상태이며, 특정 리소스(개인정보)에 접근 권한이 있는지 확인하는 과정이기 때문.HTTP의 두 가지 주요 특성무상태(Stateless)요청 간에 상태를 유지하지 않음. 이전 요청의 정보를 기억하지 않음.예: 로그인 상태가 자동으로 유지되지 않음.비연결(Connection..

웹 사이트의 쿠키란??쿠키는 웹 서버가 생성하여 사용자의 웹 브라우저에 저장하는 작은 데이터 파일임. 쿠키는 사용자가 웹 사이트를 방문했을 때 특정 정보를 유지하거나, 사용자의 행동을 추적하거나, 맞춤형 서비스를 제공하기 위해 사용됨쿠키는 웹 브라우저에서 미리 정해진 기간 동안 혹은 웹 사이트에서의 사용자 세션 기간 동안 저장되고, 나중에 사용자가 웹 서버에 요청할 때 관련 쿠키가 첨부됨(참고) 근데 왜 쿠키라는 용어를 썼을까??데이터 패킷은 컴퓨터 네트워크에서 정보를 전송하기 위한 형식화된 데이터 블록으로 매직쿠키는 변경되지 않은 상태로 송수신되는 데이터 패킷입니다.웹사이트에서의 쿠키(cookie)는 원래 과자와는 다른 맥락에서 유래되었습니다. 이 이름은 매직 쿠키(magic cookie)라는 데이터 ..

뉴스 피드 프로젝트 오늘 팀원들과 yarn 버전 충돌로 인한 문제로 오랜 시간을 소비하게되었는데, 이 경험을 통해 코드 컨벤션 때 코드 스타일이나 파일 구조 등을 서로 맞추는 것뿐만 아니라 사용할 yarn의 버전 등을 확인하는 것도 중요하다는 것을 깨달았다.프로젝트 시작 전 팀원들과 Yarn 버전을 맞추는 것은 필수.버전 차이에 따른 의존성 문제를 방지하기 위해 반드시 협의 필요.  1. react-markdown기능: Markdown 포맷으로 작성된 텍스트를 HTML로 변환 및 표시.사용 목적:뉴스 피드에서 텍스트 내용을 Markdown 형식으로 작성하여 사용자 친화적인 방식으로 렌더링.지원 기능:헤더, 리스트, 링크 등 기본 Markdown 문법.코드 블록도 렌더링 가능.2. highlight.js기..

1. 클린 코드란?가독성이 높음: 코드를 읽는 사람이 쉽게 이해할 수 있음.유지보수가 용이함: 코드 수정이나 확장이 쉬움.일관성: 코드 스타일과 패턴이 일정함.중복 최소화 (DRY): 같은 코드를 반복하지 않음.2. 클린 코드를 작성하기 위한 원칙의미 있는 이름변수, 함수, 클래스의 이름은 목적이 명확해야 함.✅ getUserInfo()❌ dataProcess()함수는 작게 유지함수는 하나의 책임(Single Responsibility Principle)만 가질 것.✅ calculateDiscount(price)❌ processOrderAndSendEmail(order)중복 코드 제거중복된 코드는 함수로 분리하거나 재사용 가능한 컴포넌트로 작성.✅ function formatDate(date) { .....

CORS란 무엇인가?CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 보안상의 이유로 도메인이 다른 서버에 요청을 보낼 때 적용되는 정책입니다. 즉, CORS는 클라이언트 웹 애플리케이션이 다른 도메인에 있는 리소스와 전하게 상호작용할 수 있도록 합니다.(특히, 서드 파티 API나 리소스를 참조하는 경우 유용합니다!!)동일 출처(Same-Origin) 정책으로 인해, 기본적으로 웹 페이지가 자신과 동일한 출처(origin)에 있는 리소스만 요청할 수 있으며, 다른 출처의 리소스를 요청하려면 그 서버가 CORS 헤더를 통해 이를 허용해야 합니다.왜 CORS가 만들어졌을까??과거에 크로스 사이트 요청 위조(CSRF) 문제 발생.악의적인 웹사이트가 사용자를 속여서 사용자의 권한..

- img 태그를 사용해 이미지를 추가했을 때 기본적으로 브라우저나 특정 CSS로 인해 이미지에 테두리가 생길 수 있음.==> 해결 방법: styled-components에서 img 요소에 background-image 속성을 직접 적용하는 대신, div 요소로 이미지를 감싸서 배경 이미지를 추가하는 방식이 더 적합함. keyframes를 사용한 애니메이션 적용keyframes 정의: keyframes는 CSS 애니메이션의 시작, 중간, 끝 단계들을 정의하는 규칙. 이 규칙을 사용해 요소에 특정 시점에서 다양한 애니메이션을 적용 가능.예시: const bounceAnimation = keyframes` 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40%..

API란 무엇인가?API(애플리케이션 프로그래밍 인터페이스): 애플리케이션이 서로 정보를 교환할 수 있도록 돕는 규칙입니다. API를 통해 소프트웨어 간의 통신이 이루어지며, 웹 API는 클라이언트와 웹 리소스 간의 연결을 돕습니다.REST란 무엇인가?REST(Representational State Transfer): API가 동작하는 방식에 대한 일종의 아키텍처입니다. 원래 복잡한 네트워크 상의 통신을 효율적으로 관리하기 위해 설계되었고, 서버와 클라이언트 간의 통신을 안정적이고 유연하게 만들 수 있습니다.RESTful API의 기본 규칙: 균일한 인터페이스(Uniform Interface)리소스 식별: 요청은 고유한 리소스를 식별해야 합니다. URL을 통해 리소스의 위치를 지정합니다.리소스 표현: ..

JavaScript의 History API는 클라이언트 단에서의 라우팅을 구현할 때 브라우저의 URL을 조작하며 페이지 이동을 관리하는 데 사용됩니다. 특히 싱글 페이지 애플리케이션(SPA)에서 서버 요청 없이도 URL을 변경하고, 현재 페이지를 새로 고침하지 않으면서 페이지 전환이 이루어지도록 만듭니다.클라이언트 단 라우팅에서 주요하게 사용하는 History API 메서드는 pushState(), replaceState(), 그리고 popstate 이벤트입니다.History API 주요 메서드와 이벤트history.pushState(state, title, url)설명: 현재 페이지를 새로고침하지 않고도 새로운 URL을 기록해 히스토리 스택에 추가합니다.사용 용도: 사용자가 다른 페이지로 이동한 것처럼..

BaaSBaaS(Backend as a Service)란?웹과 모바일 앱 개발을 쉽고 빠르게 할 수 있도록 도와주는 클라우드 기반의 백엔드 서비스===> BaaS를 이용하면 복잡한 백엔드 시스템을 직접 관리하지 않아도 되니, 개발자들이 프론트엔드에 더 집중 가능!구성 요소프론트엔드: 사용자가 보고 상호작용 부분(시각적인 부분 담당)백엔드: 서버 측에서 데이터 처리, 사용자 관리, 로직 처리 담당.데이터베이스: 사용자 정보, 게시글 등 모든 데이터를 저장하고 필요할 때 불러오는 저장소==> BaaS는 서버나 보안 문제를 신경쓰지 않고, 프로트 엔드 개발만 할 수 있도록 도움.(  서버 걱정 없이, 개발에 필요한 기능들을 클라우드에서 바로 이용 가능!! ) Firebase: Google이 운영하는 플랫폼으로..

react-router-dom이란?리액트 프로젝트에서 라우팅을 가능하게 하는 라이브러리. 싱글 페이지 애플리케이션(SPA)에서도 여러 페이지 간 이동하는 것처럼 보이게 해줌. yarn add react-router-dom설치 위한 코드 > import React from "react";import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "../pages/Home";import About from "../pages/About";import Contact from "../pages/Contact";import Works from "../pages/Works";const Router = () => { return (..