프론트엔드 썸네일형 리스트형 Junction Asia 2023 해커톤 참가/수상 후기 참가 배경작년에 참가한 Junction Asia 2022의 경험이 좋았어서 이번에도 참가하기로 했다.(Junction Asia 2022 참가 후기)카이스트 SPARCS 해커톤에 참가했던 4명의 팀원들과 새로운 디자이너 1명과 함께 팀을 구성하게 되었다.(SPARCS 참가 후기)준비 과정Junction은 SPARCS 해커톤과 달리 주제를 사전에 알려주지 않기 때문에 미리 준비할 것은 없었다.다같이 모여 가볍게 인사를 나누고 5개의 Track Partners 기업이 어떤 프로덕트를 서비스하고 있는지, 그렇다면 어떤 주제가 나올 수 있을지 예상해보는 시간을 가졌다.(이번에도 역시 큰 도움은 되지 않았다😅)팀이름을 미리 정했는데, 5명 모두 같은 학교라 교목인 zelkova(느티나무)로 했다.Day 1당일 저.. 더보기 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명이서 팀 지원을 하고 백엔드는 개인 참가자 중 선택하기로.. 더보기 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.. 더보기 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의 'API 및 서.. 더보기 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/Chapter08/ADR.. 더보기 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 다음
