오늘 한 일 프론트엔드 체크리스트 head 부분 한 번 훑듯이 읽음. 생활코딩 Python 강의 수강 시작. python2와 3의 차이점을 대략 알게되었고, 문자열 formatting과 CGI를 이용하여 웹페이지를 띄우는 방법을 배움. 음악 관련 api를 가지고 [노래 듣고 빨리맞추기] 게임을 만들어보려고 찾아보았으나, 멜론은 작년 3월을 마지막으로 오픈 API를 중단했고 네이버 뮤직도 공개한 api가 없다는 사실을 알게됨. 그러다가 우연히 파이썬으로 멜론 노래 크롤링 하는 영상을 보게됨. 크롤링은 언젠간 도전해봐야지 하면서도 고난도의 작업이라 생각해 항상 미뤄왔었는데 이 영상을 보고 도전해볼 마음이 생김.
오늘 한 일 인프런 [Vue.js 완벽 가이드] 완강. 자바스크립트 노랭이 책 9장 [클라이언트 탐지] 요약본 1회독. 공부 내용 컴포넌트 디자인 패턴 컴포넌트 디자인 패턴은 총 4가지가 있다. common, slot, controlled, renderless common - 일반적인 컴포넌트 등록과 컴포넌트 데이터 통신 방식 slot - 슬롯 속성을 이용하여 컴포넌트의 독립성과 확장성을 키운다. 예를 들어 부모 컴포넌트에서 마크업 확장 가능. controlled - 컨트롤 태그(체크박스나 라디오버튼 등)를 컴포넌트화할 때 유용(?) 결합력을 높이는 방법인데 사실 이부분은 아직 잘 모르겠다... renderless - render() 함수를 이용하여 템플릿 없이 스크립트 태그로만 렌더링하는 방식이다. 데..
오늘 한 일 인프런 [Vue.js 완벽 가이드] 진도율 77% 돌파 라우터 네비게이션 가드 학습 및 실습. async & await 학습 및 실습. 공부 내용 라우터 네비게이션 가드는 페이지를 이동하기 전에 라우터 단에서 한 번 막아주어 무언가 작업할 수 있는 기능이다. 컴포넌트 라이프사이클 훅(created)에서 데이터를 받아오면 페이지 이동된 후에도 이전 데이터가 보여지는데 네비게이션 가드로 이것을 해결할 수 있다. VueRouter의 해당 path에 beforeEnter 함수를 추가한다. 해당 함수는 (to, from, next) 세가지 인자를 받는다. to: 이동할 페이지, from: 현재 페이지, next(): (모든 할 일을 마친 뒤) 다음 페이지로 이동. (실행 안시키면 이동 안함) asyn..
오늘 한 일 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 노랭이 책 8장 [브라우저 객체 모델] 완독. 인프런 [Vue.js 완벽 가이드] 강의 이벤트 버스와 하이 오더 컴포넌트에 대해 공부. 공부 내용 BOM 브라우저 객체 모델(BOM)은 브라우저 제조사에서 제공하는 브라우저 관련 기능을 모아놓은 객체 집합이다. window객체는 ECMAScript의 전역(Global) 객체로, 전역에 정의하는 모든 변수 및 함수는 window객체의 프로퍼티가 된다. ECMAScript에서 제공하는 네이티브 생성자 및 함수는 처음부터 window객체에 존재한다. window.open()을 통해 새로운 창이나 탭을 열면 opener프로퍼티를 이용해 새 창을 호출한 페이지를 참조 할 수 있다. location 객체를 ..
오늘 한 일 드디어 인프런 [Vue.js 완벽가이드] 진도율 50% 돌파! 공부 내용 각 뷰의 공통된 부분을 찾아서 하나의 컴포넌트를 만든다. 컴포넌트의 비즈니스 로직은 왠만하면 컴포넌트 파일에서 처리한다. 컴포넌트 데이터는 부모 뷰에서 받아서 props로 뿌려주는 방식이 있고, vuex store를 이용해서 컴포넌트에서 바로 state로 받아오는 방식이 있다. props로 뿌려주는 방식은 과정이 한 단계 추가되기때문에, 컴포넌트에서 바로 state로 받아오는 것이 vuex사용에 최적화된 방법이다. 그러나 props로 뿌려주는 방식은 부모 컴포넌트에서 어떤 데이터들이 바인딩 되는지 명시적으로 알 수 있기 때문에 어느 방법이 더 낫다고는 말하기 어렵다. 컴포넌트에서 데이터를 분기처리해주는 방법은 v-if/..
오늘 한 일 Vue.js 완벽 가이드 강의 2개 수강. 공부 내용 동적 라우트 적용하는 방법을 배웠다. { path: '/user/:id', component: UserView } routes>index.js 파일에 path를 "/user/:id" 이런식으로 정의해주면 /user/뒤에 오는 값이 파라미터로 인식되어서 $route.params.id로 데이터를 가져올 수 있다. 해당 라우트에 연결하기 위해서는 컴포넌트에 태그를 사용한다. {{ item.user }} 위와 같이 router-link 태그의 to 속성에 해당 path를 연결하여 해당 유저의 아이디 값을 동적으로 매핑해준다. vuex를 사용하면서 약간 애매한 부분이 생겼다. 컴포넌트 템플릿에 데이터를 바인딩할 때, this.$store.state..
오늘 한 일 Vue.js 완벽가이드 인프런 강좌 [중간정리 및 스타일링]까지 30% 수강 및 실습. 자바스크립트 노랭이 책 [7장 함수표현식] 완독. 공부 내용 axios / Promise axios는 Promise 객체를 반환하므로 .then과 .catch를 이용하여 비동기 처리를 할 수 있다. Promise 객체는 ES6에서 정의된 것으로, 콜백함수지옥을 해결해 줄 수 있다. new Promise로 객체 인스턴스를 만드는 순간 Promise는 대기 상태에 있게 된다. 그리고 http호출을 통해 값을 받아오게 되면 response를 가진 이행 상태가 된다. 그러나 값을 받아오지 못하면 실패 상태가 된다. 이것을 코드로 표현하면 다음과 같다. new Promise(function(resolve, reje..
오늘 한 일 파이썬 문법 공부 (반복문, 조건문, 함수) - 파이썬은 불필요한 중괄호, 대괄호 등을 거의 생략하는 편인것 같다. 그래서 더 헷갈림... 자바스크립트 노랭이책 [7장 함수 표현식] 절반 정독. 프로젝트 단위 실습을 못해서 (github에) commit을 못했다. 앞으로 1일 1커밋 실천해서 풀밭을 만들어야 겠다. 공부 내용 파이썬 반복문은 while 또는 for문. for문은 for i in (배열이름) 또는 for i in range(2, 7) (range() 함수는 2부터 6까지 배열 생성해줌) 파이썬 조건문은 if a > b: elif a < b: else 이런 식으로 괄호없이 조건문 뒤에 콜론(:)을 넣고 그 뒤에 중괄호도 생략하는 듯? 파이썬 함수 정의는 def exampleFun..
- Total
- Today
- Yesterday
- 인프런
- frontend
- Python
- axios
- vue-cli
- js
- typeScript
- ES6
- promise
- Component
- nodejs
- vue-meta
- ReactNative
- REACT
- EventLoop
- til
- Vuex
- vue
- asyncawait
- vuejs
- jsconf
- Docker
- vue-router
- chartjs
- 우아한테크러닝
- prerender-spa-plugin
- JavaScript
- 상태관리
- 리액트훅
- 프론트엔드
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |