티스토리

개발로그

검색하기

블로그 홈

개발로그

soobakba.tistory.com/m

개발을 하자. 글도 쓰자.

구독자: 3

방명록 방문하기

주요 글 목록

[번역] 프론트엔드 개발자가 알아야 할 숫자들 (Latency Numbers) 원본: https://vercel.com/blog/latency-numbers-every-web-developer-should-know 웹 앱에서 웹 페이지 로드 시간과 사용자 액션에 대한 반응성은 사용자 만족도의 주요 요인이며, 두 가지 모두 네트워크 대기 시간에 의해 지배되는 경우가 많습니다.지연 시간 자체는 사용자가 인터넷에 연결(와이파이, LTE, 5G)하고, 사용자가 연결하고 있는 서버의 거리와 그 사이의 네트워크 품질의 함수입니다.지연 시간 숫자는 그 자체로 낮게 보일 수 있지만 빠르게 결합됩니다. 예를 들어, 300ms 링크의 3 depth 네트워크 폭포는 총 지연 시간 900ms로 이어집니다. 리액트 서버 컴포넌트와 같은 기술은 네트워크 폭포를 동일한 요청 패턴이 100배 더 빠를 수 있는.. 공감수 1 댓글수 1 2024. 6. 6.
프론트엔드 E2E 테스트 "잘" 적용하기 (컨벤션) 최근 팀 내에서 e2e 테스트를 도입하기 위해 초기 컨벤션을 적용하는 작업을 진행하였다. 대부분 테스트 도구에서 제시하는 문법이나 구조를 따르지만 이 외에 팀원들과 논의하여 적용한 부분들도 있어서 소개해보고자 한다. Cypress vs Playwright 처음에는 기존에 cypress로 작성된 e2e 코드가 있었기 때문에 이것을 정상화시키는 동시에 커버리지를 올린다는 생각으로 그대로 진행했었다. 그러나 생각보다 Cypress 실행속도가 느렸고, 다른 팀에서도 Playwright를 대부분 도입했다고 하여 재검토 요청을 받아 Playwright를 처음으로 사용해보았다. 솔직히 여기저기서 많이 언급하는 실행속도의 경우는 개인적으로 엄청 큰 차이는 못느꼈다. 그리고 여러 브라우저 지원의 경우도 우리는 기존에도 .. 공감수 1 댓글수 0 2024. 1. 11.
[TIL] React Native 폰트 추가 이후 빌드 실패 삽질 기록 팀원 중 한명이 RN 프로젝트에 새로운 폰트를 추가했고 나는 그걸 pull 받았다. 처음엔 빌드는 잘 됐는데 unrecognized font family 에러가 떴다. 대충 이렇게 생긴 에러다. 그래서 폰트를 추가했던 그 팀원에게 물어봤더니 이 명령어를 치면 된다고 했다. npx react-native link --verbose 이거 폰트 관련 에러 검색할 때도 나왔던거 같은데 아직 정확히 react-native link가 뭐하는 앤지는 모르겠음... 아무튼 저거 치니까 처음에 다시 리로드 되서 잘 나오나 싶더니 로그인 버튼 누르니까 앱이 죽어버림. 다시 빌드 시도하니까 실패. 그 이후로 pod install, pod update, pod install --repo-update 등등 다해보고 node_m.. 공감수 1 댓글수 0 2022. 4. 21.
써드파티 API 호출을 위한 암호화 삽질기 배경 우리 서비스에 사용되는 sms 발송 업체를 기존 비즈엠(웹에서 발송하는 카카오톡 및 SMS 기능 제공 서비스 업체)에서 ncloud(NAVER에서 운영하는 각종 클라우드 서비스)로 변경하기로 했다. 이를 위해 API 사용법을 알아보고 스웨거(Swagger - API 스펙 확인 및 테스트 가능한 환경)에서 테스트까지 수월하게 마쳤다. 그런데 실제 코드 단에서 테스트를 해보니 계속 401 Unauthorized 에러가 났다. 이유는 헤더에 전송하는 암호화한 데이터가 잘못되었던 것인데, 이를 해결하기 위해 암호화 알고리즘에 대해 많이 찾아보게 되었고 그 과정에서 알게 된 것들과 에러 해결 과정을 정리해 보려고 한다. 암호화 알고리즘? 암호화는 사실 깊게 파면 끝도 없을 주제일 것이다. 큰 분류만 보자면 .. 공감수 1 댓글수 0 2021. 4. 29.
[TIL] AWS 서버 접속 및 에러 해결 정리 토이프로젝트를 진행하면서 AWS로 EC2 인스턴스를 만들어보고 서버를 올려보고 있다. 워낙 많은 자료들이 있어서 찾아보면서 따라하기는 어렵지 않았지만 내가 모르는게 너무 많아서 일일히 찾아봐야 하는게 번거롭긴 했다... 원격 서버 접속 먼저 인스턴스를 만들면서 받은 key로 인스턴스에 접속하려면 터미널을 열어 key가 있는 폴더로 가서 아래와 같이 입력한다. chmod 400 .pem ssh -i ".pem" ubunutu@ 안에는 자신의 파일명과 IP 주소에 맞게 알아서 입력하면 된다. 여기서 chmod란 리눅스 명령어로 change mod 라는 뜻으로 파일의 접근 권한을 변경하는 명령어다. chmod [레퍼런스] [연산자] [변경할 접근권한] [파일] 위와 같이 옵션을 지정할 수 있는데 [레퍼런스] .. 공감수 0 댓글수 1 2021. 1. 25.
[JS] 마이크로태스크(Microtasks)와 async/await Promise 객체가 가진 핸들러들 .then(), .catch(), .finally() 는 모두 비동기적으로 실행된다. console.log('Start!'); Promise.resolve('Promise!').then(res => console.log(res)); console.log('End!'); // 아래와 같이 출력 // Start! // End! // Promise! 위 코드를 보면 Promise를 바로 resolve 해주어도 then이 실행되는 것은 동기 코드보다 나중이다. 왜 그럴까? 마이크로태스크(Microtasks)와 매크로태스크(Macrotasks) 이 때 등장하는 것이 바로 마이크로태스크다. ECMA에선 위와 같은 비동기 처리를 위해 PromiseJobs라는 내부 큐를 명시하는데 .. 공감수 1 댓글수 2 2020. 11. 11.
[JS] 프라미스 API 중 Promise.all 직접 구현해보기 Promise에는 5가지 정적 메서드가 있다. Promise.all Promise.allSettled Promise.race Promise.resolve Promise.reject 이 중 가장 유용하고 많이 쓰이는 것은 Promise.all 일 것이다. 그래서 공부겸 직접 구현해보았다. Promise.all 직접 구현해보기 function all(iterable = []) { if (!iterable || !iterable.length) return Promise.resolve([]); return new Promise((resolve, reject) => { const result = iterable.map(() => ({ state: 'pending', value: undefined })); iter.. 공감수 0 댓글수 0 2020. 11. 4.
클린코드 스터디 후기 참여 동기 우아한 테크러닝에 참여하면서 많은 사람들이 정말 열정적으로 공부하고 있구나를 알게 되었다. 초반에는 사람들 블로그 염탐도 많이 갔었다. 그러다가 몇몇분들이 스터디 모집글을 올리는걸 보고 자극받아서 여기저기 참여하게 되었는데 클린코드 스터디도 그 중 하나다. 사실 이 책은 여기저기서 추천하는 글들을 많이 보았는데 집에 사놓고 안 읽은 책만 수두룩했기 때문에 도전할 엄두가 안났었다. 그런데 마침 이 책을 가지고 스터디를 한다길래 잘됐다 싶어서 참여했다. 참여 과정 책은 회사 도서구매비로 결재를 올렸는데 팀장님이 자기 집에 이 책 두권이나 있다면서 결재올린건 회사에 두고 한 권을 나에게 공짜로 주셨다ㅎㅎ (팀장님도 다 안읽으셨다고...) 나는 사실 스터디 내내 거의 청강 느낌으로 참여했다. 스터디 .. 공감수 3 댓글수 2 2020. 11. 2.
[JS] 프라미스 Promise 알아보기 Promise ES6에서 등장한 Promise 객체는 자바스크립트에서의 비동기 처리를 획기적으로 변화시켜주었다. 기존에 '콜백 지옥'이라 불리던 것을 해결하며 더 명료한 코드를 작성할 수 있도록 해준다. Promise 객체 속성 Promise는 catch, finally, then 등의 메소드를 가지고 있고 state와 result라는 내부 프로퍼티를 가지고 있다. Promise는 3가지 state를 갖는다. pending - 비동기 처리가 아직 완료되지 않은 상태 fulfilled - 비동기 처리가 성공적으로 끝나 resolve가 호출된 상태 rejected - 비동기 처리 중 오류가 발생해 reject가 호출된 상태 위 상태에 따른 result는 아래와 같다. pending 상태 - undefined.. 공감수 2 댓글수 2 2020. 10. 28.
[주간회고] 2020년 10월 4주차 회고 기록 작년 연말에 많은 개발자들이 1년 회고록을 올리는 걸 보고는 그 많은 것들을 기억하고 글로 정리한다는게 대단하다고 생각하면서도 나는 귀찮고 까먹어서 절대 못할거라고 생각했었다. 그런데 이번 블로그 스터디를 하면서 이렇게 짧막하게 주간회고를 기록할 수도 있다는 것을 알게되어서 가벼운 마음으로 작성해보고자 한다. 회사 아레나 참가개편 지겹도록 길었던 아레나 참가개편 작업이 끝을 보이기 시작하면서 이번주는 그래도 조금 널널했다. 끝없는 큐에이 이슈를 처리하면서 지난 주 하루는 새벽 5시 넘어서 퇴근한 대기록을 세웠었는데 이번주는 그 여파인지 몰라도 좀 게으르게 일했던거 같다. 금요일 팀 회고 시간에 모두가 각자 이번주 스프린트에 작업한 내용에 대해 이야기 하는데 팀장님과 본부장님 모두 이번 작업이 길어지고 힘.. 공감수 0 댓글수 0 2020. 10. 25.
[JS] try...catch 그리고 에러 핸들링 본 포스팅은 코어 자바스크립트 > 에러 핸들링 페이지를 참고하여 제 생각을 덧붙여 작성한 글입니다. # try...catch try...catch 문법은 대부분의 프로그래밍 언어에서 에러를 핸들링 하기 위해 쓰이고 있다. 자바스크립트도 예외는 아니다. 문법은 아래와 같다. try { // 에러 발생하면 코드 중단되고 catch 블록으로 넘어감. throw new Error('에러 발생'); alert('실행될 수 없어'); // 실행 안됨. } catch (err) { // 에러 핸들링 console.log(err); } 위 코드에서는 명시적으로 에러 객체를 생성해서 던져주었지만, 보통 에러가 발생하면 자바스크립트가 에러 상세내용이 담긴 객체를 생성하여 catch 블록에 인자로 넘겨준다. ## 선택적 c.. 공감수 1 댓글수 0 2020. 10. 18.
[우아한테크러닝 React&TypeScript] 5회차 # 리덕스 import { createStore, actionCreator } from "./redux-middleware"; function reducer(state = {}, { type, payload }) { switch (type) { case "init": return { ...state, count: payload.count }; case "inc": return { ...state, count: state.count + 1 }; case "reset": return { ...state, count: 0 }; default: return { ...state }; } } const logger = (store) => (next) => (action) => { console.log("logger.. 공감수 0 댓글수 0 2020. 9. 16.
[우아한테크러닝 React&TypeScript] 4회차 # 좋은 아키텍쳐란? 다른것들끼리 분리해라. 컴포넌트를 언제 어떻게 쪼갤지에 대해선 의견이 분분하지만, 강사님 개인적인 의견으로는 map으로 리스트 데이터를 뿌려주는 경우 별도의 컴포넌트로 감싸주는걸 선호한다. 한 눈에 보기 더 쉽기 때문! 쪼갤까 말까 싶을때가 쪼갤때다! 나중에 더 비대해질 경우 버그날까 쪼개기 더 어렵다. # 커뮤니케이션 이 부분은 아래 링크 작성자께서 정리를 잘해주셔서 발췌해왔습니다. https://github.com/soongyu/woowa-tech-learning-react-typescript/blob/master/week02-2.md soongyu/woowa-tech-learning-react-typescript 우아한테크러닝 3기 React&TypeScript 기록. Cont.. 공감수 0 댓글수 0 2020. 9. 10.
[우아한테크러닝 React&TypeScript] 3회차 # 지난 시간 정리 리덕스는 전형적인 펍섭(pubsub) 모델을 구현한 것. 사실상 리액트와 연관성이 전혀 없다. publish - subscribe 구조. 상태 변경되면 그걸 알려주고 구독한 쪽에서 알람 받을 수 있는 구조. observer 패턴이랑은 다르다. # 리액트 만들기 좋은 아키텍처를 말할 때 대원칙 중에 하나는 같은 것끼리 묶고 다른 것끼리 분리하는 것에 있다. 여기서 지식 수준의 차이에 따라 어떤게 같은것이고, 어떤게 다른것인지 판단하는 기준이 달라진다. 그러나 보통 기본적인것(네이밍 잘 짓기 등)만 잘 지켜도 70%는 먹고 들어간다. ## 리액트 컨셉 리액트 컨셉은 완전히 새로운게 아니다. 브라우저의 경우 예를 들어보자. HTML코드의 문자열 구조를 직접 다루는 것은 어렵기 때문에 훨씬 .. 공감수 0 댓글수 0 2020. 9. 8.
[우아한테크러닝 React&TypeScript] 2회차 # 자바스크립트 ## 변수와 값. 프로그래밍 언어는 서양사람들이 만들었다. 그래서 그들의 문화, 철학, 사상이 녹아있다. 논리, 합리주의를 중요시함. 그런 측면으로 프로그래밍 언어도 구성되어 있다. 기저에 절대불변의 원칙을 세워두고 (공리) (예. 1+1=2) 이것들을 기반으로 하나씩 차곡차곡 쌓아간다. 자바스크립트에서 '값'이라고 정의한 녀석들은 변수에 넣을수 있다. var x = 10; let y = 10; const z = 10; 자바스크립트에서는 함수도 값이라고 정의함. function foo() { } let y = foo; 그래서 함수를 변수에 대입 가능하다. 자바스크립트는 모든 함수가 값을 반환한다고 정의함. return 으로 반환하거나, return이 없으면 undefined 반환. new.. 공감수 1 댓글수 0 2020. 9. 3.
[우아한테크러닝 React&TypeScript] 1회차 1회차라고 편한 마음으로 필기 없이 들었는데 생각보다 너무 유익해서 정리하기로 결정. 고맙게도 많은 분들이 이미 정리를 잘해주셔서 베껴왓다ㅠ_ㅠ 2회차 부터는 필기 열심히 해야지... 그 중 아래 3분의 내용을 많이 참고했다. 링크 걸어드려야지. https://github.com/alstn2468/Woowa_Tech_Learning_React_Typescript/blob/master/ms/week_1/Tuesday.md alstn2468/Woowa_Tech_Learning_React_Typescript 📘 Woowahan Tech Learning React&Typescript Summary ⚛ - alstn2468/Woowa_Tech_Learning_React_Typescript github.com ht.. 공감수 0 댓글수 0 2020. 9. 3.
우아한테크러닝 3기 - React & TypeScript 합격 * 교육일정 : 2020년 9월 1일(화)부터 4주간 매주 화,목 19:30~22:00 * 강사 : 우아한형제들 김민태님 (웹프론트엔드개발그룹장) * 장소 : 온라인 (zoom 이용) 1회차 수업을 들은 후 쓰는 합격 후기. 우아한 테크코스나 테크러닝을 한번 꼭 해보고 싶었는데 이번에 운좋게 합격을 했다. 어찌보면 코로나 덕분(?)이라고 할 수 있다... 작년에 2기때는 오프라인으로 100명정도 했었다는데 이번엔 코로나 때문에 애초에 5월이었던 일정을 한번 미루고 간격을 띄워 앉힐 생각으로 30명 정도만 선발하려고 했다는데... 8.15 집회 이후 갑자기 심해지는 바람에 더이상 오프라인은 불가하다고 판단하여 온라인 교육으로 전환하고 약 400명 정도 뽑았다고 한다. 지원자가 1200명이었다고 하니 그래도.. 공감수 2 댓글수 0 2020. 9. 3.
SEO를 위한 Vue 앱에 prerender-spa-plugin과 vue-meta 적용하기 2 앞서 SEO 작업을 위해 prerender-spa-plugin을 적용한 포스팅 1탄을 작성하였다. 아래 링크 참고 https://soobakba.tistory.com/35 [Vue Cli] Vue 앱에 prerender spa plugin 적용하기 회사에서 클라이언트사의 스페셜 페이지를 우리 플랫폼으로 내재화 하는 작업을 맡아 진행하게 되었다. 스페셜 페이지의 가장 중요한 부분 중 하나는 SNS로 링크 공유시 적절한 이미지와 내용이 soobakba.tistory.com 이번에는 실제 prerender를 적용한 파일들을 배포한 뒤 발생했던 이슈들과 그 해결과정을 정리해보고자 한다. 동적 라우트 적용 우리 서비스는 리얼 서버에 배포하기 전까지 dev, stage 두 단계의 phase를 두고 큐에이를 진행한다.. 공감수 3 댓글수 2 2020. 8. 1.
SEO를 위한 Vue 앱에 prerender-spa-plugin과 vue-meta 적용하기 1 회사에서 클라이언트사의 스페셜 페이지를 우리 플랫폼으로 내재화 하는 작업을 맡아 진행하게 되었다. 스페셜 페이지의 가장 중요한 부분 중 하나는 SNS로 링크 공유시 적절한 이미지와 내용이 뜨는 것인데, 우리 플랫폼은 SPA로 되어있어서 SEO도 제대로 되어있지 않고 meta og 태그도 전혀 없는 상태. 기존 스페셜 페이지는 멀티 페이지로 구성하여 각 페이지마다 index.html 파일을 따로 두어 해당 기능을 처리하였는데 내재화를 하게 되면서 앞으로 발생하는 모든 스페셜 페이지를 시스템화 해야했기 때문에 링크 공유 기능과 SEO도 함께 잡을 수 있는 prerender 플러그인을 적용해보기로 하였다. 팀장님이 예제 링크와 사용법을 포스팅한 여러 블로그들을 나에게 보내주셨고 생각보다 간편해보여서 나도 금방.. 공감수 0 댓글수 4 2020. 5. 25.
[Docker] 프론트엔드 프로젝트로 실습하는 도커 스터디 #2 사내 스터디로 진행한 도커 스터디 실습과정을 정리하였습니다. 깃헙에 작성된 내용과 동일하며 이전 내용은 여기를 참고해주세요. ## 트러블 슈팅 및 각종 꿀팁 명령어 - 이미지가 어떻게 빌드됐는지 볼 수 있다. `docker history sample-app:latest` - 이전에 돌렸던 컨테이너 기록들 출력 `docker container ls -a` - 한번만 이미지 돌려도 컨테이너 기록에 남게되서 불필요한 기록이 많아진다. - 종료된 컨테이너 한번에 삭제하는 커맨드 `docker container prune` - 이미지도 삭제 가능 `docker image prune` - 쓸모없는 컨테이너 기록을 남기지 않고 실행하려면 --rm 옵션 추가 - docker run은 컨테이너 생성 -> 컨테이너 실행을.. 공감수 0 댓글수 0 2020. 5. 16.
[Docker] 프론트엔드 프로젝트로 실습하는 도커 스터디 #1 사내 스터디로 진행한 도커 스터디 실습과정을 정리하였습니다. 깃헙에 작성된 내용과 동일하며 사진만 일부 추가하였습니다. # Docker Study ## 사전 준비 - 반드시 윈도우 랩탑 대신 맥북 지참 - [docker desktop](https://www.docker.com/products/docker-desktop) 받아서 설치 - vue-cli설치/업그레이드: yarn global add @vue/cli - visual studio code + docker plugin install ## Docker 기초 터미널에서 실습 ### 예제 1) hello-world 이미지 내려받고 실행하기 ``` docker pull hello-world docker run hello-world ``` - [도커 허브 .. 공감수 0 댓글수 0 2020. 5. 12.
Vue-Cli multi-page 모드에서 Vue Router history 모드 적용하기 얼마 전 회사 서비스에서 드디어 URL에 붙어있던 hash를 제거하게 되었다. 우리 서비스는 SPA(싱글 페이지 어플리케이션) 서비스라서 hash가 항상 붙어있었는데 이유는 Vue Router에서 기본 모드가 hash mode 이기 때문. 히스토리 모드로 변경해주면 hash가 없는 깔끔한 URL을 가질 수 있다. 공식 문서에 따르면 mode: 'history' 이 속성 하나만 추가해주면 되는 간단한 일이지만 우리는 기존에 레거시 코드도 많았고 이미 외부에 알려진 hash가 있는 URL에 대응하는 등의 작업도 있었기에 작업자 분이 2주에 걸쳐 작업해 주셨다. 작업자 분이 올려주신 PR을 보면서 내가 가장 의문이 갔었던 부분이 vue.config.js 파일에 multi page 설정 부분이었는데, 이걸 이해.. 공감수 0 댓글수 6 2020. 5. 11.
[React Native] Detox 빌드 에러 해결 방법 BUILD FAILED, Detox instance has not been initialized 단지 TDD를 배우기 위해 인프런에서 TDD 개발 방법론을 활용한 React Native 앱 개발 을 수강하기 시작했다. 그러나 그것은 전쟁의 시작이었으니... 처음하는 RN도 어려운데다가 모바일 e2e 테스트 라이브러리인 detox를 사용하기 위해 쉬운 길(Expo CLI)을 두고 어려운 길로 가야했으니 셋팅해야하는 것도 많고 실행할 때 마다 오류 투성이였다ㅠ_ㅠ detox 설정/실행 부분에서 계속 빌드에러가 났는데 검색 결과도 많지 않고 원인도 파악이 잘 안되서 엄청 삽질하다가 오늘 결국 해결했다. 나는 처음에 아래와 같은 에러가 계속 났다. 대충 binaryPath에 설정해둔 경로를 찾을수 없다는 얘기다. 이건 사실 내 실순데 detox build를 먼저 해줘야 한다. 그래야 ios/ 폴더 밑에 b.. 공감수 1 댓글수 0 2020. 3. 29.
axios로 파일 다운로드 및 Content-Disposition 정보 사용하기 파일 다운로드 기능을 구현하면서 약간의 삽질을 하면서 애를 먹었는데 덕분에 새로운 사실들을 알게 되었다. 서버에서 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 .. 공감수 8 댓글수 0 2020. 3. 9.
MAC에서 기본 터미널로 SSH 연결하기 (PUTTY 다운로드 노필요) 전직장에서는 윈도우를 쓰니까 원격접속할때 항상 putty를 써왔다. 지금 회사는 맥을 쓰지만 젠킨스로 배포하니 직접 서버 접속할 일이 없어서 세상 편한것... 그런데 개인공부겸 사고싶은 물건이 있어서 재입고 알람봇을 만들다가 맥으로 서버에 접속할 일이 생겼다. 그래서 예전에 구글 블로그에 포스팅 해두었던 자료를 재탕!! 맥에서는 putty를 받을 필요도 없다. 기본 터미널로 바로 연결되는걸~ 방법은 아래와 같다. 터미널에서 직접 명령어를 입력해서 연결하는 방법도 있지만 나는 UI를 이용하는게 편하니까 그 방법으로 적어두어야지. 1. 먼저 터미널을 연다. 2. 상단에 셸 > 새로운 원격 연결... 을 누른다. 3. 보안 셸(ssh)를 선택하고 아래에 [+] 버튼을 누른다. 4. 다음과 같은 창이 뜨면 [서.. 공감수 18 댓글수 5 2020. 2. 2.
[TIL] 191012 1. 2019 W3C HTML5 컨퍼런스 매년 과기부에서 주최하는 행사. - Vue.js 발표 자료 링크https://github.com/joshua1988/vue-five-common-mistakes - 흥미로운 주제들 - SVELTE - Project Fugu https://www.chromium.org/teams/web-capabilities-fugu - fugu는 복어라는 뜻. 잘쓰면 좋지만 잘못쓰면 독이된다... - fugu로는 네이티브에서만 가능한 파일시스템에 접근 가능하다. - PWA 최신 API 목록 https://developers.google.com/web/updates/capabilities 2. vim으로 자동 생성된 import 구문의 경로 앞에 붙는 '@'는 얼라이언스라고 하는데.. 공감수 0 댓글수 2 2019. 10. 13.
[JavaScript] this를 알아보자! 화살표 함수(arrow function) 에서의 this 얼마전 본 면접에서 this에 대한 질문을 받았었는데 전역에 선언된 화살표 함수 내에서 this가 undefined 값을 가진다고 완전히 잘못된 대답을 하고는 집에 돌아와서 심히 자괴감을 느낀터라 이번 기회에 정확하게 정리를 해야겠다고 결심했다. 이 글은 [코어 자바스크립트 (정재남, 위키북스)] 책을 참고하여 제 생각과 함께 정리한 글입니다. https://wikibook.co.kr/corejs/ 코어 자바스크립트: 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다! 최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아닙니다. ECMAScript2015 시대인 현재에 .. 공감수 1 댓글수 0 2019. 10. 10.
[TIL] 190907 오늘 한 일 패스트 캠퍼스 "Vue.js로 구현하는 PWA 캠프" 3주차 강의 수강. 공부 내용 1. 상수는 vue 인스턴스의 data 속성에 넣지 않는다. 넣는 순간 get, set 함수 생기기 때문에 그게 다 비용이다. 불필요한 비용은 줄여야 한다. 2. $(달러)속성은 되도록 사용하지 말자. 나중에 고급패턴을 이용할 때 쓸일이 있긴 하나, this.$data.user 같은 코드는 공식 문서에서도 권고하지 않는다. 3. 터미널에서 touch TodoHeader.vue TodoInput.vue TodoList.vue 이런식으로 하면 한 번에 여러파일 생성가능. 4. 컴포넌트 파일 생성하는 scf 단축키 -> vue 로 변경 5. vex 단축키는 import와 export default를 한번에 생성해주.. 공감수 0 댓글수 0 2019. 9. 9.
[190903] JSConf Korea 2019를 다녀와서... JSConf Korea는 세계 각국에서 열리는 JSConf의 일환으로 2019년에 한국에서 처음으로 열리는 행사다. 이러한 행사에 운좋게 양도티켓을 얻어서 참가할 수 있었던 것은 정말 행운이었다. (그것도 얼리버드 티켓으로...ㅎㅎ) 사실 예전부터 로망이었는데 이렇게 규모가 있는 컨퍼런스에 꼭 참여해보고 싶었다. 그러나 규모가 큰 행사는 대부분 평일에 열리기 때문에 회사 다니면서는 연차내고 겨우 NAVER TECH CONCERT: FRONT END 2019 에 한 번 참여했었다. 이것도 운좋게 당첨이 되서 갈 수 있었는데 당시 회사에서는 컨퍼런스에 간다고 하니 지원은 커녕 '뭐 다녀와도 상관은 없지만 큰 도움은 안될거다' 라는 식으로 말하고 그냥 내 연차를 하루 써서 다녀와야 했다. 그렇게 발전없는 회사.. 공감수 1 댓글수 0 2019. 9. 6.
[TIL] 190829 오늘 한 일 [node.js 교과서] 책 3장 [노드 기능 알아보기] 공부 완료. 프로그래머스 알고리즘 1문제 풀기 완료. 패캠 강사님이 주신 자료중 How DNS Works 1회독 완료. 9월 3일 열리는 JSConf Korea 2019 티켓을 양도하고싶다는 사람을 오픈채팅방에서 우연히 만나 극적으로 양도 받음..!! JSConf 운영진 프로필을 보다가 블로그를 벨로퍼트님이 만드신 velog로 운영하는 분이 있어서 들어갔다가 자연스럽게 가입함. 그러나 그곳에 TIL을 올리기엔 내 글이 너무 허접해 보여서 일단 기존 운영하던걸로 하기로 결정. 기존에 구글블로그를 메인으로 하고 티스토리를 작성용으로 썼으나, 구글블로그는 태그가 곧 네비게이션이 되는지라 태그지정을 마음껏 하기가 어려운 점, 템플릿이 예쁘지 .. 공감수 0 댓글수 0 2019. 8. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.