JavaScript - 1-1

강사님 Info

이웅모 강사님

 

 - 헬스케어 SW 기업 대표

 - 아래 사이트 만드심.

https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb

 - Angular Essentials 저자.

 

 

프론트엔드 개발자가 하는 일

퍼블리셔는 웹사이트를 만드는 사람(정적인 것), 서버를 신경을 잘 안쓴다.

프론트엔드 개발자는 동적인 것은 데이터베이스에서 원하는 데이터를 가공해서 원하는 UI를 표현한다. 서버와 관계가 밀접하다. 

 

 - 유저가 애플리케이션과 소통하기 위한 창구(UI)를 사용하기 좋게 구현한다.

 

 - UI는 상태정보를 서버로 전송하기도 하고 서버의 데이터를 가져와서 UI에 표시하기도 한다.

 

 - 디자이너, 백엔드 개발자와 협업 중요

 

UI란? 웹 페이지에서 보여지는 모든 것 , 창구의 역할을 하는 것 모두. 시각적 개념이 녹아져있는.

UX란? UI에 경험을 추가. 한번 익숙해지면 이탈을 잘 안하려고함. 

   ex) MS에서 만든 프로그램들(워드,파워포인트,엑셀) 의 메뉴바의 순서 동일

 

 

            입력                          요청

사용자  ------> 웹 브라우저     ------->  웹 서버 --> DB

          <------                      <------             <--

            출력                          응답

 

예시)

로그인시에 아이디 xx와 비밀번호 yy로 로그인 하는 과정

유저가 xx와 yy입력 후 로그인 -> 서버에서 DB에게 xx있니?하고 쿼리(질의)를날림,있으면 yy가 비번 맞니?

-> 서버가 응답받아와서 웹 브라우저에 뿌려줌.

 

 

HTML CSS JS

위 3가지를 보조해주는 애들

TypeScript Angular node js npm git esling webpack babel sass 등 배울것이 너무 많고 범위가 넓다.

한꺼번에 모두 배울수 없다. 그래서 순서가있다!!

일단! HTML CSS JS 부터!!

또한, 기본적인 용어정리부터! 

함수, 변수, 표현식 등 전문용어가 중요하다.

 

HTML 에서

div class="asdf" 여기서 class는 attribute(속성)

 

CSS에서 

.asdf {  

   color:red         // 여기서 color는 property(속성)

}

 

 

우리의 목표?

취업 -> 프로 -> 효율(남들보다 잘해야한다.) 시간대비 아웃풋이 많아야한다.

 

1. Top-down(하향식) 방식의 한계

우선 만들자? 기본기는 무시 개념은 나중에

흥미를 잃지 않고 재미있게 학습할 수 있다? 실력은 잘 안는다.

 

 - 처음에 뭐가 되는 것같은 착각

 - 언젠가는 좌절(커뮤니케이션x+이유를모름)

 - 다시 처음으로 돌아오게된다

 - Copy&paste 외에는 방법이 없고 응용은 힘들다.

 - 성장에 한계가 있다.

 

 

2. Bottom-up 방식의 괴로움(우리가 해야할 방식)

 - 프로의 훈련방식 : 기본기 중심, 개념(용어)중시,  WHY

 - 괴롭고 어렵고 힘들다.

 - 시간이 많이 소요된다.

 - 혼자하기 힘들다.

 

 : 결국은 빠른 길이며 프로로 인정받는 길

 

 

상향식 방식을 중심으로 하향식 방식을 가미

Bottom-up : Tom-down = 60:40 

Bottom-up : 오전 액티비티(리버덕= 설명할 수 있어야 아는것이다.)+ 이론수업     

top-down : 실습     (코딩 능력 = 되는 이유/안되는이유)

 

 

초심자가 경험하는 3가지 어려움

 

1. 책이나 수업의 내용이 무슨 말인지 하나도모르겠다. 

    - 기본적인 CS지식 + 개념(용어)에 대한 이해

 

2. 어떻게 만들어야 할 지 감조차 오지 않는다.

  - 문제 해결 능력: 문제(해결과제)가 무엇인지 알아채는 능력 + Computational thinking + 알고리즘/자료구조 + 경험

  *문제 해결 능력= 해결과제(문제/요구사항)의 명확한 이해 -> 복잡함을 단순하게 분해 -> 자료를 정리하고 구분(모델링) -> 순서에 맞게 행위 배열

 

3. 어떻게 만들어야 할 지는 알겠는데 막상 코딩을 하려니까 쉽지 않다.

 - 구현 능력: 문법에 대한 정확한 이해 + 연습

 

효율적인 프로그래밍 학습 방법

의식적인 연습을 꾸준히 반복하는만큼 성장한다. 

자신의 능력을 살짝 넘거서는 도전

무엇을 알고 무엇을 모르는지(시행착오를 많이 해봐야한다.)

시도하고 실패하는 의식적인 연습을 반복

목표를 수립하고 학습하고 작은 성취를 반복하자

겸손하고 적극적으로 반응하여 행동을 교정하라