해리의 데브로그

2019년 7월 1주차 TIL

07 Jul 2019 | TIL

2019-07-01

  • 자바스크립트를 이용하여 Django 인스타 프로젝트를 통해 만든 좋아요 기능을 동적으로 재구현해보았다.

  • JS 코드를 실제 Django 프로젝트에 적용한 첫번째 실습으로, 어떠한 접근방식으로 코드를 짜야하는지에 대한 전반적인 흐름을 알 수 있었음.

  • queryselector를 이용하여 엘레멘트에 접근한 후, 이벤트를 생성하여 axios를 통해 Django url 으로 요청을 보내 응답을 받는 방식으로 진행되었음.

  • 이때 JS에서 응답을 받을 수있도록 views.py의 return 값을 JsonResponse을 이용하여 Json의 형태로 반환해줌.

2019-07-02

  • 어제에 이어, Django 내에서 JS를 통하여 댓글을 생성하고 보여주는 기능으 동적으로 구현해보았음.

  • 전반적인 매커니즘은 어제와 유사했으나, 댓글 생성시 생기는 데이터를 어떻게 보내는지에 대한 코드가 추가되었음. 이때,FormData 라는 것을 이용하여 Form 필드와 그 값을 나타내는 일련의 key/value 쌍을 생성하여 요청을 보냈음.

  • 또한 views.py의 함수 반환값인 JsonResponse를 오브젝트의형태로 저장하는데, 필요한 정보((댓글 내용, id, 댓글 생성자 등)를 key/value의 형태로 저장하여 넘겨서 댓글 리스트를 동적으로 보낼 때 활용하였음.

  • 응답으로 받은 정보를 통해 DOM 내 id값을 고유하게 부여하여, 어떠한 포스트에 대한 댓글인지를 확인하고, queryselector를 이용하여 댓글을 동적으로 리스트에 나타냄.

2019-07-03

  • Vue.js에 대한 본격적인 복습 & 공부를 시작하였음.
  • Vue.js는 템플릿 구문을 통해 선언적으로 DOM에 데이터를 렌더링하는 것부터 시작하였음. el , data , methods 등의 options들이 존재.
  • 반복문과 조건문의 방식은 다른 언어와 유사했는데, 딕셔너리를 반복문으로 돌리는 경우가 조금 특이했다.
    • 딕셔너리에서 반복문을 돌릴경우, 기본적으로 value값이 출력됨. key값을 출력하기 위해서는 Object.keys() 사용

  • Vue.js는 Django의 MVC pattern과 유사한 MVVM이라는 디자인 패턴을 갖고 있음. M(model)과 V(View)는 동일한데, Vue.js가 View와 Model 사이를 데이터바인딩을 통해 controller의 역할을 한다고 하여 VM이라는 명칭을 사용하게 됨.

  • inflearn를 통해 추천 받은 Vue.js 강의가 몇개 있는데, 그 중 하나를 선정해서 추가적으로 공부를 해봐야겠다.

2019-07-04

  • Vue.js를 통해 To-do 앱을 구현(이벤트 리스너 구현)하고, Cat API를 통해 요청을 보내고 응답을 받는 시간을 가져보았음.

  • v-on: 설정된 DOM 이벤트를 통해 JS 코드를 실행시키게 이벤트 리스너를 구현할 수 있음.

  • v-bind : HTML 어트리뷰트(속성)에는 인터폴레이션 값을 직접 넣지 못하는데 이때 사용하는 것이 v-bind 임.

  • 특히, JS 내 this라는 개념에 대해서 조금 깊게 공부를 해보았음. 일반적인 언어에서의 this는 인스턴스의 호출한 대상의 현재 객체를 뜻하는 것인데 JS는 조금 다르게 this가 동작하였음. (특히 함수가 어떻게 호출 되었는지에 따라 동적으로 동작) 1) 기본적인 함수 선언 후 this 출력 시, 전역 객체(window)가 호출됨. 2) Vue 인스턴스내 메서드를 선언하고 내부에서 this를 출력할 경우, 오브젝트의 메서드이므로 오브젝트가 호출됨. 3) arrow function에서의 this는 호출과 위치와 상관없이 상위 스코프 this를 가리킴.

  • methods에서 함수를 정의할 때 함수 내부에서 callback 함수로 또다른 함수를 호출하는 경우가 있는데 이때 this를 호출하면 전역 객체(window)가 호출되는 것에 의구심이 들었다. 각종 정보를 찾아보고 최종적으로 스스로 정리한 내용으로는, this는 항상 상위 객체를 호출하는 것으로 결정을 지었다.

  • 기본적으로 함수 선언할 때 this를 출력할 경우, 함수의 상위 객체는 당연히 전역 객체인 window이며, Vue 인스턴스 메서드에서 this를 호출할 때는 당연히 상위 객체는 Vue 인스턴스이므로 모든 로직이 맞아 떨어진다. 그런데 함수 내부에서 callback 함수를 통해 또다른 함수를 호출하고 그 내부에서 this를 호출하는 경우에는 앞의 함수와 바인딩이 되지 않아 상위 객체를 전역 객체(window)로 인식된다. (함수 내 함수를 호출하는 경우는 앞의 함수와의 연결고리 가 끊어진다고 보면 될듯하다), 따라서 함수 내부에서 상위 스코프 this를 가키리기 이위해 arrow function을 사용한다.

2019-07-05

  • 어제에 이어 Vue.js를 통해 To-do 앱을 확장해보고, Vue의 속성들을 살펴보았다.
  • v-model 은 DOM에서 입력한 값과 Vue 인스턴스 내 data의 값을 동기화 할 때 사용하는 디렉티브이다. (양방향 데이터 바인딩 생성)
  • Vue에는 methods와 유사한 역할을 하는 computed가 있는데 그 둘의 차이는 캐싱의 유무이다.
  • 그 외 어떠한 값이 변경되면 함수가 실행될 때 사용하는 watch도 있음.
  • v-text vs v-html 와 v-if vs v-show의 차이점을 살펴 보았음.
  • inflearn에서 김정환 님의 실습 UI 개발로 배워보는 순수 javascript 와 VueJs 개발 이라는 강의를 구매하였다. 실습 위주로 진행되는데 무엇보다도 동일한 기능을 JS 와 Vue.js 둘다 구현하여 어떠한 차이점이 있는지를 알 수 있다는 것이, 매우 흥미롭게 들렸다.

2019-07-07

  • 주말 동안 꾸준히 inflearn에서 김정환 님의 실습 UI 개발로 배워보는 순수 javascript 와 VueJs 개발 강의를 듣고 있다.
  • 지금까지 자바스크립트를 배운 방식은 HTML 파일을 만들어 script 태그 내에서 코드를 작성하거나 별도의 js 파일을 만들어 link로 연결하는 간단한 방식으로 배웠는데, JS를 MVC 패턴에 따라 용도를 분류하고, 코드를 작성하는 방식이 매우 생소했다.
  • view 파일을 만들어 복사하거나 다른 js에서 사용을 위해 export 시키는 방법 등, 알지 못했던 새로운 방식을 많이 알 수 있었다. 또한 기본적인 작동방법만 알았던 JS의 배열 조작 메서드 중 하나인 reduce 를 이런방식으로 활용할 수 있다는 점이 매우 놀라웠다.
KeywordView.getKeywordsHtml = function (data) {
    return data.reduce((html, item, index) => {
        html += `<li data-keyword="${item.keyword}">
        <span class="number">${index + 1} </span>
        ${item.keyword}
        </li>` 
        return html        
    }, '<ul class="list">') + '</ul>'
}

  • 무엇보다도 총 4시간 짜리 강의를 약 13시간동안 들었음에도 불구하고, 이제 전체강의의 반밖에 듣지 못하였다. (JS로 기능 구현까지 강의 완료). 강의를 들으면서 코드를 따라 작성하고, Markdown을 꼼꼼히 작성하는 방식으로 공부를 하고 있는데, 이럴 때면 공부하는 방식에 대해 많은 회의감이 드는건 어쩔수 없는 것 같다. 강의만을 몇차례 완독하는 방식이 오히려 공부 체득에는 더 효율적일 것이라고 생각은 들지만, 마크다운을 통해 나만의 언어로 내용을 정리하는게 나중에 복습을 할 때나, 관련 내용을 찾아볼 때 더 낫다고 판단하기에 별 다른 방도 없이 열심히 강의를 들을 수 밖에 없을 것 같다.

  • 다음주도 화이팅이다!

Related Posts

Comments