ALL 썸네일형 리스트형 FE/Server 세션기반 인증 (Session-based Authentication) 로그인 원리 로그인을 통해 사용자의 인증 정보를 저장하고, 그 후 인증된 사용자가 어떤 식으로 웹사이트를 이용하는지 간단하게 알아보자. 사용자가 웹사이트에서 아이디 및 비밀번호를 이용해서 로그인을 시도하면(아래 그림에서 1번) 사용자가 만일 정확한 아이디와 비밀번호를 입력했다면, 서버는 인증(Authentication)에 성공했다고 판단할 것이다. 다음번에 인증을 필요로 하는 작업(e.g. 그림에서와 같이, 장바구니에 물품 추가)을 요청할 경우에 한번 더 로그인 과정을 거쳐야 할까? 아 니 다. 서버가 "해당 유저는 인증에 성공했음"을 알고 있다면, 유저가 매번 로그인할 필요가 없다. 인증에 따라 리소스의 접근 권한(Authorization)이 달라진다. 이때 클라이언트와 서버에 각각 필요한 것은 다음과.. FE/Server 쿠키(Cookie)의 개념과 작동원리 Naver 등 특정사이트에 로그인하는 것은 본질적으로 “나는 해당 사이트에게 내 정보를 줄 수 있을 정도로 믿고 있다.”와 같다. 내 아이디, 비밀번호뿐만 아니라 심지어는 나의 주소, 카드번호, 계좌의 비밀번호 등을 알려주기도 한다. 사용자는 어떻게 이런 특정 웹사이트들을 신뢰할 수 있을까? 아니, 웹사이트들은 사용자에게 신뢰를 주기 위해 어떻게 정보를 안전하게 보호하고 있을까? Cookie의 개념 쿠키가 쓰이는 상황 의류 쇼핑몰 사이트에서 다양한 상품들을 장바구니에 넣을 때 HTTP 요청은 stateless한데, 어떻게 다른 페이지를 탐색하고 돌아와도 장바구니가 유지가 되는 것이지? 즉, 어떻게 유저의 정보가 유지가 되는 것이지? 어떤 사이트를 들어갔을 때마다 뜨는 팝업에 '오늘 보지 않기'를 체크했을.. FE/UI & UX 웹 접근성에 맞게 Cmarket 리팩토링하기 1. 삭제 버튼 재확인 기존 코드 const handleDelete = (itemId) => { setCheckedItems(checkedItems.filter((el) => el !== itemId)) dispatch(removeFromCart(itemId)) } 문제점 장바구니 화면에서 '삭제' 버튼을 누르면 '삭제 버튼'이라고 읽어줌과 동시에 해당 항목이 바로 삭제가 되는 문제가 발생했다. 청각장애인이 해당 서비스를 사용하는 경우, 해당 버튼의 의미를 알아보기 위해 클릭했을 때 의도치 않는 -물건이 삭제 되는- 상황이 발생할 수 있다. 리팩토링 const handleDelete = (itemId) => { if (window.confirm(`장바구니에서 삭제할까요?`)) { setCheckedIte.. FE/Server mkcert를 이용한 로컬에서 HTTPS 서버 만들기 로컬 환경(localhost)에서 인증서를 생성하고, 인증서를 이용해 HTTPS 서버 만들기 HTTPS 사설 인증서 발급 및 서버 구현 현업에서는 HTTPS 프로토콜을 사용하는 것이 일반적이고, 특히 HTTPS 프로토콜은 인증의 중요한 부분을 차지하기 때문에, 이번 포스팅에서는 직접 HTTPS 서버를 만들어 보겠다. 설치 mkcert라는 프로그램을 이용해서 로컬 환경(내 컴퓨터)에서 신뢰할 수 있는 인증서를 만들 수 있다. Ubuntu 우분투의 경우 다음 명령어를 이용해 설치한다. $ sudo apt install libnss3-tools $ wget -O mkcert https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3.. FE/Network HTTPS * HTTPS의 필요성과 암호화 방식 - HTTPS에서 사용하는 대칭키, 비대칭키 방식 HTTPS란? 기존 HTML을 주고받는 프로토콜인 HTTP에 TLS 및 SSL 프로토콜을 더하여 보안 기능을 강화한 프로토콜이 HTTPS이다. 접속한 사이트가 보안된 웹 사이트인지 가장 쉽게 확인할 수 있는 방법은 뭘까? 바로 브라우저 화면의 주소 바 옆에 있는 자물쇠 아이콘을 눌러보면 된다. 해당 아이콘을 누르면 아래와 같이 “이 사이트는 보안 연결(HTTPS)이 사용되었습니다.”라는 메시지를 볼 수 있다. HTTPS는 HTTP Secure의 약자로, 단어 뜻 그대로 기존의 HTTP 프로토콜을 더 안전하게 사용할 수 있음을 의미한다. 이유는 HTTPS가 HTTP와 달리 요청과 응답으로 오가는 내용을 암호화하기 때문이.. FE/Network HTTP * 여러 종류의 HTTP의 특징 - HTTP의 무상태성과 비연결성 * HTTP 메시지 구성 중 하나인 헤더 - HTTP 헤더 중 바디를 설명하는 헤더인 표현헤더 - HTTP 헤더 중 요청과 응답에서 주로 사용되는 헤더 - HTTP 헤더 중 서버에 요청하는 콘텐츠를 협상할 수 있는 협상헤더 HTTP의 역사 응용 계층의 대표적인 프로토콜인 HTTP 역사는 다음과 같다. HTTP/1.1, HTTP/2는 TCP 기반이며 HTTP/3는 UDP 기반 프로토콜이다. HTTP 특징 1. 클라이언트 서버 구조 클라이언트가 서버에 요청을 보내면 서버는 그에 대한 응답을 보내는 클라이언트 서버 구조로 이루어져 있다. 2. 무상태 프로토콜 (Stateless) HTTP에서는 서버가 클라이언트의 상태를 보존하지 않는 무상태 프.. FE/Network [네트워크 계층 모델] OSI 7계층 & TCP/IP 4계층 모델 네트워크 통신을 계층별로 나눈 이유 통신 과정에서 일어나는 데이터 캡슐화 OSI 7계층 모델 해당 계층 모델은 ISO(International Organization for Standardization)라고 하는 국제표준화기구에서 1984년에 제정한 표준 규격이다. 왜 네트워크에 대한 표준 규격을 정해야만 했을까? 지금은 상상하기 어렵지만 같은 회사에서 만든 컴퓨터끼리만 통신이 가능했던 시절이 있었다. 따라서 다른 회사의 시스템이라도 네트워크 유형에 관계없이 상호 통신이 가능한 규약, 즉 프로토콜(Protocol)이 필요했다. 그래서 ISO에서는 제조사에 상관없이 공통으로 사용할 수 있는 네트워크 표준 규격을 정의했다. OSI 7계층 모델은 네트워크를 이루고 있는 구성요소들을 7단계로 나누고, 각 계층의.. FE/Network IP Packet과 TCP/UDP Packet * 네트워크의 탄생 배경 * IP와 IP Packet을 이용한 통신 방법의 개념과 한계 * IP Packet을 이용한 통신 방법의 한계를 보안하기 위한 TCP/UDP Packet 네트워크 흐름을 이해하기 위해서는 웹 통신을 가능하게 한 HTTP 통신의 흐름을 파악하는 것이 중요하다. 해당 포스팅에서 자세히 다루겠지만, 우선 HTTP 통신은 애플리케이션 계층에 속해 있다. HTTP 통신을 깊이 이해하기 위해서는, TCP와 UDP 같이 보다 낮은 레벨의 프로토콜도 학습해야 한다. 이를 위해 IP를 시작으로 TCP/UDP 그리고 HTTP까지 이르는 전체 통신 흐름을 살펴보겠다. 네트워크 탄생 배경 인터넷이 대중화되면서 네트워크는 컴퓨터 기술에서 빼놓을 수 없는 분야가 되었다. 지금 우리가 사용하는 인터넷 프로.. FE/UI & UX 웹 접근성 개선해보기 웹 표준에 맞는 시맨틱한 HTML 코드 작성하기 그리고 웹 콘텐츠 접근성 지침 중 일부를 충족해보기 (WAI-ARIA 등) 스크린 리더를 활용하여 웹 접근성 개선해보기 스크린 리더 설치 시작하기 전에, 화면의 구성 요소를 읽어주는 스크린 리더를 설치해야 한다. 스크린 리더를 사용해서 시각적 요소를 제대로 인지할 수 없는 환경에서 화면 구성을 어떻게 파악하게 되는지 직접 확인해볼 수 있다. Chrome 확장 프로그램인 ChromeVox Screen Reader를 설치하여 사용한다. 설치 후 확인하고자 하는 요소를 클릭하면 스크린 리더가 요소를 인식하여 읽어주게 된다. Chrome창 우측 상단에 있는 더보기 버튼 → 도구 더보기 → 확장 프로그램 페이지에서 스크린 리더 활성화 및 비활성화를 할 수 있다. 필.. FE/JavaScript [JS] 꼬리재귀 * 레퍼런스 재귀와 스택 (JAVASCRIPT.INFO) 재귀 함수와 메모리 사용량 간의 관계 (javascript recursion memory leak) 재귀함수는 함수 내에서 자기 자신을 호출하는 것을 말한다. ([JS]재귀 포스팅) 이를 통해 코드를 간결하고 이해하기 쉽게 만들 수 있다. 그러나 재귀함수는 메모리 사용량을 증가시키는 경향이 있다. 그 전에 알아야 하는 용어 실행 컨텍스트(execution context) : 자바스크립트 엔진은 함수가 호출될 때마다 호출된 함수를 위한 실행 컨텍스트를 생성한다. 호출 스택(call stack) : 코드가 실행되면서 생성되는 실행 컨텍스트를 저장하는 자료 구조이다. 엔진이 함수를 호출할 때마다 함수를 위한 실행 컨텍스트를 생성하고 이를 콜 스택에 pu.. FE/UI & UX 웹 접근성 & 웹 콘텐츠 접근성 지침 웹 접근성이란? (Web Accessibility) 컴퓨터와 스마트폰만 있으면 정보를 찾고, 사람들과 소통하고, 물건을 살 수 있다. 클릭 몇 번, 터치 몇 번이면 우리 집 문 앞에 내가 산 물건, 음식이 배달되기도 합니다. 그런데 당장 화면이 고장 난 상태에서 물건을 사려면? 아마 상상만 해도 어렵고 막막한 상황일 것이다. 동영상 플랫폼과 동영상 콘텐츠도 넘쳐난다. 아무 생각 없이 재미있는 영상을 보다 보면 하루가 금방 지나가버리기도 한다. 그런데 갑자기 소리가 들리지 않는다면 어떨까? 자막이 있다면 다행이지만, 그렇지 않다면 당장 영상에서 무슨 말을 하고 있는지 조차 알기 힘든 영상도 많을 것이다. 이런 상상만 해도 답답한 상황을 매일 겪는 사람들이 있다. 단지 몸이 조금 불편하다는 이유로 그렇지 않.. FE/UI & UX SEO * SEO의 개념과 종류, 필요성 * SEO에 영향을 미치는 요소의 종류와 작성 방법 검색엔진에서 무언가를 검색하여 원하는 결과를 찾은 후, 굳이 마지막 페이지까지 매번 보는 경우는 잘 없을 것이다 심지어 원하는 결과가 상위에 있다면 1 페이지조차 전부 확인 안 하고 넘어가는 경우가 대부분일 것 이다. 즉, 열심히 웹 페이지를 만들어도, 검색했을 때 검색 결과 상위에 없거나 뒤 페이지로 밀려난다면 아무도 찾지 않는 웹 페이지가 되어버린다. 이런 사태를 방지하기 위해서는 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해 주는 작업, SEO(Search Engine Optimization, 검색 엔진 최적화)가 필요하다. SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 .. FE/UI & UX 웹표준 * 웹 표준의 개념과 등장 배경 * Semantic HTML의 개념과 종류 그리고 사용법 * 자주 틀리는 마크업 규칙들과 맞는 표현 * 크로스 브라우징 개념과 방법 웹이란? Q. 🤔 인터넷은 웹 기반으로 작동한다. ( O / X ) A. 정답은 X이다. 이유는 인터넷이 웹보다 좀 더 포괄적인 개념이기 때문이다. 인터넷은 ‘전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망’을 의미하며, 웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함한다. 웹을 두 글자로 정의한다면 ‘공간’으로 정의할 수 있다. 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간이 ‘웹’이다. 웹 표준 2000년대 초에는 인터넷 익스플로러에서는 작동이 되어도 사파.. FE/React 쇼핑몰 앱에서 Redux를 이용한 상태 관리 (2) 본격적으로 본론에 들어가기 전에, npm trends를 살펴보면 상태 관리 라이브러리 중에서도 redux(하늘색)가 가장 많이 쓰이고 있는 것을 알 수 있다. 따라서, 비교적 간편한 Redux toolkit을 쓰기 전에, 기존 Redux 코드를 작성해보며 데이터 흐름을 숙지하고, 개념을 확실히 이해하고 넘어가야 할 필요가 있다. 장바구니 추가, 삭제 등 기본적인 쇼핑몰 기능을 구현한 이전 포스팅 에서 더 나아가, 두 번째 포스팅에서는 해당 앱에서 구현한 또 다른 Reducer인 notificationReducer 등에 대해 다뤄보겠다. 결과 화면 장바구니에 없는 물건을 '장바구니 담기'를 눌렀을 때 -> "장바구니에 ~~이(가) 추가되었습니다." 메시지가 뜬다. 장바구니에 이미 있는 물건을 또 '장바구니.. FE/React 쇼핑몰 앱에서 Redux를 이용한 상태 관리 (1) * Redux의 설계(원리와 구조) 파악하기 - Action, Dispatch, Reducer, Store 작성하고 연결하여 사용하기 - Redux hooks(useSelector, useDispatch)를 사용해 Store 업데이트 하기 즉, React Hooks에서의 상태 변경 로직(이전 포스팅)이 Redux에서 어떻게 컴포넌트로부터 분리되는 지를 파악하는 것이 목적이다. React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발한다. 그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. .. FE/React Redux로 간단한 Count 기능 구현하기 Redux를 사용하기 위해서는 redux와 react-redux를 설치해야한다. 설치를 하고 나면, DEPENDENCIES redux, react-redux가 설치되어 있는 것을 확인할 수 있다. . . . "dependencies": { "@types/react": "^16.8 || ^17.0 || ^18.0", "@types/react-dom": "^16.8 || ^17.0 || ^18.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-native": ">=0.59", "react-redux": "^8.0.2", "redux": "^4" }, . . . index.js import React from 'react'; import { createRoot .. FE/React 상태 관리 라이브러리 Redux [프론트엔드 개발에서 상태 관리를 보다 더 효율적으로 할 수 있는 방법] * 컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리 Redux - 컴포넌트와 상태를 분리하는 패턴 - Redux에서 사용하는 Action, Dispatcher, Reducer 그리고 Store의 의미와 특징 - Redux의 3가지 원칙 React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발한다. 그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. 그러나 상태 변경 로직을 컴.. FE/React 쇼핑몰 애플리케이션에서 Hooks를 이용한 상태 관리 * React Hooks를 사용한 상태 관리 방법 - 컴포넌트끼리 상태 주고받기 결과 화면 파일(컴포넌트) 구조 루트 컴포넌트 : 내비게이션 바 "상품리스트" , "장바구니" 버튼 또는 : 물건 목록이 나열된 쇼핑몰 메인 화면 또는 장바구니 화면 (Pages) : map으로 렌더링 : 각 물건의 이름, 가격, '장바구니 담기' 버튼 등 : map으로 렌더링 : 각 물건의 이름, 가격, '장바구니에서 삭제하기' 버튼 등 : 주문 합계, 총 아이템 개수 등 상태 상품 목록 (items) : 개별 상품에 대한 정보를 담은 객체 (배열의 형태) { "id": 1, "name": "노른자 분리기", "img": "../images/egg.png", "price": 9900 } 장바구니 목록(cartItems) :.. FE/React Props Drilling이란? Props Drilling이란? [Props Drilling] 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상이다. 위 그림처럼 컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해선 사이에 있는 컴포넌트 B, C를 거쳐야 한다. Props Drilling의 문제점 Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않는다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생한다. 코드의 가독성이 매우 나빠지게 된다. 데이터의 출처를 쉽게 파악할 수 없어서 코드의 유지보수 또한.. FE/React [React] 전역 상태의 필요성 * (프론트엔드에서의) 상태 관리의 개념과 필요성 * 로컬 상태와 전역 상태의 차이점 * 전역 상태의 필요성 * 상태 관리 라이브러리의 필요성 상태 관리 React는 상태 관리를 위한 라이브러리가 아니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트 간 서로 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있다. 상태는 변하는 데이터이다. 특별히 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터"이다. 여기에 쇼핑몰에서 흔하게 볼 수 있는 장바구니 화면이 있습니다. 여기에는 다양한 상태가 존재한다. "장바구니에 담기"와 같은 버튼을 눌러, 해당 물품을 장바구니에 추가할 수 있다. 동적인 데이터이므로 이것은 상태이다. 상단에 [일반구매/정기배송.. ⬆︎ 이전 1 2 3 4 5 6 7 8 ··· 12 다음
