ES6 화살표 함수 (Arrow Function)ES6에서 도입된 화살표 함수는 기존 함수와 바인딩 방식에서 차이가 있다. this를 자동으로 바인딩하여 클래스 내부에서 bind(this)를 사용할 필요가 없음 React 컴포넌트React에서 UI를 구성하는 독립적이고 재사용 가능한 코드 블록컴포넌트는 HTML, CSS, JavaScript를 조합하여 화면을 구성하는 역할을 함컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 방식으로 정의할 수 있음함수형 컴포넌트간결하고 직관적인 형태로 작성 가능useState, useEffect와 같은 React Hook을 활용하여 상태 및 생명주기 관리 가능const MyComponent = ({ name }) => { return Hello, {name}!; ..
전체 글
MVC 패턴 vs MV 패턴일반적인 프레임워크(예: Angular, Spring 등)는 MVC(Model-View-Controller) 아키텍처를 사용.하지만 React는 MV(Model-View)만 사용하며, View(UI)만 신경 쓰도록 설계됨.규모가 커질수록 코드가 복잡해지고, 관리하지 않으면 성능 저하가 발생할 수 있음.React의 철학React는 "UI가 어떻게 생길지"만 고민하면 되도록 설계됨.하지만 이러한 방식은 CPU 점유율이 증가할 가능성이 있음.이유는 DOM 업데이트가 느리기 때문. Virtual DOMDOM은 왜 느릴까?DOM 자체는 빠름. 하지만 CSS, JS 재계산 과정이 느릴 수 있음.기존 방식: 데이터를 업데이트하면 전체 DOM을 다시 렌더링 → 성능 저하.Virtual DOM..
컴포넌트재사용 가능한 디자인 요소버튼, 네비게이션 바 등 반복적으로 사용되는 UI 요소를 컴포넌트로 생성 가능원본 컴포넌트를 수정하면 모든 인스턴스에도 자동 반영됨Ctrl + Alt + K인스턴스컴포넌트의 복사본(자식 요소)으로 원본과 연동됨원본 컴포넌트의 변경 사항이 인스턴스에 자동 적용됨Detach러 인스턴스와 원본 컴포넌트의 연동을 끊을 수 있음 >> 더 이상 원본 컴포넌트의 변경이 적용되지 않음배리언트 (Variant)컴포넌트의 다양한 상태를 관리하는 기능버튼(기본/호버/비활성화)이나 아이콘(활성/비활성) 같은 상태를 한 곳에서 관리 가능Properties에서 다양한 속성을 추가해 쉽게 변경 가능인터랙션 (Interaction)사용자 인터랙션(클릭, 호버 등)에 따른 동작을 설정하는 기능Proto..
UI/UX를 배워야 하는 이유활성 사용자 수와 평균 실행 횟수가 높은 기업일수록 수익성이 높고, 결국 더 큰 기업으로 성장할 가능성이 크다.하지만 서비스가 사용하기 불편하다면 사용자는 이탈할 것이고, 성공적인 비즈니스는 어렵다.따라서 UI/UX는 사용자 경험을 극대화하여 서비스의 성장을 돕는 핵심 요소다.피그마그룹, 프레임, 컴포넌트의 차이그룹 (Ctrl + G)단순 묶음 (레이어 정리용)내부 요소들이 독립적으로 움직일 수 있음프레임 (Ctrl + Alt + G)독립적인 영역 (화면 크기, 스크롤 등 제어 가능)화면/디자인 시스템을 만들 때 유용컴포넌트 (Ctrl + Alt + K)재사용 가능한 요소수정 시 연결된 모든 인스턴스에 반영됨컬러 토큰디자인 시스템에서 색상을 변수처럼 관리하는 것컬러 토큰을 사..
사용자에게 편리하고 유용한 환경을 제공하기 위해단순한 서비스를 넘어 사업으로, 문화로 확장하기 위해 CX : 고객이 제품이나 서비스를 인지, 탐색, 이용하는 전 과정에서의 경험을 설계하고 최적화 하는 작업아이폰 광고를 보고, 웹페이지를 봐서 아이폰 구매, 앱 이용CX > UI/UX UX사용자 경험 중심적인 관점에서 앱 또는 웹을 구상하고 설계하는 모든 단계UI실제로 사용자가 접하게 되는 부분. 즉, 시각적으로 드러나는 것들을 디자인하는 것 색의 역할⭐1. 브랜드 아이덴티티 각인2. 마케팅 관점에서 클릭을 유도(할인 정보)3. 방향을 제시(구매하기 버튼) 1. 주색 (Primary Color)UI 내에서 가장 메인으로 사용되는 색상으로 화면 내 클릭을 유도하는 버튼에 많이 사용된다. 주로 브랜드의 고유한..
이미지 저장 방식 변경문제상황기존에는 이미지 파일을 서버 파일 시스템에 저장하고, DB에는 이미지 경로를 저장하는 방식으로 구현.하지만 협업을 진행하면서 각자의 서버 파일 시스템에 이미지가 저장되는 상황에서 동기화 문제가 발생.DB에는 이미지 경로가 저장되어 있지만 서버 로컬 파일 시스템에는 해당 이미지가 없는 경우가 있어 이미지를 가져오지 못하는 상황 발생.해결방안동기화를 위해 백엔드 서버를 클라우드에 배포하여 사용하거나하나의 로컬 서버를 여러 사람이 공동으로 사용하는 방식으로 해결 사용자 인증, 로그인 유효시간 및 토큰 관리사용자 인증 및 토큰 관리백엔드는 Authorization 헤더를 통해 전달된 토큰을 검사하여 사용자의 로그인 상태를 관리.로그인 후, login 테이블에 email, token,..
Controller와 RestController의 차이점Controller: Controller에서는 리턴이 템플릿 이름RestController: RestController에서는 리턴이 컨텐츠가 됩니다. 반환값이 그대로 HTTP 응답의 본문으로 전달됨.카카오 로그인 과정사용자가 카카오 로그인 버튼을 클릭하면 카카오 로그인 API에 요청이 가고, 리다이렉트 링크가 반환이 리다이렉트 링크를 통해 카카오 로그인 화면으로 이동카카오 로그인 화면에서 아이디와 비밀번호를 입력하여 로그인카카오는 사용자의 정보 동의를 요청. 사용자가 동의를 하면, 카카오는 동의코드를 제공하고 이를 콜백 URL로 전달백엔드는 제공된 동의코드를 사용하여 카카오 서버에 액세스 토큰을 요청카카오는 액세스 토큰을 반환액세스 토큰을 이용해 카..
기존의 회원가입에서는 이메일 형식과 패스워드 유효성 검사는 했지만, 이메일 및 닉네임 중복 검사 기능이 없었음. 이메일이 프라이머리 키이고, 닉네임이 유니크한 필드로 설정되어 있는 점을 고려하여 중복 검사를 추가하게 됨1. MemberDao에 중복 검사 메서드 추가DB에서 이메일과 닉네임의 중복 여부를 확인하기 위해 MemberDao 인터페이스에 isEmailExists와 isNicknameExists 메서드를 추가@Mapperpublic interface MemberDao { public Member login(Member m) throws Exception; public void insertMember(Member m) throws Exception; public void update..
JWT vs 세션요청을 보낼 때 사용자 인증을 위해 JWT나 세션을 사용함저장 위치세션: 서버에 상태를 저장. 사용자의 인증 정보가 서버에 저장되어 있고, 클라이언트는 세션 ID만 저장JWT: 클라이언트 측에서 저장. 서버는 JWT의 서명만 검증하고, 토큰 자체는 클라이언트에 저장(일반적으로 로컬 스토리지나 쿠키)상태 관리세션: 서버에서 상태를 관리하므로, 서버는 각 클라이언트의 세션을 추적해야 함. 클라이언트가 로그아웃하면 서버에서 세션을 삭제해야 함JWT: 서버는 상태를 유지하지 않으며, 토큰에 필요한 정보가 모두 포함되어 있어 서버의 부하를 줄일 수 있음. JWT는 자체적으로 인증 정보를 가지고 있어, 서버에서 별도의 상태 정보를 관리할 필요가 없음확장성세션: 서버에서 세션을 관리하기 때문에 서버의..
HTML, CSS, JavaScript로 동적 페이지 구현하기1. 기본 구조index.html에 모든 JavaScript 파일을 불러오고, 페이지의 동적인 콘텐츠를 업데이트할 수 있는 구조를 구현1.1 index.htmlindex.html에는 전체 페이지에서 공통적으로 사용되는 상단 바(헤더)를 구현. 콘텐츠가 동적으로 변경되는 영역을 위해 를 추가 2. URL에 따라 동적으로 내용 변경하기JavaScript를 사용해 현재 페이지의 URL을 확인하고, 해당 URL에 맞는 콘텐츠를 동적으로 main_data 영역에 삽입if (document.location.pathname === "/") { document.getElementById("main_..