Environment(개발환경)/Web
-
[Web] 웹 동작원리, 브라우저 렌더링 원리Environment(개발환경)/Web 2021. 4. 17. 16:27
🥺 서론 확인해보니 이전에 웹 동작원리를 한번 포스팅했었는데, 이를 면접전에 다시 복습하거나 신경쓰지 않았다는게 참 후회스러웠다. 그런 한편으로, 이 포스팅이 상당히 간략하기도 하며, 브라우저 렌더링 같은 경우엔 프론트로서 자세히 정리해보아야겠다고 생각했다. 이번 포스팅을 계기로 웹 브라우저 원리를 한번 정리하면서, 면접 전 제대로 대비하지 못한 CS지식의 중요성을 다시금 곱씹어야겠다. * 이전 포스팅(Web 동작원리) : abangpa1ace.tistory.com/43?category=913067 [Web] Web 동작원리 Web 개발 엔지니어가 된다고 마음먹었지만, 정작 프론트 / 백의 존재여부만 알지 이들이 어떻게 작동하는지는 (req, res) 가 지식의 전부다. 멘토님의 지도가 없는 세션이다보니..
-
[Web] OSI 7계층 vs TCP/IP 4계층Environment(개발환경)/Web 2021. 4. 14. 03:09
오늘 면접을 본 회사에서, 가장 기본적인 개념을 물어보았다. 웹페이지의 도메인을 엔터했을 때, 이것이 브라우저까지 보여지는 일련의 과정. 나는 브라우저 렌더링 절차에 관해서만 설명하였고, 그 외의 부분은 딥한 설명을 하지 못하였다. 또 다른 회사에서는, OSI 7계층과 TCP/IP 4계층에 대한 비교를 질문했었다. 이러한 기본적인 개념들을 면접복기의 의미에서 포스팅할 필요성이 있어 이 글을 적게 되었다. 🌐 OSI 7계층 OSI(Open System Interconnection) 7계층은 국제표준화기구(ISO)에서 개발한 모델로, 네트워크 프로토콜 디자인과 데이터 통신을 계층으로 나눠 표준화한 것이다. 이렇게 계층을 나눈 이유는, 통신이 일어나는 과정을 단계별로 서술할 수 있으며, 특정 계층에서 문제가 ..
-
[Web] 배포 - #3. IaaS 사용법(AWS EC2)Environment(개발환경)/Web 2021. 3. 27. 02:32
마찬가지로, 이번엔 3차 프로젝트(나이키) 배포에 사용한 인프라, 바로 AWS EC2 사용법에 대하여 정리해보았다. 💻 AWS(Amazon Web Service) AWS는 아마존닷컴의 클라우드 컴퓨팅 서비스이다. 다른 웹사이트나 클라이언트 응용 프로그램에 대한 온라인 서비스를 제공한다. 네트워크를 기반으로 가상 컴퓨터뿐만 아니라 스토리지, 네트워크 인프라 등 다양한 서비스를 제공한다. - 장점 저렴한 비용: 사전 확약금이나 장기 약정 없이 저렴한 종량 과금제 방식으로 운영된다. 속도 및 민첩성 개선: 데이터 센터 유지보수 불필요함. AWS는 희망하는 언어 및 운영 체제를 선택해서 적용할 수 있다. 유연성: 새로운 앱을 즉각적으로 배포하고 수요를 기준으로 축소할 수 있다. 설치가 빠르고 관리가 편함. 단시..
-
[Web] 배포 - #2. PaaS 사용법(Netlify, Heroku)Environment(개발환경)/Web 2021. 3. 27. 02:30
바로 드루가보도록 하겠다! 이번 포스팅에선, 2차 프로젝트와 포트폴리오 배포에 사용한 Netlify(클라이언트) 와 Heroku(서버) 사용법을 간단히 설명하려고 한다. 💻 Netlify : www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com 정적 웹사이트(HTML, CSS, JS)로 서비스 제공이 필요할 때, 가장 편..
-
[Web] 배포 - #1. Cloud ServiceEnvironment(개발환경)/Web 2021. 3. 23. 01:56
😆 서론 방금 막, 내 프로젝트 및 포트폴리오 사이트를 성황리에 배포하고 온 참이다! 뿌듯한 한편, 다양한 서비스를 통해 배포하다보니 각각의 방법도 아직까지 헷갈리고 있는 것 같다. 배포 포스팅 시리즈를 결심하게 된 계기는, 우선 클라우드 서비스에 다양한 분류가 있었다. (인프라, 플랫폼 등등) 이에 대한 정리와 더불어, 매 서비스마다의 간단한 배포방법과 내가 실제 적용하면서 겪었던 문제해결을 공유하고자 한다. 💻 Cloud Computing(클라우드 컴퓨팅) 클라우드 컴퓨팅은 인터넷으로 가상화된 IT 리소스를 서비스로 제공하는 것을 의미한다. 예를 들면, 개인용 컴퓨터나 기업의 서버에 개별적으로 저장한 프로그램이나 문서를 클라우드(대형 컴퓨터)에 저장하고 웹 브라우저 등 필요한 어플리케이션을 구동해 원..
-
[Storage] 로컬 스토리지 / 세션 스토리지 / 쿠키Environment(개발환경)/Web 2021. 3. 4. 16:30
🤔 서론 그간 JS 미니프로젝트나 로그인 토큰의 경우 브라우저의 LocalStorage에 저장해왔다. (아무생각 없이..?) 하지만, 프로젝트를 진행하며 이메일 저장기능을 쿠키에 적용하기를 권장했고 우선 react-cookie로 이를 구현했다. 이번 기회로, 세션 스토리지까지 세 저장소의 차이점을 명확히 구분해보려고 한다. 이는, 추후 올바른 저장소 선정에 큰 도움이 되길 바란다. 📕 Web Storage 먼저, 스토리지를 Web Storage 와 Cookie로 분리할 수 있다. Web Storage는 Cookie의 단점을 보완하기 위해 HTML5 버전에 적용됬다. 이는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조로, Session Storage(세션 스토리지), Local Stor..
-
[Axios] Axios : 비동기 통신 라이브러리Environment(개발환경)/Web 2021. 3. 4. 04:23
🤔 서론 3차 프로젝트를 진행중이고, redux-saga를 통한 로그인/회원가입 서버통신을 구현하면서 axios를 적용하는 예제를 보았다. fetch() 함수와 비슷한 역할을 수행하면서도, HTTP 메서드를 간결하게 적용할 수 있어서 유용한 라이브러리 같았다. 이번 기회에, Axios라는 라이브러리는 무엇인지, 많이 연계되는 Ajax 나 fetch() 와의 차이에 대해서도 짚고 넘어가려고 한다!! 💜 Axios 란? Axios는 브라우저와 Node.js 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 즉, 프론트와 백의 비동기 통신이 좀 더 원활하도록 도와주는 자바스크립트 라이브러리이다. Axios의 기능은 아래가 있다. 브라우저 환경: XMLHttpRequests 요청 생..
-
[Web] Web 동작원리Environment(개발환경)/Web 2020. 12. 25. 18:12
Web 개발 엔지니어가 된다고 마음먹었지만, 정작 프론트 / 백의 존재여부만 알지 이들이 어떻게 작동하는지는 (req, res) 가 지식의 전부다. 멘토님의 지도가 없는 세션이다보니, 영상과 PPT를 더 몰입해서 공부하고 블로그 포스팅하면서 이번 기회에 확실히 짚고 넘어가야겠다. 🧑💻 Session : How the Web Works 📍About 웹은 어떻게 동작할까? 프론트? 백앤드? 서버? 배포? 어떻게 내가 만든 코드가 서버에 올라가서 남들도 볼 수 있는 것일까? 🚀 What You Will Learn 웹이 어떻게 동작하는지 기본적으로 설명할 수 있다. 배포, 호스팅, ip주소, 서버, url, 프론트, 백앤드 등의 용어를 명확히 이해한다. ✍️ Note 요청 (HTTP 통신요청) - 응답 (we..