FE/JavaScript

한 입 크기로 잘라 먹는 리액트

soohykim 2025. 6. 26. 16:32
728x90
반응형

📂 JavaScript 기본

 

📌 1. 자바스크립트 개요

1) 역할

  • 웹 서버
  • 데스크탑 어플리케이션
  • 모바일 어플리케이션

 

2) Web 페이지 구성

  • JavaScript
    • 웹 내부에서 발생하는 다양한 기능을 만들 수 있는 언어
    • 웹을 움직이게 하는 동적 역할
  • HTML 
    • 요소들의 내용, 배치, 모양을 정하기 위해 사용하는 언어
    • 색상이나 디자인 등 수정 불가
  • CSS
    • 요소들의 색상, 크기 등의 스타일 설정 

 

3) JavaScript 실행

  • JavaScript 엔진에 의해 실행 (웹 브라우저에 기본 탑재)
  • 웹 브라우저를 이용하여 간단한 JavaScript 코드 직접 실행 가능
  • 개발자 도구 실행 > Console > 프롬프트에 console.log("안녕 자바스크립트")  입력
    • Windows : F12
    • Mac OS : option + command + i

실행 화면

 

 

📌 2. VsCode 설치

 

  • Prettier 
    • 설정 변경 > format on save 체크박스 설정 > 저장시 자동 적용
      • Windows : Ctrl + , (쉼표)
      • Mac OS : Command + , (쉼표)
  • Material Icon Theme
    • 아이콘 변경
  • Error Lens
    • 오류 발생시 에러 메시지 설명 제공
  • Live Server
    • 로컬 환경에서 브라우저에서 웹페이지로 실행 가능

 

📌 3. 자바스크립트 실습 환경 설정

 

1)  JavaScript 및 HTML 파일 생성

  • 자바스크립트를 불러와서 웹 브라우저에 실행 시킬 매개체 필요
<!-- chapter03.js -->
console.log("chapter3");

<!-- index.html -->
<html>
    <head>
        <script src="./chapter03.js"></script>
    </head>
    <body>
        Hello World
    </body>
</html>

 

2) Liver Server 실행 

  • 검색 창 > Live Server : Open with Live Server 실행
    • Windows : Ctrl + Shift + P
    • Mac OS : Command + Shift + P

실행 화면

 

📌 4. 변수와 상수

📌 5. 자료형

📌 6. 형 변환

📌 7. 연산자1

📌 8. 연산자2

📌 9. 조건문

📌 10. 반복문

📌 11. 함수

📌 12. 함수 표현식과 화살표 함수

📌 13. 콜백함수

📌 14. 스코프

📌 15. 객체1

📌 16. 객체2

📌 17. 배열

 

✏️ 퀴즈 

 

📂 JavaScript 심화

 

📌 1. Truthy와 Falsy

📌 2. 단락 평가 

📌  3. 구조분해할당

📌  4. Spread 연산자와 Rest 매개변수

📌 5. 원시타입 VS 객체타입

📌 6. 반복문으로 배열과 객체 순회하기

📌 7. 배열 메서드 - 요소 조작

📌 8. 배열 메서드 - 순회와 탐색

📌 9. 배열 메서드 - 배열 변형

📌  10. Date 객체와 날짜

📌  11. 동기와 비동기

📌 12. 비동기 작업 처리 - 콜백함수

📌 13. 비동기 작업 처리 - Promise

📌 14. 비동기 작업 처리 - Async&amp, Await

 

 

✏️ 퀴즈 

 

📂 Node.js 기초 

📌 1. Node.js 개요

📌 2. Node.js 설치

📌 3. Node.js 사용

📌 4. Node.js 모듈 시스템

📌 5. Node.js 라이브러리

 

 

✏️ 퀴즈 

 

💡 

 

 

 

 

더보기

🔖 참고

728x90
반응형