• 스타트업 지원은 원티드, 로켓펀지, 점핏 (사람인에서 만든 플랫폼)
  • 한재현 강사님 커리어 썰들었다
    부트캠프를 많이 들으셨는데, 어떤 학원은 국비지원을 받으려고 과정을 만들다보니 과정이 시작하기 직전까지도 강사님이 정해지지도 않고 실제로 w3schools.com 띄워놓고 스크린 리더마냥 읊어주는 곳도 있다고 하셨다 (그래서 스터디를 만들어서 직접 가르치기 시작...)
    두달쯤 되면 현타가 올 수있는데,주말에 따로 스터디를 하거나 어떻게든 도와주신다 했다

레퍼런스책 한 권 정도는 두자

  • 책을 정독하는 것보다도 필요한 부분만 찾아서 공부
  • 모던 자바스크립트 딥다이브(도마뱀)
  • 자바스크립트 완벽 가이드(코뿔소) ← 책이 베개두께이고 너무 어려워서 비추
  • 혹은 자바스크립트 중에서도 내용을 쪼개서
    모던자바스크립트(최신내용만), 객체지향에 관한 책, 자료구조와 알고리즘, DOM만 따로 다룬 책들도 있다( ex) DOM을 깨우치다)

초보용 책 추천

  • HTML&CSS 웹사이트 개발과 디자인 기초
  • 누구나 쉽게 배우는 자바스크립트(고양이)
  • 땡땡 따라하기 이런 책 비추, 오류가 많고 오타도 많다 (인프런이나 강의를 듣는게 낫다)

스터디 모임을 많이 해라!

ex)책 스터디, 리더가 주도 하는 스터디, 구성원들이 한번씩은 발표할 수 있는 능동적인 스터디

굉장히 많이 도움이 된다

 

  • 1세대 프론트 엔드 개발자 신현석님 블로그

https://hyeonseok.com/blog/306

 

HTML 코더, UI 개발자, 웹 퍼블리셔, 웹 개발자 - 신현석(Hyeonseok Shin)

web | 2006-11-26 웹 표준이 대두되면서 (X)HTML, CSS, Javascript 등을 담당하는 사람들의 중요도가 상승되고 이들을 업무를 정확하게 지칭하는 용어가 필요하게 되었다. 현재 이러한 롤을 맡은 사람들을

hyeonseok.com

프론트는 중간에 끼어서 바쁘다

HTML

HTML 5가 아니고 Living Standard라고 해야한다

 

SECTION

  • <Head>
  • <Body> 사용자에게 보여지는 부분
  • <Article> 연관된 주제가 없는 독자적인 내용 ex) 위젯
  • <Section> 그룹화에 초점

https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi/related

 

HeadingsMap

To show, browse and audit (for accessibility and SEO) the headings structure

chrome.google.com

구조보기 편한 확장프로그램

https://poiemaweb.com/ 

 

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

Front-end Development Tutorial

poiemaweb.com

 

ol ul il

  • <ul> li가 3개이상 일 때
    ul이나 ol의 직계 자식태그는 반드시 li 이 들어가야한다! 
  • <di> <dt> <dd> 사전같이 정의할 때

이 요소들을 떨어뜨려 주고 싶을 때 <div>로 감싸주면 블록 레벨이기 때문에 간격이 생긴다

 

  • <p> 완결된 내용일 때 쓴다
  • <br> 완결이 아닌데 줄을 바꾸고 싶을 때
  • <pre> 코드에서 작성한대로 표현이 된다 (줄을 많이 띄웠을때 처럼)
  • <blockquote> 인용 블록
  • <cite> 출처
  • <q> 한줄일 때 
  • <hr> 내용이 구분될때 (구분선) p태그내에서 사용하지 말기
  • entity 엔티티 코드
    < &lt;
    > &gt;
  • <nav> 링크를 보여줄때

https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

 

HTML Standard

HTMLLiving Standard — Last Updated 30 August 2022 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are supp

html.spec.whatwg.org

홈페이지를 캡쳐해 구조를 나누는 실습을했다

은근 너무 어렵더라

 

몇명 하고싶은 사람 봐주고

4시부터 자습시간이 되었다

 

과제로 홈페이지 이미지를 두개 받았다

'멋쟁이사자처럼 프론트엔드 스쿨 > FE TIL' 카테고리의 다른 글

[멋쟁이사자처럼 프론트엔드스쿨]9월 1일 4일차  (0) 2022.10.25
[멋사 프론트엔드 스쿨]10월 24일 월요일 TIL_스프린트 회고_페어프로그래밍, 설문조사From, To Do List 실습  (0) 2022.10.25
[멋사 프론트엔드 스쿨]10월 14일 금요일 TIL_DOM  (0) 2022.10.14
[멋쟁이사자처럼 프론트엔드스쿨]8월 29일 1일차 OT  (0) 2022.10.10
[멋사 프론트엔드 스쿨]10월 7일 금요일 TIL_특강데이  (0) 2022.10.07

제코베 강의를 듣다가 emmet 문법을 알게되었다

쓰던 편집기가 아톰이라 설치해봤다

1.File
2.Settings
3.+Install
4.emmet 검색

하단으로 쭉 내리면 찐 emmet이 있다
설치하면 끝!

'멋쟁이사자처럼 프론트엔드 스쿨 > 30분 요약강좌 시즌1_JS' 카테고리의 다른 글

[2022 30분 요약 강좌 시즌 1](리뉴얼)JavaScript 2부_제주코딩베이스캠프  (0) 2022.08.16
[2022 30분 요약 강좌 시즌 1](리뉴얼)JavaScript 1부_제주코딩베이스캠프  (0) 2022.08.15

HTML은 콘텐츠와 골격, CSS는 웹페이지의 레이아웃, JavaScript는 웹페이지의 동작을 담당하게 된다

 

 

다른 언어와 다른 점은 자바스크립트는 버전업이 됐다고 해서

 

이전에 있던 기능을 삭제하거나 새로운 기능을 막 추가하지 않는다

 

왜냐하면 이전의 코드들이 이미 배포가 되었기 때문에 오류가 나면 안되기 때문,

 

그래서 자바스크립트 설계자가 시인한 오류마저도 아직도 그대로 남아아있다

 

(뒤로 갈수록 자바스크립트가 왜이러지?싶을 수 있음)

 

 

중요한 변화포인트는 ES5 버전의 엄격모드, 배열메서드(map, filter, forEach 등)

 

ES6 버전의 const, let, Promise, Arrow function, class 이다

 

업데이트 되는 내용은 ECMA-인터내셔널 공식 사이트 : https://www.ecma-international.org/ 에서 확인 할 수 있다

 

 

001.html 새 파일 생성

! tab 은 emmet 문법이다

 

수업은 vscode로 진행되고 나는 쓰던 게 atom 이라 emmet 플러그인을 설치했다

 

자바스크립트 삽입위치

  • head, body의 문서 처음, 중간, 끝
  • 보통 body의 맨 끝

 

!Tab을 눌러 Emmet문법으로 완성한다

 

 h1{hello world}+p{hello world}*5


 하고 Tab (이것도 emmet 문법)

 

 

  <script></script> 태그는 아무데나 넣을 수 있지만

 

첫번째 p태그에

 

  <p id="one">hello world</p>

 

스크립트 태그에

 

    document.getElementById('one').innerHTML = 'hi world'

 

를 추가해보자

 

 

첫번째 줄이 hi world 로 바뀐 걸 볼 수 있다

 

반면, 스크립트 태그의 위치를 옮겨 p태그 위나 head 태그 안으로 옮기면

 

 

아직 document 가 완성되지 않은 시점에서

 

getElementById 로 'one' 이라는 Id 를 셀렉하려고 했기 때문에 바뀌지 않는다

 

그래서 script의 위치는 body 닫기 태그 직전에 두는 것이 일반적이다

(절대적은 아님.프로젝트에 따라 중간이나 타이틀 밑에 놓는 경우도 있다)

 

내부 스크립트와 외부 스크립트

 

스크립트를 내부에 넣는 방법과 파일로 빼 외부에 저장하는 방법이 있다

 

스크립트 내부에 있는 코드를 test.js 라는 파일에 옮기고

 

스크립트 태그자리에   <script src="test.js"></script> 로 수정한다

 

 

이렇게 다른 태그안에도 자바스크립트를 추가 할 수 있지만

 

유지보수에 어려움이 생기므로 지양한다

 

JavaScript를 출력하는 4가지 방법

  1. 문서 내에 요소를 선택하여 출력하는 방법(innerHTML, innerText 등)
  2. 문서 내에 직접 출력하는 방법(write 등)
  3. 사용자 인터렉션(alert, confirm 등)
  4. 콘솔에 찍는 방법(console.log, console.table, console.error 등)

 

코드 구조

  1. 문(statement)은 세미콜론으로 구분(세미콜론을 붙이지 않는 곳도 있습니다.회사마다 다름)
  2. 문은 값, 연산자, 키워드, 명령어, 표현식(값으로 평가, 함수나 key, index를 통한 값의 호출도 표현식) 등으로 구성됩니다.
  3. 공백 병합

let x = 10,
    y = 20,
    z = 30
console
    .log(
        x,
        y,
        z,
    )
  

// 한 줄 주석입니다.

/*

여러줄 주석입니다.

*/

 

엄격모드

  • ES5에서 최신의 문법들이 많이 추가가 되었는데 기존에 있었던 문법을 변경하는 문법도 나옴
  • 이러한 문법들은 기존 코드의 문제를 불러일으킬 수 있기 때문에 use strict라는 지시자를 통해 엄격모드를 활성화 했을 때에만 반영
  • class 문법의 경우 엄격 모드가 기본
  • 함수별로 엄격모드를 다르게 적용할 수 있으나 혼란을 야기할 수 있습니다.

"use strict";

 

변수

  • 변수 이름 규칙
    • 변수는 숫자로 시작할 수 없다.
    • 띄어쓰기가 안된다.
    • 예약어를 사용할 수 없다.(예약어가 사용 불가능한 것은 아닙니다.)
    • $, _를 제외한 특수문자를 사용하지 않는다.
    • 대소문자를 구분한다.
    • class는 첫 문자를 대문자로, 나머지는 보통 소문자로 시작한다.
  • var, let, const
    • var(ES5 이전, 지금 사용 권장 X) : 함수 레벨 스코프, 재선언시 애러 X
    • let(ES5) : 블록 레벨 스코프, 재선언시 애러 O, 콘솔에서는 애러 X, 변경가능한 자료형
    • const(ES5) : 블록 레벨 스코프, 재선언시 애러 O, 콘솔에서는 애러 X, 변경이 불가능한 자료형(상수)

연산

  • 산술 연산자(+, -, /, *, **, %)
  • 할당 연산자(=, +=, -=, /=, *=, **=, %=)
  • 논리 연산자(&&, ||, !, !!, &, |)
    • 참 -> true -> 1
    • 거짓 -> false -> 0
    • &&는 곱 (and 연산자)
    • ||는 합 (or 연산자)
    • !는 부정 !!는 부정의 부정=참 (true, false 찾을 때 사용한다)
    • 암기코드

  for (let x = 0; x < 100; x++) {
      if(x % 3 == 0 && x % 5 == 0){
          console.log(x)
      }
  }

 

15의 배수가 값

 

  for (let x = 0; x < 100; x++) {
      if(x % 3 == 0 || x % 5 == 0){
          console.log(x)
      }
  }

 

3,5 의 배수가 값

 

& 비트연산자

 

9와 5를 이진법으로 바꿔 계산한다

실무에서는 거의 볼일 없음

 

 

  • 비교 연산자(>, >=, <, <=, ==(값만 본다), !=, ===(type까지 본다), !==)

 

let x = 3 (number)

let y = '3' (string)

 

console.log(x == y)

ture (자바스크립트에서만 값을 3으로 쳐줌)

 

console.log(x === y)

false (다른 타입인 넘버와 스트링이라서 거짓)

 

  • 단항 산술 연산자(++x, x++, --x, x--)

x++ 는 자기 자신을 한번 더 나타냄

 

  • nullish 병합 연산자(??)

 

단락 회로 평가랑 비슷

 

let result1;
let result2 = result1 ?? 100;

 

result1은 값을 지정하지 않은 undefined라서 = 일 때 || 와 마찬가지로

 

뒤에 있는 값인 100;이 result 2의 값이 된다

let result3 = 10;
let result4 = result3 ?? 100;

 

result3 은 값이 있으므로 result 4 의 값은 3 값인 10이 된다

 

let result5 = null;
let result6 = result5 ?? 100;

 

1과 마찬가지로 null 값이 없으므로 뒤에 있는 100이 6의 값이 된다

 

  • typeof 연산자

 

  • 프로퍼티 접근 연산자
    1. 마침표 프로퍼티 접근 연산자
    2. 대괄호 프로퍼티 접근 연산자

 

첫번째 예시가 false인 이유

 

배열 인덱스[0,1,2,] 로 판단해서 10이 없다

 

length 가 true 인 이유

 

console.dir(x) 했을때 모든 변수가 나오는데 거기에 length가 있다

 

변수의 형

변수(타입, typeof로 확인 가능)

  • 원시타입(primitive types) : number, string, boolean, null, undefined, symbol(ES6 추가, 변경 불가능한 유일한 값)
  • 참조타입(reference types) : object(object, array, map, set), function
  • Number(숫자)
    • 형태 : 10, 10.123, -10
    • 호출 : 변수명
      • 메서드 :
        • 10.toString()는 안됩니다. 이유는 무엇일까요? 소수점 때문에 그렇습니다.(JavaScript의 parsing때문이고, 아는 분이 많지는 않습니다.)
        • (10).toString()와 변수명.toString()은 가능합니다.
        • num.toFixed()
      • Number()
      • parseInt() - 권고, parseFloat()

  • Math
    • Math.PI  (3.14나옴)
    • Math.max() (그냥 치면 -infinity 10,20,30이면 30이 값이 됨)
    • Math.min()
    • Math.floor()
    • Math.round()
    • Math.random()
    • Math.abs()
    • Math.sqrt()
    • Math.pow()
  • NaN (not a number, typeof 로 했을 때 number로 나온다)
  • Infinity, -Infinity (typeof 로 했을 때 number)

https://paullabworkspace.notion.site/JS-22-6-8723b46e0cde4d90b020b689e5cb9f0a

 

JS(22년 6월 업데이트 완료)

자바스크립트

paullabworkspace.notion.site

https://www.youtube.com/watch?v=NQZZyVM8ksw&t=1s

 

'멋쟁이사자처럼 프론트엔드 스쿨 > 30분 요약강좌 시즌1_JS' 카테고리의 다른 글

HTML편집기 Atom 아톰 에디터에 emmet 에밋 Plug-in/Package 설치  (0) 2022.10.10
[2022 30분 요약 강좌 시즌 1](리뉴얼)JavaScript 2부_제주코딩베이스캠프  (0) 2022.08.16

+ Recent posts

티스토리툴바