본문 바로가기

Web Development50

WEB/네트워크/ HTTP (HyperText Transfer Protocol) HTTP(HyperText Transfer Protocol) [index] 1. HTTP란 무엇일까? 1-1. HTTP의 개념 1-2. HTTP 특징 4가지 1-3. HTTP로 제어할 수 있는 것 1-4. HTTP 저번에 따른 사항들 2. HTTP 요청과 응답 2-1. HTTP 서버 구조 2-2. HTTP 요청에 포함되는 요소 3-3. HTTP 응답에 포함되는 요소 3. HTTP 통신 흐름 4. HTTP 보안 취약점과 해결 방안 4-1. HTTP 보안 취약점 4-2. HTTP 보안 취약 문제 해결 방안 1. HTTP란 무엇일까? 1-1. HTTP의 개념 HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 HTTP는 네트워크 장치 간에 정보를 전송하도록 설계된 애플리케이션 계층 프.. 2023. 9. 16.
babel이란? babel이란? [ 목차 ] 1. babel의 등장배경 2. babel의 개념 3. babel의 기능 3가지 4. babel의 프로세스 3단계 1. babel의 등장배경 프론트엔드 영역의 기술들이 빠르게 변화하면서 최신 브라우져 조차도 지원하지 못하는 문법과 여러 기술들이 출연하고 있습니다.모두가 빠르게 새로운 브라우저를 사용한다면 호환성에 대한 걱정없이 개발할 수 있겠지만, 아직도 많은 사람들이 예전 버전의 브라우저를 사용하고 있습니다. 그렇기 때문에 프론트엔드 개발자하면 하위 호환성을 반드시 고려할 수 밖에 없습니다. 이렇게 다양한 상태의 브라우저에서도 동일한 서비스를 유지하기 위해 크로스브라우징은 필수입니다. 크로스 브라우징은 브라우저 환경에 맞춰 사용자에게 동일한 웹 서비스를 경험할 수 있도록 최.. 2023. 8. 21.
Local Storage & Session Storage란? Local Storage & Session Storage란? [ 목차 ] 1. Web Storage 개념 2. storage 이벤트 3. local Storage란? 4. session Storage란? 5. Web Storage & Cookie 비교 6. cookie가 아닌 Web Storage를 사용하는 이유 1. Web Storage 개념 localStorage와 sessionStorage ko.javascript.info HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있습니다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴입니다. 그리고 영구저장소(LocalStorage)와 임.. 2023. 8. 16.
webpack이란? Webpack 이란? [ 목차 ] 1. webpack의 등장 배경 2. Webpack의 개념 3. Webpack의 필요성 4. Webpack의 장단점 5. webpack의 Concepts 1. Webpack 의 등장 배경 webpack이 만들어진 배경을 보면 왜 webpack을 사용하지는 알수있습니다. 잠시 역사를 짚어보면, 약 2010년경부터 자바스크립트 프레임워크들의 경쟁과 함께 자바스크립트 웹 개발 추세가 치솟았습니다. 프론트엔드 업계에서 많이 사용되는 프레임워크인 리액트와 뷰만 하더라도 프로젝트 파일의 크기가 꽤 큽니다. 또한 최근에는 백엔드의 로직을 일부 프론트엔드로 옮겨오는 추세인지라 그 복잡도가 더 증가하고 있습니다. 따라서 이런 대규모 소스코드를 브라우저가 그대로 다운받아서 실행할경우, 너.. 2023. 8. 16.
[OAuth2.0] OAuth 2.0이란? OAuth 2.0이란? 목차 1. OAuth 등장 배경 2. OAuth 2.0이란? 3. OAuth2.0 의 프로토콜 흐름(Protocol Flow) 4. OAuth2.0 의 프로토콜 권한 부여 방식 4가지 1. OAuth 등장 배경 요즘은 사용자가 서비스를 이용할 때 소셜 로그인으로 로그인을 하는 경우가 많습니다. 혹은 구글 캘린더에 일정을 추가하거나 소셜에 컨텐츠를 공유하는 등의 기능들도 할 수 있습니다. 이 기능을 구현하려면 사용자의 정보를 구글이나 카카오 등으로부터 제공받아 우리 서비스에 저장하고 활용할 수 있어야 합니다. 하지만 상대의 입장에서는 우리 서비스가 안전하게 사용자의 정보를 저장하고 관리할 거라는 확신이 없을 수 있습니다. 혹시 사용자의 정보가 유출될 경우 피해의 범위가 정보를 제공해.. 2023. 8. 15.
[ JWT ] JWT(Json Web Token) 이란? Part.1 클라이언트 인증 방식 3가지 1. 쿠키 인증 2. 세션 인증 3. 토큰 인증 Part .2 JWT란? 1. JWT란? 2. JWT의 구조 3. Jwt를 이용한 인증 과정 4. 장단점 5. 왜 cookie 또는 session이 아닌 JWT를 사용할까? 6. JWT 사용시 주의사항 Part.1 클라이언트 인증 방식 3가지 JWT를 설명하기에 앞서 클라이언트 인증 방식 3가지에 대해 설명하고, 이를 바탕으로 왜 토큰 인증 방식을 사용하는지에 대해 설명하도록 하겠습니다. 서버가 클라이언트 인증을 확인하는 방식은 대표적으로 쿠키, 세션, 토큰 3가지 방식이 있습니다. 1. Cookie 인증 Cookie 인증이란? Cookie는 Key-Value 형식의.. 2023. 8. 15.
[ OAuth 2.0 ] Access Token & Refresh Token 으로 보안 강화하기 [ OAuth 2.0 ] Access Token & Refresh Token으로 보안 강화하기 이전에 로그인 기능을 구현했던 방식에서 보완과 관련한 문제점을 발견하여 이를 해결하기 위해 로그인 기능을 수정하게 되었습니다. 이 과정은 기존의 방식이 왜 잘못되었는지를 분석하고, 더 안전한 방식인 [ OAuth2.0 ] Access Token & Refresh Token 방식에 대해 다루고있습니다. 1. 기존의 로그인 구현 방식과 문제점 2. 해결방안 : [ OAuth 2.0 ] Access Token & Refresh Token을 사용하자 3. Refresh Token 이란? 4. Refresh Token의 한계 5. Refresh Token은 어디에 저장해야 안전할까? 6. 기존의 문제점을 해.. 2023. 8. 14.
[ React ] React Select library를 사용해 태그 생성 및 태그 추가 기능 구현 React Select library를 사용해 태그 생성 및 태그 추가 기능 구현 해당 기능을 개발하게 된 배경 인플루언서와 클라이언트를 매칭하는 광고 플랫폼 회사에서 인턴으로 근무할 당시 사내의 TF팀에서 진행하는 admin system 개발 프로젝트에 참여하게 되었습니다. 해당 프로젝트는 인플루언서 데이터를 효율적으로 관리하기 위한 내부용 admin page 개발이 목표였습니다. 기능을 개발하는 중간에 기획이 변경되어 동료가 맡았던 인플루언서 태그 기능의 볼륨이 초반 계획보다 커지게 되었습니다. 그러한 이유로 태그 생성하는 select box와 관련된 기능들을 구현해서 동료에게 전달하는 방식으로 업무가 수정되었습니다. 따라서 태그 생성과 관련된 코드들이 기존에 동료가 작성했던 코드를 수정하거나, 추가.. 2023. 7. 31.
[카카오 API] 카카오 맵 & 카카오 로그인 API 이용한 서비스 배포하기 카카오 맵 & 카카오 로그인 API 이용한 서비스 배포하기 [index] 1. 간략한 배포 전 과정 2. 카카오맵 API 연결하기 3. 카카오 로그인 API 연결하기 4. 배운점 1. 간략한 배포 전 과정 이번 프로젝트에서도 서비스 배포를 담당하게 되었습니다. 이전의 프로젝트에서는 외부 API를 사용하지 않아 비교적 수월하게 배포를 진행했었는데 이번 프로젝트에서는 외부 API를 사용하였더니 배포하는 과정에서 어려움이 있었습니다. 이 글에서는 배포하는 과정에서 마주했던 문제와 해결 방법에 대해 다뤄보려고 합니다. 우선 이번 프로젝트는 Amazon S3를 이용해 배포를 진행하였습니다. Amazon S3를 통한 배포에 대해 궁금하시다면 아래의 글을 참고해주세요. https://reveur1996.tistory.. 2023. 7. 27.

티스토리툴바