ttaeng_99 's 개발의 흔적들 ttaeng_99 's 개발의 흔적들

Environment(개발환경)

• [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)로 서비스 제공이 필요할 때, 가장 편..

  Read More
• [Web] 배포 - #1. Cloud Service

  Environment(개발환경)/Web 2021. 3. 23. 01:56

  😆 서론 방금 막, 내 프로젝트 및 포트폴리오 사이트를 성황리에 배포하고 온 참이다! 뿌듯한 한편, 다양한 서비스를 통해 배포하다보니 각각의 방법도 아직까지 헷갈리고 있는 것 같다. 배포 포스팅 시리즈를 결심하게 된 계기는, 우선 클라우드 서비스에 다양한 분류가 있었다. (인프라, 플랫폼 등등) 이에 대한 정리와 더불어, 매 서비스마다의 간단한 배포방법과 내가 실제 적용하면서 겪었던 문제해결을 공유하고자 한다. 💻 Cloud Computing(클라우드 컴퓨팅) 클라우드 컴퓨팅은 인터넷으로 가상화된 IT 리소스를 서비스로 제공하는 것을 의미한다. 예를 들면, 개인용 컴퓨터나 기업의 서버에 개별적으로 저장한 프로그램이나 문서를 클라우드(대형 컴퓨터)에 저장하고 웹 브라우저 등 필요한 어플리케이션을 구동해 원..

  Read More
• [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..

  Read More
• [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 요청 생..

  Read More
• [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..

  Read More
• [HTTP] HTTP 정의, 메소드, 메세지

  Environment(개발환경)/Web 2020. 12. 24. 15:53

  Wecode 세션이었지만, 중요한 개념이기도 하고 강의 중간중간 검색을 통해 내용을 보완해가면서 별도 포스팅을 하였다. 🧐 HTTP란? 웹 상에서 커뮤니케이션을 하는 통신규약. (개발자 도구 Network 탭에 표시됨) HyperText : 문서와 문서가 링크로 연결되어 있음을 뜻함 Transfer : 전송하다(HTML 웹페이지 문서) Protocol : 컴퓨터끼리 어떻게 주고받는지 대한 소통방식 또는 약속 - HTTPS : SSL/TLS 의해 암호화된 데이터를 트랙스액션 (주민번호, 비밀번호 등 민감한 정보 교류에 유리함) SSL(Secure Socket Layer, 보안 소켓 계층) : 웹페이지와 서버(혹은 서버간) 전송되는 데이터를 암호화하여 보안유지하는 표준기술 TLS(Transfer Layer ..

  Read More
• [Terminal] iTerm2 설치 및 zsh 개발환경 설정

  Environment(개발환경)/Linux & Terminal 2020. 12. 22. 21:58

  🤔 서론 터미널의 강력한 버전인 iTerm2, 각종 기능확장을 위한 zsh 설정에 대해 배웠다. 단순한 커스터마이징뿐 아니라 자동완성 등 많은 기능 지원 ⚙️ 개발환경 세팅 1. iTerm2 : 터미널 상향버전 2. homebrew : macOS 패키지 관리 프로그램 - brew --version : 버전, 설치 확인 - brew list : 설치된 패키지 리스트 확인 - brew install [프로그램명] : 프로그램 설치 2.1 zsh(지쉘) 설치 - brew install zsh - brew list -> nccurses, pcre, zsh 세 개의 패키지 확인 가능 2.2 ohmyzsh 설치 : zsh 기능 확장, 여러가지 테마 및 플러그인 지원 - ohmyzsh install script 구글..

  Read More
• [Git & Github] Git 다시 공부하기 (드림코딩 엘리)

  Environment(개발환경)/Git & Github 2020. 12. 6. 19:05

  🙀 다시 공부해보는 Git 과 Github! Git 명령어를 통해 직접 Github로 push까지 해보았지만, 아직 사용하는데 있어 익숙치가 않았다. 또한, branch나 commit 등 갈 길이 멀기에, 심화를 들어가기 전 드림코딩 엘리님 영상으로 복습했다. 출처: Youtube 드림코딩 엘리님 영상(youtu.be/Z9dvM7qgN9s) 📕 Git 공부 준비하기 - Git 설치하기(공식사이트) : git-scm.com/git-scm.com/download/ - Git GUI 설정: 프롬프트(터미널) 명령어 기반 프로그램으로 UI 권장. (git-scm.com/download/gui/mac) Git - GUI Clients GUI Clients Git comes with built-in GUI tool..

  Read More