Coding Story

[React] 처음 만나는 자바스크립트 본문

IT/React

[React] 처음 만나는 자바스크립트

always7767 2025. 1. 9. 17:35

1. 바스크립트(JavaScript) : 웹(Web) 페이지를 만들 때 사용하는 언어
- 요즘은 자바스크립트로 서버도 개발하는 등 역할의 폭이 확대됨.
- 우리가 볼 수 있는 웹 페이지는 HTML(웹 페이지 요소의 배치), CSS(웹 페이지 요소의 스타일링), 자바스크립트(웹 페이지 요소의 동작 정의)로 구성되어있음.

2. HTML (HyperText Markup Language) : 텍스트, 이미지, 버튼, 메뉴 등과 같이 웹 페이지에 나타나는 모든 요소의 배치와 내용을 기술하는 언어
- HTML만 사용해도 웹 페이지를 만들 수 있지만 이것만으로 스타일을 정의하거나 사용자와 요소 간의 상호작용을 처리하기는 어려움
-  HTML로 개발한 웹 페이지는 웹 브라우저에 띄운 움직이지 않는(정적인) 온라인 신문과 같음.

3. CSS (Cascading Style Sheets) :  색상이나 크기처럼 웹 페이지 요소의 스타일을 정할 때 사용하는 언어
-  HTML과 CSS를 이용해 개발하면 좀 더 완성도 있는 웹 페이지를 제작할 수 있지만, 여전히 사용자와 상호작용은 할 수 없음.
-  HTML과 CSS를 이용해 제작한 웹 페이지는 정적인 수준에 머물게 됨.

4. 자바스크립트
-  마치 사람의 근육처럼 웹 페이지에 동적인(움직임이 있는) 기능을 장착할 수 있게 도와줌
-  버튼의 클릭, 정보의 입력, 페이지 스크롤, 페이지 이동 등 웹 브라우저에서 이루어지는 모든 동작은 자바스크립트로 구현한 기능
-  위키피디아처럼 정보 전달을 주된 목적으로 하던 웹 서비스 시절은 지나가고, 이제는 페이스북, 넷플릭스처럼 사용자와 상호작용하는 것이 주된 목적인
    웹 애플리케이션이 시장을 대표하고 있음.
- 이런 시장의 변화에 따라 오늘날 자바스크립트의 중요성은 점점 더 커지고 있음.

5. 자바스크립트는 어떻게 실행되나?
- 자바스크립트는 '자바스크립트 엔진'이라는 프로그램이 해석해 실행함.
- 자바스크립트 엔진은 기본적으로 웹 브라우저에 탑재되어 있음.
- 자바스크립트를 실행하려면 반드시 웹 브라우저가 있어야 함.
- 웹 브라우저의 종류로는 사파리, 크롬, 파이어폭스, 오페라 등 여러가지가 있음.
- 크롱믄 자바스크립트 엔진의 대명사라 할 수 있는 V8을 사용하는 웹 브라우저임.
- 콘솔에서 자바스크립트를 작성하면 코드를 한 줄 입력할 때마다 바로 실행되기 때문에 아주 간단한 코드만 작성할 수 있음.
- 작성할 코드는 최소 50줄, 길게는 200줄 이상 되는 코드도 있기 때문에 한줄 입력 할 때마다 바로 실행되는 환경에서는 코드를 작성하기가 상당히 불편함
- 크롬처럼 자바스크립트 엔진을 사용하면서도 여러 줄에 걸쳐 코드를 입력하고 편집할 수 있는 코드샌드박스라는 웹 에디터가 있음.

6. 코드샌드박스(CodeSandbox)  
- 샌드박스(Sandbox, 모래통) 단위로 웹 언어(HTML, CSS, 자바스크립트)를 입력하고 편집할 수 있는 웹 에디터
- 이 에디터는 컴퓨터에 별도로 설치하거나 환경 설정할 필요 없이 코드샌드박스 사이트에 접속하면 편리하게 코딩할 수 있는 환경을 제공함.

'IT > React' 카테고리의 다른 글

[React] 코드샌드박스(CodeSandbox)로 자바스크립트 맛보기  (0) 2025.01.09
Comments