전체 글46 Caching for Web Service 캐싱은 웹 서비스에서 성능을 향상하고 응답 시간을 줄이는 데 있어 필수적인 기술이다. 데이터를 일시적으로 저장하는 방식을 통하여 서비스가 각 요청마다 데이터를 재생성하지 않고도 빠르게 데이터를 검색/제공할 수 있도록 한다. 이는 서버의 부하를 줄일 뿐 아니라 사용자 경험의 향상도 이끌어낸다. 웹 서비스에 사용되는 캐시는 여러 유형이 있으며 각각 고유한 장점을 갖는다. 빠른 액세스를 위해 서버의 램에 데이터를 저장하는 메모리 캐시부터 서버를 향하는 요청 수를 줄이기 위해 사용자의 장치에 데이터를 저장하는 브라우저 캐시까지 각 유형의 캐시는 성능 향상을 위해 중요한 역할을 한다. 먼저, 웹 서비스에서 사용되는 메모리 캐시, 디스크 캐시, CDN 캐시 그리고 브라우저 캐시에 대해 알아본다. 그리고 속도와 효율.. 2023. 2. 7. CORS 1. CORS란 무엇인가? Cross-Origin Resource Sharing(CORS, 교차 출처 리소스 공유)는 추가 HTTP 헤더를 이용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 자원이 자신의 출처와 다를 때 CORS HTTP 요청을 실행한다. 여기서 출처(Origin)가 의미하는 것은 무엇일까? 출처는 세 가지 요소로 구성된다. 각각 Scheme(사용하는 프로토콜, http or https), Hostname(서버(가상 호스팅)의 이름 혹은 IP), Port(서버와의 연결을 위한 TCP 포트 번호로, 입력되지 않았을 시 서비스의 기본 포트가 이용된다)이다. 따라서, 동일한 출처라면 두 URL.. 2023. 1. 31. Event Loop 자바스크립트는 Single Thread 기반의 언어로 한 번에 하나의 작업만을 처리할 수 있는 특징을 가지고 있다. 하지만 동시에 비동기 작업을 처리할 수 있어 동시에 많은 작업을 처리할 수 있다는 특징을 가지고 있기도 하다. 이 때 비동기로 동작하는 핵심 요소는 Node.js의 libuv 라이브러리와 브라우저가 가지고 있다. 싱글 쓰레드임에도 동시에 여러 작업을 처리하는 이와 같은 특징은 이벤트 루프에 기반한다. 자바스크립트는 싱글 쓰레드에서 작업을 처리하기 때문에 시간이 오래 걸리는 작업은 다른 작업을 진행할 수 없도록 한다. 이를 차단 기능이라고 부른다. 차단되는 것을 방지하기 위해 다양한 방법을 이용한다.(setTimeout, Promise 등) 브라우저는 Call Stack, Heap, Even.. 2023. 1. 24. Event Propagation 이번 글은 발생된 이벤트의 전파에 대한 글이다. https://developer.mozilla.org/en-US/docs/Web/API/Event Event - Web APIs | MDN The Event interface represents an event which takes place in the DOM. developer.mozilla.org 이벤트는 사용자의 액션에 의해 발생할 수도 있고, API에 의해 생성될 수도 있고, 요소를 선택한 후 click 메소드를 호출하는 방식 혹은 dispatchEvent를 통해 발생될 수도 있다. 특정 상황에서 발생하기를 원하는 이벤트는 onEvent와 같은 형식으로 DOM Node에 부착되거나 addEventListener를 통해 Event발생 시 Event .. 2023. 1. 23. Elice 2차 프로젝트, Cocktailer 회고 2022년 12월 16일 ~ 2022년 12월 30일, 약 3주간 진행된 Cocktailer 프로젝트에 대한 회고 https://www.cocktailer.p-e.kr Cocktailer www.cocktailer.p-e.kr https://github.com/Cocktailer-Elice/cocktailer GitHub - Cocktailer-Elice/cocktailer: 🍹 칵테일에 대한 모든 것 🍹 칵테일에 대한 모든 것. Contribute to Cocktailer-Elice/cocktailer development by creating an account on GitHub. github.com 1. React-hook-form의 이용 처음 사용하게 된 계기는 전에 들었던 강의를 통해 react.. 2023. 1. 22. Recoil State Management Library Recoil [https://recoiljs.org/ko/] state management tool을 이용하는 이유 - props가 이용되지 않는 components에서 불필요하게 prop을 받아 전해줘야 한다. (Traveling prop problem) - 그에 따라 수정 소요 발생 시 오류가 발생할 가능성이 높은 등의 문제가 발생할 수 있다. 다른 State management tools? React 자체가 가지고 있는 Context, Redux 등이 존재함. Recoil의 state 저장은 atom이라 부름 - root를 RecoilRoot로 감싸주어야 한다 - atom을 생성하고 보관하는 파일을 만드는 편이 좋다. atom의 생성 // atom의 생성.. 2022. 8. 25. Typescript + styled-components styled-components는 JS 라이브러리로 typescript 환경에서 사용하기 위해서는 DefinitelyTyped를 이용해야 한다. npm install --save-dev @types/styled-components yarn add @types/styled-components -D styled components의 타입을 설명해주는 라이브러리를 불러오면 TS 환경에서 이용이 가능해진다. DefinitelyTyped는 인기있는 수많은 npm 라이브러리에 대한 타입 설명을 포함하고 있으니 이용할 일이 많을 것. -------------------------------------------------------------------------------------------------------.. 2022. 8. 12. 스파르타코딩클럽 메이킹 챌린지 후기 > 챌린지 결과로 생성한 웹페이지 - 작업에 들어가기 전, 설계가 우선이다 - 어떻게 되겠지 생각하고 작업을 먼저 하면 어디서부터 꼬였는지 찾을 수가 없다 - 최소한의 필수 기능만을 담아 MVP를 먼저 만드는 데는 다 이유가 있다. - 그래도 어떻게든 완성을 했다 - 깃허브 organization, branch 사용법을 익혔다. - EC2 서버를 ssh 환경으로 접속하는 방법을 익혔다. - EC2 프리 티어의 서버는 ssh 접속하여 작업 시 CPU 사용량이 급증한다. 로컬에서 작업하는 것이 좋다. - 팀으로 작업하게 될 시 소통과 분담이 중요한 것 같다. - pymongo에 비해 Mongoose가 활용이 간편한 것 같다. - Schema를 설계하여 DB의 validation을 진행하도록 해야 한다. - .. 2022. 3. 18. # Mu-ther 개발 정리 구성 Python Flask를 이용 AWS EC2에 배치 python-dotenv를 이용 .env 파일 읽기 pymongo로 MongoDB 이용 gabia domain을 구입 cloudflare 서비스를 이용 https 적용 spotipy를 이용하여 spotify api를 사용 html/CSS/JS(+jQuery) 프론트엔드 구성 기능 https일 경우에만, 사용자 위치정보를 받아 날씨정보를 확인 해당 위치 날씨 정보에 따른 음악 추천 (DB 우선, 없을 시 Spotify api 사용) 날씨를 넷으로 분류하여, 로그인 된 사용자의 상호작용으로 저장된 노래의 날씨 추천 정보 변화 추천되지 않는 음악을 사용자가 추천하고자 할 경우를 위하여 검색기능을 추가 아쉬운 부분? DB에 노래가 부족한 경우 필요치 않은.. 2022. 3. 18. 이전 1 2 3 4 5 6 다음
