14일차 내용 정리

채공부·2025년 6월 12일

if문

특정 코드 블럭을 조건부로 수행하고자 할 때 사용, 조건이 true일 시 코드 실행

if(조건){실행할 코드}

예시

<h1>단일 if문 테스트</h1>
<input type="text" id="inputMsg" placeholder="메시지 입력...">
<button id="sendBtn">전송</button>
<button id="sendBtn2">전송2</button>
<button id="sendBtn3">전송3</button>
<p>메세지는 10글자 이내로 입력하세요</p>
<p id="target"></p>
<script>
	document.querySelector("#sendBtn").addEventListener("click", ()=>{
		// 1. 입력한 문자열을 읽어온다
		const msg = document.querySelector("#inputMsg").value;
		// 2. 만일 10글자 이내로 입력했다면
		if(msg.length <= 10){
			document.querySelector("#target").append(msg);
		}
	});
    
    document.querySelector("#sendBtn2").addEventListener("click", ()=>{
		// 1. 입력한 문자열을 읽어온다
		const msg = document.querySelector("#inputMsg").value;
		// 2. 만일 10글자를 초과했다면 함수를 여기서 끝내기 (return)
		if(msg.length > 10){
			return; // 함수를 여기서 종료해라!
		}
		document.querySelector("#target").innerText = msg;
	});
    
    document.querySelector("#sendBtn3").addEventListener("click", ()=>{
		// 1. 입력한 문자열을 읽어온다
		const msg = document.querySelector("#inputMsg").value;
		// if문 블럭에서 실행할 code가 1 line이라면 {} 생략 가능
		if(msg.length > 10) return; // 함수를 여기서 종료해라!
		document.querySelector("#target").innerText = msg;
	});
</script>

함수가 종료되는 case

<case 1>
( ) => {
	모두 다 실행하고 더 이상 실행할 코드가 없다면 종료(return)
}

<case 2>       
( )=>{ }
   ㄴ> return을 만나면 거기서 바로 종료(return)

if else문

if(조건){
	실행할 코드}
else{
	실핼할 코드};

예시

<input type="text" id="inputNum" placeholder="숫자 입력...">
<button id="checkBtn">판별하기</button>
<p id="result"></p>
<script>
	/*
		어떤 숫자를 입력받아서 해당 숫자가 짝수이면 짝수입니다.
		홀수면 홀수입니다 를 출력하려고 한다.
	*/

	document.querySelector("#checkBtn").addEventListener("click", ()=>{
		const num = document.querySelector("#inputNum").value;
		if(num%2 == 0){
			document.querySelector("#result").innerText = "짝수입니다";
		}
		else{
		document.querySelector("#result").innerText = "홀수입니다";
		}
	});
</script>

if else if else if...문

<input type="text" id="inputJumsu" placeholder="점수 입력">
<button id="checkBtn">판별하기</button>
<button id="checkBtn2">판별하기2</button>
<p>0~100 사이의 점수를 입력하세요</p>
<p id="result"></p>

<script>
	/*
    	점수를 입력하고 판별하기 버튼을 눌렀을 때
		점수가 90 이상이면 "A 학점"
		점수가 80 이상이면 "B 학점"
		점수가 70 이상이면 "C 학점"
		점수가 60 이상이면 "D 학점"
		그 이외의 경우(60 미만)이면 "F 학점"
	*/
	
    document.querySelector("#checkBtn2").addEventListener("click", ()=>{
		// 입력한 점수를 읽어온다
		const jumsu = document.querySelector("#inputJumsu").value;
		// 변수를 선언하고 아무것도 안 넣었다면 undefined 가 들어간 상태
		let grade;
		if(jumsu >= 90){
			grade = "A";
		}
		else if(jumsu >=80){
			grade = "B";
		}
		else if(jumsu >= 70){
			grade = "C";
		}
		else if(jumsu >= 60){
			grade = "D";
		}
		else{
			grade = "F";
		}
		document.querySelector("#result").innerText = `${grade} 학점`;
	});
    
	document.querySelector("#checkBtn2").addEventListener("click", ()=>{
		// 입력한 점수를 읽어온다
		const jumsu = document.querySelector("#inputJumsu").value;
		// 초기값 "F"를 부여한다면?
		let grade = "F";
		if(jumsu >= 90){
			grade = "A";
		}
		else if(jumsu >=80){
			grade = "B";
		}
		else if(jumsu >= 70){
			grade = "c";
		}
		else if(jumsu >= 60){
			grade = "D";
		};
		document.querySelector("#result").innerText = `${grade} 학점`;
	});
</script>

input 요소의 string 타입 반환 주의
HTML "input" 요소의 value 속성은 항상 문자열(String)을 반환
type을 number로 해도 사용자의 입력 제한을 도와줄 뿐 값을 숫자로 처리X

<input type="number" id="score">

입력창에 90 입력

console.log 창에서 확인한 결과
document.querySelector("#score").value
→ '90' (String type)

Number()

안전하게 산술 연산할 때 사용

Number("90")
string type → number type

NaN (Not-a-Number)

숫자가 아닌 값을 숫자로 변환하려 할 때 발생하는 특수한 값

Number("구십") → NaN

<NaN 비교연산자로 비교 불가>
NaN == NaN → false

<isNaN() 함수 사용>
isNaN("구십") → true

예시

<input type="text" id="inputJumsu" placeholder="점수 입력">
<button id="checkBtn">판별하기</button>
<p>0~100 사이의 점수를 입력하세요</p>
<p id="result"></p>

<script>
	document.querySelector("#checkBtn4").addEventListener("click", ()=>{
		// 입력한 점수를 숫자로 바꿔서 jumsu 라는 상수에 담기
		const jumsu = Number(document.querySelector("#inputJumsu").value);
		// jumsu는 NaN일 가능성이 있다
		if(isNaN(jumsu)){
			alert("숫자 형식으로 입력해 주세요!");
			return; // 함수를 여기서 끝내라 
		}
                
		// 입력한 점수가 유효한 점수인지 여부
		const isValidJumsu = (jumsu >= 0) && (jumsu <= 100);
		// 만일 점수가 유효하지 않다면
		if(!isValidJumsu){
			alert("0~100 사이의 숫자를 입력해주세요")
			return;
		}; 
	});
</script>

해당 코드 분석

연산자

산술연산자

기호설명
+더하기
-뺴기
*곱하기
/나누기
%나머지

대입연산자

기호표현식풀이
=a=ba=b
+=a+=ba=a+b
-=a-=ba=a-b
*=a*=ba=a*b
/=a/=ba=a/b
%=a%=ba=a%b

비교연산자

기호설명
==같다
!=다르다
>크다
>=크거나 같다
<작다
<=작거나 같아

논리연산자

종류문법설명
AND 연산자조건1 && 조건2두 개 모두 다 참이어야 true 반환
OR 연산자조건1 || 조건2둘 중 하나라도 참이면 true 반환
NOT 연산자!조건값을 반전하므로 true는 false, false는 true

삼항연산자

해당 조건이 true일 시 값1, false일 시 값2 반환

조건? 값1 : 값2

증감연산자

종류형태연산자동작 순서
증가연산자prefix++a값 1 증가 → 값 반환
증가연산자postfixa++값 반환 → 값 1 증가
감소연산자prefix--a값 1 감소 → 값 반환
감소연산자postfixa--값 반환 → 값 1 감소

타입연산자

typeof : 데이터 타입 변환
instanceof : 객체의 인스턴스 여부 확인

trycatch

코드 실행 중 오류(예외) 발생 시 오류 처리를 도와준다

try{
  // Error가 발생할 가능성이 있는 코드
} catch (error){
		   ㄴ> 에러정보를 담고 있는 object가 전달
  // 오류가 발생했을 때 실행할 코드
}

예시

<h1>javascript 에서 error 처리하기</h1>
<input type="text" placeholder="json 문자열 입력" id="inputJson">
<button id="parseBtn">파싱하기</button>
<p id="result"></p>

<script>
	document.querySelector("#parseBtn").addEventListener("click", ()=>{
	// 입력한 문자열을 읽어와서
	const json = document.querySelector("#inputJson").value;
		try{
			// 파싱
			const data = JSON.parse(json);
			console.log(data);
			// 결과를 출력
			document.querySelector("#result").innerText = "에러 없이 성공적으로 파싱했습니다";
		}
		catch(e){
			// e.message : 에러 메세지 확인 가능
			console.log(e.message);
			document.querySelector("#result").innerText = `에러 발생! 정보:${e.message}`;
		}
	});
</script>

결과

GIT

유저 생성

연동

git add 파일
git commit -m "설명"

로그 확인

git log
git log --all

새로운 branch 생성과 HEAD 이동

git init : 기본적인 "master" branch가 자동적으로 생성
git branch 브랜치명
git checkout 브랜치명

git checkout HEAD~ : 현재 HEAD의 한 단계 이전 커밋
  • HEAD = cursor
    현재 체크아웃된 브랜치를 가리키는 포인터(pointer)
    HEAD가 가리키는 커밋에 따라 working directory와 staging area의 내용 결정

    lab1 브랜치로 HEAD를 이동한 후 h1에 hover 스타일을 추가하고 커밋한 뒤,
    다시 master 브랜치로 HEAD를 이동하면
    master 브랜치에는 해당 스타일 변경 내용이 반영되어 있지 않다.

병합

현재 HEAD가 가리키는 branch에 다른 branch의 변경 사항을 병합

git checkout 병합할 branch명
git merge 병합할 다른 branch명

branch 삭제

git branch -d lab1

되돌리기(복구)

작업 중인 파일을 마지막 커밋 상태로 되돌린다

git restore 파일명

내용 복습 예제

1. test02 폴더를 새로 만드세요
2. 해당 폴더에서 일어나는 일을 git으로 관리하기 위해 git init을 하세요
3. index.html 을 만들고 최초의 add, commit을 하세요
4. 원하는 만큼 수정하고 add, commit을 해 보세요.
5. commit의 log를 확인하세요 git log --all
6. 새로운 branch를 만들어 보세요 git branch 브렌치명
7. 새로 만든 branch로 checkout을 해 보세요 git checkout 브렌치명
8. 해당 브렌치에서 작업을하고 원하는 만큼 commit을 추가해 보세요
9. master 브렌치로 checkout하세요 git checkout master
10. master 브렌치에서 새로 만든 branch를 merger해 보세요 git merge 브렌치명
  1. Git 저장소 생성 후 파일 추가
git init : Git 시작
ls : 폴더 내용 보기
ls -al : 숨겨진 .git까지 확인 가능
git status : 현재 상태 확인
git add index.html : index.html을 스테이징
git commit -m "index 페이지를 추가" : 커밋 생성
  1. 파일 수정 후 커밋
# HTML에서 <p> 태그 하나 추가
git add index.html
git commit -m "p1을 추가" : 직접 수정
git log --all : 지금까지 커밋한 기록 전체 보기
git status : 현재 상태 확인
  1. 파일 추가 후 되돌리기
# images 폴더 추가 (아직 add 전일 것)
git restore . : 작업 취소 (최근 커밋 상태로 되돌림)
  1. staging/unstaging 실습
git add . : 전체 파일 커밋 준비
git restore --staged . : 준비했던 걸 다시 취소 
git status :  현재 상태 확인
git add .
git commit -m "korea image 추가함"> : 다시 준비해서 커밋
git log --all : 전체 커밋 확인
  1. 과거 commit으로 checkout
git checkout c2a133f : 과거 특정 커밋으로 돌아가기
                ㄴ> ex) 두 번째 커밋의 해시 앞 7자리
-> 이 상태는 "Detached HEAD", 즉 브랜치에서 벗어난 상태

git 총정리

명령어하는 일
git initGit 시작
git add커밋 준비
git commit변경 저장
git status현재 상태 보기
git restore .변경사항 되돌리기
git restore --staged .스테이징 취소
git log --all전체 기록 보기
git checkout <해시>과거로 돌아가기
profile
채공부
학원 공부 내용 정리
이전 포스트

13일차 내용 정리

다음 포스트

15일차 내용 정리

0개의 댓글