Youngble_개발스토리

로그인기능을 구현할때 쿠키사용시에는 보안관련해서 secure, httponly, csrf.disable, samesite=strict 등 기본 설정이 필요한데이를위해서 기존에 들었던 XSS와 CSRF가 무엇인지 제대로 공부하게되었다. 먼저 세션기반(쿠키사용)으로 관리할지 JWT 토큰기반으로 관리할지 고민하다가 세션기반의 경우는 서버가 직접관리하면서도 확장성(여러 서버가 생긴다면)이를 통합해야하는 개념과 서버에 과부화가 걸릴수도있는 문제등을 생각했을때 해보고싶은 경험도 중요했지만 이부분은 프리티어 기준으로 너무 신경쓰다보면 꼬일거같아서 과부화와 확장성을위해 좀더 편하게 관리하기위해 JWT 기반으로 사용하기로했다. JWT를 사용한다면 보통 access token과 refresh token을 사용하게 되는데,..

HTTPS의 ssl/tls이 어떻게 동작하는지 원리를 알고싶어서 공부하게되었다. 사실 EC2가 아니더래오 어덯게 동작하는지 알면좋다고생각했다. HTTP와 HTTPS는 무엇이 다르고 HTTPS는 뭐였지? -> Https는 secure이니 http에 보안을 더한거지-> 그래서 무슨 보안을 더한건데? 보안넣고 통신하는거랑 안하고하는거랑 무슨차이인데? ssl인증서는 뭐야? 이렇게 꼬리에 꼬리름 물어가며 생각하게되었던거같다. 그리고 찾아가면서 참 재미있는 주제로 공부했다고 생각도든다. 추후에 내가 머리로 해당 원리를 머리에 그려갈때쯤, 제일 정확하게 확고하고 쉽게 설명한 글을 발견하였다. https://nuritech.tistory.com/25#google_vignette HTTPS 통신 원리 쉽게 이해하기 (F..

인트로이 주제는 요근래 백엔드 파트로 도메인을 사고 배포하는 과정에서 예전에 제대로 잡히지 않은 부분들이 세팅을 하면서 알게 되어 개인적으로 정리하기 위한 글이라, 해당 개념에 대한 정의나 정해져있는 정보에 대한 글을 쓰지않고 내가 이해한 흐름대로 써내려가고자한다. 상황먼저 상황은 자바스프링부트 프로젝트를 ec2 인스턴스를 생성해서 해당부분에서 build하고 백그라운드로 실행하도록 구현한 상태,postman 및 클라이언트에서 해당 api의 endpoint 별로 데이터가 잘 내려오는지 확인하기위해 public ip address 또는 public dns주소가 필요했고 ec2 인스턴스를 생성시 해당 정보를 제공하기때문에 해당 주소들로 api 테스트하였다. 하지만 http 라는 부분과 ssl 도입이 필요했고 ..

시작처음시작은 하나의 의문에서 시작되었다. 왜 JSON 형태의 객체를 주고받을때 문자열 상태 '{ "a" : "hi" }' 와 같은 형태로 변경되어서 보내거나 받는걸까? JSON이면 우리가 content-type에 지정했듯이 application/json 이라고 명시되어있는데 왜 저렇게 문자열로 주고받아야하고 저걸 불필요하게 직렬화 하거나 역직렬화/파싱 처리를 해야할까? 라는 의문이들었다. 데이터 통신의 형태리서치한 결과 http를 통해 데이터를 보낼수있는 형태는 바이너리 와 문자열(텍스트)로만 가능하다는것이다. 물론 다른 프로토콜을 사용하거나 타입이나 그런건 설정으로 바꿀수있다곤하지만 결국에는 바이너리 or 문자열 이다. 여기서 혼동되면 안되는부분이 header에 들어가는 content-type의 경우..

보통 웹사이트에서 mp4형식이 아닌 스트리밍형식의 영상을 재생이 가능하지만 다운로드를 못받는데 m3u8 과 ts를 사용하는 영상의 경우 ffmpeg를 통해 다운로드할수있다. 추후에 m3u8, ts, mp4 와 presigned URL 글을 올리겠지만 HLS(Http Live Streaming) 스트리밍 영상 패턴을 공부하다가 내가 듣고있는 강좌가 있는데 일정 기간이 지나면 못보게 되었는데 이 방법을 이용하면 소장가능하겠다 하여 찾다가 알게되었다. 수동 다운방법 순서 1. brew install ffmpeg 설치 ffmpeg를 통하여 비디오, 오디오, 이미지를 쉽게 인코딩, 디코딩, 먹싱, 디먹싱을 할수있도록 도움을 주는 멀티미디어 프레임워크이다. 2.해당 영상 m3u8의 link address 복사, 이..

pull --rebase 란? 먼저 rebase이 무엇인지 알아보자. 영어 뜻대로 re-base, 즉 re(다시 ) base(기반)을 잡겠다는 뜻이다. 아래 그림을 보면 좀더 이해가 쉽다. 파란색 branch를 develop 이라 생각하고 빨간색 branch를 feature 기능 브랜치라고 생각해보자. 최초 develop에서 feature 브랜치를 만들고 작업을 1, 2, 3 해나갈것이다. 그리고 해당 기능을 완성하고 develop에 다시 PR merge를 할려고할때 최초 develop에서 가져왔을때 이외에 추가된 commit history가 존재한다고 하면(다른 팀원이 작업이나 새로운 기능이 완료되어 develop에 PR merge 된 경우), 왼쪽 그림처럼 rebase없이 git pull 을 할경우 ..

사용 계기 기존에 예전에 있던 분이 eslintrc를 구축하여 그대로 쓰고있었는데 vscode를 사용할때는 .vscode에 extensions.json과 settings.json을 통해 eslint를 기본 formatter로 지정하였지만 팀원들은 vscode가 아닌 웹스톰으로 사용하기때문에 해당 formatter 설정이 들어가지 않았고 그로인해 코드 정렬시 다르게 적용되어 PR 리뷰를 할때 불필요한 + , - 줄이 생기게 되었고, 리뷰하는데 불필요한 에너지와 시간을 쏟게 되는것을 방지하고자 prettier를 설정하기로 했다. (아래 스크린샷과 같은 PR시 불필요 변경사항들) 작동조건 prettier를 사용하는 방법은 간단하다. 다음과 같은 조건을 다 만족해야지만 정상 작동한다 1. prettier 라이브..

[원인] 순수 video 태그 영역으로 재생하는게 아닌 썸네일 이미지를 사용하여 videojs 라이브러리를 사용 재생시 풀스크린을 하려고 video 태그는 width: 0, height: 0 으로 하고 아래와 같이 썸네일 image를 서버에서 가져와 style 적용함 2. 썸네일 클릭시 숨겨진 해당 video 태그의 ref 로 useRef로 play() 시키고 fullscreeen 메서드 실행시켜 풀스크린시 핸드폰을 가로세로 회전시켰을때 아래와같이 본래 사이즈로 돌아오지 못하는 이슈가 발생 [원인 분석 및 해결 방안] 먼저 videojs 라는 라이브러리를 사용하고 있기때문에 videojs에서 사용하는 속성 또는 이슈가 있는지 체크해봄 videojs의 속성, css를 직접 건드려보았지만 수정할수없었고 풀스..

그전에 웹팩 과 바벨에 관하여 정리한적이 있는데 개념뿐만 아니라 어떠한 흐름으로 쓰는지에 대해서 좀더 디테일하게 정리하고자 한다. 순서 웹팩 적용 1. 웹팩 설치 : webpack/ webpack-cli/ webpack-dev-server 2. webpack.config.js 3. package.json scripts 빌드 명령어 3. 로더: css-loader / style-loader 4. 플러그인(Plugin) 5. 개발서버(server) 바벨 적용 1. 바벨설치: babel-loader/ @babel/core / @babel/preset-env 2. 프러그인(Plugin) 3. Preset 4. 리액트 / @babel/preset-react 5. babel-loader 웹팩 적용 1. 웹팩 설치 ..

순서 1. Lighthouse 설명 - First Contentful Paint, FCP - Speed Index, SI - Largest Contentful Paint, LCP - Time To Interactive, TTI - Total Blocking Time, TBT - Cumulative Layout Shift, CLS 이전글 웹 성능최적화 (1) 보러가기 1. Lighthouse 설명 웹 페이지의 종합 성능을 측정하는 툴로써 이전에는 따로 프로그램을 다운로드하여 사용해야했지만 이후에 구글 크롬은 브라우저에 기본내장하여 사용할 수 있도록 했다. Lighthouse를 통해 성능 점수를 매길때 6개의 지표(Metrics)가 있다. 또한 이러한 지표를 웹 바이탈(Web Vitals)이라고 한다. Fi..