🌱 웹 개발
✏️개념
웹 개발은 웹 브라우저 화면에 보이는 모습과 사용자에게 제공할 기능, 서비스를 모두 담고 있는 것.
클라이언트
- 사용자가 웹 사이트에 접근할 때 사용하는 기기
- 좁은 의미로는 웹 브라우저
프런트엔드 개발
웹 브라우저 화면에 보이는 부분을 다룸 -> 웹 사이트 제작
HTML, CSS, 자바스크립트 사용
서버
- 인터넷이 연결된 컴퓨터
- 웹 요소와 여러 정보가 저장
백엔드개발
사용자 뒤에서 보이지 않는 영역(서버)를 다룸
데이터베이스를 설계하거나 데이터 처리
자바, PHP, 파이썬 등 프로그래밍 언어 사용
✏️공부해야할 기술
기본
- html
- CSS
- 자바스크립트
- 깃/깃허브
프런트엔드 영역
- 라이브러리
제이쿼리, D3.js, 부트스트랩 등 - 프레임워크
리액트, 앵귤러, 뷰 등
백엔드 영역
- 리눅스 서버, 네트워크, 데이터베이스 구축 기술
- 서버언어
파이썬, 자바, PHP, 닷넷 등 - 프레임 워크
Node.js, 스프링, 장고, 코드이그나이터 등
✏️웹 개발의 기본
뼈대 만드는 HTML
- 웹 즈라우저 창에 문서 내용을 보여주기 위한 약속이다
- HTML 약속 표기법 사용해 문서 작성
문서 꾸미는 CSS
- 문서를 꾸미거나 요소를 배치
- 디바이스에 맞는 반응형 웹 디자인을 위해 필수
사용자 동작에 반응하는 자바스크립트
- 사용자 동작에 반응해 동적인 효과 만드는 기술
🌱 자바스크립트로 가능한 것들
✏️내용
웹 요소 제어
- 웹 요소를 가져와 필요에 따라 스타일 변경, 움직이게 가능
- 웹 사이트 UI 활용
라이브러리 사용 가능
- 웹 중심 서비스가 늘면서 브라우저에서 처리할 일이 증가 -> 라이브러리, 프레임워크 등장
- 예: 시각화를 위한 D3.js, 머신러닝을 위한 tenserflow.js, DOM 조작을 위한 JQuery 등
- 예: 웹 애플리케이션 개발을 위한 리액트, 앵귤러, 뷰 등
웹 애플리케이션을 만듬
- 사용자와 실시간 정보를 주고 받으면 애플리케이션처럼 동작
- 예: 지도 찾기, 데이터 시각화 등 공개된 API를 활용한 서비스
서버를 구성하고 서버용 프로그램 제작 가능
- node.js: 프런트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에 사용할 수 있게한 프레임 워크
🌱 JS로 글자색 바꾸기
✏️ 클릭하면 red로 바뀌는 글자
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해보세요</p>
<script>
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}
</script>
마우스로 글자를 클릭 할 경우 색이 red로 변경된 것을 확인.
🌱 prompt로 입력받기
✏️ 입력받은 글자 작성
<h1>어서오세요</h1>
<script>
var name = prompt("이름을 입력하세요");
document.write("<b><big>" + name + "</big></b>님 환영합니다.");
</script>
prompt 창으로 데이터를 입력 받을 수 있음
var name = prompt("이름을 입력하세요");변수에 실행문을 담고,
문서에 입력받은 데이터가 작성된 것을 확인.
document.write("<b><big>" + name + "</big></b>님 환영합니다.");문서에.써라(변수를)
태그 사용할 경우 "" 안에 사용
prompt("나이를 입력하세요", "27")prompt("안내", "기본값")
🌱 기본 용어
✏️ 표현식과 문장
표현식
자바스크립트에서 값을 만들어내는 코드
문장
하나 이상 표현식이 모여 문장을 구성. 문장 끝에 세미콜론을 넣어 문장 종결 의미
키워드
자바스크립트가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어
ex) class, if, else, for, import 등
✏️ 식별자
식별자
프로그래밍 언어에서 이름을 붙일 때 사용하는 단어. 주로 변수명, 함수명 사용
- 키워드 사용 불가
- 숫자 시작 불가
- 특수문자는 _ 와 $만 허용
- 공백 문자 포함 불가
식별자를 만드는 일반 관례
- 클래스 이름은 항상 대문자 시작
- 변수와 인스턴스, 함수, 메소드 이름은 항상 소문자 시작
- 여러 단어로 이루어진 식별자 각 단어 첫 글자 대문자(낙타 표기법)
식별자 종류
| 구분 | 단독 사용 | 다른 식별자와 사용 |
|---|---|---|
| 식별자 뒤에 괄호 없음 | 변수 | 속성 |
| 식별자 뒤에 괄호 있음 | 함수 | 메소드 |
✏️ 주석
주석
프로그램 코드를 설명할 때 사용. 프로그램에는 영향 없음
- 자바스크립트 주석
<script>
//한 줄 주석
/*
여러줄
주석
가능
*/
</script>🌱 JS 스타일 가이드
✏️ 개념
코딩 규칙을 부르는 말
예: 스타일 가이드, 코딩 컨벤션, 코딩 스타일, 표준 스타일 등
✏️ 이유
- 다른 프로그래밍 언어에 비해 유연해 오류 발생이 많음
- 오픈 소스에 기여, 공유할 소스는 깔끔한 소스일 필요
- 팀 프로젝트 진행 시 통일된 코딩 규칙
- 코딩 규칙에 따라 웹 사이트 유지 보수, 비용 절감
✏️ 스타일 가이드
구글 자바스크립트 스타일 가이드
에어비앤비 자바스크립트 스타일 가이드
회사 프로젝트 경우 팀 내규
✏️ 기본 규칙
- 들여쓰기
- 세미콜론으로 문장 구분
- 공백 넣어 읽기 쉽게 저장(식별자, 연산자 사이에)
- 코드 설명하는 주석 작성
- 식별자는 정해진 규칙을 지켜 작성
- 중괄호 위치
🌱 자료형
✏️ 개념
컴퓨터가 처리할 수 있는 자료의 형태
✏️ 기본 유형
숫자형(number)
- 정수 소수점이 없는 숫자
- 실수 소숫점이 있는 숫자(자바스크립트는 실수를 정밀하게 계산 못함)
문자열(string)
- 작은 따옴표('')나 큰 따옴표("")로 묶은 데이터
논리형(boolean)
- 참, 거짓 값을 표현하는 자료형
- 조건 확인해서 조건이 맞으면 true, 틀리면 false 출력
✏️ 특수유형
undefined 유형
- 자료형이 정의 되지 않았을 때 데이터 상태
- 변수를 선언만 하고 값이 할당되지 않은 자료형
null 유형
- 데이터 값이 유효하지 않은 상태
- 변수에 할당된 값이 유효하지 않다는 의미
✏️ 복합 유형
배열(array)
하나의 변수에 여러 값을 저장할 수 있는 복합 유형
배열명["값", "값2", ...]
배열명[] //빈 배열 선언자바스크립트 데이터 유형 자동 변환
자바스크립트는 데이터 유형이 유연하다.
변수 데이터 유형이 중간에 바뀔 수 있음.
prompt 창에서 입력받은 값은 문자열이지만 사칙연산 시 문자열을 자동으로 숫자형으로 변환해 계산.
🍃 어려웠던 점 or 해결못한 것
없었다.
🍀 해결방법 작성
✏️ 어떻게 해결을 했는가?
✏️ 이렇게 이해를 했다
✏️ 어디까지 이해했지?
✏️ 다음에 시도해볼 방법
🌷 학습 소감
자바스크립트를 사용하면 사용자 동작에 따른 동적인 움직임을 만들 수 있다는 점이 재미있다.
보다 이해를 많이 한다면 많은 기능을 구현할 수 있을 것 같다.
