이롭게 현명하게

목차 인증(Authentication)과 인가(Authorization)로그인 상태 유지하기세션 방식 이해하기토큰 방식JWT 구조세션 vs JWT 비교JWT의 한계와 보완 방법(Refresh Token)정리 [인증(Authentication)과 인가(Authorization)]로그인 기능을 구현할 때 단순히 데이터베이스에 있는 내용과 일치하면 로그인이 가능하게 구현하였다. 하지만 이 방식은 보안상 취약하다.사용자가 입력한 정보로 데이터베이스에서 필드를 찾는 방식은 사용자의 인증 정보를 안전하게 처리하지 못할 뿐 아니라 로그인 상태를 유지하는 데도 한계가 있다. 이러한 기본적인 로그인 구현을 넘어서 마주한 문제는 안전하게 로그인 상태를 유지하는 것이다.단순히 사용자 인증에 성공하는 것만으로는 충분하지 않..

목차 들어가며아토믹 디자인 패턴이란?아토믹 디자인 패턴구조(5단계)아토믹 디자인 패턴의 문제점아토믹 디자인 패턴의 장단점아토믹 디자인 패턴 예시마무리 [들어가며]프론트엔드 멘토링을 하면서 멘토링 프로젝트를 진행하게 되었다.프로젝트를 진행하면서 협업 효율성과 유지보수성을 높이기 위해 디자인 패턴을 도입하게 되었다.컴포넌트 구조를 명확히 정의하고 역할과 복잡도에 따라 체계적으로 분리할 수 있다는 점, 그리고 일관된 UI를 빠르게 구현할 수 있다는 점에서 아토믹 디자인 패턴을 선택하게 되었다. [아토믹 디자인 패턴(Atomic Design Pattern)이란?]프로젝트가 점점 커지면서 유지보수가 어려워지거나 코드가 복잡해지는 경우가 발생하기도 하였다.페이지마다 폰트 크기, 색상, 테두리 스타일, 여백 등 ..

목차 패키지 매니저가 필요한 이유패키지 매니저란?패키지 매니저의 동작 원리Link 방식에 따른 차이npm, yarn, pnpm 한눈에 비교왜 여러 패키지 매니저가 존재할까?정리 [패키지 매니저가 필요한 이유]패키지 매니저는 프로젝트에서 라이브러리, 프레임워크, 모듈 등의 패키지를 관리하는 도구다.필요한 패키지를 설치, 업데이트, 삭제, 설정할 수 있도록 도와준다.자바스크립트에서는 npm, yarn, pnpm 등이 대표적이다. 문제 상황 : 경로만 쓰면 버전이 모호하다.자바스크립트/타입스크립트에서 외부 라이브러리를 가져올 때 개발자는 'react'와 '@toass/utils'처럼 간단히 라이브러리 이름만 작성한다.import React from 'react';import { sum } from '@toss..

목차 객체 속성 접근 시 발생하는 문제옵셔널 체이닝(Optional Chaining,?.)이란?옵셔널 체이닝 사용법||와?? 차이점주의할 점정리 [객체 속성 접근 시 발생하는 문제]자바스크립트로 객체를 다루다 보면 깊이 중첩된 속성에 접근해야 하는 상황이 생긴다.이때 중간에 속성이 존재하지 않으면 TypeError가 발생하며 코드 실행이 중단된다.예를 들어 다음과 같은 자바스크립트 객체가 있다.const user = { profile: { name: "홍길동", contact: { email: "hong@example.com", }, address: { city: "서울", zipCode: "06123", } }, orders: [ { i..

목차개발 환경 구성Express 서버에서 MySQL 연결하기API 서버 만들기React에서 API 호출하기 https://devyihyun.tistory.com/62 [DateBase] MySQL 설치하기MySQL 웹사이트 접속 MySQL :: MySQL Community Downloads The world's most popular open source database Contact MySQL | Login | Register dev.mysql.com MySQL Installer for Windows 클릭 64비트 윈도우지만 32비트 MySQL이 잘 설치되고 실행devyihyun.tistory.com [개발 환경 구성]프론트엔드 : 리액트 18백엔드 : expressDB : MySQLReact 환경..

목차들어가며네이버 지도 API 준비하기React 프로젝트에 네이버 지도 연동하기지도에 마커 표시하기구현 시 주의사항 [들어가며]개인 프로젝트로 공공데이터 API를 활용하여 캠핑장 안내 프로젝트를 진행했다.사용자가 캠핑장의 위치를 쉽게 알 수 있게 캠핑장 위츠를 지도에 표시하면 좋을 것 같다는 생각이 들었다.그래서 네이버 지도 API를 사용하여 캠핑장의 위치를 표시할 수 있도록 했다. [네이버 지도 API 준비하기]네이버 클라우드에 로그인을 한다. [바로가기] NAVER CLOUD PLATFORMcloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certificationw..