Youngble_개발스토리

Https 도입과정 DNS 구조 이해(브라우저에 도메인 입력시 과정)

인트로이 주제는 요근래 백엔드 파트로 도메인을 사고 배포하는 과정에서 예전에 제대로 잡히지 않은 부분들이 세팅을 하면서 알게 되어 개인적으로 정리하기 위한 글이라, 해당 개념에 대한 정의나 정해져있는 정보에 대한 글을 쓰지않고 내가 이해한 흐름대로 써내려가고자한다. 상황먼저 상황은 자바스프링부트 프로젝트를 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..

순서 1. 성능 최적화는 왜 필요할까? 2. 성능 최적화는 어떻게 이루어질까? 3. 서비스 성능분석 방법 4. 성능 최적화 기법들 5. 크롬 개발자 도구 1. 성능 최적화는 왜 필요할까? 먼저 성능 최적화가 필요한 가장큰 이유는 성능이 저하되면 사용자가 떠나고 매출이 감소한다. 반대로 말하면 성능이 향상되면 사용자가 늘고 매출이 오른다. 구글이 딥 러닝 기술을 이용하여 페이지 로딩속도와 이탈률 및 전환율의 관계를 분석하였을때 다음과 같은 결과가 나왔다. 위의 결과만 보더래도 페이지 표시가 3초~10초 지연이 되면 32%~123%만큼 증가되어 이탈률을 갖게 된다는 것이다. 따라서 웹 성능을 최적화 하게되면 서비스 사용자에게 더 나은 사용자 경험(UX)를 제공하기 때문에 가입률과 전환율은 증가되고 이탈률을 ..

오늘은 Web APIs 관련해서 정리하고자한다. APIs 란? 우리가 늘상 API 라는 말을 많이 하고있지만 실질적으로 정확히 모르고 쓸때가 많다. 백엔드와 데이터를 통신할때도 API통신이라 하고 DOM을 컨트롤할때도 Browser API를 사용한다고 하는등 많은 곳에서 API라고 쓴다. 정의로는 Application Programming Interfaces(APIs)는 프로그래밍 언어에서 개발자가 복잡한 기능을 보다 쉽게 만들수 있도록 만들어진 구조이다. API는 복잡한 코드들을 제거하고 쉬운 구문으로 대체하여 사용할 수 있게 제공해주는 것이다. 정의로 말하면 솔직히 이해하기 쉽지 않다. 아래의 그림의 예시를 통해 좀더 쉽게 설명해보자. 우리가 실제로 집에서 전기를 사용한다고 했을때, 플러그 소캣에 꽂..