개발로그

* 교육일정 : 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 플러그인을 적용해보기로 하였다. 팀장님이 예제 링크와 사용법을 포스팅한 여러 블로그들을 나에게 보내주셨고 생각보다 간편해보여서 나도 금방..

사내 스터디로 진행한 도커 스터디 실습과정을 정리하였습니다. 깃헙에 작성된 내용과 동일하며 이전 내용은 여기를 참고해주세요. ## 트러블 슈팅 및 각종 꿀팁 명령어 - 이미지가 어떻게 빌드됐는지 볼 수 있다. `docker history sample-app:latest` - 이전에 돌렸던 컨테이너 기록들 출력 `docker container ls -a` - 한번만 이미지 돌려도 컨테이너 기록에 남게되서 불필요한 기록이 많아진다. - 종료된 컨테이너 한번에 삭제하는 커맨드 `docker container prune` - 이미지도 삭제 가능 `docker image prune` - 쓸모없는 컨테이너 기록을 남기지 않고 실행하려면 --rm 옵션 추가 - docker run은 컨테이너 생성 -> 컨테이너 실행을..

사내 스터디로 진행한 도커 스터디 실습과정을 정리하였습니다. 깃헙에 작성된 내용과 동일하며 사진만 일부 추가하였습니다. # 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 ``` - [도커 허브 ..

얼마 전 회사 서비스에서 드디어 URL에 붙어있던 hash를 제거하게 되었다. 우리 서비스는 SPA(싱글 페이지 어플리케이션) 서비스라서 hash가 항상 붙어있었는데 이유는 Vue Router에서 기본 모드가 hash mode 이기 때문. 히스토리 모드로 변경해주면 hash가 없는 깔끔한 URL을 가질 수 있다. 공식 문서에 따르면 mode: 'history' 이 속성 하나만 추가해주면 되는 간단한 일이지만 우리는 기존에 레거시 코드도 많았고 이미 외부에 알려진 hash가 있는 URL에 대응하는 등의 작업도 있었기에 작업자 분이 2주에 걸쳐 작업해 주셨다. 작업자 분이 올려주신 PR을 보면서 내가 가장 의문이 갔었던 부분이 vue.config.js 파일에 multi page 설정 부분이었는데, 이걸 이해..

단지 TDD를 배우기 위해 인프런에서 TDD 개발 방법론을 활용한 React Native 앱 개발 을 수강하기 시작했다. 그러나 그것은 전쟁의 시작이었으니... 처음하는 RN도 어려운데다가 모바일 e2e 테스트 라이브러리인 detox를 사용하기 위해 쉬운 길(Expo CLI)을 두고 어려운 길로 가야했으니 셋팅해야하는 것도 많고 실행할 때 마다 오류 투성이였다ㅠ_ㅠ detox 설정/실행 부분에서 계속 빌드에러가 났는데 검색 결과도 많지 않고 원인도 파악이 잘 안되서 엄청 삽질하다가 오늘 결국 해결했다. 나는 처음에 아래와 같은 에러가 계속 났다. 대충 binaryPath에 설정해둔 경로를 찾을수 없다는 얘기다. 이건 사실 내 실순데 detox build를 먼저 해줘야 한다. 그래야 ios/ 폴더 밑에 b..

파일 다운로드 기능을 구현하면서 약간의 삽질을 하면서 애를 먹었는데 덕분에 새로운 사실들을 알게 되었다. 서버에서 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 ..