Development Study
-
JWT를 프론트엔드와 백엔드 관점에서 살펴보자 JWT(Json Web Token) 로그인 방법은 클라이언트(프론트엔드)와 서버(백엔드) 간의 사용자 인증을 수행하는 데 주로 사용됩니다. 이 방법을 사용하면 사용자는 한 번 인증하면 해당 토큰을 계속 사용할 수 있으므로 복잡한 세션 관리를 할 필요가 없습니다. 이에 대한 설명을 프론트엔드와 백엔드의 관점에서 분할해 설명하겠습니다. 프론트엔드 사용자가 프론트엔드에서 로그인 요청을 할 때, 일반적으로 아이디와 비밀번호 등의 정보를 함께 보냅니다. 이는 일반적으로 HTTP POST 요청을 통해 이루어집니다. 로그인 요청이 성공하면 서버는 JWT를 생성하고 이를 HTTP 응답으로 클라이언트에게 보냅니다. 클라이언트(프론트엔드)는 이 토큰을 저장해야 합니다. 이를 ..
[JWT] Jin짜 Way렇게 어렵T? 기초 알아보기JWT를 프론트엔드와 백엔드 관점에서 살펴보자 JWT(Json Web Token) 로그인 방법은 클라이언트(프론트엔드)와 서버(백엔드) 간의 사용자 인증을 수행하는 데 주로 사용됩니다. 이 방법을 사용하면 사용자는 한 번 인증하면 해당 토큰을 계속 사용할 수 있으므로 복잡한 세션 관리를 할 필요가 없습니다. 이에 대한 설명을 프론트엔드와 백엔드의 관점에서 분할해 설명하겠습니다. 프론트엔드 사용자가 프론트엔드에서 로그인 요청을 할 때, 일반적으로 아이디와 비밀번호 등의 정보를 함께 보냅니다. 이는 일반적으로 HTTP POST 요청을 통해 이루어집니다. 로그인 요청이 성공하면 서버는 JWT를 생성하고 이를 HTTP 응답으로 클라이언트에게 보냅니다. 클라이언트(프론트엔드)는 이 토큰을 저장해야 합니다. 이를 ..
2023.06.02 -
BEM (Block, Element, Modifier)은 CSS 클래스를 명명하는 방법론 중 하나로, HTML과 CSS의 구조를 더 이해하기 쉽고 유지보수하기 쉽게 만들어주는 효과가 있습니다. BEM의 이름은 아래 세 가지 컴포넌트에 따라 붙여집니다. Block (블록) Element (요소) Modifier (수정자) 1. Block (블록) 블록은 독립적인 엔티티로, 재사용이 가능합니다. 예를 들면, 헤더, 컨테이너, 메뉴, 체크박스 등이 이에 해당합니다. 2. Element (요소) 요소는 블록 내부의 구성 요소로, 블록이 없으면 의미를 가지지 못합니다. 예를 들면, 메뉴 항목, 리스트 항목, 헤더 타이틀 등이 이에 해당합니다. 3. Modifier (수정자) 수정자는 블록이나 요소의 상태와 행동을..
[CSS] BEM 방법론에 대해 알아보자(Block, Element, Modifier)BEM (Block, Element, Modifier)은 CSS 클래스를 명명하는 방법론 중 하나로, HTML과 CSS의 구조를 더 이해하기 쉽고 유지보수하기 쉽게 만들어주는 효과가 있습니다. BEM의 이름은 아래 세 가지 컴포넌트에 따라 붙여집니다. Block (블록) Element (요소) Modifier (수정자) 1. Block (블록) 블록은 독립적인 엔티티로, 재사용이 가능합니다. 예를 들면, 헤더, 컨테이너, 메뉴, 체크박스 등이 이에 해당합니다. 2. Element (요소) 요소는 블록 내부의 구성 요소로, 블록이 없으면 의미를 가지지 못합니다. 예를 들면, 메뉴 항목, 리스트 항목, 헤더 타이틀 등이 이에 해당합니다. 3. Modifier (수정자) 수정자는 블록이나 요소의 상태와 행동을..
2023.06.01 -
결론부터 말해보자면 JWT를 많이 사용합니다. 그 이유 중 하나가 세션을 쓰는 방식 자체가 확장성이 있는 구조가 아니기 때문입니다. 세션과 JWT, 이 두 방법은 어떤 차이가 있는지 알기쉽게 설명 해보도록 하겠습니다. 세션(Session), 고속도로 일반 결제 창구 세션 방식을 사용하는 것은 고속도로의 일반 결제창구를 이용하는 것과 유사합니다. 운전자가 창구에 도착하면 요금을 납부하고, 차량이 정상적으로 통행료를 납부했음을 확인하기 위해 입출구 정보가 기록됩니다. 이 기록은 서버의 메모리에 저장되며, 차량이 고속도로를 빠져나갈 때까지 유지됩니다. 이 방식은 안전하지만, 차량이 많아질수록 결제 창구에서 대기하는 차량이 많아지고, 이로 인해 부하가 발생합니다. JWT(JSON Web Token), 하이패..
[Backend] 로그인 양대 산맥, JWT와 Session 중 무엇을 선택해야할까?결론부터 말해보자면 JWT를 많이 사용합니다. 그 이유 중 하나가 세션을 쓰는 방식 자체가 확장성이 있는 구조가 아니기 때문입니다. 세션과 JWT, 이 두 방법은 어떤 차이가 있는지 알기쉽게 설명 해보도록 하겠습니다. 세션(Session), 고속도로 일반 결제 창구 세션 방식을 사용하는 것은 고속도로의 일반 결제창구를 이용하는 것과 유사합니다. 운전자가 창구에 도착하면 요금을 납부하고, 차량이 정상적으로 통행료를 납부했음을 확인하기 위해 입출구 정보가 기록됩니다. 이 기록은 서버의 메모리에 저장되며, 차량이 고속도로를 빠져나갈 때까지 유지됩니다. 이 방식은 안전하지만, 차량이 많아질수록 결제 창구에서 대기하는 차량이 많아지고, 이로 인해 부하가 발생합니다. JWT(JSON Web Token), 하이패..
2023.06.01 -
자바스크립트에서 함수를 작성하는 방법은 여러 가지가 있습니다. 그 중에서도 함수 선언문, 함수 표현식, 그리고 화살표 함수에 대해 알아보겠습니다. 이들의 차이점은 무엇이고 어떤 상황에서 어떤 것을 사용하면 좋을까요?1. 리액트에서의 함수 표현식과 선언문리액트에서 컴포넌트 함수를 작성할 때, 함수 선언문과 함수 표현식 중 어떤 것을 사용해야 할까요? 여기에는 정답이 없지만, 두 방식 간의 차이점을 이해하고 상황에 맞게 적절하게 선택하는 것이 중요합니다. 함수 선언문(function () {})을 사용하면 메인 로직을 한눈에 보여주고, export default와 선언을 동시에 할 수 있습니다. 그런데 이 경우, 일반적인 자바스크립트에서 함수 표현식을 사용할 때의 장점을 일부 포기하게 됩니다. 반면, 함수 ..
[JavaScript, React] const = () => {}? function () {}? 함수 표현식, 함수 선언문 중 무엇을 쓸까?자바스크립트에서 함수를 작성하는 방법은 여러 가지가 있습니다. 그 중에서도 함수 선언문, 함수 표현식, 그리고 화살표 함수에 대해 알아보겠습니다. 이들의 차이점은 무엇이고 어떤 상황에서 어떤 것을 사용하면 좋을까요?1. 리액트에서의 함수 표현식과 선언문리액트에서 컴포넌트 함수를 작성할 때, 함수 선언문과 함수 표현식 중 어떤 것을 사용해야 할까요? 여기에는 정답이 없지만, 두 방식 간의 차이점을 이해하고 상황에 맞게 적절하게 선택하는 것이 중요합니다. 함수 선언문(function () {})을 사용하면 메인 로직을 한눈에 보여주고, export default와 선언을 동시에 할 수 있습니다. 그런데 이 경우, 일반적인 자바스크립트에서 함수 표현식을 사용할 때의 장점을 일부 포기하게 됩니다. 반면, 함수 ..
2023.05.30 -
Docker는 백엔드와 프론트엔드, 어떤 유형의 애플리케이션에서도 사용할 수 있는 도구입니다. Docker는 운영 체제 수준에서 가상화를 제공하는 플랫폼이며, 개발자가 애플리케이션과 그 의존성을 '컨테이너'라는 패키지로 묶어서 배포할 수 있게 해줍니다. 이 컨테이너는 코드, 런타임, 시스템 도구, 시스템 라이브러리 등 애플리케이션이 실행되는 데 필요한 모든 것을 포함하므로, 이를 사용하여 애플리케이션을 신속하게 구축하고 배포할 수 있습니다. 이번 글에서는 이 Docker에 대해 알아보도록 하겠습니다. 도움이 되었으면 좋겠습니다. AWS Series [Learn About AWS] Series 이 글은 AWS 수업 시간에 진행되는 내용들을 담아 둔 시리즈이다 상반기동안 업데이트 할 예정이며 최대한 위에있는..
[Docker] 도커는 뭐하는 고래일까? + EC2에서 Docker 띄워보기 실습Docker는 백엔드와 프론트엔드, 어떤 유형의 애플리케이션에서도 사용할 수 있는 도구입니다. Docker는 운영 체제 수준에서 가상화를 제공하는 플랫폼이며, 개발자가 애플리케이션과 그 의존성을 '컨테이너'라는 패키지로 묶어서 배포할 수 있게 해줍니다. 이 컨테이너는 코드, 런타임, 시스템 도구, 시스템 라이브러리 등 애플리케이션이 실행되는 데 필요한 모든 것을 포함하므로, 이를 사용하여 애플리케이션을 신속하게 구축하고 배포할 수 있습니다. 이번 글에서는 이 Docker에 대해 알아보도록 하겠습니다. 도움이 되었으면 좋겠습니다. AWS Series [Learn About AWS] Series 이 글은 AWS 수업 시간에 진행되는 내용들을 담아 둔 시리즈이다 상반기동안 업데이트 할 예정이며 최대한 위에있는..
2023.05.26 -
클라우드 기술의 핵심 중 하나인 AWS S3에 대해 알아보려고 합니다. 클라우드 서비스는 우리가 필요한 정보를 언제 어디서나 접근할 수 있도록 해주는 매우 중요한 기술입니다. 그 중에서도 AWS S3는 간편하면서도 안전한 데이터 관리를 가능하게 하는 뛰어난 서비스입니다. 이 글이 도움되었으면 좋겠습니다. 그럼 글을 시작하겠습니다. AWS S3? AWS S3(Amazon Simple Storage Service)는 Amazon Web Services에서 제공하는 객체 스토리지 서비스입니다. 이 서비스는 웹에서 원하는 양의 데이터를 저장하고 검색할 수 있도록 설계되었습니다. 이 서비스는 개발자에게 확장 가능한, 높은 데이터 가용성, 보안, 성능을 제공합니다. AWS S3는 강한 일관성 모델을 제공합니다. 이..
[AWS S3] AWS S3 익혀먹기클라우드 기술의 핵심 중 하나인 AWS S3에 대해 알아보려고 합니다. 클라우드 서비스는 우리가 필요한 정보를 언제 어디서나 접근할 수 있도록 해주는 매우 중요한 기술입니다. 그 중에서도 AWS S3는 간편하면서도 안전한 데이터 관리를 가능하게 하는 뛰어난 서비스입니다. 이 글이 도움되었으면 좋겠습니다. 그럼 글을 시작하겠습니다. AWS S3? AWS S3(Amazon Simple Storage Service)는 Amazon Web Services에서 제공하는 객체 스토리지 서비스입니다. 이 서비스는 웹에서 원하는 양의 데이터를 저장하고 검색할 수 있도록 설계되었습니다. 이 서비스는 개발자에게 확장 가능한, 높은 데이터 가용성, 보안, 성능을 제공합니다. AWS S3는 강한 일관성 모델을 제공합니다. 이..
2023.05.25 -
컴퓨터 사이언스, 우리가 흔히 CS라고 부르는 이 분야는 모든 관련분야의 시작이라고 불릴 정도로 매우 근본적이고도 매우 중요합니다. 저의 경우에는 이 CS 지식이 앞으로 개발자로 살아가는데 많은 도움을 줄 것이라고 생각합니다. 그럼 지금부터 네트워크 기초를 익혀먹어보도록 할까요? 물론 이 글에서 모든 기초를 담고있지는 않지만 중요한 개념에 대해 다루어 두었습니다. 도움이 되었으면 좋겠습니다. 무엇을 목표하나요? 네트워크 정보를 확인하는 방법을 이해해봅니다. 리눅스의 네트워크 관련 개념을 이해하고 중요 명령어를 익혀봅니다. 리눅스의 시스템 설정 명령어를 익혀봅니다. 시스템 구분 1. 노드 (Node) 인터넷에 연결된 시스템의 가장 일반적인 용어입니다. 노드는 컴퓨터 또는 다른 장치로 구성된 인터넷에 연결된..
[Computer Science] 네트워크 기초 익혀먹기컴퓨터 사이언스, 우리가 흔히 CS라고 부르는 이 분야는 모든 관련분야의 시작이라고 불릴 정도로 매우 근본적이고도 매우 중요합니다. 저의 경우에는 이 CS 지식이 앞으로 개발자로 살아가는데 많은 도움을 줄 것이라고 생각합니다. 그럼 지금부터 네트워크 기초를 익혀먹어보도록 할까요? 물론 이 글에서 모든 기초를 담고있지는 않지만 중요한 개념에 대해 다루어 두었습니다. 도움이 되었으면 좋겠습니다. 무엇을 목표하나요? 네트워크 정보를 확인하는 방법을 이해해봅니다. 리눅스의 네트워크 관련 개념을 이해하고 중요 명령어를 익혀봅니다. 리눅스의 시스템 설정 명령어를 익혀봅니다. 시스템 구분 1. 노드 (Node) 인터넷에 연결된 시스템의 가장 일반적인 용어입니다. 노드는 컴퓨터 또는 다른 장치로 구성된 인터넷에 연결된..
2023.05.25 -
최근 useEffect 대응방안에서 useMemo를 사용해서 개선하는 방향과 관련된 글을 쓰다가 생각난 건데, 어떤 글에서 useMemo를 쓰지 말라는 주제로 글이 있던 것이 생각났습니다. 그래서 이참에 이것도 알아보기로 하였죠. 왜 useMemo를 쓰면 안 되는 건지, 그전에 useMemo는 무엇인지부터 알아보고 가도록 하겠습니다. 이전 글 보고오기 [React] 왜 React에서는 useEffect의 사용을 추천하지 않을까? - Side Effect 관리 React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리 입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서 time-map-installer..
[React] useMemo 쓰지 마세요?최근 useEffect 대응방안에서 useMemo를 사용해서 개선하는 방향과 관련된 글을 쓰다가 생각난 건데, 어떤 글에서 useMemo를 쓰지 말라는 주제로 글이 있던 것이 생각났습니다. 그래서 이참에 이것도 알아보기로 하였죠. 왜 useMemo를 쓰면 안 되는 건지, 그전에 useMemo는 무엇인지부터 알아보고 가도록 하겠습니다. 이전 글 보고오기 [React] 왜 React에서는 useEffect의 사용을 추천하지 않을까? - Side Effect 관리 React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리 입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서 time-map-installer..
2023.05.25 -
React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서는 useEffect 훅을 지양하는 이유가 무엇인지, 그리고 연관되어 있는 개념인 Side Effect 관리에 대해 알아보겠습니다. 1. Side Effect란 무엇인가? Side Effect는 컴포넌트 외부에 영향을 미치는 작업을 의미합니다. 예를 들어보면 데이터 가져오기, 네트워크 요청, 로컬 스토리지 접근 등이 여기에 해당됩니다. React 컴포넌트는 Side Effect 관리를 위해서 useEffect 훅을 제공합니다. 2. 불필요한 Side Effect로 인한 성능 저하 useEffec..
[React] useEffect 쓰지 마세요?React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서는 useEffect 훅을 지양하는 이유가 무엇인지, 그리고 연관되어 있는 개념인 Side Effect 관리에 대해 알아보겠습니다. 1. Side Effect란 무엇인가? Side Effect는 컴포넌트 외부에 영향을 미치는 작업을 의미합니다. 예를 들어보면 데이터 가져오기, 네트워크 요청, 로컬 스토리지 접근 등이 여기에 해당됩니다. React 컴포넌트는 Side Effect 관리를 위해서 useEffect 훅을 제공합니다. 2. 불필요한 Side Effect로 인한 성능 저하 useEffec..
2023.05.25 -
SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 그러한 서비스는 오래가지 못한다는 특성을 가지고 있습니다. 오늘 알아볼 것은 프론트엔드의 헤더에 SEO를 어떻게 적용하면 좋을 지에 대한 내용입니다. SEO(Search Engine Optimization)란 무엇일까? SEO는 "검색 엔진 최적화"를 의미합니다. 주위에서 많이 사용하는 Google, Bing, Naver 등의 검색 엔진에서 웹사이트가 더 잘 보이도록 향상시키는 과정을 말합니다. 페이지가 검색 결과에서 보이는 정도가 더 좋을수록, 발견되고 클릭되는 확률이 올라갑니다. 결국에는 검색 엔진 최적화의 목표..
[SEO] 서비스의 검색 엔진 순위를 높여보자, 헤더에 SEO 적용하기SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 그러한 서비스는 오래가지 못한다는 특성을 가지고 있습니다. 오늘 알아볼 것은 프론트엔드의 헤더에 SEO를 어떻게 적용하면 좋을 지에 대한 내용입니다. SEO(Search Engine Optimization)란 무엇일까? SEO는 "검색 엔진 최적화"를 의미합니다. 주위에서 많이 사용하는 Google, Bing, Naver 등의 검색 엔진에서 웹사이트가 더 잘 보이도록 향상시키는 과정을 말합니다. 페이지가 검색 결과에서 보이는 정도가 더 좋을수록, 발견되고 클릭되는 확률이 올라갑니다. 결국에는 검색 엔진 최적화의 목표..
2023.05.23 -
프로젝트의 고도화가 진행되던 중, 이제는 전역 상태관리 도구를 이용하여 관련된 작업을 해야겠다 느꼈습니다. 리액트를 사용하고 있는 저는 리액트에서 쓸 수 있는 상태관리 툴들에 대해 알아보아야겠다 싶었습니다. 따라서 작성 시점 기준의 정보를 가지고 상태관리 툴에 대한 리서치를 시작하겠습니다. 상태관리(State Management)란 무엇일까? 상태관리는 프론트엔드 엔지니어링에서 중요한 개념이라고 볼 수 있습니다. 조금 더 쉽게 설명 해보자면 프론트엔드 단에서 관리되는 "시간이 지남에 따라 변경되는 모든 데이터에 대한 상태"를 관리하는 것을 말합니다. 프론트엔드 서버에서만 오가는 데이터 뿐만 아니라 백엔드와 네트워크와 소통하는 과정에서 이동하는 데이터 또한 이 상태관리에 해당됩니다. 만약 쇼핑몰에 들어간다..
[Recoil vs Redux] Frontend Engineer를 위한 React 상태관리 도구 알아보기프로젝트의 고도화가 진행되던 중, 이제는 전역 상태관리 도구를 이용하여 관련된 작업을 해야겠다 느꼈습니다. 리액트를 사용하고 있는 저는 리액트에서 쓸 수 있는 상태관리 툴들에 대해 알아보아야겠다 싶었습니다. 따라서 작성 시점 기준의 정보를 가지고 상태관리 툴에 대한 리서치를 시작하겠습니다. 상태관리(State Management)란 무엇일까? 상태관리는 프론트엔드 엔지니어링에서 중요한 개념이라고 볼 수 있습니다. 조금 더 쉽게 설명 해보자면 프론트엔드 단에서 관리되는 "시간이 지남에 따라 변경되는 모든 데이터에 대한 상태"를 관리하는 것을 말합니다. 프론트엔드 서버에서만 오가는 데이터 뿐만 아니라 백엔드와 네트워크와 소통하는 과정에서 이동하는 데이터 또한 이 상태관리에 해당됩니다. 만약 쇼핑몰에 들어간다..
2023.05.23 -
D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 주제로 많이 쓰이며 시각화 중에 가장 복잡하고 커스터마이징이 자유롭다는 특징을 가지고 있습니다. D3.js란 무엇인가? D3.js는 웹에서 데이터를 시각화하기 위한 도구로서, 대화형 그래프와 동적인 시각화를 만드는 데에 주로 사용됩니다. DOM, HTML, CSS, SVG 등의 웹 표준 기술을 활용해 사용자의 데이터를 브라우저 상에서 시각적으로 표현할 수 있게 해줍니다. D3.js의 중요한 특징 중 하나는 '데이터 중심' 접근법입니다. 즉, D3.js는 주어진 데이터를 바탕으로 웹 문서의 ..
[D3.js] 강력한 성능의 시각화 라이브러리, D3.js에 대해 알아보자D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 주제로 많이 쓰이며 시각화 중에 가장 복잡하고 커스터마이징이 자유롭다는 특징을 가지고 있습니다. D3.js란 무엇인가? D3.js는 웹에서 데이터를 시각화하기 위한 도구로서, 대화형 그래프와 동적인 시각화를 만드는 데에 주로 사용됩니다. DOM, HTML, CSS, SVG 등의 웹 표준 기술을 활용해 사용자의 데이터를 브라우저 상에서 시각적으로 표현할 수 있게 해줍니다. D3.js의 중요한 특징 중 하나는 '데이터 중심' 접근법입니다. 즉, D3.js는 주어진 데이터를 바탕으로 웹 문서의 ..
2023.05.22