들어가기에 앞서 css에서 모바일 처리 팁을 먼저 배워 작성해본다.

<style>
	.mydiv{
		max_width: 500px;	/*너는 최대 500px까지 채울 수 있어*/
        width: 95%;			/*그 전까지 너는 95%만 채워주면 돼 - 명확하지 않아 확인 필요*/
	}
</style>

화면이 작아지거나 할 때 크기를 화면 비율에 맞춰주는 역할을 한다고 한다. 어떤 식으로 쓰이는지는 알겠으나 정확히 무슨 의미인지는 아직 이해가 잘 안 된다.

아직 들을 강의가 한참이지만 계속 듣기만 하면 앞에 배운 내용을 전부 까먹을 거 같은데다 Weekly I Learn을 작성할 엄두가 나지 않을 것 같아 중간 정리를 한 번 하기로 했다.

CSS까지는 어느 정도 멍 때리면서 들어도 이해가 되었는데 자바스크립트는 살짝 헷갈려서 좀 힘들었다.

물론 1주차 숙제인 CSS 과제를 하다가 태그 하나가 생각대로 안 써져서 다 집어던지고 싶어졌지만... 해결했으니 다행이다.

JavaScript

-동적인 화면을 구성하는데 사용
-Java와는 아무 연관도 없다.
-모든 인터넷의 프론트엔드는 자바스크립트를 표준으로 잡는다.

script 태그 안에 적어준다.

F12개발자도구 콘솔창에서 간단히 확인이 가능하며 개발을 할 때 확인용으로 많이 쓴다함. 새로고침을 하기 전까지는 기록이 남아있어 기록을 지워도 상관없다.

프로그래밍 언어의 5가지
-변수, 자료형, 함수, 조건문, 반복문
-프로그래밍 언어를 배울 때는 이 다섯가지만 알면 된다.

변수의 선언은

<script>
	let a = 2;	/*최근 선언 방식*/
	var a = 2;	/*이전에 선언하던 방식*/
</script>

두 종류가 있으며 let을 사용해주도록하자.

자료를 담는 2가지 방법 - 리스트(배열), 딕셔너리(객체)

리스트(배열)

<script>
	let a_list=['수박','배','사과']	/*리스트 선언*/
    a_list.push('감')			   /*리스트 추가*/
</script>

리스트는 순서가 중요하며 0번째부터 시작된다.

리스트 안에 리스트가, 리스트 안에 딕셔너리가 들어갈 수 있다. 타고 들어가는 개념

딕셔너리(객체)

<script>
	let a_dict{'name':'bob',age:27}	/*딕셔너리 선언*/
	a_dict['height'] = 180			/*딕셔너리 추가*/
    a_dict['name']					/*키값 name에 맞는 bob이 나옴*/
</script>

딕셔너리는 키 값이 중요하며 키는 값이다. 라고 생각하면 편하다.

딕셔너리 역시 리스트와 마찬가지로 딕셔너리 리스트가 들어갈 수 있으며 함수도 들어갈 수 있다.

영상을 보던 중 이해를 도우신다고 하신 사람의 언어가 프로그래밍 언어에 반영된다고 생각하면 편하다는 말씀이 확 와닿았다.

alert는 알림창을 띄워주는 건데 개발 단계에서 확인할 때 계속 뜨면 번거롭기 때문에 console.log()를 이용하면 편하다.

조건문
-굉장히 직관적이라 보기가 쉽다.
-if, else if, AND 조건문, OR 조건문

AND 조건문은 모든 조건을 다 만족할 때 적요이 되고
OR 조건문은 한가지만 만족해도 적용이 된다.

반복문

<script>
	let a_list=['사과','배','감','딸기']
    for (let i = 0; i < a_list.length; i++){	
    /*i가 0부터 1씩 커지며 a_list.length번만큼 내용물을 반복실행한다.*/
    	console.log(a_list[i]);/*콘솔 창에 a_list[i]의 값을 찍어줌*/
    }
</script>

반복문 안에서 특정 조건을 뽑아내려면 조건문을 사용하면 된다.

for는 리스트와 함께 많이 쓰인다.

조건문과 반복문이 프로그래밍의 존재 이유라 하셨는데 아직 어설프게 알지만 맞는 말인 거 같다.

JQuery : 자바스크립트 라이브러리
-전문 개발자들이 html을 조작할 수 있게 미리 짜놓은 코드를 가져와 쓰기 때문에 그 전에 '임포트'를 해주어야 하지만 부트스트랩을 사용하는 경우에는 안에 이미 추가가 되어 있어 따로 추가할 필요는 없다.

JavaScript로는 길고 복잡하게 써야하는 것을 JQuery로 보다 직관적으로 쓸 수 있다.

script는 값을 가져오려면 지칭할 수 있어야 하기 때문에 id를 사용한다.

$('#url'),value('입력을 하고 싶다')
:id가 url인 태그에게 value 값을 넣어준다.

반대로 JQuery를 적용하기 위해 value를 가져오고 싶을 때도 $('#url).val()를 사용한다.

,hide() 숨기기
.Show() 보여주기

로 버튼을 클릭하여 특정 창을 보여주거나 취소 버튼으로 눈에 보이지 않게 하는 등에 사용된다.

<script>
	let temp_html=`` /*백틱을 사용한것 이 안에 <button>나는 버튼이다</button>이 들어가 있다면 현재는 문자열 상태이다.*/
    $('#wrap')_append(temp_html);	/*temp_html 안의 문자열을 html화 해준다.*/
</script>

창을 숨기고 보여주기를 적용할 때 처음부터 보이지 않게 해주려면 style 태그에서 숨기려는 아이의 class를 찾아 display: none;을 해주면 된다.

그 때 그 때 바꿔줘야하는 값은 주의하자.

이 후는 앱 개발 강의에서 들은 내용을 정리한다. 다행히 오늘은 배우는 분야갸 겹쳐서 머리 아프지 않지만 내일부터 앱 개발은 하루 한 강만 들어야할 것 같다...

앱 개발을 할 때는 함축적인 함수들을 많이 사용하는게 좋으며 최신 방식들이 몇 가지 있어 기존 방식과 최신 방식을 같이 알아두어야 자료를 찾을 때 헷갈리지 않을 거 같으며 사용 버릇은 최신 방식으로 들이는게 좋을 것 같다.

최신 함수 선언 방식(화살표 함수)

<script>
	let a= () => { };
</script>

비구조 할당 - 딕셔너리 키와 값을 빠르게 꺼내기

기존 방식

<script>
	dic['키'];
    
    let owner = blog.owner;
    let getPost = blog.getPost();
</script>

비구조 방식

<script>
	let {owner, getPost()} = blog;
    /*blog 딕셔너리에서 이름이 같은 키의 값을 선언과 동시에 할당*/
</script>

좀 더 효율적으로 개발하기 위한 지식들

리터럴-자바스크립트 안에서 줄 바꿈을 자유롭게!
-문자열과 줄바꿈을 조금 더 간결하게 쓸 수 있다.
-키보드 옆의 백틱()을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있으며 줄바꿈도 자유롭게 사용 가능 -변수는 백틱()안에 $(변수명)으로 추가 가능

객체 리터럴-딕셔너리를 짧게 만들어보기
-모든 복잡한 데이터는 리스트와 딕셔너리 혼합구조로 존재, 때문에 딕셔너리를 효울적으로 잘 다룰 줄 아는 사람이 데이터 정리에 유리하고 앱 개발에 잘 적응한다.

기존 방식

<script>
	let name = "스파르타";
    let job = "developer";
    
    let user={name: name, job: job}
    
    console.log(user); /*{name: "스파르타", job: "deverloper"}*/
</script>

최신 방식

<script>
	let name = "스파르타";
    let job = "developer";
    
    /*키와 벨류 네임이 같은 경우 적용 가능*/
    let user={name, job}
    
    console.log(user); /*{name: "스파르타", job: "deverloper"}*/
</script>

코드를 간결하게 쓸수록 길이가 줄고 속도가 개선될 수 있기 때문에 버릇을 들여놓자.

자바스크립트의 최신 문법을 알고 싶으면 ES6이나 ES7을 검색해 보면 된다고 하신다. 언제 한 번 둘러보자.

map
-앱 개발에서 자주 쓰이는 반복문의 또 다른 방식
숙제로 내주신 거 풀다가 집어던질 뻔 했다. 코드를 잘못 봐서;;

기존의 for문은 리스트의 길이를 알아야 했지만 map은 리스트의 길이 값을 몰라도 되며, for와는 반대로 리스트 안에서 몇 번째에 있는 값인지 마지막까지 알아서 돌린 후 알려준다.

예시)

<script>
	/*축약형*/
	let number=[1, 2, 3, 4, 5, 6]
    
    number.map((value, i) =>{
    	console.log(value, i);
    });
    /*기존 방식*/
    number.map(function(value, i)){
    	console.log(value, i);
    })
</script>

숙제1. 배열에서 특정 원소 개수 구하기 -> map 함수 사용하기
-다음에서 '딸기'는 몇 개일까?

<script>
	let fruit_list=['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기'];
	let count = 0;
    for(let i = 0; i < fruit_list.length; i++){
    	let fruit = fruit_list[i];
        if(fruit=='딸기'){
        	count+=1;
        }
    }
    console.log(count);
    
    /*위를 for문을 map으로 바꾸어라.*/
    
	fruit_list.map((value, i) => {
   		if(value=='딸기'){
        	count+=1;
   		}
	});
	console.log(count)
</script>

map을 강의로만 대충 들었을 때는 value, i의 사이를 콤마가 아닌 닷으로 봐서 계속 오류가 나는 바람에 구글링을 했다. 꽤 오래 잡고 있었는데 조금 허무했달까.

숙제2. filter 함수로 '포도'만 들어있는 podo_list 구현해보기

filter의 정의
-해석 그래도 걸러주는 역할
-특정 조건에서 true인 값을 다 걸러냄

<script>
	let fruit_list=['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기'];
    
    let podo_list=fruit_list.filter(value=>value=='포도');
		podo_list.map((value,i)=>{
    	console.log(value,i);	/*pode_list 안의 모든 값과 순서가 출력된다.*/
	});
</script>

이건 그나마 찾으니까 곧장 나와서 쉬웠다.

오늘 저녁 먹기 전 잠시 모였을 때 다른 조처럼 거창하게는 못해도 우리도 프로젝트를 간단하게라도 해보자고 제안을 했다. 새로 오신 분은 아무 말씀도 없었지만 지난 3일간 함께 공부해온 두 분이 괜찮은 생각이라고 하셔서 내일 12시에 모여서 회의를 해보기로 했다.

아직 DB 쪽을 배우려면 한참 남아서 그냥 간단하게 우리가 들고 있는 정보를 보여주는 자기소개 페이지 정도로 만들어지지 않을까? 강의를 보면서 배운 걸 조금 응용해서 써봐야겠다 생각한 방식으로 만들어봐야겠다.