공부/Web

Firebase Hosting 이미 파이어베이스 프로젝트가 만들어져 있는 상황이다. 왼쪽 사이드바에서 빌드-Hosting으로 들어간다. 시작하기를 누르고 화면에 안내되는 순서대로 진행하면 된다. Firebase CLI 설치 npm 명령어를 복사해서 터미널에서 실행하여서 필요한 도구를 설치해준다. 프로젝트 초기화 우선 firebase login 명령어로 로그인을 해준다. y를 입력하면 자동으로 외부 웹사이트로 연결되고 파이어베이스를 가입할 때 사용한 구글 이메일을 이용하여 로그인을 할 수 있다. 이렇게 하면 손쉽게 로그인할 수 있다. 잘 로그인됐는지 확인하기 위해 firebase login 명령어를 다시 입력해보면 이미 로그인되어 있다는 메세지를 확인할 수 있다. 이제 프로젝트의 루트 디렉토리에서 fire..

1. 가상환경 세팅 VSCode 터미널 창을 열고 아래 명령어를 입력하여 가상환경을 생성한다. python -m venv venv 가상환경의 이름을 다른 걸로 하고 싶다면 마지막 인자를 바꿔주면 된다. 이 명령어를 실행하면 생성한 가상환경 이름으로 폴더가 만들어지는데 나는 venv로 만들었기 때문에 venv 폴더가 생겼다. 이제 venv/Scripts 폴더 안의 activate.bat를 실행시켜주면 가상환경이 실행된다. cd venv/Scripts activate.bat 2. Flask 설치 가상환경을 실행한 상태에서 flask를 설치해준다. pip3 install Flask 잘 설치됐는지 확인하려면 pip list 명령어를 사용하면 된다. 3. main.py 작성하고 실행해보기 프로젝트 폴더 안에 ma..

웹팩에 대해 가장 잘 이해할 수 있었던 영상이었다. 웹팩에 대해 알아보기 전 우선 모듈과 모듈 번들러에 대해 알아야 한다. 모듈이란? 코드의 재사용성과 유지보수 측면에서 파일을 여러 개로 분리하여 개발을 하게 되는데 이러한 파일들을 모듈이라고 한다. 모듈 번들러란? 사용자가 브라우저를 통해 웹사이트에 접근을 하면 브라우저는 사용자들에게 UI를 보여주기 위해 웹서버에 HTML, CSS, Javascript와 같은 자원을 요청하게 된다. 웹서버는 준비된 자원들을 브라우저에게 응답해줌으로써 사용자들이 UI를 볼 수 있다. 여기서 모듈의 개수가 많다면 브라우저가 요청해야 하는 모듈의 개수가 많아지게 되고 이러한 네트워크 비용의 증가는 페이지 로딩 시간을 증가시켜 사용자 경험 측면에서 좋지 않다. 이 점을 해결하..

1. 브라우저 주소창에 www.google을 입력하면 어떤 일이 일어나나요? 더보기 https://superohinsung.tistory.com/85 사용자가 웹브라우저 검색창에 www.google.com을 입력한다. 웹브라우저는 캐싱된 DNS 기록들을 통해 해당 도메인 주소와 대응하는 IP주소를 확인한다. 캐싱된 기록이 없을 경우 다음 단계로 넘어간다. 웹브라우저가 HTTP를 이용하여 DNS에게 입력된 도메인 주소를 요청한다. DNS란? Domain Name System Server. URL의 이름들과 IP주소를 저장하고 있는 데이터베이스. 숫자로 된 IP주소 (ex> 127.0.0.1) 대신 사용자가 사용하기 편하도록 주소를 매핑해주는 역할. TCP/IP DNS가 웹브라우저에게 찾는 사이트의 IP주소..

[참고 영상] https://youtu.be/mcnJcjbfjrs WEB 웹 브라우저(클라이언트)가 HTTP 요청을 하면 정적인 컨텐츠(HTML)를 제공하는 프로그램. 정적 컨텐츠, 동적 컨텐츠란? 더보기 정적 컨텐츠 - 요청 인자 값에 상관없이 달라지지 않는 컨텐츠 - 어느 사용자 요청이든 항상 동일한 컨텐츠 동적 컨텐츠 - 요청 인자에 따라 바뀔 수 있는 컨텐츠 정적 컨텐츠 요청 시, HTML, CSS, JPG와 같은 정적 컨텐츠를 제공한다. 동적 컨텐츠 요청 시, WAS로 전달하여 WAS가 처리한 결과를 클라이언트에게 전달해준다. WAS Web Application Server 웹 서버 + 웹 컨테이너 DB 조회나 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 위해 만들어진 프로그램. 대부분..