한땀한땀 코딩하기

CORS 그 첫 만남 최근 프로젝트를 진행하면서 또 마주친 것이 있으니 바로 CORS 정책입니다. GET 요청은 문제없이 보내져서 막연하게 생각하고 넘어갔지만, POST 요청이 시작되면서 브라우저가 이런 경고창을 띄우기 시작했습니다. 이 오류 메시지는 프론트와 백의 서버를 분리하여 배포하면서부터 처음 접했었는데, 이렇게 잊을만하면 마주치게 되는 것 같습니다. 웹 브라우저 기반으로 작업하는 프론트엔드 개발자라면 늘 신경 쓰고 백엔드 개발자와 소통해야 하는 부분이지 않나 싶습니다. CORS 경고 메시지 위의 오류 메시지를 읽어보면 브라우저의 오리진으로부터 서버로 보내는 XMLHttpRequest 요청이 CORS 정책에 의해 막혔다고 안내하고 있습니다. preflight request의 응답에 Access-C..

페이지는 누가 렌더 하는가? 리액트를 공부하다 보면 접하게 되는 용어 중 CSR(Client-Side Rendering)이 있습니다. 이름 그대로 클라이언트 측에서 렌더링을 하는 것인데, 이것이 정확히 무슨 의미일까요? 이와 비교되어 항상 등장하는 다른 용어로는 SSR(Server-side Rendering)이 있는데 둘은 어떻게 다를까요? 이를 설명하기 위해선 다양한 방법이 존재하겠지만, 이번 글에서는 간단하게 Next.js를 사용해보면서 Next.js가 제공하는 data-fetching 함수와 연결하여 설명해보려고 합니다. Next.js란? Next.js by Vercel - The React Framework Production grade React applications that scale. Th..

서버 API 나왔나요? 네? 아직 없다고요? 아직 기업 규모의 프로젝트를 경험해보진 못했지만, 웹 서비스를 만들게 되면 크게 프론트엔드 개발자와 백엔드 개발자로 나누어져 작업을 했습니다. 서로 처음 기획 단계에서 도란도란 어떻게 통신할지, API는 어떤 것이 필요한지 논의를 한 뒤 각자 할 수 있는 걸 열심히 뚝딱뚝딱 만들어갑니다. 그러다 프론트엔드 개발자는 이제 api로 데이터를 받아와 화면에 출력하는 작업을 하고 싶어집니다. 그래서 백엔드 개발자에게 물어봅니다. '서버 API 나왔나요?' '아 아직 완성이 안 돼서 없는데요...!' 없더라도 침착하자 사실 당연한 상황이라고 생각합니다. 서버나 API가 미리 갖춰진 프로젝트에 새로이 프론트가 붙는 것이 아니라 무언가 바닥부터 만들기 시작했다면 어떻게 보..

Storybook이 뭔가요? Storybook: UI component explorer for frontend developers Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient. storybook.js.org 간단하게 말하면 Storybook은 오픈소스 UI 테스터 툴입니다. 즉, UI 컴포넌트를 제작하면서 바로바로 확인해볼 수 있도록 도와주는 툴입니다. 아마 Storybook을 쓰기 전의 저와 비슷한 생각을 가진 사람이라면, 바로바로 페이지를 만들면서 확인할 수 있는 ..

신나는 프론트엔드!! 바닐라 자바스크립트로만 코딩을 하다가 리액트를 처음 접했을 때는 엄청난 신세계를 접한 기분이었습니다. 말로만 듣던(?) 컴포넌트를 활용해서 코딩을 해볼 수 있고, 복잡하게 이벤트리스너와 핸들러를 구현할 필요도 없어 보였습니다. 이런 느낌이면 할만하겠는데!라고 생각이 살짝 올라올 때, 슬슬 그것이 찾아왔습니다. 상태 관리 아주 간단한 페이지 구성을 하는데도 props가 미친 듯이 늘어나기 시작하고, 가장 하위 컴포넌트에게 전달하려고 10개가 넘어가는 props를 몇 번에 걸쳐 전달하는 제 코드를 발견하게 되었습니다. 깃허브 이슈 탭 클론 코딩을 할 때였는데, 결국 보다 못한 팀원 분이 Context API와 useReducer를 이용해 제 코드를 완전 해체하고 조립해주셨습니다. 옆에서..

HTTP란? 개발을 공부하기 한참 전부터 웹서핑을 하다 보면 HTTP라는 단어는 심심치않게 목격했던 기억이 납니다. 늘 인터넷 주소 앞에 붙어있었지만, 주소창에서나 잠시 보고 넘길 뿐, 실제로 주소는 www로 시작했다 보니 깊게 생각을 하지 않았던 것 같습니다. 웹 공부를 시작하고나서야 HTTP라는 것의 존재가 확 다가오기 시작했는데, 대충 웹 세계에서의 통신 규약/프로토콜 정도로만 간단하게 이해하고 넘어갔던 것 같습니다. 그런데 막상 생각해보니 누군가 제게 http가 뭐야,라고 물었을 때 '그냥 인터넷 통신 프로토콜 중 하나야' 라고 대답을 할 수는 없지 않나 하는 생각이 들어 한번 정리를 하면 좋겠다는 생각에 다다랐습니다. HTTP는 OSI 7 계층과 TCP/IP를 기준으로는 애플리케이션 레이어 속하..

웹 개발과 관련된 JD를 살펴보면, REST API 제작 경험을 요구하는 경우가 종종 있습니다. 서버가 직접 템플릿을 이용해서 필요한 데이터를 넣은 뒤 화면을 출력해주는 SSR(Server-side Rendering)과 반대된다고 말하기엔 무리가 있지만, 아무래도 사용자가 보는 화면을 누가 담당하느냐의 기준에서 차이가 나기에 서로 비교의 대상이 되는 것 같습니다. 간단하게 생각해서 SSR은 서버가 데이터를 직접 찾아 넣어준다면, REST API는 클라이언트와 서버 쪽이 분리되어 서버는 클라이언트가 필요해서 http 형식으로 요청한 내용을 json 같이 약속된 형태로만 전달하고, 이를 가지고 클라이언트는 별도로 작업을 하여 사용자에게 제공하게 됩니다. RESTful API 사실 REST API를 찾아보면 ..

웹 사이트의 이름? 우리는 평소에도 큰 고민 없이 인터넷에 소위 말하는 '주소'를 이용하여 접근하고 있다. 모든 서버나 서비스는 고유한 주소를 가지고 있는데, 이는 보통 숫자로 된 ip 주소로 구성되는데, 이걸 인간이 이해하기 쉽게끔 문자로 표현하고 이를 연결 지어주는 것이 dns 서버의 역할이라 할 수 있다. 그래서 그런지, 우리는 꼭 개발자가 아니더라도 url이라는 표현을 일상적으로 사용하는데, 일전에 회사에서 URI라는 단어를 처음 접하고 굉장히 당황했던 기억이 난다. 선배들이나 동료들에게 물어봐도 그냥 url이랑 비슷한 거예요, 라고만 대답이 돌아왔는데 최근에 다시 접하게 되어 기회가 닿은 김에 정리를 해보았다. URI vs URL vs URN URI: Uniform Resource Identif..

들어가기에 앞서 이 글은 python 웹 프레임워크 flask를 이용하여 제작한 웹 어플리케이션을 AWS를 이용하여 배포하는 과정을 담고 있습니다. 필자는 flask와 AWS를 처음 사용해보았으며, 데이터베이스는 붙이지 않고 AWS는 무료로 1년 제공되는 상황에서 서비스를 이용했습니다. 개발 환경은 macOS Catalina 버전 10.15.3입니다. 밑에서 설명할 배포 과정은 개인 웹 프로젝트를 무료로 도메인을 지정하고 배포하기 위해 찾아본 방법 중 한 가지입니다. 해당 프로젝트의 상세 내용은 아래의 깃헙 레포에서 확인하실 수 있습니다. 예시 프로젝트 깃헙 레포 링크: https://github.com/pje1740/cart_savior 목차 AWS Elastic Beanstalk Console을 이용..