FE 썸네일형 리스트형 FE/React [React] Virtual DOM * Virtual DOM이 나오게 된 배경 * Virtual DOM의 개념 * React가 DOM 트리를 탐색하는 방법 * DOM 엘리먼트의 타입이 같을 때와 다를 때의 React 동작 방식 Virtual DOM이 나오게 된 배경 Virtual DOM은 Real DOM의 가벼운 사본과 같다. Real DOM은 Browser에서 생성되는 Document Object Model을 가리키는 용어이며, Virtual DOM과 구분하기 위해 이 용어를 사용한다. Real DOM (DOM) DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체 모델을 의미한다. 여기서 문서 객체란 브라우저가 JavaScript와 같은 스크립팅 언어가 , , 와 같은 태그들에 접근하고 조작할 수 있.. FE/개발 관련 뉴스, 서적, 자료 [유튜브] NPM 패키지를 설치할 때 주의하자! 최근 NPM (Node Package Manager) 패키지 레포지토리에서 일부 패키지가 해킹되는 사건이 생겼다고 한다. 관련하여 부트캠프 동기 분이 공유해주신 유튜브 자료를 공유하며, 조심하려는 차원에서 블로그에 포스팅해보려고 한다. 0:00 - 1:26: Intro 1:27 - 2:30: "left-pad" 이슈 2:30 - 3:19: Supply Chain Attack 이란? 3:19 - 4:35: NPM Account 공격 사례 4:35 - 5:54: MathJS 공격 사례 5:54 - 6:33: Installation Scripts 공격 사례 6:33 - 7:50: Typosquatting Attack 공격 사례 7:50 - 9:54: 공격 예방 & 보호 방법 (아래에 요약) 9:54 - 10:.. FE/Server OAuth OAuth란 웹이나 앱에서 흔히 찾아볼 수 있는 소셜 로그인 인증 방식은 OAuth 2.0라는 기술을 바탕으로 구현된다. OAuth : Open standard for Authorization; Open Authorization 전통적으로 직접 작성한 서버에서 인증을 처리해 주는 것과는 달리, OAuth는 인증을 중개해 주는 메커니즘이다. 직접 서버에서 인증과 관련된 로직을 처리할 필요 없이 인증을 중개하는 외부 서버를 이용한다. 토큰을 기반으로 내 서버가 아닌 외부 인증 중개서버로 사용자 인증 처리를 맡길 수 있다. 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜 즉, 이미 사용자 정보를 가지고 있는 웹 서비스(Naver, Kakao, Google 등)에서 .. FE/React [JS] useEffect 용례 * 레퍼런스 - 리액트 공식문서 : useEffect - React Hooks에 취한다 - 유튜브 미리 알고 있어야 하는 개념 useEffect(setup, [dependencies]) 컴포넌트의 최상위 수준에서 useEffect를 호출하여 Effect를 선언한다. useEffect는 undefined 값을 반환한다. Mount & Unmount useEffect의 setup & cleanup useEffect가 작동하는 과정은 다음과 같다. (예: 채팅 외부시스템을 가져와서 웹 화면에 구현) 컴포넌트가 마운팅되면, (페이지에 추가) setup 코드가 작동한다. (예: '과일' 주제의 채팅창 열기) 종속성 배열 인자의 값이 변할 때마다 컴포넌트는 리렌더링 된다. (예: 종속성 배열 인자는 채팅창의 주제(.. FE/Server 해싱(Hashing)과 토큰(Token) 인증 방식 * 세션 인증 방식을 보완한 토큰 인증 방식 * 대표적인 토큰 인증 방식 JWT - JWT가 사용자의 정보를 암호화하여 토큰을 저장하는 방법 해싱 (Hashing) 해싱은 가장 많이 쓰이는 암호화 방식 중에 하나이다. 복호화가 가능한 다른 암호화 방식들과 달리, 해싱은 암호화만 가능하다. 해싱은 해시 함수(Hash Function)를 사용하여 암호화를 진행하는데, 해시 함수는 다음과 같은 특징을 가진다. 항상 같은 길이의 문자열을 리턴한다. 서로 다른 문자열에 동일한 해시 함수를 사용하면 반드시 다른 결과값이 나온다. 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나온다. 아래 표는 대표적인 해시 함수중 하나인 SHA1에 특정 입력 값을 넣었을 때 어떤 결과가 리턴되는지 보여주는 예시이.. 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를 활용한 상태 관리는 빛을 발한다. 그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. .. ⬆︎ 이전 1 2 3 4 5 ··· 9 다음
