[항해99] 사전스터디 - 1주차 강의회고록

🦄 사전 스터디 1주차 강의회고록

항해99🚩에 참여하게 되면서 OT주간에 있을 입학시험에 대비하기 위해 사전 스터디에 참여하게 되었다.

우리의 목표는 우선 입학시험에 대비하여 웹개발 종합반 강의 과정을 2회독 하는 것이다.

하지만 대부분의 팀원들과 이야기를 나눈 결과, 다들...벌써 완강을 완료했다고 하여 우선 혼자라도 2회독에 도전해 보기로 한다.

첫 시작일이 02/11이고 개강은 3/06일이기 때문에 여유롭지만은 않다. 바쁘게 한 번 달려 보아야겠다!😂

 

---

 

✨02/11 : 목표 : 사전스터디 1주차 완강

 

📒강의 노트 정리

01 ~ 02 웹 브라우저의 원리 

- HTML, CSS : HTML 웹의 뼈대를 잡아주고, CSS는 스타일링을 도와준다. 이렇게 만든 HTML, CSS, JS파일을 서버에 요청(api)하면 응답으로 돌려준다.

- JavaScript의 역할 : 서버에 데이터를 요청하고 받아와 브라우저에서 보여줄 수 있다. (JQeruy와 Fetch로 요청을 브라우저에 보여준다)

- 웹 브라우저의 역할 : 주소를 통해 서버에게 요청을 보내고(api), api는 요청에 맞는 HTML파일(또는 데이터)을 돌려 준고, 브라우저는 다시 응답받은 것들(HTML, CSS, JS)을 받아와서 화면에 보여주기만 한다. (www.naver.com/ => www.naver.com이라는 서버의 '/'창구에 요청을 보냄)

- api에게 요청을 보내면, 서버의 데이터베이스에서 데이터를 돌려주고, 브라우저에서는 받은 데이터를 브라우저가 이해할 수 있는 Javascript 언어로(json) 변환 해준다.

- 새로고침 시 다시 받아옴, 이미 로드된 화면은 내가 고칠 수 있다.

- Python : 서버의 역할을 한다. 크롤링 하여 데이터를 가져올 수 있다.

- Flask : Python의 라이브러리를 사용하여 주소를 통해 요청에 대한 데이터를 돌려주는 웹 서버를 만든다.

- mongoDB : 데이터 베이스

- * 로컬 개발환경 : 원래는 클라이언트와 서버가 별개의 컴퓨터지만 우리는 한대의 컴퓨터에서 클라이언트(요청) + 서버 역할을 동시에 수행할 것이다. 이를 *로컬 개발환경 이라고 한다.

- 추후 컴퓨터를 24시간 돌릴 수는 없기 때문에, 배포까지 진행할 것이다.

웹의 동작 원리

+ 브라우저의 동작 원리에 대해 더 공부해 보기(http통신, 브라우저 엔진, 렌더링 엔진, 자바스크립트 해석기, 자료 저장소 등) => https://velog.io/@ijaesin/browser-1

 

03 VScode

- 마이크로소프트 사에서 개발한 코드 에디터(메모장에도 가능하지만 자동완성, 줄바꿈 등 더 편리하게 사용 가능한 에디터)

 

04 HTML, CSS 기본 내용

- html안의 head의 역할 : 페이지의 속성을 정의하거나, 필요한 스크립트를 부른다. 눈에 보이지 않는 필요한 것들을 담는다(meta, script, link, title 등), 구글이나 네이버 검색엔진이 내 사이트를 퍼갈 수 있는 장치 등도 포함

- <h1> 태그 : 페이지 마다 하나씩은 넣어주어야 구글이 제목으로 인식하고 구글 검색엔진에 검색이 잘 잡힘

+ head 안에 들어가는 태그 속성들에 대해 공부하면 좋을 듯

 

10 부트스트랩

- 부트스트랩 : https://getbootstrap.com/docs/5.0/components/buttons/

- 타인이 만들어놓은 외부 css파일을 내 html에 적용한다. 현업에서 미리 완성된 부트스트랩을 사용하는 경우가 많다.

Buttons

1) 부트스트랩 코드스니펫 head 안에 추가

  <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

2) 부트스트랩에서 필요한 템플릿 선택하여 body에 추가

    <button type="button" class="btn btn-primary">Primary</button>

 

- 그 밖에 다양한 css 속성들 : css 백그라운드 어둡게 하기 효과

 background-image: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
          ),
          url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);

 

12 본격 부트스트랩 써보기

- 부트스트랩으로 카드페이지에서 골라서 body에 copy 후 추가

- 카드 4개로 보이도록 md-3 => md-4로 수정

      <div class="row row-cols-1 row-cols-md-4 g-4">

부트스트랩 카드를 추가한 페이지

- 포스팅박스 넣기 floating labels - textarea 추가

- 스타일링 완료 후

부트스트랩 포스팅 박스까지 추가 후 페이지

 

18 내가 만든 웹 페이지 배포해보기 - 깃헙(github)

1) 깃헙 가입 후, repo 생성

 

2) 파일 업로딩 클릭

 

3) 해당 파일의 index.html 파일 끌어다 넣고 'commit change' 클릭

 

4) settings => pages => branch를 main으로 설정 후 save

 

5) 배포 완료된 주소 확인

클릭 시 배포된 내 사이트로 이동 한다.

**Github에서 배포할 경우, 반드시 'index.html' 파일 단 하나를 업로드 해서 올려야 한다.(깃헙에서 정해놓음) 그 외의 파일은 배포 불가(ex. mypage.html 등)

 

6) 파일을 수정 후 다시 반영하고 싶을 경우, code에서 edit하여 새 코드로 붙여놓은 후, 'commit change'하면 수정된 코드가 반영된다.

 

✅ 느낀점

1일차지만 기존에 공부 했던 부분과 겹치는 내용이 많아 html, css는 수월하게 학습이 가능했고, 덕분에 목표로 한 1주차는 완강할 수 있었다!🙌

특히 웹 브라우저의 동작 원리나, 전체적인 웹 서비스의 동작 원리와 과정을 한번 훑을 수 있어서 좋았다.

웹 브라우저의 동작 원리는 프론트의 동작 원리를 이해하는 데에 가장 중요한 부분이기 때문에 꼭!! 정확히 숙지하고 있어야 할 것 같다.

부트스트랩은 꼭 한 번 사용해 보고 싶었는데 이번 기회에 사용해 볼 수 있어 좋은 경험이었다. 간단한 프로젝트나 디자인에 크게 신경 쓸 필요가 없을 경우, 디자인에 대해 고민할 시간을 줄여주어 굉장히 간편하고 빠르게 작업이 가능할 것 같다. 현업에서 부트스트랩을 많이 사용하는지 궁금하기도 하다.

또 깃헙에서 정적페이지를 배포해 본 것은 처음이라 흥미로운 경험이었다. 오늘과 같이 2~5주차도 원만하게 완강할 수 있도록 하자!

 

 

✖️보완할 점, 아쉬운 점 

더 공부하고 싶은 부분 : 웹 브라우저의 동작 원리(http통신, 브라우저 엔진(자바스크립트 해석), 렌더링 엔진, 자료 저장소(쿠키) 등)

강의 내용이 아무래도 웹개발 전반을 한 번 훑는 위주의 강의이다 보니 깊이 있기 보다는 기본적인 내용이 많았던 것 같아 아쉬웠다. 그래도 기본이 가장 중요하다 보니 잊혀졌던 기억을 되살려 보는 기회가 되어 좋았다😄

2주차에서는 가장 중요하다고 생각하는 자바스크립트와 서버-클라이언트 통신이니 더 집중해서 들어야겠다.