✅ 웹 개발이란?
웹 개발은 웹 브라우저 화면에 보이는 겉모습을 만드는 것이 전부가 아니다
웹 사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담아야 한다
✅ 클라이언트 vs 서버
☑️ Client(정보요청)
- 사용자가 웹 사이트에 접근할 때 사용하는 기기 <웹 브라우저>
☑️ Server(정보전달)
- 인터넷에 연결된 컴퓨터.
- 웹 요소와 여러 정보가 저장됨
✅ FrontEnd vs BackEnd
☑️ FrontEnd
- 웹 브라우저 화면에 보이는 부분을 다룸 → 웹 사이트 제작
- HTML, CSS, 자바스크립트 사용
☑️ BackEnd
- 사용자 뒤(back)에서 보이지 않는 영역, 즉 서버를 다룸
- 데이터베이스를 설계하거나 데이터 처리
- 자바, PHP, 파이썬 등 프로그래밍 언어 사용
✅ 관련 기술
☑️ Basic
- html
- CSS
- JS
- GIT/GITHUB
☑️ FrontEnd
- JQuery, D3.js, BootStrap
- React.js, Angular.js, Vue.js
☑️ BackEnd
- Renux, Network, DB 관련 기술
- Python, JAVA, PHP, Dotnet → 서버 언어
- Node.js, Spring, Django, 코드이그나이터 등
✅ HTML, CSS, JS
☑️ HTML
- 웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속
- HTML에서 약속한 표기법을 사용해서 문서 작성해야 함
☑️ CSS
- 웹 문서를 꾸미거나 웹 요소를 적절하게 배치하는 방법
- 다양한 디바이스에 맞는 반응형 웹 디자인을 만들기 위해 필수적으로 학습해야 함
☑️ 자바스크립트
- 사용자 동작에 반응해서 동적인 효과를 만들기 위한 기술
- 자바스크립트를 알고 있다면 새로운 프레임워크를 배우기 쉬움
✅ FrontEnd 라이브러리와 프레임워크
✅ BackEnd 라이브러리와 프레임워크
✅ JS 역할
☑️ 웹 요소를 제어
- 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게
할 수 있음- 웹 사이트 UI 부분에 많이 활용
예) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴
한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠
☑️ 웹 애플리케이션
- 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 애
플리케이션처럼 동작- 예) 온라인 지도의 길찾기 서비스, 데이터 시각화 서비스
공개된 API를 활용한 다양한 서비스
☑️ 다양한 라이브러리를 사용
- 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해
야 할 일이 늘어남 → 라이브러리와 프레임워크가 계속 등장- 예) 시각화를 위한 d3.js, 머신러닝을 위한 tensorflow.js
DOM 조작을 위한 jQuery 등- 예) 웹 애플리케이션 개발을 위한 React, Angular, Vue 등
☑️ 서버를 구성하고 서버용 프로그램 제작 가능
- node.js : 프런트엔드 개발에 사용하던 자바스크립트를 백엔드 개
발에서 사용할 수 있게 만든 프레임워크
✅ JS 실습 - 클릭하여 글자색 바꾸기
<style>
body>h1 {
color: blue;
}
</style>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해보세요</p>
<script>
var heading = document.querySelector('#heading');
heading.onclick = function () {
heading.style.color = "red";
}
</script>
</body>
✅ JS 실습 - Prompt 입력받기
<body>
<h1>어서오세요</h1>
<script>
var name = prompt("이름을 입력하세요");
document.write("<b><big>" + name + "</big></b>님 환영합니다.");
</script>
</body>
💯 크롬브라우저로 오류확인하기
- 채팅창에 공유된 js_time.html를 크롬브라우저로 열어보세요
- 화면에 아무것도 출력되지 않습니다.
- ctrl+shift+j 또는 i를 눌러보세요
- 콘솔창에 빨간색 글자로 오류내용이 표시 되고 오류개수도 표시될 것입니다.
- 오류내용을 visual studio code를 사용하여 수정하고 저장한후 새로고침을 해보시면
- 정상작동하는 것을 확인할 수 있습니다.
💯 [좀 더 알아보기①] 오류를 확인하는 방법
- 내가 무엇을 잘못 입력했는지 알아내는 방법과 찾는 방법
01: 현재 상태에서 코드를 실행해보면 아무 것도 출력되지 않음
02: 크롬에서 코드를 실행한 후 마우스 오른쪽 버튼을 클릭해 [검사]를 선택
03: 개발자 도구 오른쪽 위에 × 표시가 되어 있는 붉은색 원 (자바스크립트 코드 등에 오류가 발생했을 때 출력되는 아이콘) 아이콘을 클릭하거나 개발자 도구의 [Console] 탭을 클릭
04: ‘Uncaught ReferenceError: alrt is not defined’라는 오류 출력, 어떤 오류인지 확인. test.html : 6은 오류가 발생한 위치. [test.html : 6]을 클릭하면 오류가 발생한 위치로 이동
05: 붉은색 밑줄이 표시되어 있어 쉽게 오류를 찾을 수 있음
- 처음 자바스크립트를 공부할 때 자주 접하는 오류
- ReferenceError: 예외 처리
- SyntaxError: 구문 오류
✅ 기본 용어
☑️ 표현식과 문장
- 표현식: 자바스크립트에서 값을 만들어내는 간단한 코드
- 문장: 하나 이상의 표현식이 모여 문장(statement)을 구성. 문장 끝에는 마침표를 찍듯이 세미콜론(;) 또는 줄바꿈을 넣
어서 문장의 종결을 나타냄- 프로그램: 줄바꿈으로 문장을 구분해 코드를 작성
☑️ 키워드
자바스크립트가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어
☑️ 식별자
프로그래밍 언어에서 이름을 붙일 때 사용하는 단어. 주로 변수명이나 함수명 등으로 사용
- 키워드를 사용 안됨
- 숫자로 시작 불가
- 특수 문자는
_와$만 허용- 공백 문자를 포함할 수 없음
- 식별자를 만드는 일반적인 관례
- 클래스(Chapter 9-1 참조)의 이름은 항상 대문자로 시작
- 변수(Chapter 2-2 참조)와 인스턴스(Chapter 09-1 참조), 함수(Chapter 05-1 참조), 메소드(Chapter 06-1 참조)
의 이름은 항상 소문자로 시작- 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자
- 식별자의 종류
구분 단독으로 사용 다른 식별자와 사용 식별자 뒤에 괄호 없음 변수 속성 식별자 뒤에 괄호 있음 함수 메소드
☑️ 주석
프로그램 코드를 설명할 때 사용하며 프로그램 진행에는 전혀 영향을 주지 않음
- HTML 태그 주석: 로 문자열을 감싸 생성
- 자바스크립트 주석
- [방법1] //를 입력하는 것으로 한 줄 주석을 표현(// 뒤의 문장은 실행되지 않음)
- [방법2]
/*와*/를 입력하여 여러 줄 주석을 표현(/*와*/사이에 있는 모든 문장은 실행되지 않음)
<script>
// 한 줄 주석
/*
여러 줄 주석
*/
</script> ☑️ 출력
- 자바스크립트는 다른 프로그래밍 언어와 비교해서 출력 방법이 많고 복잡한 편
- 간단한 표현식 결과 확인하기
- 01: 구글 크롬의 주소창에 about:blank를 입력해 빈 페이지로 들어가 단축키 Ctrl + Shift+ I (알파벳 ‘아이’)를
눌러서 개발자 환경을 띄우기- 02: about:blank에서 [Console] 탭을 클릭해 구글 크롬 개발자 도구에 진입. 이곳에 어떤 값을 입력하면 곧바
로 그 결과가 출력- 경고창에 출력하기
- 개발 전용 에디터를 사용할 때의 출력하는 방법
- alert() 함수를 사용하여 웹 브라우저에 경고창을 띄우기
- 콘솔에 출력하기
- console.log( ) 메소드 사용
✅ JS 스타일 가이드
☑️ 개념
코딩 규칙을 ‘스타일 가이드’, ‘코딩 컨벤션‘, ‘코딩 스타일‘, ‘표준 스타일‘ 등으로 부름
☑️ 존재 이유
코딩 규칙이 왜 필요할까?
- 자바스크립트는 다른 프로그래밍 언어에 비해 데이터 유형이 유연해서 오류 발생이 잦다
- 오픈 소스에 기여하거나 누군가와 공유할 소스라면 더욱 깔끔한 소스가 중요하다
- 팀 프로젝트를 진행한다면 통일된 코딩 규칙이 필요하다
- 코딩 규칙에 따라 작성된 웹 사이트는 유지 보수도 수월하고 그만큼 비용도 줄어든다
☑️ 참고
구글 자바스크립트 스타일 가이드
에어비앤비 자바스크립트 스타일 가이드
☑️ 회사 프로젝트는?
회사 프로젝트의 경우 팀 내에서 상의해서 결정
☑️ 기본 규칙
1. 코드를 보기 좋게 들여쓴다
- ‘Tab’ 키나 ‘스페이스바’를 눌러 2칸이나 4칸 들여씀
- 최근에는 공백 2칸 들여쓰기를 많이 사용함
2. 세미콜론으로 문장을 구분한다
- 세미콜론을 붙일 것을 권장함
- 소스는 한 줄에 한 문장만 작성하는 것이 좋다
var n = 10 //하지마!
var n = 10; //권장함
var n = 10; var sum = 0; //하지말라고!3. 공백을 넣어 읽기 쉽게 작성한다
- 식별자나 연산자, 값 사이에 공백을 넣어 읽기 쉽게 작성한다
var sum=sum+10l // 권장하지 않음
var sum = sum + 10;4. 코드를 설명하는 주석을 작성한다
- 한 줄 주석 : 슬래시 2개(//) 바로 뒤에 작성
- 여러 줄 주석 : 여는 기호(
/*)를 맨 앞에, 닫는 기호(*/)를 맨 뒤
에 넣고 그 사이에 주석 내용을 작성- 주석 사이에 또다른 주석을 넣을 수 없음
var today = new Date(); //한줄 주석
var h = today.getHours(); //한줄 주석/*
여러줄
주석
입니다.
*/
function startTime() { .... }
5. 식별자는 정해진 규칙을 지켜 작성한다
- 첫 글자는 반드시 영문자나 언더스코어(
_), 달러 기호($)로 시작해야 한다- 두 단어 이상이 하나의 식별자를 만들 때 단어 사이에 공백을 둘 수 없다
- 예약어는 식별자로 사용할 수 없다
6. 중괄호의 위치
for ( let i = 0 ; i < length ; i++ ) {
const element = array[i] //권장
}
for ( let i = 0 ; i < length ; i++ )
{
const element = array[i] //비권장
}✅ JS 자료형
☑️ 개념과 요약
컴퓨터가 처리할 수 있는 자료의 형태
☑️ 숫자형(Number)
- 정수 : 소수점 없는 숫자
- 실수 : 소수점이 있는 숫자
※ 자바스크립트는 실수를 정밀하게 계산하지 못함
☑️ 문자열(string)
- 작은따옴표(' ')나 큰따옴표(" ")로 묶은 데이터
☑️ 논리형(boolean)
- 참true이나 거짓false의 값을 표현하는 자료형. 불린 유형이라고도 함.
- 조건을 확인해서 조건이 맞으면 true, 맞지 않으면 false라는 결괏값 출력
☑️ undefined 유형
- 자료형이 정의되지 않았을 때의 데이터 상태
- 변수 선언만 하고 값이 할당되지 않은 자료형
☑️ null 유형
- 데이터 값이 유효하지 않은 상태
- 변수에 할당된 값이 유효하지 않다는 의미
☑️ 배열(array)
- 하나의 변수에 여러 값을 저장할 수 있는 복합 유형
- 자바스크립트의 데이터 유형 자동 변환
데이터 유형이 유연하다는 것입니다. 다시 말해 변수의 데이터 유형이 중간에 바뀔 수 있다는 것이죠.
책에 있는 ‘나이 계산 프로그램’에서는 프롬프트창을 통해 사용자의 태어난 해를 입력받는데, 이때 프롬프트 창에서 입력받은 값은 문자열이지만 사칙연산에 사용된 문자열은 자동으로 숫자형으로 변환되어계산됩니다
필요하다면 공부하는 개발자, 한승준