전체 글 썸네일형 리스트형 Next.js 시작하기 인프런(inflearn) 강의 할인 쿠폰 Next.js 기초를 알려주는 인프런(inflearn) 강의의 링크와 할인 쿠폰을 첨부합니다. 강의 링크: https://inf.run/u46D Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런 www.inflearn.com 쿠폰 번호: 15848-7a600076632d 쿠폰을 사용하면 44,000 -> 29,900원으로 수강이 가능합니다.(100회까지 이용 가능하도록 설정되어있습니다.) 아래의 10가지 개념을 학습할 수 있습니다. 매장 지도 서비스를 만들며 배우는 Next.js API 10가지 Point ✅ next/link로 지도 페이지/피드백 페이.. 더보기 카이스트 SPARCS 2023 StartUp Hackathon 준우승 수상 후기 참가 과정과 팀 빌딩 같이 동아리 활동도 하고 수업도 들었던 후배가 해커톤에 함께 나가자고 연락이 왔다. 기획과 디자인이 가능한 2명, 디자인과 프론트가 가능한 1명 있어서 나와 백엔드 개발자 한 명을 추가로 넣고 싶다고 했다. 1월에 일정이 많아 걱정 되었지만 해커톤에 대해 궁금해서 일단 사이트에 방문해보았다. https://hackathon.sparcs.org/ SPARCS 2023 StartUp Hackathon 우리의 생각이 한계까지 함께하는 곳, SPARCS 2023 StartUp Hackathon hackathon.sparcs.org 장소도 서울이고 상금 규모도 있고, 재미있게 몰입하여 개발할 수 있을 것 같아 참가하기로 했다. 우선 4명이서 팀 지원을 하고 백엔드는 개인 참가자 중 선택하기로.. 더보기 css style tag(rule) 복사하기 키워드: clone css, cloneNode, insertRule, cssText, emotion, CSSOM 상황 @emotion 라이브러리가 만들어주는 style tag를 복사하는 작업을 하고자한다. 해결 과정 emotion이 만든 style tag는 'data-emotion' attribute를 갖고 있음을 확인했다. 따라서 style tag 중, data-emotion 속성을 가진 tag를 복사하면 될 것이다. const emotionStyleTags = Array.prototype.filter.call(document.getElementsByTagName('style'), (style) => style.hasAttribute('data-emotion'), ) const emotionStyleT.. 더보기 Pagination Component를 선언형으로 구현하기 키워드: 선언형 프로그래밍, Pagination, React 상황 팀원이 개발한 Pagination UI 로직이 절차형으로 되어있었다. 코드를 이해하기 어렵고 유지보수가 힘들어질거란 걱정이 들어 코드를 선언형으로 리팩토링하고자 한다. 아래는 기존 코드의 예시이다. (코드의 일부이기 때문에 이해가 되진 않을 것이다.) ... const searchSiblings = (page: number, dist: number) => { const left = page - dist; const right = page + dist; if (right >= MAX_PAGE && left = _pagerCount) { return; } } if (left > MIN_PAGE) { leftSiblings.push(left.. 더보기 Google Calendar API로 공휴일 연동하기 키워드: google calendar API, Public Holidays 상황 클라이언트에서 국가공휴일 정보가 필요하다. 자동화를 위해 코드에 하드코딩하지 않고 구글 캘린더 API를 통해 공휴일 정보를 얻고자한다. 해결 과정 구글 캘린더에 기본적으로 있는 한국 공휴일 캘린더 정보를 API로 불러올 수 있는지 확인한다. 기본 제공되는 'Holidays in South Korea(한국의 공휴일)'을 사용하면 되는 듯하다. 만약 공휴일 캘린더가 보이지 않는다면, 캘린더 설정 메뉴에서 Holidays in South Korea 캘린더를 추가하면 된다. Google API를 사용하기 위해선 Google Cloud Platform(GCP)에서 API key를 발급받아야한다. google cloud console의.. 더보기 mailjet으로 mail Template UI 구성하기 키워드: mailjet, transactional template, Template Language, HTML block 상황 사용자에게 서비스의 진행 상황(ex> 배송 상태)을 이메일로 알려주고자 한다. 서비스의 안정성과 편의성을 위해 mailjet이라는 이메일 마케팅 플랫폼을 사용한다. 뉴스레터처럼 bulk user에게 같은 내용의 메일을 전송하는 것이 아니라, 사용자의 이름/진행 상태 등에 따라 custom email을 전송해야한다. 따라서 transaction email template을 사용하기로 한다. https://documentation.mailjet.com/hc/en-us/articles/360043174853-What-is-a-transactional-email- 서비스의 진행 상태에 .. 더보기 ADR 문서로 의사결정 기록하기 키워드: ADR, Architectural Decision Records 상황 과거 코드를 보다보면 왜 이 기술스택을 채택했는지 이해가 되지 않는 경우가 있다.(상태관리 방법, API 통신 방법 등) 새로 들어온 팀원들도 나에게 왜 이 기술스택을 채택했었는지 직접 묻는 경우가 종종 있다. 보통 git log를 뒤져보거나 코드의 로직을 살펴보는 과정에서 의문이 풀리지만, 잘못된 의사결정이었거나 당시에만 옳았던 방법이었을 경우 의문이 계속 풀리지 않는 경우가 생긴다. 해결 방법 '프레임워크 없는 프론트엔드 개발' 책의 내용에서 'ADR'에 관한 개념을 알게 되었다. https://github.com/Apress/frameworkless-front-end-development/blob/master/Chapte.. 더보기 map, area tag로 간단하게 페이지 개발하기 키워드: image map, map tag, area tag, image map generator 상황 구글의 뉴스레터를 보게 되었는데 페이지를 구성하는 방식이 특이했다. https://gpjedm.artique.co.kr/Google_40/Google_40.html HTML markup으로 각 텍스트를 적은 것이 아니라, 뉴스레터를 캡쳐한 듯한 이미지를 통째로 넣어두었다. 이미지이지만 하단에 있는 '지금 등록하기' 버튼은 잘 클릭이 되길래 어떻게 구현했는지 궁금했다. 개발자 도구를 확인해보니 img, map, area tag의 조합으로 구현한 것 같아 해당 태그들을 더 알아보기로 했다. 해결과정 MDN 문서로 map/area tag를 학습한다. https://developer.mozilla.org/ko.. 더보기 이전 1 2 3 4 ··· 8 다음
