ES6 화살표 함수 (Arrow Function)ES6에서 도입된 화살표 함수는 기존 함수와 바인딩 방식에서 차이가 있다. this를 자동으로 바인딩하여 클래스 내부에서 bind(this)를 사용할 필요가 없음 React 컴포넌트React에서 UI를 구성하는 독립적이고 재사용 가능한 코드 블록컴포넌트는 HTML, CSS, JavaScript를 조합하여 화면을 구성하는 역할을 함컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 방식으로 정의할 수 있음함수형 컴포넌트간결하고 직관적인 형태로 작성 가능useState, useEffect와 같은 React Hook을 활용하여 상태 및 생명주기 관리 가능const MyComponent = ({ name }) => { return Hello, {name}!; ..
[LG 유플러스] 유레카/Today I Learned
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 내에서 가장 메인으로 사용되는 색상으로 화면 내 클릭을 유도하는 버튼에 많이 사용된다. 주로 브랜드의 고유한..
Controller와 RestController의 차이점Controller: Controller에서는 리턴이 템플릿 이름RestController: RestController에서는 리턴이 컨텐츠가 됩니다. 반환값이 그대로 HTTP 응답의 본문으로 전달됨.카카오 로그인 과정사용자가 카카오 로그인 버튼을 클릭하면 카카오 로그인 API에 요청이 가고, 리다이렉트 링크가 반환이 리다이렉트 링크를 통해 카카오 로그인 화면으로 이동카카오 로그인 화면에서 아이디와 비밀번호를 입력하여 로그인카카오는 사용자의 정보 동의를 요청. 사용자가 동의를 하면, 카카오는 동의코드를 제공하고 이를 콜백 URL로 전달백엔드는 제공된 동의코드를 사용하여 카카오 서버에 액세스 토큰을 요청카카오는 액세스 토큰을 반환액세스 토큰을 이용해 카..
JWT vs 세션요청을 보낼 때 사용자 인증을 위해 JWT나 세션을 사용함저장 위치세션: 서버에 상태를 저장. 사용자의 인증 정보가 서버에 저장되어 있고, 클라이언트는 세션 ID만 저장JWT: 클라이언트 측에서 저장. 서버는 JWT의 서명만 검증하고, 토큰 자체는 클라이언트에 저장(일반적으로 로컬 스토리지나 쿠키)상태 관리세션: 서버에서 상태를 관리하므로, 서버는 각 클라이언트의 세션을 추적해야 함. 클라이언트가 로그아웃하면 서버에서 세션을 삭제해야 함JWT: 서버는 상태를 유지하지 않으며, 토큰에 필요한 정보가 모두 포함되어 있어 서버의 부하를 줄일 수 있음. JWT는 자체적으로 인증 정보를 가지고 있어, 서버에서 별도의 상태 정보를 관리할 필요가 없음확장성세션: 서버에서 세션을 관리하기 때문에 서버의..
패스워드 암호화회원가입입력 받은 비밀번호를 검증 (길이, 특수문자 포함 여부 확인)Salt 생성비밀번호 + Salt를 해싱해싱된 비밀번호를 DB에 저장Salt는 별도의 salt 테이블에 저장로그인입력 받은 email로 Salt 조회입력 받은 비밀번호 + 조회된 Salt로 해싱DB에 저장된 비밀번호 해시값과 비교로그인 성공 시 토큰 발급email을 기반으로 해시를 생성하여 토큰 발급토큰을 login 테이블에 저장 (email, token, 생성시간)RESTful (Representational State Transfer)자원을 이름 (자원의 표현) 으로 구분하여 해당 자원의 상태 (정보)를 주고 받는 모든 것을 의미 (/users, /auth 등)HTTP 메서드 사용 (GET, POST, PUT, DELE..
세션 & 토큰 로그인 흐름 정리기존 문제FE(5500번 포트)와 BE(8080번 포트)가 서버 분리되어 있음브라우저에서 BE로 로그인 요청을 보내면 JSESSIONID를 받아야 하지만, 쿠키는 같은 도메인에서만 사용 가능 → JSESSIONID를 다음 요청에 포함할 수 없음JSESSIONID는 WAS 메모리에 저장되지만, 쿠키로만 접근 가능 → FE에서 활용 불가능JS로 쿠키를 직접 헤더에 설정하는 것은 보안상 막혀 있음다중 서버 환경에서는 WAS 세션(JSESSIONID)을 공유하기 어려움해결 방법: DB 기반 세션 관리로그인 요청FE에서 로그인 요청을 보냄BE에서 사용자 인증 후, token을 생성하여 반환DB에 토큰 저장login 테이블에 토큰을 저장토큰은 OpenCrypt.java 같은 해시 기반..
XSS 취약점사용자 입력 데이터를 그대로 반환할 경우, 악성 스크립트가 실행될 위험이 있음. 예방 방법:입력값 검증 → 같은 태그 필터링출력 시 인코딩 → HTML 특수문자를 이스케이프 처리 (<, > 등)입력값 길이 제한 → 예: 닉네임을 20자로 제한 외래키(Foreign Key)데이터 무결성을 유지할 수 있음.외래키로 연결된 데이터를 삭제할 때, 연관된 모든 데이터도 삭제해야 하는 문제 발생외래키를 사용하지 않고, SQL JOIN으로 논리적으로 연결하여 관리데이터 삭제 시, 직접 연관 데이터를 정리하는 쿼리를 실행 tabnabbing 공격해커는 사용자에게 정상적인 링크를 제공하지만, 이를 클릭하면 해커 사이트로 이동하도록 유도해커 사이트에서 로그인 창을 띄워 사용자가 직접 ID/PW를 ..
