분류 전체보기

구글 클라우드 플랫폼으로 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라고 부르는데, 속성별로 역할과 책임이 분명히 나눠..

DP(다이나믹 프로그래밍) 그거 어떻게 하는건데?

프론트엔드 코딩테스트는 for loop나 DP정도만 사용할 줄 알면 다 할 수 있어요 DP요,,? 저는 드라마 DP말고는 잘 모르겠는걸요,,? 아무튼 이 DP라는 개념을 알면 뭔가 프로그래밍 할 때 큰 도움이 되지 않을까? 라는 생각과 함께 그 동안 밀려 있었던 알고리즘 공부를 다시 시작하기 좋은 시작점이 되지 않을까 싶었습니다. DP가 무엇인지에 대해 자세히 알아보도록 하겠습니다. Dynamic Programming DP는 다이나믹 프로그래밍의 약자입니다. 동적 프로그래밍, 또는 동적 계획법이라고 불리는데요. 구체적인 알고리즘을 말하는 것이라기 보단, 문제를 해결하는 일종의 패러다임에 가깝습니다. 이 패러다임의 핵심은 문제를 잘게 쪼갠다는 것입니다. "어떤 문제를 풀기 위해 그 문제를 더 작은 문제의..

현실에 의존하지 않기

최근에 회사에서 변수명에 대한 피드백을 받았다. 변수명이 직관적이지 못하다는 것이다. 처음 들어보는 피드백에 다소 당황스럽기도 했고, 직관적인 변수명은 무엇인지에 대해 고민해보기 시작했다. 혼자서는 답을 찾기가 어려워서, 주변 동료들에게 물어보기 시작했다. 그러던 중, 한 동료가 역으로 "석영님은 정부 부처에서 받아오는 데이터를 어떻게 표현하시겠어요?" 라고 묻는 것이다. 지금껏 늘 해왔던 대로, getDepartmentData라는 식으로 표현할 것 같다고 답했다. 그런데 예시 변수명을 직접 보여주었는데, getPayerData, getCustomerData 라는 식으로 적힌 걸 볼 수 있었다. 이게 무슨 일인가 싶기도 했다. 그러더니 돌아온 대답은 "정부 부처라는 말은 현실에 있어서 누구든 생각할 순 ..

새우잠을 자도 고래꿈을 꿔라

학교에선 별 생각없이 들어오는 공부를 쳐내며 살아왔다. 이후, 적당히 좋은 직업 가지고 살아야지라는 생각으로 있었는데, 불행하게도, 언론사에 들어가서 내가 기자가 되고 싶지 않았다는 것을 배웠다. 그리고 지금은 개발자로 일을 하고 있다. 갑자기 급격한 진로 변화와 함께 상상하던 것 이상으로 빡센 일정을 볼땐 생각이 많이 들기도 한다. 피드백 한번 받고나서 잠이 오질 않아서, 새벽 5시에 깨는 일도 많았다 코드 5줄을 짜는데 3주가 걸리는가 하면, 왜 그 코드를 선택했는지 어떤 이유로 작성했는지에 대한 문서화를 진행하기도 한다. 그리고 현실에 있는 것을 코드로 옮기는 작업의 중요성을 느끼고 있다. 아무튼 이전에 하던 공부와는 차원이 다른 영역이여서, 가끔 힘이 부족할때도 느낀다. 물론 능력도 함께... 회..