studyLog

도커가 뭐에요

Docker 정의. 도커는 컨테이너 기반의 가상화 플랫폼이다. 컨테이너화된 앱을 빠르게 빌드, 테스트 및 배포할 수 있게 해주는 소프트웨어 플랫폼으로 컨테이너 서비스는 런타임의 통합 관리(시작 , 중지, 확장)를 지원한다. 어플리케이션 개발 및 배포 수명 주기를 단순화, 자동화 및 가속화할 수 있다. Docker를 사용하면 코드를 더 빨리 전달하고, 애플리케이션 운영을 표준화하고, 코드를 원활하게 이동하고, 리소스 사용률을 높여 비용을 절감할 수 있습니다. Docker를 사용하면 어디서나 안정적으로 실행할 수 있는 단일 객체를 확보하게 됩니다. - AWS 왜 도커를 쓰나요? 보통 개발자가 개인 피시에서 작업을 하고, 개발한 소프트웨어를 운영서버에 올린다. 개발서버와 운영서버는 환경이 다르기에, 개발서버에..

크로스 브라우징이란?

웹에 대한 공부를 하다가 크로스 브라우징에 대한 정리가 필요했다. 웹 브라우저에 대한 (간단한) 이해 브라우저는 그래픽 사용자 인터페이스(GUI)로 사용자들이 웹을 사용할 수 있도록 도와주는 애플리케이션이다. 여기서 말하는 그래픽 사용자 인터페이스란, 아이콘이나 그래픽으로 기능을 이용할 수 있도록 도와주는 것이다. 그에 반대되는 것은 커맨드 라인 인터페이스(CLI )가 있겠다. 웹은 서버에서 받아온 HTML, CSS문서를 기반으로 브라우저에 내장된 렌더링 엔진이 이를 읽어서 화면을 그려주게 된다. 오늘날 크롬, 엣지, 파이어폭스, 사파리... 등 수 많은 브라우저가 서비스 되고 있다. 이 브라우저가 가지고 있는 엔진이 모두 다르기에, 같은 HTML, CSS 문서를 읽더라도 다른 방식으로 보여주게 된다. ..

JS직렬화에 대해서 알아보자 + 다른 사람도 알아듣게 말하기

공부를 하다가, 직렬화라는 개념에 대해 알 필요가 있었다. 단어부터 어려운 이 직렬화란 무엇이고 또 왜 필요한걸까? 구글에 검색해보니 직렬화는 다음과 같은 의미를 가지고 있었다. Serialization은 개체를 저장하거나 메모리, 데이터베이스 또는 파일로 전송하기 위해 개체를 바이트 스트림으로 변환하는 프로세스다. 주 목적은 필요할 때 다시 개체로 만들 수 있도록 개체의 상태를 저장하는 것. 역 프로세스를 deserialization이라 한다. 이해가 안 될 수 있다. 왜 데이터를 변환시켜서 저장하고 전송하는 걸까? 데이터를 있는 그대로 보내면 사용할 수 없는걸까? 그건 바로 데이터의 특성때문이라고 한다. 일단 아래 사례로 빗대어서 이해해보자. 친구와 전화를 하던 중, 내가 키우는 아주 귀여운 강아지를..

Vue3 lifeCycle는 어떤 방식으로 동작할까?

모든 일에는 라이프사이클이 있다. 기획서를 쓰건, 영상을 만들건, 사업을 하던 말이다. 모든 일들이 그렇겠지만 어떻게 굴러가는지 알아야, 잘 굴릴 수 있다. 그래서 이번에는 vue3의 생애주기에 대해서 공부한 내용을 정리해보고자 한다. Lifecycle Hooks - 수명주기, 생명주기 컴포넌트를 만들기만 하면 되는거 아니야? 왜 생애주기에 대해서 알아야할까? 물론 컴포넌트를 만들고, state, props를 사용해서 데이터를 변경하는 것만으로도 간단한 웹을 만들 수 있다. 다시 생각해보면 그 정도로는 간단한 웹만을 만들 수 밖에 없다는 뜻이기도하다. 결론부터 이야기해보자면, 프로그램에 대한 통제권을 가지기 위해서다. 라이프 사이클을 앎으로서, 컴포넌트의 생성, 변화하는 일련의 프로세스를 통제할 수 있게..

vue3 authorization 구현하기 (navigation guards)

vue에선 정형화된 Authorization문서를 찾아보기 힘들다, 상대적으로 리액트에 비해서 서브스트림 언어라 그런게 아닌가 싶다. 아무튼, 이번 포스팅에선 vue-router의 기능으로 인증되지 않은 사용자의 접근을 막는 로직에 대해 알아보았다. Authorization 가고 싶은 곳으로 가도록, 혹은 원하는 정보를 얻도록 허용하는 과정 Authentication 자신이 누구라고 주장하는 사람을 확인하는 절차 네비게이션 가드는 특정 URL에 접근(Navigation) 하기 전에 불려지는 훅(Hook)의 일종으로, 다른 페이지로 우회 하거나 접근 자체를 취소시킬 수 있기 때문에 네비게이션 가드라고 불린다. 예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 제한할 수 있다. Guar..

구글 클라우드 플랫폼으로 Vue 프로젝트 배포하기 + 300 달러 공짜로 받기

구글 클라우드 플랫폼을 활용해서 직접 만든 프로젝트를 배포해보자. 본 포스팅에서는 Vue3, Google Compute Engine, Nginx를 사용했다. GCP란? Google Cloud Platform 구글 내부 인프라를 사용할 수 있도록 해주는 플랫폼으로, Cloud Storage나 Compute Engine등 다른 클라우드 서비스 업체에도 공통적으로 제공하는 기능이 포함되어 있다. GCP에선 제공하고 있는 기능이 다양하다. 컴퓨트 옵션부터 나뉜다. 계산이나 프로그래밍이 수행될 수 있는 컴퓨터 자원으로, 대체로 클라우드 서비스를 하는 곳은 다양한 옵션을 제공한다. AWS나 Azure같은 서비스도 있는데 GCP를 선택한 이유는 firebase와의 확장성을 위해서기도 하고, 구글이란 이름이 이뻐서 그..

Vercel에서 Proxy를 사용해보자.

axios로 CORS 정책을 준수하는 방법에 대해서 공부하고 있다. 크게 두가지 방법으로 나뉘는데, 서버에서 Access-Control-Allow-Origin 헤더를 직접 설정해준다. 프론트에서 Proxy를 이용해서 설정한다. 이 같은 방법이 있다. 위의 두 방법을 모두 적용해 두가지 방식의 axios 통신을 구축한다음 dev 환경에서 실행했을 땐, 모두 정상작동 webpack 프로젝트 환경 내에서 devServer를 통해 proxy를 태운다면 원활하게 작동 CTO님께서는 Production에서는 또 다른 방법이 필요할거라고 말해주셨다. vercel을 통해 환경을 바꿔주고, 실행해봤다. 그런데 vercel을 통해서 배포했을때, 304라는 에러와 함께 아무것도 전달되지 않았다. proxy를 태우지 않은 경..

(번역) 주소창에 google.com 을 입력하면 어떤 일이 생길까?

들어가며 지금같은 디지털 시대에선, 모든 일을 인터넷으로 처리할 수 있습니다. 함께 공부를 하거나, 소셜 미디어에서 친구를 만들 수 있으며, 전세계에 있는 사람들과 온라인 게임을 하거나, 음악을 들으며, 비디오를 볼 수 있고, 프리젠테이션을 동료와 함께 공유하거나, 심지어는 비즈니스 미팅을 하는 것도 모두 인터넷으로 할 수 있습니다. 모든 사람들이 인터넷을 이용할 수 있게 된 이후로, 인터넷이 어떻게 작동하는지에 대해서 궁금증이 많았습니다. 어떻게 클릭 한번으로 전 세계 어느 곳이든 정확하게 내가 원하는 정보로 이동할 수 있게 된 것인지에 대해서 말이죠. 이번 글에서는 웹 브라우저에 URL을 입력하고 엔터키를 누르면 어떤일이 발생하는지에 대해서 궁금증을 풀어보고자 합니다. 개념 시작하기 전에, 웹페이지가..

CORS는 도대체 뭘까..?

1.Cross-Origin Resource Sharing (CORS) 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제다. CORS를 이해하기 위해선 SOP에 대한 이해가 선행되야 한다. SOP란? Same-Origin policy (SOP) 다른 출처의 리소스를 사용하는 것을 제한하는 보안 방식으로, CORS 에러를 일으키는 정책이다. The same-origin policy is a critical security mechanism that restricts how a document or script loaded by one origin can interact with a resource f..

컴포지션 API, setup() 기초 사용법과 개념

vue의 기본 vue는 한 파일안에서 스크립트, 마크업, 스타일을 작성할 수 있는 SFC(single file component) .vue 문법을 지원한다. 즉, HTML, CSS ,JavaScript를 하나로 합친 셈이다. 내부에 있는 블록들은 컴포넌트의 뷰, 로직, 및 스타일을 캡슐화해서 배치한다. 다음은 간단한 SFC 구조다. {{ greeting }} Vue는 기본적으로 컴포넌트 모듈을 객체 형태로 선언하며 props 정의, data, methods, 라이프사이클(mounted, updated, beforeUnmount, …), computed, watch 등의 기능을 객체의 속성과 메소드를 사용해서 선언한다. 이와 같은 방식을 Option API라고 부르는데, 속성별로 역할과 책임이 분명히 나눠..