티스토리
관련 서비스
  • Symbols스토리 홈바로가기바로가기
  • 브런치브런치스토리바로가기바로가기
  • 카카오스토리카카오스토리바로가기바로가기

강디너의 개발 일지
검색하기
블로그 홈

블로그 홈

강디너의 개발 일지

kdinner.tistory.com/m
신고

주니어 개발자의 개발 일지

구독자
22
방명록 방문하기
구독하기

주요 글 목록

  • 테이블링으로 이직한 건에 대하여... 기술 블로그에 기술을 안적고 계속 회고만 하는 것 같다. 이게 나이를 먹으면 말만 많아진다는 것일까...  그래서 이번에는 어디에 갔는가 ?테이블링이라는 맛집 줄서기 서비스를 운영하는 회사에 갔다.그곳은 왜 갔는가 ?먹을 것을 좋아하는 나는 맛집을 가는 것도 좋아한다. 가성비를 따지기는 하지만, 먹기 위해 돈버는 스타일? 이기 때문에 먹는 것에 아끼지 않는 편이다. 그렇기에 맛집에서 줄 서는 서비스인 테이블링을 이미 알고 있었다. (예전에는 웹으로도 봤었는데, 지금은 접었다고 한다.) 특히 면접 분위기가 너무 좋았고, 팀 분위기도 좋아 보였다. (이게 제일 컸던 것 같다)  역할은 무엇인가 ?미들급 FE개발자? 의욕 빵빵한 개발자 ?팀장 말 잘듣고 열심히 개발하는 실무자?이런 역할이지 않을까 싶다.  .. 공감수 4 댓글수 2 2024. 7. 9.
  • 새로운 시작... feat. 시니어 개발자를 향하여 또 이직을 했다.약 2년 6개월 와디즈를 다녔고, 올해 3월 마무리를 했다. (이제야 회고를 적는다)개발 지식뿐만 아니라 문서화, 개발 프로세스 등 개발자에게 필요한 많은 것들을 배우며 성장했다고 생각한다. 이직이 확정되었을 때 기쁨보다 동료들에게 어떻게 말해야 하나 싱숭생숭했다. 그만큼 팀 분위기가 너무 좋아서 떠나는 게 맘 편하지 않았다.  왜 또 이직을 했는가?이력서를 정리하다 보니 벌써 8년 차가 되어버렸다. 쭈니어일때 10년차 개발자는 완전 능력자 + 시니어 개발자라고 생각했는데, 내가 곧 10년 차라는 생각에 덜컥 겁이 나버렸다.와디즈에는 시니어 FE 분들이 많아 보살핌을 듬뿍 받고 자라서, 만약 이분들이 없어진 상태에서 10년 차가 넘어버린다면…? 이라는 생각이 드는 순간 뭔가 준비를 해야.. 공감수 3 댓글수 4 2024. 6. 10.
  • React Native로 앱 만들기 - 나에게 필요한 서비스 만들기 작년부터 난 만들고 싶은 서비스가 생겼었다. 바로 냉장고 관리 앱이다. 혼자 살 때에는 냉장고에 김치밖에 없었는데, 결혼을 하고 나니 냉장고가 터지려고 했다. 특히 냉동실에 넣고 까먹은 재료들이 발굴될 때마다 너무 마음이 아팠다. 나는 이 문제를 해결하고자 냉장고 관리 앱들을 찾아봤지만 내가 만족스러운 앱이 없었다. 내가 원하는 서비스가 없는데 직접 만들자 (기획자/개발자 부부의 고질병) 하지만 나는 아이디어와 개발 능력만 있지 서비스를 기획/디자인 하지 못했다. 그렇기에 아내를 열심히 꼬셨다. 넘치는 아이디어와 왜 이 서비스를 써야 하는지 정리를 했다. 이 서비스를 만들게 된 계기 결혼 후 집에서 밥을 많이 해 먹는다. 냉장고/냉동실이 터지려고 한다. 언제나 진수성찬을 해 먹는 것이 아닌 생존요리 & .. 공감수 4 댓글수 5 2024. 1. 7.
  • React Native로 앱을 만들고, 고통 받으며 적는 글 좋았던 점. react로 앱을 만든다. 자바스크립트다. 타입스크립트도 가능하다. 힘들었던 점. 초기 세팅이 제일 힘들다. 재설치만 몇 번한 것 같다. 무엇이 잘못된 건지도 모르겠다. 왜 잘되는지 모르겠다. 라이브러리 react-native-navigation을 통해 화면이 이동하는데, Stack이라는 개념과 Navigation이라는 개념이 있다. Stack은 웹의 히스토리나 자료구조처럼 1 > 2 > 3 으로 쌓이고 뒤로 가면 3 > 2 > 1 이런 형식이고 Navigation은 쌓이지 않는다. 앱을 껐다 켜도 데이터가 유지되려면 storage를 사용해야한다. (https://github.com/react-native-async-storage/async-storage) React-Native 특성 rea.. 공감수 0 댓글수 2 2023. 10. 4.
  • 나의 강점 찾기 최근 팀 내 주니어끼리 모여 ‘나의 강점 찾기’ 스터디를 하고 있다. (feat. 내년 연협을 잘하자.) “자신의 강점을 찾고 강화하자” 라는 목표를 갖고 매주 모여서 짧게 이야기를 나누기 시작했지만, 강점 찾기란 매우 힘든 일이었다. 강점을 찾기 위해 이력서도 다시 써보고, 서로가 생각하는 강점에 대해 이야기를 나누며 생각보다? 유익한 시간이었다. 그래서 나의 강점을 3가지로 정리해 보았다. 생산성이 높은 개발자 먼저 나서서 시도하고 도전한다. 긍정적이며, 동료들과 의견을 잘 나누며 잘 받아들인다. 생산성이 높은 개발자 생산성이 높은 개발자는 업그레이드된 버전인데, 그전에는 ‘빠르게 개발해서 빠르게 피드백받아 개선하는 것’이 내가 자신 있게 말할 수 있는 강점이었다.(말이 고급져졌다) 이 강점을 오랫동.. 공감수 3 댓글수 0 2023. 8. 14.
  • 개발자로서 성장을 잘 하고 있는걸까 ? 작년과 올해는 나에게 중요한 시간이었다. 작년은 이직한 곳에 나를 증명해야 했고, 결혼 준비와 함께 올해 초 결혼을 했기 때문이다. 그래도 그 와중에 강의도 찍어보고, 간간히 블로그를 적었었다. 마침 회사에서 성장했는지, 나의 강점은 무엇인지 자꾸 물어봐서 이번 기회에 한번 되돌아보기로 했다. 나는 성장 하였는가? 남자로서, 남편으로서 성장을 했다. 집도 같이 보러 다니고, 면허도 따고, 결혼도 잘 마무리 지었다. 아내는 매우 만족해한다. 하지만 개발자로서는 크게 성장하지 못한 것 같다. 주어진 업무는 잘 해내었지만, 새로운 기술 서칭이나 개선 업무를 앞장서서 하지 못했다.(결혼준비라는 핑계로...) 블로그도 꾸준히 작성하지 못한 것도 아쉬움이 크다. 내가 일하면서 배운 것과 혼자 공부하며 정리해야 기억.. 공감수 6 댓글수 4 2023. 6. 25.
  • 코드로 대화하자 - HTTP 상태 코드 HTTP 상태 코드는 웹 서버와 클라이언트 간의 통신 과정에서 클라이언트 요청에 대한 서버의 응답 결과를 전달하는 코드입니다. 이 코드는 HTTP 응답의 일부로 사용되며, 성공, 클라이언트 오류, 서버 오류 등의 여러 상황을 나타낼 수 있습니다. 프론트엔드 팀과 백엔드 팀이 HTTP 상태 코드를 기준으로 특정 상황에 대한 코드 값을 약속하게 된다면 불필요한 커뮤니케이션을 줄일 수 있습니다. 예를 들어 HTTP 상태 코드가 401인 경우 로그인이 필요한 상태라고 약속합니다. 백엔드에서는 인증이 필요한 사용자일 경우 401로 내려주고, 프론트엔드에서는 401 코드만 딱 잡아서 로그인이 필요하다고 사용자에게 보여주거나, 로그인 페이지로 이동시킬 수 있습니다. 백엔드에서 HTTP 상태 코드로 구분시키는 게 아닌.. 공감수 2 댓글수 0 2023. 5. 21.
  • React setState를 동기적으로 사용해야할 때 React에서 useState는 state값이 변경 될 때마다 해당 컴포넌트가 다시 렌더링을 하는 특성이 있습니다. 그래서 동기적으로 실행되는 자바스크립트 코드에서 setState를 실행하고 해당 state를 가지고 무슨짓을 하려고 할 때 이슈가 되는 경우가 있습니다. 예를 들어보겠습니다. const [fruit, setFruit] = useState({ banana: 0, apple: 0, }); const [errors, setErrors] = useState({ banana: false, apple: false, }) 여러가지 과일들이 있고, 과일이 있는지 여부를 체크할 것입니다. 가볍게 보면 banana와 apple이 0이라서 해당 조건문에 걸리고 setErrors를 하게됩니다. 그리고 check.. 공감수 1 댓글수 0 2023. 4. 30.
  • Next.js 데이터 가져오는 방법 (Data Fetching) Next.js 에서 데이터를 가져오는 방법이 여러 가지 있습니다. getServerSideProps getStaticPaths getStaticProps Next.js에서는 서비스에 따라 다양한 방식으로 콘텐츠를 렌더링 할 수 있도록 지원해주는데 SSR, SSG, CSR, ISR 이 있습니다. 이러한 방식에 따라 데이터 패칭 하는 방식이 다릅니다.(사용하는 함수도 달라요.) getServerSideProps - SSR 공식문서 서버에서만 실행되고, 브라우저에서는 실행되지 않기 때문에 브라우저에 로그가 찍히지 않습니다. /* context object 에 있는 데이터 params: 페이지가 동적 경로일 경우 - 페이지 이름이 [id].js일 경우 params는 { id: 값 } req: HTTP reque.. 공감수 2 댓글수 0 2022. 8. 22.
  • Next.js SEO를 위한 next/head 탐구 React.js에서 타이틀, 설명 등 SEO 구색을 어느 정도 맞추기 위해서는 react-helmet 이란 라이브러리를 사용합니다. Next.js에서도 그럼 헬멧을 사용해야하나 ? 라는 의문에서 조사를 시작했습니다. 구글에서는 이제 SPA방식의 웹사이트도 어느 정도 크롤링 잘해주지만 특정 페이지의 title, og image 등을 바꾸기 위해 스크립트를 통해서 수정합니다. (카톡, 페이스북 공유 등.) react-helmet 동작 방식 Next.js는 조금 다릅니다. SSR 방식이기 때문에 굳이 렌더링 이후, 스크립트를 통해서 meta tag들을 바꾸지 않아도 됩니다. 렌더링 할 때 meta tag를 넣어서 렌더링 해주면 되기 때문입니다. Next.js에서는 편리하게 지정할 수 있도록 next/head .. 공감수 2 댓글수 0 2022. 7. 30.
  • React-Query Error Boundary 에러 바운더리 사용해보기 공통 오류 컴포넌트 적용하기 특정 컴포넌트만 다른 오류 컴포넌트 적용하기 고민 공식 문서 : https://react-query.tanstack.com/guides/suspense 코드 : https://github.com/DinnerKang/study_react/tree/main/packages/react-query 1. 공통 오류 컴포넌트 적용하기 최상위 루트에서 선언하고 QueryClient에 defaultOptions를 설정해서 suspense 값을 변경해줍니다. 그 후 ErrorBoundary를 선언해주면 하위 컴포넌트들은 이제 패칭 오류가 날 때 해당 ErorrComponent가 보입니다. import { QueryClient, QueryClientProvider, u.. 공감수 0 댓글수 0 2022. 1. 2.
  • React-Query 사용법 및 쓰는 이유 React-Query는 이전 React 과제를 할 때 아무것도 모른 상태에서 사용해서 장점을 크게 깨닫지 못했었습니다. 그때 당시에 React-Query를 왜, 어떤 상황에서 사용하는지, 장점이 무엇인지 알고 넘어갔어야 했는데 그저 이런 라이브러리가 있구나 ~ 하고 넘어갔었습니다. 사내 기술 세션에서 React-Query 관련 이야기가 나오고, 발표도 해주셔서 관심이 가고, 도입하려면 스터디가 필요하다는 생각에 따로 공부해야겠다고 마음먹고 적게 되었습니다. 우선 React-Query의 장점은 많지만, 아래 장점들 때문에 프로젝트에서 사용하고 싶었습니다. 서버 데이터 캐싱 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능 prefetching, retry 등 다양한 옵션 쉬운 상태 관리 들어가기 전.. 공감수 0 댓글수 0 2021. 12. 12.
  • 와디즈에 이직 했습니다. 2년 넘게 있던 딜리셔스 생활을 마쳤습니다. 조금 더 다양하고 넓은 경험을 하기 위해 이직했습니다. 왜 ? 특별히 맘에 안 들어서 이직을 마음먹은 것이 아니라, 조금 더 다양하고 넓은 경험을 하고 싶고, '다른 회사는 어떻게 일할까? 다른 개발자들은 어떻게 협업할까?' 등 여러 가지로 궁금했습니다.(한창 궁금한 게 많을 나이죠..) 회사를 선택하는 것도 예전 이직할 때 생각했던 것들을 만족하면 될 것 같았습니다. 과정 여러 회사의 과제, 면접을 진행하게 되었고, 그 와중에 성장도 많이 한 것 같습니다. 처음에는 말도 잘 못하고 어정쩡하게 대답했다면, 나중에는 여유롭게 웃으면서 면접을 보는 상황까지 갔습니다.(이래서 가장 원하는 곳은 나중에 봐야 하나 봅니다.) 과제, 면접을 진행하면서 좋았던 점이 있는데.. 공감수 2 댓글수 2 2021. 11. 28.
  • 주 ~ 니어 개발자의 2021 상반기 회고록 벌써 상반기가 사라졌다. 상반기에 별로 한 것이 없어 보였는데, 적다 보니깐 뭔가 많아져서 뿌듯하다. 1. 회사 상반기에는 초반에는 엄~~청 바쁘지는 않고 살만은 했다. 그래서 여행도 다녀오고 힐링을 좀 했던 것 같다. 1-1. 생활 음... 코로나 때문?에 재미있는 일은 특별하게 없었다. 늘 그러하였듯이 평화롭게 탁구와 플랭크... 1-2. 리뷰 사내 리뷰 시스템이 생겼다. 작년 한 해 동안 같이 프로젝트를 진행했던 동료들이 나에게 피드백을 주고, 나도 그분들에게 피드백을 주는 시스템이다. 처음에는 다들 `좋은말만 쓰지 않을까, 친한 사람한테만 좋게 하지 않을까 ?, 의미가 있을 까?` 라는 의견이 분분 했지만, 결국 평가에 들어가는 내용이다 보니 다들 솔직하게 쓰는 것 같았다. 나도 누군가를 리뷰/피.. 공감수 1 댓글수 3 2021. 6. 20.
  • HTML 꿀팁 원본 글: 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 태그 음....... 공감수 1 댓글수 0 2021. 6. 6.
  • 기-개-디 토이프로젝트 협업기 - 맛집 리뷰 서비스 장장 4개월에 걸친 토이프로젝트가 드디어 끝났습니다. 4월 말 오픈 예정이었으나, 역시 사람일은 알 수 없기 때문에... 각자의 업무가 일단 중요하니깐... 연애도 해야하고... 서비스 한 개를 만들면서 개발 플로우를 경험하고자 홀로 도전하게 되었습니다. 프론트엔드부터 백엔드, 데브옵스까지 많은 회사 동료분들께 도움을 받아서 감사의 말씀 먼저 올립니다. 초기 시작은 간단해 보였습니다.(이렇게 큰 거인 줄 그땐 몰랐지...) 백엔드, AWS 쪽을 도전하는 것이었기 때문에, 프론트엔드는 익숙한 Vue.js를 이용했습니다. 프론트엔드 모바일 전용으로 만들었으며, PWA도 생각해서 서비스 워커를 붙였습니다. 타입 스크립트 적용과 sentry를 붙여서 오류도 클라이언트 쪽에서 로깅할 수 있도록 설정했습니다. 카카.. 공감수 5 댓글수 0 2021. 6. 6.
  • 로그인 프로세스 개선 - Axios 통신 한줄기로 만들기 회사 기술 블로그에 출간했습니다...! 첨부 https://dealicious-inc.github.io/2021/05/17/axios-integrate.html Axios 통신 한줄기로 만들기 로그인 프로세스 개선 dealicious-inc.github.io 공감수 0 댓글수 0 2021. 5. 31.
  • API 서버 빠르게 구현하기 - strapi 튜토리얼 서버를 구성하지도, 백엔드 로직을 직접 짜지 않아도 백엔드 개발을 쉽게 도와주는 strapi라는 프레임워크가 있다는 것을 듣고 바로 찾아봤습니다. strapi는 엄청 복잡한 로직이 아니라면 간단한 CRUD는 금방 뚝딱 나와서 백엔드에 시간을 많이 안 쏟아도 되는 장점이 있습니다. strapi 문서에서는 opensource headless CMS라고 하며, 로컬에 띄워서 버튼 몇 번 클릭으로 테이블을 만들 수 있습니다. 튜토리얼 문서 1. 설치 CLI CLI 로 설치하려니깐 무슨... access denied 가 계속 뜨면서 설치가 안돼서 실패했습니다... Node, npm 버전만 맞추면 되는 줄 알았는데 그게 아닌가 봅니다... sudo를 통해서 권한까지 주면서 했는데 실패 ... ! 다른 설치 방법도 .. 공감수 1 댓글수 0 2021. 5. 9.
  • 이미지 업로드 - 프론트 부터 AWS S3 까지의 과정 사용자가 이미지를 선택할 때부터 백엔드 API, AWS S3로 들어가는 과정입니다. 토이 프로젝트에서 진행중인, 리뷰 등록하는 것을 보여드리면서 설명하겠습니다. 기술 스텍: Vue.js, Node.js, AWS S3, MYSQL 보통 파일 선택하는 input type=file 은 전혀 이쁘지 않아서 디자인을 입힙니다. 그래서 그 아이는 display: none 하고, 이쁜 디자인을 만들어서 누르면 input file이 열리도록 코딩합니다. 디자인된 이미지를 누르면 숨겨진 input이 클릭되도록 합니다. 이미지가 선택되면 changeFile 이벤트를 통해서 preview 이미지를 만들고, 서버에 보낼 이미지 데이터를 갖고 있으면 됩니다. // 파일 이름 const imgName = ref(''); // 파.. 공감수 2 댓글수 0 2021. 4. 25.
  • Typescript - 이넘(enum)에 대하여 정리글 자바스크립트에 없던 enum이 타입스크립트에 나왔다. 쓰는 방법도 쉽고, 기능도 간단한데 개인적으로 잘 사용하지 않는다. 굳이 enum이란 애를 써서 나열 하지 않아도 object로 선언해서 사용하는 것이 편하기 때문에 잘 사용하지 않았던 것 같다. 어디에 사용해야 하는지, 왜 좋은건지 잘 감이 안잡혀서 리서치를 했다. TypeScript에서 ENUM을 사용하는 이유는 무엇입니까? TypeScript enum을 사용하는 이유 [Typescript] enum을 써야 할 때, union type을 써야할 때 Typescript Enum이란? 여러가지 enum의 형태 [Typescript] Enums 열거형 interface, type, enum에 관한 글 [TypeScript TIPS] Interface 를.. 공감수 1 댓글수 0 2021. 4. 10.
  • 2021년 상반기 토이 프로젝트 시작 - 회사 주변 맛집 리뷰 토이 프로젝트 소개 주니어 개발자, 주니어 기획자(꼬꼬마 기획자), 주니어 디자이너(꼬꼬마 디자이너) 세명이 모여서 프로젝트를 시작했다. 회사 근방 음식점 중 팀원들이 추천한 맛집 리스트를 확인하고 해당 음식점에서 식사 후 솔직한 리뷰를 작성해서 공유하는 서비스 중간 진행 사항 토이 프로젝트 목적 한 번쯤은 전체적인 프로젝트 플로우를 경험해보고 싶다. AWS Lambda를 이용해서 API를 구축해보고 싶다. MySQL을 사용하고, 쿼리도 한번 짜 보고 싶다. (조인 한 번도 안 해봤...) 프론트 개발 Vue.js 프레임 워크를 사용했다. 목적이 전체적인 프로젝트 플로우를 경험하고 싶고, 프로젝트 일정 상 프론트는 빠르게 개발하고 백엔드 쪽에 시간을 대부분 투자할 것 같아서 계속 사용했던 Vue.js를 .. 공감수 4 댓글수 0 2021. 3. 21.
  • Node.js - AWS Lambda 용량 줄이기(Layer를 사용하자) Vue.js + AWS Lambda 이용해서 Serverless로 구성하는 꽤나 야심찬 토이 프로젝트를 하고 있습니다(이번엔 기획자도 있습니다). 회사에서 개발용 + 장난감용? 으로 만들어준 공간이 있어서 열심히 가지고 놀고 있던 도중, 배포하는데 어느 순간 배포가 안 되는 오류가 발생했습니다. 오류는 워낙 자주 발생 했어서(Lambda 만지는데 오류가 너무 잦았어서...) 찾아보니 Lambda 코드 스토리지 용량이 초과해서 배포가 안 되는 것을 확인했습니다...... 처음에는 데브옵스분께 용량을 늘려달라고 요청할까 했는데, 뭔가 느낌이 싸~ 한게 제가 잘못 막 가지고 놀아서 그런 것 같았습니다. AWS 콘솔에 들어가서 확인해보는데, 함수 각각의 크기가 너무 큰 것을 확인 했습니다. 다른 함수들은(백엔드.. 공감수 2 댓글수 0 2021. 2. 28.
  • 웹 버전 관리 시스템 웹 버전 관리 시스템 만든 이유는 단 한 가지입니다. 사용자가 이전 버전의 API 규격, 데이터 타입으로 호출해서 오류가 생기기 시작 웹 서비스 배포 후, 사용자가 이전 버전의 웹을 보고 있어서 이슈 발생하는 것을 감지했습니다. 딱 담당하고 있던 프로젝트 두 개에서 같은 이유로 이슈가 발생해서 해결해야 한다고 생각했습니다. 우선 원인은 SPA 특성 때문에 발생한 이슈였습니다. 생각지 못한 곳에서 나타났는데, SPA의 장단점은 여러 가지 있지만 그중 크게 중요하지 않게 생각 한 문장이 있습니다. 처음 접속했을 때 웹에 필요한 대부분의 리소스를 다운로드하기 때문에 초기 로딩 속도가 느리다. 하지만 그 후 필요한 리소스만 다운로드하기 때문에 빠른 렌더링이 가능하다. "초기 로딩 속도가 느리다"라는 것만 이슈하.. 공감수 1 댓글수 0 2021. 2. 17.
  • javascript - JWT 로그인 및 세션 유지 이전 포스팅과 이어집니다. 광고 보고 가시겠습니다. 목표 1. Access Token을 이용한 API 통신 2. Refresh Token을 이용한 Access Token 갱신 3. 사용자 모르게 토큰 갱신 후 API 호출 아래와 같은 Flow로 사용자에게 세션이 끊켰다는것을 모르게 데이터를 보여줄 것입니다. 준비 front - Vue 만든거 열기 back - API 서버 열기 docker - 만들어둔 컨네이너 시작해서 DB 열기 Git - github.com/DinnerKang/study_vue/tree/master/todo-list Docker - kdinner.tistory.com/99?category=312484 Login API 입니다. 사용자는 로그인을 해서 토큰을 얻어왔습니다. 토큰을 쿠키에 .. 공감수 1 댓글수 0 2021. 2. 7.
  • Docker에 MySQL 설정해서 회원가입, 로그인 하기 이전 포스팅과 이어집니다. 목표 도커를 이용해서 MySQL 설치 후 사용 예정 회원가입한 사용자 데이터를 MySQL에 저장 로그인 시 JWT 토큰 저장 이전에 비슷한 포스팅을 한 적이 있습니다. - window는 여기 참고하시면 됩니다. 이번 포스팅에서는 DBeaver라는 데이터베이스 관리 도구 사용하겠습니다. Mac에 도커가 설치되어있다고 가정하겠습니다. mysql pull 받기 docker pull 이미지이름 mysql 이미지 확인 docker images 도커 컨테이너 생성 및 실행 docker run -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=password --name dinner-mysql -v /Users/dinner/sql:/var/lib/mysql mysql -.. 공감수 1 댓글수 0 2021. 1. 24.
  • javascript - 간단한 JWT 로그인 로직 만들기 Vue.js + Express.js를 이용하여 로그인 로직 만들기 Front - Vue.js (localhost:8080) Back - Express.js (localhost:5000) (코드: github.com/DinnerKang/study_vue/tree/master/todo-list) front, back 코드는 현재 로컬에서 실행 중입니다. 서로 통신을 하기 위해서 기본 설정을 해줘야 합니다. Front - axios baseURL 설정 axios.defaults.baseURL = 'http://localhost:5000'; Back- cors 설정 const express = require('express'); const cors = require('cors'); const app = expr.. 공감수 0 댓글수 0 2021. 1. 10.
  • 주니어 개발자의 2020년 하반기 회고록 상반기 회고록을 작성했으니, 당연히 하반기 회고록도 작성해서 한 해의 마무리를 잘하고 싶었다. 특히 상반기 회고록을 재미있게 봤다는 피드백을 많이 받아서, 더욱 잘 써보려고 한다. 보통 연말에는 사람들 만나고, 술 먹느라 시간을 많이 쓰기 때문에 회고록을 늦게 작성할 것 같았는데, 코로나 덕? 분에 집에 있는 시간이 많아져서 자연스럽게 글을 쓰고 있다. (코로나 때문에 회사에서 송년회도 못했다... 작년에 재미있었는데...) 1. 회사 코로나라서 특별한 이벤트 없이 일만 한 것 같았는데 되돌이켜보니 다양한 일이 있었다. (이래서 회고를 하는 것 같다.) 1-1. 광고 서비스 하반기 내내 새로운 광고 서비스를 오픈하는 규모가 큰 프로젝트에 합류해서 진행했다. 배경을 잠깐 소개하자면, 광고 관련 서비스를 전.. 공감수 7 댓글수 0 2020. 12. 20.
  • javascript - 네이버 로그인 with Vue.js 목표 Vue.js를 이용하여 네이버 로그인 네이버 AccessToken 가져오기(RefreshToken은 제공 안 한다고 함) AccessToken을 이용해서 네이버 API 사용하기 준비물 네이버 어플리케이션 등록 clientId, callbackUrl 값이 필요합니다. 네이버 API 설명서 1. index.html에 아래 코드 삽입 (Naver SDK) 2. DOM이 mount 된 후에 실행될 수 있도록 로직을 짜줍니다. LoginNaver.vue login.js const naverService = () => { const naverLogin = new window.naver.LoginWithNaverId({ clientId: "a0K------------Xfk", callbackUrl: "http:.. 공감수 4 댓글수 4 2020. 11. 13.
  • javascript - firebase, google 로그인 with Vue.js 목표 Vue.js를 이용하여 firebase, google 로그인 google AccessToken, RefreshToken 가져오기 Firebase 1. Firebase 프로젝트 설정에서 Google 로그인 사용 설정을 허용합니다. 2. Firebase SDK 설치 (현재 8.0.0 버전) npm install --save firebase 3. Firebase 세팅 (firebase.google.com/docs/auth/web/google-signin) Vue 컴포넌트가 생성 될 때 firebase 초기화 후 로그인 이벤트 설정해줍니다. Google 1. 아래 구글 개발자 콘솔에서 프로젝트 생성 및 OAuth 2.0 클라이언트 ID를 얻습니다. console.developers.google.com/ 2.. 공감수 2 댓글수 2 2020. 11. 5.
  • javascript - 카카오 로그인 with Vue.js 목표 Vue.js를 이용하여 카카오 로그인 카카오 AccessToken, RefreshToken 가져오기 유저 정보 가져오기 준비물 developers.kakao.com/ REST API 키 Javascript 키 Admin 키 Flow 인증 코드 요청 (javascript SDK) 받은 인증 코드를 이용하여 토큰 요청 (REST API) 받은 토큰을 이용하여 계정 정보 요청 (javascript SDK) (코드: github.com/DinnerKang/study_vue/tree/master/todo-list) 카카오 로그인 1. index.html 에 아래 코드 삽입 (카카오 javascript SDK) 2. kakao javascript 키 설정 - main.js window.Kakao.init('1.. 공감수 6 댓글수 20 2020. 10. 23.
문의안내
  • 티스토리
  • 로그인
  • 고객센터

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

© Kakao Corp.