# 자바스크립트 ## 변수와 값. 프로그래밍 언어는 서양사람들이 만들었다. 그래서 그들의 문화, 철학, 사상이 녹아있다. 논리, 합리주의를 중요시함. 그런 측면으로 프로그래밍 언어도 구성되어 있다. 기저에 절대불변의 원칙을 세워두고 (공리) (예. 1+1=2) 이것들을 기반으로 하나씩 차곡차곡 쌓아간다. 자바스크립트에서 '값'이라고 정의한 녀석들은 변수에 넣을수 있다. var x = 10; let y = 10; const z = 10; 자바스크립트에서는 함수도 값이라고 정의함. function foo() { } let y = foo; 그래서 함수를 변수에 대입 가능하다. 자바스크립트는 모든 함수가 값을 반환한다고 정의함. return 으로 반환하거나, return이 없으면 undefined 반환. new..
* 교육일정 : 2020년 9월 1일(화)부터 4주간 매주 화,목 19:30~22:00 * 강사 : 우아한형제들 김민태님 (웹프론트엔드개발그룹장) * 장소 : 온라인 (zoom 이용) 1회차 수업을 들은 후 쓰는 합격 후기. 우아한 테크코스나 테크러닝을 한번 꼭 해보고 싶었는데 이번에 운좋게 합격을 했다. 어찌보면 코로나 덕분(?)이라고 할 수 있다... 작년에 2기때는 오프라인으로 100명정도 했었다는데 이번엔 코로나 때문에 애초에 5월이었던 일정을 한번 미루고 간격을 띄워 앉힐 생각으로 30명 정도만 선발하려고 했다는데... 8.15 집회 이후 갑자기 심해지는 바람에 더이상 오프라인은 불가하다고 판단하여 온라인 교육으로 전환하고 약 400명 정도 뽑았다고 한다. 지원자가 1200명이었다고 하니 그래도..
앞서 SEO 작업을 위해 prerender-spa-plugin을 적용한 포스팅 1탄을 작성하였다. 아래 링크 참고 https://soobakba.tistory.com/35 [Vue Cli] Vue 앱에 prerender spa plugin 적용하기 회사에서 클라이언트사의 스페셜 페이지를 우리 플랫폼으로 내재화 하는 작업을 맡아 진행하게 되었다. 스페셜 페이지의 가장 중요한 부분 중 하나는 SNS로 링크 공유시 적절한 이미지와 내용이 soobakba.tistory.com 이번에는 실제 prerender를 적용한 파일들을 배포한 뒤 발생했던 이슈들과 그 해결과정을 정리해보고자 한다. 동적 라우트 적용 우리 서비스는 리얼 서버에 배포하기 전까지 dev, stage 두 단계의 phase를 두고 큐에이를 진행한다..
회사에서 클라이언트사의 스페셜 페이지를 우리 플랫폼으로 내재화 하는 작업을 맡아 진행하게 되었다. 스페셜 페이지의 가장 중요한 부분 중 하나는 SNS로 링크 공유시 적절한 이미지와 내용이 뜨는 것인데, 우리 플랫폼은 SPA로 되어있어서 SEO도 제대로 되어있지 않고 meta og 태그도 전혀 없는 상태. 기존 스페셜 페이지는 멀티 페이지로 구성하여 각 페이지마다 index.html 파일을 따로 두어 해당 기능을 처리하였는데 내재화를 하게 되면서 앞으로 발생하는 모든 스페셜 페이지를 시스템화 해야했기 때문에 링크 공유 기능과 SEO도 함께 잡을 수 있는 prerender 플러그인을 적용해보기로 하였다. 팀장님이 예제 링크와 사용법을 포스팅한 여러 블로그들을 나에게 보내주셨고 생각보다 간편해보여서 나도 금방..
얼마 전 회사 서비스에서 드디어 URL에 붙어있던 hash를 제거하게 되었다. 우리 서비스는 SPA(싱글 페이지 어플리케이션) 서비스라서 hash가 항상 붙어있었는데 이유는 Vue Router에서 기본 모드가 hash mode 이기 때문. 히스토리 모드로 변경해주면 hash가 없는 깔끔한 URL을 가질 수 있다. 공식 문서에 따르면 mode: 'history' 이 속성 하나만 추가해주면 되는 간단한 일이지만 우리는 기존에 레거시 코드도 많았고 이미 외부에 알려진 hash가 있는 URL에 대응하는 등의 작업도 있었기에 작업자 분이 2주에 걸쳐 작업해 주셨다. 작업자 분이 올려주신 PR을 보면서 내가 가장 의문이 갔었던 부분이 vue.config.js 파일에 multi page 설정 부분이었는데, 이걸 이해..
파일 다운로드 기능을 구현하면서 약간의 삽질을 하면서 애를 먹었는데 덕분에 새로운 사실들을 알게 되었다. 서버에서 ByteArray 값을 내려주는 경우 파일로 만들어 내려받기 서버에서 response header에 보내주는 Content-Disposition 정보 사용하기 검색으로 여러가지 자료를 봤었는데 가장 도움이 되었던 건 아래 링크! http://1004lucifer.blogspot.com/2019/04/axios-file-download-with-vuejs.html [Axios] File Download 방법 (with Vue.js) 서버에서 ByteArray 형식으로 파일을 내려주는 상황에서 아래와 같은 로직으로 파일 다운로드 처리를 했다. 서버에서 헤더의 Content-Disposition ..
얼마전 본 면접에서 this에 대한 질문을 받았었는데 전역에 선언된 화살표 함수 내에서 this가 undefined 값을 가진다고 완전히 잘못된 대답을 하고는 집에 돌아와서 심히 자괴감을 느낀터라 이번 기회에 정확하게 정리를 해야겠다고 결심했다. 이 글은 [코어 자바스크립트 (정재남, 위키북스)] 책을 참고하여 제 생각과 함께 정리한 글입니다. https://wikibook.co.kr/corejs/ 코어 자바스크립트: 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다! 최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아닙니다. ECMAScript2015 시대인 현재에 ..
얼마전 Chart.js로 그래프 작업을 하면서 겪었던 황당한 버그였는데 혼자 몇 분간 삽질하다가 구글에 검색해보니 생각보다 간단하고 명확한 이유여서 빠르게 해결할 수 있었다. 한 캔버스에서 일간, 주간, 월간 버튼을 클릭할 때 마다 다르게 보여지게 구현해야해서 하나의 변수에 그래프 데이터를 저장해두고 사용자 이벤트가 발생할 때 마다 해당 변수의 datasets 프로퍼티에 그래프 데이터를 할당해주었는데 그래프의 특정 포인트에 마우스 오버 할 때 마다 이전 데이터가 화면에 나타나는 것이다. (예를 들어, 월간 클릭된 상태인데 처음에 로드한 일간 데이터 바뀜) 게다가 마우스를 움직이면 또 새로운 그래프로 나왔다가 왔다갔다 함... 처음엔 너무 황당한 버그라서 어디서부터 손을 대야할지도 몰랐는데, 검색하니 바로..
- Total
- Today
- Yesterday
- frontend
- nodejs
- vue-cli
- vue-router
- Component
- chartjs
- vue
- til
- 우아한테크러닝
- asyncawait
- Vuex
- Docker
- ES6
- typeScript
- promise
- REACT
- 리액트훅
- prerender-spa-plugin
- ReactNative
- JavaScript
- vue-meta
- js
- jsconf
- 상태관리
- Python
- axios
- EventLoop
- 인프런
- vuejs
- 프론트엔드
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |