티스토리

Youngble_개발스토리
검색하기

블로그 홈

Youngble_개발스토리

youngble.tistory.com/m

“기억보단 기록을” 깊이 알아가는 즐거움 개발자 성장과정

구독자
11
방명록 방문하기
공지 앞으로 공부 계획 모두보기

주요 글 목록

  • Http통신 데이터 형식(바이너리, base64) form-data사용하는이유 시작처음시작은 하나의 의문에서 시작되었다. 왜 JSON 형태의 객체를 주고받을때 문자열 상태 '{ "a" : "hi" }' 와 같은 형태로 변경되어서 보내거나 받는걸까? JSON이면 우리가 content-type에 지정했듯이 application/json 이라고 명시되어있는데 왜 저렇게 문자열로 주고받아야하고 저걸 불필요하게 직렬화 하거나 역직렬화/파싱 처리를 해야할까? 라는 의문이들었다. 데이터 통신의 형태리서치한 결과 http를 통해 데이터를 보낼수있는 형태는 바이너리 와 문자열(텍스트)로만 가능하다는것이다. 물론 다른 프로토콜을 사용하거나 타입이나 그런건 설정으로 바꿀수있다곤하지만 결국에는 바이너리 or 문자열 이다. 여기서 혼동되면 안되는부분이 header에 들어가는 content-type의 경우.. 공감수 4 댓글수 3 2024. 10. 16.
  • [CS] 웹팩(webpack), 바벨(babel) 그전에 웹팩 과 바벨에 관하여 정리한적이 있는데 개념뿐만 아니라 어떠한 흐름으로 쓰는지에 대해서 좀더 디테일하게 정리하고자 한다. 순서 웹팩 적용 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. 웹팩 설치 .. 공감수 0 댓글수 0 2023. 1. 12.
  • [CS] 웹 성능최적화 (2), Lighthouse 순서 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.. 공감수 0 댓글수 0 2023. 1. 4.
  • [CS] 웹 성능최적화 (1) 순서 1. 성능 최적화는 왜 필요할까? 2. 성능 최적화는 어떻게 이루어질까? 3. 서비스 성능분석 방법 4. 성능 최적화 기법들 5. 크롬 개발자 도구 1. 성능 최적화는 왜 필요할까? 먼저 성능 최적화가 필요한 가장큰 이유는 성능이 저하되면 사용자가 떠나고 매출이 감소한다. 반대로 말하면 성능이 향상되면 사용자가 늘고 매출이 오른다. 구글이 딥 러닝 기술을 이용하여 페이지 로딩속도와 이탈률 및 전환율의 관계를 분석하였을때 다음과 같은 결과가 나왔다. 위의 결과만 보더래도 페이지 표시가 3초~10초 지연이 되면 32%~123%만큼 증가되어 이탈률을 갖게 된다는 것이다. 따라서 웹 성능을 최적화 하게되면 서비스 사용자에게 더 나은 사용자 경험(UX)를 제공하기 때문에 가입률과 전환율은 증가되고 이탈률을 .. 공감수 1 댓글수 1 2023. 1. 3.
  • [CS] Web APIs 오늘은 Web APIs 관련해서 정리하고자한다. APIs 란? 우리가 늘상 API 라는 말을 많이 하고있지만 실질적으로 정확히 모르고 쓸때가 많다. 백엔드와 데이터를 통신할때도 API통신이라 하고 DOM을 컨트롤할때도 Browser API를 사용한다고 하는등 많은 곳에서 API라고 쓴다. 정의로는 Application Programming Interfaces(APIs)는 프로그래밍 언어에서 개발자가 복잡한 기능을 보다 쉽게 만들수 있도록 만들어진 구조이다. API는 복잡한 코드들을 제거하고 쉬운 구문으로 대체하여 사용할 수 있게 제공해주는 것이다. 정의로 말하면 솔직히 이해하기 쉽지 않다. 아래의 그림의 예시를 통해 좀더 쉽게 설명해보자. 우리가 실제로 집에서 전기를 사용한다고 했을때, 플러그 소캣에 꽂.. 공감수 1 댓글수 0 2022. 12. 29.
  • [CS] 모노레포, 모놀리식 아키텍처, 멀티레포, MSA, 마이크로서비스 아키텍처 오늘은 프로젝트 아키텍쳐 관련하여 정리하고자한다. 순서 1. 모놀리식 아키텍처 2. 모놀리식 단점 3. 마이크로서비스 아키텍처 MSA 4. 멀티레포 장점 5. 멀티레포의 단점 6. 모노레포 모놀리식 아키텍처, Monolithic Architecture 모놀리식 아키텍처는 전통적인 소프트웨어 프로그램 모델이다. 위의 사진처럼 하나의 서비스를 위해 모든 코드와 프론트/백엔드, 로직 등 한곳에서 관리하고 빌드/배포 운영 하는 것이다. 보통 프로젝트 초기에는 코드 관리, 인지 오버헤드 및 배포의 용이성 면에서 모든 것을 한꺼번에 릴리스할 수 있기 때문에 처음 시작하는 작은 스타트업같은 경우나 소규모의 프로젝트는 흔히 모놀리식 아키텍처로 많이 진행한다고 하고 지금도 많이 쓴다. 모놀리식 단점 하지만 한곳에서 관리.. 공감수 1 댓글수 1 2022. 12. 27.
  • [CS] 브라우저 렌더링 과정 브라우저에서 해당 URL을 입력후 브라우저 렌더링 과정에 대해서 어떻게 일어나는지 정리해보자. TL;DR 렌더링 과정 1. 브라우저 주소창에 특정 주소를 입력 2. 해당 주소의 서버를 찾고 만약 캐시가 있는지 먼저 체크, 그리고 DNS(Domain Name System)가 실제 서버로 연결하고 http, https에 따라 통신한다. 3. 별도의 path없이 기본 url 요청 '/'로 보낼시 루트 설정은 기본 설정의 index.html을 요청하게되고 서버에서 루트폴더에 있는 index.html을 클라이언트쪽(브라우저)으로 보내준다. 4. 해당 index.html을 받은 브라우저에서 텍스트로 이루어진 파일을 파싱(parsing)하면서 DOM 트리 생성 5. html을 읽다 중간 link tag에서 CSS요청.. 공감수 0 댓글수 0 2022. 12. 26.
  • [CS] Webpack, bundler 드디어 웹팩과 번들러에 대한 공부를 정리하려고한다. 많이 본 그림일거다. 웹팩이라하면 말그대로 여러가지 js,css,ts,이미지파일 등등 웹만드는 파일들을 한군데 묶어준다(bundling)라는 개념은 대강 알고있었다. 그런데 언제? 왜? 그리고 어떻게 웹팩으로 번들링을 해주는건지는 모른다. 따라서 다시 기초로 돌아가보자. 예제를 위해 간단한 코드와 파일을 생성해보고 이를 테스트해보면서 다시한번 개념을잡자. 기본적으로 내가 만든 구성은 다음과 같다. 기본적인 index.html 을 만들고 이곳에서 쓸 js파일을 5개 만들었다. Import 하고싶은 script에 type을 module을 작성하고 5개의 js파일을 import해주었다. 각각의 js파일에는 string값이 들은 변수, while문을 도는 함수.. 공감수 1 댓글수 0 2022. 3. 16.
  • [CS] 웹 정의, 역사, 종류 등 웹프로그래밍 웹의 기본 목적 다른 여러 컴퓨터에서 문서를 공유하거나 보는 목적 웹에서 다루는 문서를 웹 문서 라고 부름 웹의 구조 인터넷을 활용 거미줄처럼 연결된 정보 소통망, world wide web →웹문서를 인터넷 상의 컴퓨터들 끼리 주고 받는 네트워크 시스템 웹 구성 웹서버 와 클라이언트 컴퓨터들로 구성 웹서버 웹사이트를 탑재하는 컴퓨터로 구글(www.google.com), 네이버(www.naver.com) 등 웹 문서, 이미지, 동영상 등의 데이터 저장 관리 웹 클라이언트의 요청을 받아 웹 문서 전송 웹 서버로 작동하도록 하는 소프트웨어를 실해하는 컴퓨터 웹 클라이언트 사용자 인터페이스 담당 웹 서버에 웹 문서를 요청하고 받아 사용자에게 볼수있도록 출력 인터넷과 웹은 다르다 인터넷 웹의 개념이.. 공감수 0 댓글수 0 2022. 2. 28.
  • [CS] CORS https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라 developer.mozilla.org 교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.. 공감수 0 댓글수 0 2021. 12. 12.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.