22_01_18_Tue.md

[22.01.18.Tue] - Day 06

반응형 웹 실습

• 개인 웹 포트폴리오 템플릿 자율적 연습

JavaScript

• JS는 반드시 HTML 안에서 작동함
• JS 사용 방법
  • head 태그 안에 script 태그 안에 작성
  • body 태그 안에 script 태그 안에 작성
    (body 태그 안에 style 태그 작성은 불가능)
  • 별도 JS 파일 분리해서 head 태그 안에 import (script:src)
    • 상대 경로 지정
    • 내가 실행할 순서에 맞게끔 위치 잡아서 가능
• document.write
  • 화면에 write 하는 JS 내장 함수
• html 다 만들어지고 나서 그 밑에 js 코드 실행되는 것이 좋음
  • 안그러면 너무 느려질 수 있음 (브라우저 엔진 해석기)
  • 브라우저 해석기가 순차적으로 위에서 아래로 해석함
    • 코드가 수백 ~ 수천줄이 되면 우선 script 코드를 먼저 해석하게 되서
      그 다음에 HTML 코드를 해석하면 그 시간 차가 오래 걸릴 수 있음
    • 사용자 입장에서는 특정 사이트에 접속했을 때 화면에 빠르게 보여지는 것이 중요
    • 렌더링이 우선되는 것이 사용자 입장에서 더 중요함
  • script 태그에 defer 속성 주면 나중에 해석하는 걸로 인식
    • HTML 코드 모두 렌더링 하고 해석함 (비록 위에 있지만)
    • 외부 파일로 만들었을 때만 defer 속성 사용 가능
  • 무조건 html 코드 다 만들어지고 나서 body 태그 하단에 script 태그 작성하는 습관 들이기!
• 개발자 도구
  • 콘솔 탭
    • 디버그할 때 유용
  • Elements 탭
    • 수정하려고 계속 왔다갔다 하는 것이 비효율적일 수 있음
    • 그럴 경우에는 Elements 탭에서 직접 수정해서 바로 확인 가능
    • 수정한 코드 복붙해서 다시 VS Code에 삽입
    • 물론 다른 사람이 작성한 코드 확인 가능
  • Network 탭
    • 렌더링 되는 속도, 서버로부터 여러 파일 가져오는 속도 다 체크 가능
    • 어떤 파일 가져오는지도 다 확인 가능
    • 파일을 어떤 형식으로 받아오는지도 확인 가능
• 데이터 담는 그릇 => 변수
  • 변수 선언자
    • var
    • 최근에는 대부분 const, let 사용
      • var 선언자는 재선언이 가능해서 의도하지 않은 코드 작성 가능
      • let은 재할당 가능, 하지만 재선언은 불가능
      • const는 재할당, 재선언 불가
        • const는 절대 변하지 않는 상수 값에 많이 활용
        • const는 무조건 대문자를 사용하고 스네이크 케이스로 연결
  • 변수명 (변수 이름)
    • ex. x
  • 변수명에 할당된 값
    • ex. 'Hello, World!'
  • 변수를 이용하면 코드 재사용성 높일 수 있음
  • 변수명으로 예약어(키워드) 사용하면 에러 발생
    • JS가 내부적으로 이미 사용하고 있는 단어
  • 변수명이 매우 중요함! (명확한 이름)
    • ex. userName (사용자 이름)
    • 이름 짓는거 매우 어려움
    • 변수명 만드는 규칙이 있음 (식별자 표기법)
      • 카멜 케이스
        • ex. userName
      • 스네이크 케이스
        • ex. user_name
      • 파스칼 케이스
        • ex. UserName
      • 헝가리언 케이스
        • ex. strUserName
        • 데이터 타입 힌트 같이 담음

[Note]

• flex-direction default 값은 row임
• 모바일 사이즈로 줄어들었을 때 미디어 쿼리 설정과
  flex-direction만 column으로 변경하면 됨
• 반응형 웹에서 가장 중요한 것은 컨텐츠의 배치임
• 회사 밖에서 모바일 앱으로 접속했을 때
  특정 영역 컨텐츠는 보여주지 않게 하는 경우 있음
  • ex. About 페이지; 모바일 사이즈일 때 안보이게 하고 싶음
    • display: none;
  • 모바일 앱에서 사용자가 컨텐츠 볼려고 계속 스크롤 내리는 것도 매우 불편할 수 있음
  • 보안상 모바일 상으로 접속하지 않을 컨텐츠 또는
    중요도 떨어지는 컨텐츠는 모바일로 들어왔을 때 감춰버릴 수 있음
  • 모바일 앱으로 파악하기 힘든 컨텐츠를 굳이 넣을 필요 없음
  • 모바일에 맞는 컨텐츠 배치와 가시적으로 보기 좋은 컨텐츠 제공
  • 글씨 사이즈도 잘 고려해야 함!
    해상도 줄어들면 글씨 폰트 사이즈 줄여주고
    글씨 너무 작으면 크게 만들어 주고 등...
  • 이미지 같은 경우도 해상도 줄었을 때 좌/우로 스크롤 할 수 있으므로
    이미지 사이즈도 잘 고려해야 함!
• 컨텐츠 배치는 display flex 사용,
  컨텐츠 보안상 display none 숨기기,
  가시적으로 보기 좋은 컨텐츠 제공,
  이미지 사이즈 조절
• 보통 nav - 화면 스크롤해서 이동될 때 바로 뚝 떨어지지 않고 부드럽게 넘어감!
  • scroll-behavior: smooth; 설정
  • 메뉴 넘어가지 않고 상단에 고정은 position: sticky;
    • top: 0;
  • flex 설정하고 justify-content: center 하면 중앙 정렬됨
• 미디어 쿼리
  • 부트스트랩 기준 보통 small은 576픽셀 등 체크 (breakpoint)
  • 기기 사이즈에 맞게 거의 표준화된 사이즈 있음
• flex: no-wrap
• 라이브 서버 사용하면 저장할 때마다 바로 업데이트 됨
  • 가끔 refresh 할 경우 있지만 대부분 자동으로 반영해줌
• JS 주석 처리하는 이유
  • 코드 설명 목적
  • 어디서 에러 나는지 찾기 힘들 때 잠시 코드 실행 막는 용도로 사용 가능
• DOMContentLoaded 차이?
  • 비슷한 걸로 load 라는 이벤트도 있음
  • 가끔 DOM 로드되는 것보다 JS 코드가 먼저 실행되는 경우도 있음
  • 렌더링 이미 다 끝나지 않아서 에러 발생할 수도 있음
  • 화면 렌더링 되자마자 특정 HTML 요소 접근해서 JS 코드 동작해야 한다면
    addEventListener로 직접 설정하면 가장 안전함!
  • 코드의 안정성 높이기!
• 코드를 짜는 것은 결국 데이터를 처리하기 위한 목적!
  • 데이터를 처리하기 위해서는 데이터를 담을 그릇이 필요
  • 데이터를 담는 그릇으로 변수 이용
• ECMA Script (표준 JS)
  • 코드를 모두 카멜 케이스로 작성함
• 굳이 var 사용할 필요는 없음
• undefined도 하나의 데이터 타입임
• 예습보다 복습이 중요!

Source Code