TIL

190319-0322_TIL(local storage, git flow, git fork, api)

3월 22일 (금)

  • 쇼핑몰 상품 상세 페이지 copy 과제를 했다. 과제를 진행하던 중 div 태그를 display:inline-block으 사용하여 서로 같은 라인에 배치를 하였는데 이상하게도 윗 공간에 아무 요소도 없는데 오른쪽 div가 맨 위에 붙지 않고 제멋대로 붙었다. 고민을 거듭해도 답을 알 수가 없어 클래스 매니저님에게 물었더니 inline-block으로 묶으면 윗줄을 기준으로 붙는 것이 아니라 base-line을 기준으로 붙기 때문에 div의 height가 서로 다를 시 에는 윗줄의 붙지 않는 다고 하셨다. 해결책인 의의로 간단하였다. vertical-align 속성을 사용하여 요소를 위(top), 중간(middle), 아래(bottom)에 배치할 수 있었다.
  • 자바스크립트 변수의 범위(scope)와 호이스팅(Hoisting)`에 대해서 배웠다. 수업시간에 짧게 배운 내용이 잘 이해가 가지 않아서 자료를 검색하던 중 잘 정리된 블로그를 발견하였다.
  • 변수의 범위와 호이스팅
  • 변수는 지역 범위(local scope)와 전역 범위(global scope) 둘 중 하나를 가진다.
  • 대부분의 프로그래밍언어가 블럭 수준의 범위를 가지고 있는 것과 달리 자바스크립트에서는 지역 변수가 함수 수준8의 범위를 가진다. 함수 내에 정의된 변수는 지역 범위를 가지며, 해당 함수와 내부 함수에서만 접근이 가능하다.
  • if문과 같은 블럭{} 수준에서 변수 선언 시 지역 변수가 아닌 전역 변수임을 유의해야 한다.
  • 함수 안에서 지역 변수를 선언할 때는 var 키워드를 사용한다.
  • 지역 변수는 함수 내에서 전역 변수보다 높은 우선 순위를 가진다.
  • 함수의 외부에서 선언된 모든 변수는 전역 범위를 가진다.
  • 전역 변수는 var 키워드를 사용해도 되고 사용하지 않아도 된다.
  • 가급적 전역 범위에 변수를 생성하는 것을 피해야 한다.
  • 호이스트란, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미
  • 즉, 변수가 함수 내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경
  • 호이스트 되었을 때, 함수 선언은 변수 선언을 덮어 쓴다. 하지만, 변수에 값이 할당된 경우 반대로 변수가 함수 선언을 덮어 쓴다.

3월 21일 (목)

  • 오늘은 naver map api를 사용하여 기본적으로 지도를 화면에 표시하고 마커를 표시하고 정보창을 표시해보았다. 네이버 api를 사용하기 위해서는 먼저ncloud 에서 회원가입을 진행하고 이용신청을 하면된다. 그리고 실제로 사용을 위해서는 navermaps에서 Tutorials를 살펴보면 된다. 오늘 배운 것중 가장 신기했던 부분은 이전에 사용했던 다음 주소 api 와 네이버 지도 api를 연결해서 사용했던 부분이다. 다음 주소 api에서 검색한 주소 값을 받아서 네이버 지도 api에서 위도,경도 값으로 변환하여 그 위치에 마커를 찍을 수 있었다. 이런 기능은 geocoder 서브 모듈을 활용해야 한다.

3월 20일 (수)

  • 오늘은 git 수업 날이었다. git flow와 git fork를 학습하였다. git flow는 git의 branch 기능을 좀 더 원활하고 쉽게 사용할 수 있게 만들어 버전관리를 용이하게 하는 확장 기능이고 git fork는 git을 사용하는 가장 주된 이유 중 하나인 협업을 할 수 있게 해주는 기능이다. 처음 접해보는 기능들이라 조금은 어려웠지만 그래도 팀원들과 함께 git fork를 테스트 하는 것까지 별다른 문제없이 성공하였다. git을 활용할 때는 팀원들 간의 의사소통이 정말 중요하다고 느꼈다.

3월 19일 (화)

  • 오늘은 local_storage에 대해 배웠다. server 없이도 내 컴퓨터를 활용하여 웹에 있는 값을 저장할 수 있다니…! 브라우저를 닫고 열어도 다시 그 값이 들어있었다. 매우 신기했다. 하지만 내용은 어려웠다. 한달 동안의 수업 컨셉이 빠르게 한번 익혀보자는 것이기 때문인지 객체나 JSON의 대한 설명이 거의 없었다. 잘 모를 때는 역시 인터넷 검색으로! 아직도 잘 이해되지 않는 부분들이 많지만 열심히 배우고 또 배우면 금세 이해할 수 있을 것이다!!

  • localstorage

  • JSON 간단

  • JSON 자세히

  • 객체

Share