강디너의 개발 일지

2년 넘게 있던 딜리셔스 생활을 마쳤습니다. 조금 더 다양하고 넓은 경험을 하기 위해 이직했습니다. 왜 ? 특별히 맘에 안 들어서 이직을 마음먹은 것이 아니라, 조금 더 다양하고 넓은 경험을 하고 싶고, '다른 회사는 어떻게 일할까? 다른 개발자들은 어떻게 협업할까?' 등 여러 가지로 궁금했습니다.(한창 궁금한 게 많을 나이죠..) 회사를 선택하는 것도 예전 이직할 때 생각했던 것들을 만족하면 될 것 같았습니다. 과정 여러 회사의 과제, 면접을 진행하게 되었고, 그 와중에 성장도 많이 한 것 같습니다. 처음에는 말도 잘 못하고 어정쩡하게 대답했다면, 나중에는 여유롭게 웃으면서 면접을 보는 상황까지 갔습니다.(이래서 가장 원하는 곳은 나중에 봐야 하나 봅니다.) 과제, 면접을 진행하면서 좋았던 점이 있는데..

벌써 상반기가 사라졌다. 상반기에 별로 한 것이 없어 보였는데, 적다 보니깐 뭔가 많아져서 뿌듯하다. 1. 회사 상반기에는 초반에는 엄~~청 바쁘지는 않고 살만은 했다. 그래서 여행도 다녀오고 힐링을 좀 했던 것 같다. 1-1. 생활 음... 코로나 때문?에 재미있는 일은 특별하게 없었다. 늘 그러하였듯이 평화롭게 탁구와 플랭크... 1-2. 리뷰 사내 리뷰 시스템이 생겼다. 작년 한 해 동안 같이 프로젝트를 진행했던 동료들이 나에게 피드백을 주고, 나도 그분들에게 피드백을 주는 시스템이다. 처음에는 다들 `좋은말만 쓰지 않을까, 친한 사람한테만 좋게 하지 않을까 ?, 의미가 있을 까?` 라는 의견이 분분 했지만, 결국 평가에 들어가는 내용이다 보니 다들 솔직하게 쓰는 것 같았다. 나도 누군가를 리뷰/피..

원본 글: HTML Tips 몰랐던 것들도 있어서 정리합니다. 1. The `loading=lazy` attribute 이미지 태그에 loading=lazy 속성을 넣으면 사용자가 스크롤해서 볼 때 까지 이미지를 호출 하지 않습니다. 웹 사이트의 로딩 시간, 성능 관리 측면에서 매우 좋으며, 페이지 초기 로딩 시 필요한 이미지의 수를 줄일 수 있습니다. 아래 GIF를 보시면 이미지가 보일 때 쯤 로딩하는 것을 볼 수 있습니다. 2. 이메일, 전화, 문자 links Send us an email Call us Send us a message 이메일 보내기, 전화 걸기, 마지막은 문자 보내기 입니다. 3. OL의 `start` 속성. 신기방기합니다 ㅋㅋ.. 쓸일이 있을지.. 4. meter 태그 음.......

장장 4개월에 걸친 토이프로젝트가 드디어 끝났습니다. 4월 말 오픈 예정이었으나, 역시 사람일은 알 수 없기 때문에... 각자의 업무가 일단 중요하니깐... 연애도 해야하고... 서비스 한 개를 만들면서 개발 플로우를 경험하고자 홀로 도전하게 되었습니다. 프론트엔드부터 백엔드, 데브옵스까지 많은 회사 동료분들께 도움을 받아서 감사의 말씀 먼저 올립니다. 초기 시작은 간단해 보였습니다.(이렇게 큰 거인 줄 그땐 몰랐지...) 백엔드, AWS 쪽을 도전하는 것이었기 때문에, 프론트엔드는 익숙한 Vue.js를 이용했습니다. 프론트엔드 모바일 전용으로 만들었으며, PWA도 생각해서 서비스 워커를 붙였습니다. 타입 스크립트 적용과 sentry를 붙여서 오류도 클라이언트 쪽에서 로깅할 수 있도록 설정했습니다. 카카..

회사 기술 블로그에 출간했습니다...! 첨부 https://dealicious-inc.github.io/2021/05/17/axios-integrate.html Axios 통신 한줄기로 만들기 로그인 프로세스 개선 dealicious-inc.github.io

서버를 구성하지도, 백엔드 로직을 직접 짜지 않아도 백엔드 개발을 쉽게 도와주는 strapi라는 프레임워크가 있다는 것을 듣고 바로 찾아봤습니다. strapi는 엄청 복잡한 로직이 아니라면 간단한 CRUD는 금방 뚝딱 나와서 백엔드에 시간을 많이 안 쏟아도 되는 장점이 있습니다. strapi 문서에서는 opensource headless CMS라고 하며, 로컬에 띄워서 버튼 몇 번 클릭으로 테이블을 만들 수 있습니다. 튜토리얼 문서 1. 설치 CLI CLI 로 설치하려니깐 무슨... access denied 가 계속 뜨면서 설치가 안돼서 실패했습니다... Node, npm 버전만 맞추면 되는 줄 알았는데 그게 아닌가 봅니다... sudo를 통해서 권한까지 주면서 했는데 실패 ... ! 다른 설치 방법도 ..

사용자가 이미지를 선택할 때부터 백엔드 API, AWS S3로 들어가는 과정입니다. 토이 프로젝트에서 진행중인, 리뷰 등록하는 것을 보여드리면서 설명하겠습니다. 기술 스텍: Vue.js, Node.js, AWS S3, MYSQL 보통 파일 선택하는 input type=file 은 전혀 이쁘지 않아서 디자인을 입힙니다. 그래서 그 아이는 display: none 하고, 이쁜 디자인을 만들어서 누르면 input file이 열리도록 코딩합니다. 디자인된 이미지를 누르면 숨겨진 input이 클릭되도록 합니다. 이미지가 선택되면 changeFile 이벤트를 통해서 preview 이미지를 만들고, 서버에 보낼 이미지 데이터를 갖고 있으면 됩니다. // 파일 이름 const imgName = ref(''); // 파..

자바스크립트에 없던 enum이 타입스크립트에 나왔다. 쓰는 방법도 쉽고, 기능도 간단한데 개인적으로 잘 사용하지 않는다. 굳이 enum이란 애를 써서 나열 하지 않아도 object로 선언해서 사용하는 것이 편하기 때문에 잘 사용하지 않았던 것 같다. 어디에 사용해야 하는지, 왜 좋은건지 잘 감이 안잡혀서 리서치를 했다. TypeScript에서 ENUM을 사용하는 이유는 무엇입니까? TypeScript enum을 사용하는 이유 [Typescript] enum을 써야 할 때, union type을 써야할 때 Typescript Enum이란? 여러가지 enum의 형태 [Typescript] Enums 열거형 interface, type, enum에 관한 글 [TypeScript TIPS] Interface 를..

토이 프로젝트 소개 주니어 개발자, 주니어 기획자(꼬꼬마 기획자), 주니어 디자이너(꼬꼬마 디자이너) 세명이 모여서 프로젝트를 시작했다. 회사 근방 음식점 중 팀원들이 추천한 맛집 리스트를 확인하고 해당 음식점에서 식사 후 솔직한 리뷰를 작성해서 공유하는 서비스 중간 진행 사항 토이 프로젝트 목적 한 번쯤은 전체적인 프로젝트 플로우를 경험해보고 싶다. AWS Lambda를 이용해서 API를 구축해보고 싶다. MySQL을 사용하고, 쿼리도 한번 짜 보고 싶다. (조인 한 번도 안 해봤...) 프론트 개발 Vue.js 프레임 워크를 사용했다. 목적이 전체적인 프로젝트 플로우를 경험하고 싶고, 프로젝트 일정 상 프론트는 빠르게 개발하고 백엔드 쪽에 시간을 대부분 투자할 것 같아서 계속 사용했던 Vue.js를 ..

Vue.js + AWS Lambda 이용해서 Serverless로 구성하는 꽤나 야심찬 토이 프로젝트를 하고 있습니다(이번엔 기획자도 있습니다). 회사에서 개발용 + 장난감용? 으로 만들어준 공간이 있어서 열심히 가지고 놀고 있던 도중, 배포하는데 어느 순간 배포가 안 되는 오류가 발생했습니다. 오류는 워낙 자주 발생 했어서(Lambda 만지는데 오류가 너무 잦았어서...) 찾아보니 Lambda 코드 스토리지 용량이 초과해서 배포가 안 되는 것을 확인했습니다...... 처음에는 데브옵스분께 용량을 늘려달라고 요청할까 했는데, 뭔가 느낌이 싸~ 한게 제가 잘못 막 가지고 놀아서 그런 것 같았습니다. AWS 콘솔에 들어가서 확인해보는데, 함수 각각의 크기가 너무 큰 것을 확인 했습니다. 다른 함수들은(백엔드..