프로젝트 실습

월요일(1일) ~ 목요일(5일)까지 Html, css, 아주 간단한 JS로만 구현하는 웹페이지 실습을 진행하였습니다.

1만 시간의 법칙 실습

GitHub URL

https://github.com/Jung-sunghoon/frontend_test/tree/main/testFolder/10000hours

실행 URL

https://jung-sunghoon.github.io/frontend_test/testFolder/10000hours/10000hours.html

스크린샷

PC 화면

모바일 화면

랜딩페이지 실습

GitHub URL

https://github.com/Jung-sunghoon/frontend_test/tree/main/testFolder/landingPage

실행 URL

https://jung-sunghoon.github.io/frontend_test/testFolder/landingPage/landing.html

스크린샷

JS가 필요한 부분은 스크린 샷이 없습니다(모달, 모바일 메뉴 등)

PC 화면

모바일 화면

JavaScript

자바스크립트 기초

자바스크립트란?

웹페이지에서 보조 기능을 위해 개발된 프로그래밍 언어

• 실행 주체: 웹 브라우저
• 점차 서버, 모바일 앱, 게임 프로그래밍 등에서 사용됨

자바스크립트로 할 수 있는 기능

• 데이터 처리
• 사용자와 상호작용
• 화면 조작
• 다른 컴퓨터와 통신

자바스크립트 실행

• 개발자 도구 콘솔 창에서 입력
• VSCode를 통해 작성
• 코드 작성
  • HTML 태그 내에 삽입
  • script 태그 사용
  • 외부 js 파일 저장 후 로드

변수

변수 선언과 사용

• 변수란?: 변할 수 있는 수 혹은 정보
• 변수선언에 쓰이는 키워드는?: var, let, const

변수명 작성 규칙

• 변수 이름에 사용할 수 있는 문자의 종류는?: 문자, 숫자, 언더스코어(_), 달러($)
• 사용 불가 법칙의 예시: 숫자로 시작 X, 예약어 사용 X
• 대소문자 구분, 한글이나 일본어도 변수명에 사용 가능(권장 X)
• 네이밍 규칙의 종류:
  • 카멜 케이스
    • 첫글자는 소문자, 이후 각 단어의 첫 글자는 대문자
    • useName
  • 스네이크 케이스
    • 각 단어를 언더스코어(_)로 연결
    • user_name
  • 파스칼 케이스
    • 단어의 첫 글자를 대문자
    • UserName
  • 헝가리안 케이스
    • 변수명에 타입 종류를 함께 작성
    • strUserName

변수 키워드와 특징

• var: 재선언, 재할당 가능
• let: 재선언 불가능, 재할당 가능
• const: 재선언, 재할당 불가능

스코프 (scope)

• 스코프란: 변수의 접근성과 생존 기간을 제어하는 생존 범위
• 선언 키워드별로 각각 다른/같은 스코프를 가진다.

1. 전역 스코프: 어디서든 접근 가능한 변수 영역
2. 함수 스코프: 함수 내에서만 접근 가능한 변수 영역. var로 선언한 변수는 함수 스코프를 가짐
3. 블록 스코프: 중괄호로 감싸진 코드 블록 단위로 접근 가능한 변수 영역을 나타냄. let과 const로 선언한 변수는 블록 스코프를 가짐.