0. 단축키
- 개발자 도구 켜는 법 :
option+command+I - VS Code 에서 Explorer 열고 닫기 :
command+B
1. JavaScript
-
JavaScript : 브라우저가 알아들을 수 있는 언어로, 웹을 움직이도록 조작할 수 있음
html은 뼈대, css는 꾸미기, JavaScript는 움직이기!
-
변수 : 데이터를 1개 저장함 (
let a = 1) -
리스트 : 순서(index)가 있는 형태로 여러 개의 데이터를 저장하는 자료 구조
let a_list = [] let b_list = [1, 2, 'hey', 3] console.log(b_list[0]) b_list.push('헤이') // 리스트에 새로운 데이터 추가 console.log(b_list) console.log(b_list.length) // 리스트 길이 출력 -
딕셔너리(객체) : 키(key)-밸류(value) 값의 묶음으로 여러 개의 데이터를 저장하는 자료 구조
- 키는 중복되면 안되고, 문자열이어야 함
let a_dict = {} let b_dict = {'name': 'Bob', 'age': 21} console.log(b_dict['name']) b_dict['height'] = 180 // 값을 추가 -
함수(function) : 원하는 코드를 모아서 이름을 붙여 저장해두는 것
function sum(num1, num2) { return num1 + num2 } -
반복문(for) : 코드를 여러 번 실행함
6-1.forEach: 리스트 내 모든 요소(element)를 한번씩 반복함for (let index = 0; index < 10; index++) { console.log(index) } let fruits = ['사과', '배', '망고', '귤'] fruits.forEach(element => { console.log(element) }); -
조건문(if) : 특정 조건이 참(true)이면 실행함
let ages = [12, 15, 20, 25, 16, 40] ages.forEach(element => { if (element > 20) { console.log('성인입니다.') } else { console.log('청소년입니다.') } });
2. JQuery
JavaScript만 사용하면 코드가 복잡해지고 브라우저 간의 호환성 문제가 있음
- jQuery : html 요소를 조작하는*JavaScript 코드를 미리 작성해둔 라이브러리. 즉, 간편한 JavaScript 코드
- 사용하기 전에
import해야 함
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> - 사용하기 전에
-
.text(): text 바꾸기<script> function checkResult() { // alert('안녕하세요!') // let word = '사과' // $('#q1').text(word) let a = ['사과', '배', '감', '귤'] let b = { "name": "영수", "age": 30 } $('#q1').text(a[1]) $('#q2').text(b['name']) let c = [ { 'name': '영수', 'age': 30 }, { 'name': '철수', 'age': 35 } ] $('#q3').text(c[1]['age']) } </script> -
.append(): 추가let temp_html = `<p>${element}</p>` $('#q1').append(temp_html) -
.empty(): 기존 내용 삭제$('#q1').empty() // 기존 내용 삭제
3. Fetch
-
Fetch로 클라이언트에서 서버에 요청을 보낸다.
-
fetch("여기에 URL을 입력")- GET 요청 : url 뒤에 아래와 같이 붙여서 데이터를 가져감
http://naver.com?param=value¶m2=value2 - POST 요청 : data : {} 에 넣어서 데이터를 가져감
data: { param: 'value', param2: 'value2' }
- GET 요청 : url 뒤에 아래와 같이 붙여서 데이터를 가져감
-
Fetch 예시
let weather_url = "http://spartacodingclub.shop/sparta_api/weather/seoul"; fetch(weather_url).then(res => res.json()).then(data => { let icon = data['icon'] let temp = data['temp'] let tempMsg = `${temp}ºC` $('#weatherIcon').attr('src', icon) $('#weatherTemp').text(tempMsg) })
4. 오늘의 결과물
5. 리눅스 명령어
pwd: 현재 작업 중인 폴더 확인ls: 폴더 내 파일 확인
2-1.ls -a: 폴더 내 숨겨진 파일까지 확인
2-2.ls -al: 폴더 내 숨겨진 파일의 정보를 확인cd: 특정 디렉토리로 이동..: 상위 경로를 의미
4-1.cd ..: 뒤로가기.: 현재 경로mkdir 폴더명: 새로운 디렉토리(폴더) 생성ll: 디렉토리 내 폴더/파일 정보 확인 가능touch 파일명: 현재 경로에서 파일을 생성
6. Git & Github
- Git : 코드 변경점을 기록하는 버전 관리 도구
- 소프트웨어의 변경사항을 체계적으로 추적하고 통제하는 것
- Github : 백업 / 공유 / 협업이 가능한 온라인 코드 저장소
- Git 명령어가 잘 호환됨
7. Git 필수 명령어
-
git init: 코드 관리를 시작하는 명령어- 프로젝트 시작 전 딱 한 번만 입력하면 됨 (여러 번 입력해도 문제는 되지 않음)
- 정확한 프로젝트 폴더(경로)에서 입력해야 함
.git폴더가 생성됨 (ls -a로 확인 가능)
- 이때부터 코드 변경을git에서 추적함
-
git status: 저장되기 전 상황을 확인하는 명령어- 아직 저장하지 않은 파일은 붉은색으로 표시
-
코드를 저장하는 명령어 (아래 순서로 진행)
3-1.git add 파일명: 저장할 파일을 지정함git add .으로 작업하는 디렉토리 내 모든 파일을 모두 git에 올릴 수 있음3-2.
git commit -m "메세지 작성": 실제로 저장함 -
git log: 저장 내역(commit history)을 확인하는 명령어Q를 눌러 빠져나옴
8. Github으로 코드 백업하기
- 첫 업로드
git remote add origin <github 주소>:origin이라는 이름으로 github 주소를 저장git branch -M main: 기본 branch인master의 이름을main으로 변경git push -u origin main: git이 origin이 가리키는 github 주소의 main 브랜치에 올리도록 함
git remote -v: git push 를 하기 전 어떤 remote repository가 등록되어 있는지 확인git clone <github 주소> .: 해당 github 주소의 모든 파일을 가져옴 (코드 복사해오기).을 찍지 않으면, 폴더 안의 파일이 아닌 폴더 전체를 가져옴- 협업 시, 팀장 외 팀원들만 최초에 한 번 필요함
git push origin 브랜치명: 브랜치에 올리기git pull origin main: 다른 사람이 변경한 코드를 내 코드에 가져와서 합침
