Published 2022. 5. 8. 21:18

교육 | 패스트캠퍼스 React & Redux로 시작하는 웹 프로그래밍 1주차

교육/패스트캠퍼스

728x90

국민내일배움카드로 국비지원받고 프론트엔드 학습
열공 챌린지 1주차

❓상황

작년 12월달에 스파르타코딩클럽을 통해 웹 코딩공부를 마친 이후, 잔여 국비지원비를 소모시킬겸 프론트엔드 기초를 다지기 위해 패스트캠퍼스의 React & Redux로 시작하는 웹 프로그래밍을 지원하였음.

회고록은 열공 챌린지를 수행하기 위해 작성하였음. (1~8주차까지 작성해야한다.)

내가 작성한 회고록이 우수글로 선정되었다고 문자를 받게 되었다. (2022-8-12 수정완료)

🎥 목차

1. 목표

2. 알게된 점

3. 좋았던 점

4. 아쉬운 점

5. 나의 다짐

🚀 목표

패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 1주차 학습강의 듣기가 학습 목표이다.

💡 알게된 점

웹 애플리케이션 Flow

흔히, 애플리케이션이라고한다면 휴대폰 어플리케이션을 떠오를것이다.

웹 사이트도 어플리케이션이라고 칭하므로, 개념을 숙지해두자.

웹 애플리케이션의 동작흐름은 다음과 같다.

1. 사용자가 크롬, 익스플로러, 네이버 웨일 등 웹 브라우저를 열고 주소창에 페이지 주소를 입력한다.

2. 웹 브라우저는 서버측에 해당 주소에 해당되는 웹 페이지를 요청한다.

3. 서버는 웹 페이지를 찾아서 웹 브라우저에 HTML이라는 웹사이트의 뼈대를 전송해준다.

4. HTML을 받은 웹 브라우저는 CSS, JS, 이미지 파일 등 추가 요청을 한다.

5. 서버는 웹 브라우저가 요청한 자료를 전달해준다.

6. 웹 브라우저는 서버로부터 받은 파일을 조합하여, 화면에 렌더링 한다.

7. 렌더링된 화면을 사용자가 본다.
※ 렌더링이란, 웹 브라우저의 뷰포트에 웹 사이트를 그려내는 행위이다.

Cross browsing

크롬, 익스플로러, 네이버 웨일 등 시중에 나와있는 웹 브라우저를 동일한 사용자 경험을 줄 수 있도록 제작하는 기술 및 방법을 Cross browsing( = 크로스 브라우징 )이라고 한다.

쉽게 말하자면, 브라우저 양식을 Cross browsing이라고 생각하면 된다.

예를 들어, 모든 웹브라우저가 북마크가 있듯이 Cross browsing을 토대로 브라우저를 만든다.

Material Design

Material Design이란, 플랫한 디자인의 장점을 살리면서도 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식을 말한다.

2014년 구글이 안드로이드 스마트폰에 적용하면서 널리 퍼지기 시작했다.

현재도 많이 사용되고 있는 이미지이기도 하다.

내가 사용하는 아이콘인 🏫, 📖도 Material Design의 일종이라고 볼 수 있다.

웹사이트 개발시 아이콘을 사용하는데, 아이콘을 제공해주는 사이트가 많다.

그 중 가장 유명한 Font Awesome 사이트의 아이콘이 있다.

[공부] Font Awesome React 설치 및 사용

📖 Font Awesome 정리 1. 설치 : 3번의 과정 1. Add SVG Core npm i @fortawesome/fontawesome-svg-core Font Awesome에 있는 아이콘(SVG)를 이용할 수 있게 해준다. 2. Add Icon Packages # 무료 아이콘 npm i @f..

2mojurmoyang.tistory.com

.(dot)으로 시작하는 파일이나 폴더

.(dot)으로 시작하는 파일이나, 폴더는 숨김 속성을 가진 파일 또는 폴더이다.

별로 중요하진 않지만, vscode 폴더는 vscode 환경설정 값을 가진 파일을 가진다.

그래서, vscode를 실행하면 자동으로 생겨서 vscode 폴더를 삭제해도 나중에 다시 생겨나니 걱정안해도 된다.

<!Doctype html>

최상단 코드인 <!DOCTYPE html>은 해당 HTML 파일은 HTML5 버전이라는 것을 웹 브라우저에게 알려주는 역할을 한다.

파비콘

웹 브라우저 탭에 네이버와 같은 로고를 파비콘이라고 한다.

나중에 배우겠지만, 파비콘은 favicon.ico이라는 파일명으로 지정하는 것이 권장된다.

CSS 초기화 CDN

모든 태그들은 기본적으로 사이즈나 테두리 등, 기본적인 스타일을 갖고 있다.

웹사이트 개발시, 해당 스타일을 없애고 스타일을 넣어준다.

기본적으로 갖고 있는 스타일을 개발자가 수동으로 없앨 수 있지만, 한줄의 CDN 코드를 삽입하게 되면 간편하게 스타일을 없앨 수 있다.

Data 전역 속성

HTML 태그 안에 data 속성을 부여할 수 있다.

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

해당 data 속성은 JavaScript와 CSS에서 접근 할 수 있다.

# JavaScript
var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

# CSS
article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

<script /> 태그의 defer 속성

본래 <script> 태그는 HTML을 분석하는 도중에 만나게 되면, HTML 분석을 멈추고 script을 분석한다.

그래서 일반적으로 body 태그 최하단에 <script /> 태그를 작성한다.

defer 속성을 가진 <script /> 태그는 HTML 분석 도중에 만나더라도 HTML 분석을 마친 이후에 script를 분석하기 때문에 body 태그 최하단에 넣지 않아도 되는 편리성을 준다.

@import

인접 형제 선택자 : +

선택자 다음 형제 요소 하나만 선택

일반 형제 선택자 : ~

선택자 다음 형제요소 모두 선택

가상 클래스 선택자 : n번째 요소

선택자 형제 요소들 중 n번째 요소 선택

짝수는 2n 홀수는 2n+1으로 적는다.

가상 클래스 선택자 : 부정 선택자(not)

괄호 안에 있는 요소가 아닌 모든 요소 선택

가상 요소 선택자 : ::before

선택자 내부의 맨 앞에 요소를 생성(::after는 반대로 선택자 내부의 맨 뒤에 요소를 생성한다.)

속성 선택자 : [속성]

속성을 포함한 요소를 선택

속성과 값을 포함한 요소를 선택

🙌 좋았던 점

기본을 알 수 있어서 좋았다.

작년 11월에 HTML을 학원을 다니지 않고 독학으로 공부를 시작했다.

그래서 현재 5월인 만큼 어느 정도 기본은 갖추었다고 생각해서 금방금방 넘어가려고 했다.

강의를 보면서 든 생각은 내가 배우지 못한 내용이 꽤 많아서 놀라웠다.

특히, 타 국비 강의에서 이러한 내용을 알려준 적이 없었기 때문에, 내가 공부를 헛으로 배웠구나 하고 생각하게 되었다.

더욱 기본을 다져야겠다는 생각을 하게 되었다.

예상보다 괜찮은거 같다.

내가 느낀 의외였던 점은 스타벅스 강사님꼐서 굉장히 자세히 설명해 주신다는 것이다..!

인터넷에 패스트캠퍼스를 검색해보면 절대 다수가 패스트캠퍼스 강의를 추천해주지 않는다고 한다.
대표적인 이유는 제대로된 설명없이 휙휙 넘어간다고 한다.

그래서인지 수강하기 전에는 제대로 학습을 할 수 있을지 조금 걱정했지만, 우려했던것보다는 괜찮았다.

🐧 아쉬운 점

등록 문자

내가 국비를 지원하고 HRD-Net으로 자부담금 결제까지 했음에도 불구하고, 카톡으로 자부담금 결제하라고 메시지가 3번이나 와서 당황했던 적이 있었다.

3번째 카톡 메시지를 보자마자 든 생각은, 내가 수강생에서 누락이 되었나? 하고 의심이 들었다.

불안이 생겨서, 결국 패스트캠퍼스에 전화해서 수강이 정상적으로 되었다고 말을 듣고 안심을 했다.

내가 React & Redux 강의의 기수가 1기여서 그런지, 조금 정돈되지 않은 점이 있는 거 같다.

💬 나의 다짐

하루에 1개 챕터씩 학습하기

1주 차 강의를 듣고 나서 든 생각은 꽤나 괜찮다는 느낌을 받았다.

물론 강의 제목에서 알 수 있듯이, React와 Redux를 배워봐야 알 수 있겠지만, 현재까지는 만족스럽다.

어느정도 배운 상태에서 강의를 수강해야, 머릿속에 잘 들어오는 거 같다.

내가 맨 처음에 HTML이나 CSS를 학습했을 때, nth-child()와 같은 복잡해 보이는 내용을 외우려고 해도 금방 까먹었는데, 어느 정도 CSS를 다뤄보고 실제로도 nth-child를 사용해보고 강의를 수강하니 머릿속에 단번에 들어왔다.

하루에 1개 챕터씩 학습을 해야 수료가 되기 때문에 열심히 해야겠다고 생각한다.

저작자표시 비영리 변경금지

'교육 > 패스트캠퍼스' 카테고리의 다른 글

교육 \| 패스트캠퍼스 React & Redux로 시작하는 웹 프로그래밍 6주차 (0)	2022.06.11
교육 \| 패스트캠퍼스 React & Redux로 시작하는 웹 프로그래밍 5주차 (0)	2022.06.03
교육 \| 패스트캠퍼스 React & Redux로 시작하는 웹 프로그래밍 4주차 (0)	2022.05.29
교육 \| 패스트캠퍼스 React & Redux로 시작하는 웹 프로그래밍 3주차 (0)	2022.05.21
교육 \| 패스트캠퍼스 React & Redux로 시작하는 웹 프로그래밍 2주차 (0)	2022.05.15