유데미 STARTERS 취업 부트캠프 3기(백엔드과정) 2주차 학습 일지

 4일차 -  CSS 마무리 및 JavaScript(JS) 입문 

#반응형 웹과 미디어 쿼리 (교재 - 12장)

1. 모바일 기기를 위한 뷰포트(viewport)

 - 기본 형식 :

 <meta name="viewport" content="속성명1 = 값, 속성명2 = 값">

 * 특이하게도 속성과 값을 세미콜론(:)이 아닌 이퀄(=)로 연결함.
 * user-scalable(확대,축소 가능 여부) =no일 경우, 사용자의 개입 무시됨

 * initial-scale(초기 확대,축소 값)

 

 

2. 미디어쿼리 구문

 - 기본 형식 :

@media screen and (min-width: ~px) and (max-width : ~px) {
	대상태그 {
		속성값1 : ~;
		속성값2 : ~;
	} 
} //이상 지정한 화면크기에 따라 보여질 시
@media print {
	대상태그 {
		속성값1 : ~;
		속성값2 : ~;
	} //이상 프린트 시 
}

* print 시 css적용 안 보일 시, 인쇄-설정 더 보기-옵션- 배경 그래픽 체크! 

 

#JavaScript(JS)입문

1. 기본 이론

 - 기본 형식 : 

<script>스크립트문장</script>

 - 위치 : head 혹은 body 내

 - 개수 : 여러개 있어도 무방함. 작성순(위->아래순) 작동함.

 - 하나의 js 구문을 여러문서에서 공유 가능함(? 설명 더 찾아볼게요)

 - 주석 처리방식 : ex) //주석처리내용  *html 주석 처리 방식 : /* 주석 처리 내용*/

 

- 출력 방법

방식	설명 및 예시 등
alert	alert(”팝업 출력 메세지”)
document.write	현재 브라우저상 body에 표현됨
console.log	개발자도구 - 콘솔창에 표기됨

- 입력 방법

방식	설명 및 예시 등
prompt	prompt(”나이를 입력하세요”)
confirm	confirm(”정말 삭제하겠습니까?”) *이때 팝업에 확인(true) / 취소(false) 버튼 등장

 

2. 변수(variable)

 - 개념 : 데이터나 결과 값처럼 메모리에 저장하고, 이를 사용 가능하게 하는 값

 - 형태 :

 1) 숫자형

 2) 문자형 

 3) 논리 값(불린 boolean, true/false 2가지 경우의 수만 有)

 4) 함수

 5) 객체

 6) undefined : 변수 선언했는데 해당 변수에 할당된, 저장된 값이 없을 경우 나옴

 7) null : 데이터 값이 유효하지 않은 상태 (변수에 할당한 값이 유효하지 않다는 의미)

cf. JS의 꽃은 함수와 객체이다! by 강사님

 

 - 선언 방식 : var / const / let

var / let / const 비교

 

 - 특징 :

1) 길이 무제한

2) 대소문자 구분
3) 숫자 가능, 단 숫자로 시작은 불가능.

4) 특수문자 _(언더바) 사용 가능. 키워드 사용 불가능.

5 )2단어이상 결합시 예시와 같이표현 ex) sumOfNuber

6) 한글을 변수명에 넣는 건 좋지X(왜? 모든 국가에서 한글 키보드를 채택하고 있진 X) & 단어의 시작문자 대문자.

7) 변수가 2개밖에 없을 때 서로의 값 교환 불가능. 변수 1개 더 필요하다

 * 제3의 변수를 하나 선언해서 한쪽 변수를 담아서 교환해야.

8) var보다 let이 더 정확하다.

 

*ecma script 문법을 따름..

*ecma script6부터 변수 선언 시 let var const 모두 사용 가능

---

 

 5일차 -  JavaScript(2) 

#조건문 (특정 조건 만족 시 (조건이 참인 경우) 실행하는 명령의 집합)

1. if문

 

if(조건1){
//조건1이 참이라면 실행할 내용}
else if (조건2){
//조건1이 참이 아니고, 조건2가 참이라면 실행할 내용}
else{
//조건1,조건2 모두 참이 아닐 시 실행할 내용
}

 

2. switch문

 

switch (변수) {
	case 값1: 
    //변수와 값1이 일치하면 실행할 내용
    breack;
    case 값2:
    //변수와 값2가 일치하면 실행할 내용
    break;
    dafult: 
    //다 아닐때 실행할 내용
    break;
 }

 

3. 삼항연산자문

조건 ? 참일 때 실행할 내용 : 거짓일 떄의 실행 내용

ex)
var n = 3;
n > 0 ? alert("큼") : alert("작음");

 

#반복문(똑같은 명령을 일정 횟수만큼 반복·수행하도록 하는 실행문)

 

1. for문

for(초기문; 조건문; 증감문){
	//조건문의 결과가 참인 경우 반복적으로 실행
    //명령문
}
ex)
for (var i = 0 ; i < 10 ; i++){
	console.log( i );
}

 

 

 

2. while문

while (조건문){
	//조건문이 참인 경우 반복적으로 실행하는 명령문
	//주의! while문의 경우 명령문에서 조건문의 결과를 바꾸지 않으면 무한루프에 빠질 수 있다.
}
ex)
var i  = 0;
while( i < 10 ) {
	console.log( i );;
    i++;
}

# DOM 문법(Document Object Model)

-XML 이나 HTML 문서에 접근하기 위한 일종의 인터페이스로 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공

document.getElementById(”Id명”)	return 1개 태그
document.getElementsByTagName(”태그명”)	return 여러개 태그 배열(=리스트)
document.getElementsByClassName(”클래스명”)	return 여러개 태그 배열(=리스트)
document.querySelector(”#id명”)	return 1개 태그
document.querySelectorAll(”.class명”) document.querySelectorAll(”태그명”)	return 여러개 태그 배열(=리스트)
document.querySelector(””)

---

 6일차 -  JavaScript(3) & jQuery 입문  

#객체 (여러개의 함수 묶음.. 변수와 함수의 묶음)

메서드method(동작, 행위, 기능..객체 내부 포함 함수) + 프로퍼티property(= 데이터 정보.. 객체 내부 포함 변수)

ex)

• 회사원 급여 계산 기능 - 사번 이름 부서명 급여 본봉 보너스
• 회사원 휴가 계산 기능 - 사번 이름 부서명 연차
•  

function 급여계산 (){
	사번 이름 부서명 급여 본봉 보너스
}
function 휴가계산 (){
	사번 이름 부서명 연차
}
// 이때 사번, 이름, 부서명 중복 사용된다.. 이럴경우 아래와 같이 구조 변경 가능
function 회사원 (){
	let 사번, 이름, 부서명 //let은 블록/함수 스코프 내에서 유효
	function 급여계산 (){
		급여 본봉 보너스
	}
	function 휴가계산 (){
		연차
	}
} // 공통의 사번, 이름, 부서명

회사원 홍길동 = new 회사원();
홍길동.사번 = 123;
홍길동.이름 = 홍길동;
홍길동.부서명 = IT개발팀;
홍길동.급여계산();

window.parseInt() // js 내장함수로.. window. 부분 생략 가능하다
window.onload //()없는 window.onload 는 변수이다.

#jQuery

- 자바스립트 언어를 간편하게 사용할 수 있도록 단순 화시킨 오픈 소스 기반의 자바스크립트 라이브러리

 * 라이브러리란? 자주 사용하는 기능들을 모아두었다가 필요할 때 가져다 쓸 수 있도록 한 자원들의 묶음

1. 기본구조 

$("css selector(선택자)문법").jQuery함수

2. jQuery 장점

1) 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능

2) HTML DOM을 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 간으

3) 애니메이션 효과나 대화형 처리를 간단하게 적용

4) 같은 동작을 하더라도 더욱 짧게 구현 가능

5) 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능

 

3. 사용방식

1) 파일 다운로드

2) CDN(Contact Delivery Network) 사용

 

4. 주요 코드

1) 값 가져오기 & 설정하기 
$(선택자).val();
//선택자의 value 값 가져올 수 있다
$(선택자).val("설정할 값");
//선택자에 value 값 설정할 수 있다

2) style 변경하기
$(선택자).css("속성","속성값");

3) 속성 변경하기
$(선택자).attr("속성", "변경값");

4) 요소 추가
$(선택자).append(요소);
//선택된 요소의 자식 요소 중 마지막으로 추가
$(선택자).prepend(요소);
//선택된 요소의 자식 요소 중 첫번째로 추가
$(선택자).before(요소);
//선택된 요소의 형제 요소로 이전 형제로 추가
$(선택자).after(요소);
//선택된 요소의 형제 요소로 다음 형제로 추가

 

 

* JS this vs jQuery this

https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-this-%E2%9A%94%EF%B8%8F-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-this

---

 7일차 -  jQuery(2) 

 

1. 
window.onload = function (){};
= $(document).ready(function(){});
2. 동일 태그 여러개 有 but 일부만 css적용희망
ex) 
var cols = [
          "red",
          "orange",
          "yellow",
          "green",
          "blue",
          "navy",
          "purple",
        ];
$("h1").css("color", function (i) {
          //7개 반복시마다 색상값 return(배열 활용)
          return cols[i];
        });
3. 
ex)
$("h1").each(function () {
          $("#result").html($("#result").html() + this.style.color + "<br>");
          //기존의 innerHTML 내용 버리지말고 그 뒤에 이어서 연결지어라는 명령어
          // =  $("#result").append(this.style.color + "<br>");
          // =  document.getElementById("result").innerHTML +=
          //     this.style.color + "<br";
        });

* 속성추가  .attr / 속성 제거 removeAttr

* attr vs prop

 

- window 내장객체

parseInt/parseFloat/isNaN

setTimeout/setInterval

open/close

opener.document.getElementById("id").value = opener.$("id").val();

---

 8일차 - React입문 

*JavaScript

1 클라이언트 사이드에서 html 동작 처리 담당

2 활용이 많아지면서 라이브러리 등장

3 jQuery.js가 대표적 - dom, event 처리. 간결한 표현이 특징

4 react.js vue.j, angular.js - 하나의 모듈 내부에 html, css, js 모두 포함 표현

 

#React 리액트

 

1. React란?

 - 동적 사용자 인터페이스 화면을 만들기 위해 Facebook에서 만든 오픈소스 JavaScript 라이브러리

 - 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합

- Angular 보다 배우기 쉽다고 이야기 됨.
react 사용  Ex) 페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등등

 

2. 특징 (추후 수업에서 더 다룰듯)

- JSX

 React에서 JSX 사용이 필수는 아니지만 많이 사용된다!

 JSX = JavaScrpt + XML
- Date Flow

- Component 구조

- Virtual Dom

- Props and State

---

 

 2주차 아쉬운점 & 좋았던 점 

 #아쉬운점 

1) 알러지 이비인후과 약이 너무 졸리게 만들었다....

==>  컨디션 관리 잘하자.
2) 복습시간 혹은 예습시간을 많이 확보하지 못했다.

==> 수업 종료 후 1시간 정도라도 남아서 복습하고 가는 것을 습관화 하면 좋을 듯

 

 #좋았던 점 

 1) 소소한 계획을 이행한 나를 칭찬한다

==>  github 오버뷰 정리 및 잔디심기 생활화. 하루 최소 코테 2문제 이상은 풀어보기 등을 수행했다.

 2) 강사님의 강의력

==> JavaScript 등 백엔드 개발자도 알아야할 프론트 지식을 정말 빠르면서 깊이있게 강의해주셨다. 강의력 진짜 좋으시다 ㅎㅎ

 

 #3주차 목표 

 1) github 오버뷰 및 레포 정리 완료

 2) JAVA udemy 강의 수강 시작

 3) 프로그래머스 코테 하루 2개 이상 풀기 습관화

 4) 컨디션 관리!! 및 복싱 주 4회이상 필참!

 

---

* 유데미 바로가기 : https://bit.ly/3V220ri
* STARTERS 취업 부트캠프 공식 블로그 보러가기 : https://blog.naver.com/udemy-wjtb
본 후기는 유데미-웅진씽크빅 취업 부트캠프 3기 백엔드 과정 학습 일지 리뷰로 작성되었습니다.