ALL 썸네일형 리스트형 📌 대외 활동/2310~ NGO 웹개발 유지보수 봉사 Apps Script로 엑셀 데이터와 Google Groups 자동화하기 (2) OAuth 2.0 서비스 계정으로 Google API에 액세스 하기 위해서 OAuth 2.0을 구현하여 액세스 토큰을 발급받아야 한다. 아래 링크인 독스에서도 나와있지만 코드를 직접 작성하는 것보다 라이브러리 사용을 추천한다. https://developers.google.com/identity/protocols/oauth2/web-server?hl=ko#authorization-errors-redirect-uri-mismatch 웹 서버 애플리케이션용 OAuth 2.0 사용 | Authorization | Google for Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 웹 서버 애플리케이션용 OAuth 2.0 사용 컬렉션을 사.. 📌 대외 활동/2310~ NGO 웹개발 유지보수 봉사 Apps Script로 엑셀 데이터와 Google Groups 자동화하기 (1) 요즘 NGO에서 웹 개발 봉사활동가로 참여하고 있는데(여건이 되는 한 계속 할 예정), 어느날 아래와 같은 부탁을 받았다. Apps script는 처음 써 봐서 삽질을 많이 했지만, 결국 해결되었고 비슷한 상황에 처한 분들께는 도움이 될 수 있을 것 같아서 흐름도 간단히 정리할 겸 블로그에 작성해본다. 구현 기능 1. 엑셀 스프레드 시트에서 수정한 데이터를 구글 그룹스로 동기화 2. 반대로 구글 그룹스에서 수정된 데이터를 엑셀 스프레드 시트로 동기화 구현 화면 엑셀 시트에 버튼을 만들어서 양방향으로 동기화를 시킬 수 있도록 했다. 그룹스 -> 엑셀 : 그룹스의 회원 목록을 엑셀 시트로 불러오기 엑셀 -> 그룹스 : 엑셀 스프레드 시트에서 신규 회원 추가, 기존 회원 삭제, 기존 회원 정보 수정(역할) 후.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [CI/CD] lint-staged, husky로 린트 검사 자동화하기 (+Jest test) 로컬에서 commit 또는 원격 레포지토리로 push하기 전에 린트 검사를 자동화하는 시스템을 구축해보았다. 개념 정리 Git Hook이란? git commit 또는 push 등의 git 이벤트가 일어나기 전에 특정 스크립트를 실행하여 린트 검사를 해주고 싶다면 Git Hook은 Git 저장소에서 발생하는 이벤트에 대응하여 특정 작업을 실행할 수 있는 스크립트이다. 종류에는 'pre-commit'(커밋 전), 'pre-push'(푸쉬 전), 'post-commit'(커밋 후)가 있다. git 이벤트 사이에 갈고리(hook)을 걸어준다는 의미 코드를 커밋하기 전에 코드 검사, 유닛 테스트 실행 등 스크립트를 실행할 수 있다. Git Hook을 관리하고 실행하는 것과 관련된 라이브러리에는 husky가 있다... 📌 PROJECT/2307 제로힙 : 가계부 SNS [Next.js 13] SSR로 동적 meta태그 생성하기 (pages router) [ 상황 ] - /user/profile/[userId] -> 동적 라우팅으로 특정한 유저의 페이지로 접속하는 상황 - 유저 페이지 자체는 유저가 쓴 게시글 페이지보다는 SEO 중요도는 다소 떨어지지만, 추후 확장을 위해 이미 개발해둔 동적 페이지에서 기능을 구현 - 마이 페이지와 유저 페이지는 한 컴포넌트를 공유하여 사용 (전역에 저장된 나의 loginId와 동적 라우팅으로 접속한 페이지에서 params로 추출한 userId를 비교하여 분기 처리) [ 개발 환경 ] - nextjs는 pages router 구조로 개발 중이며 데이터 요청은 Tanstack-Query를 사용합니다. - 관련 포스팅 : [Next.js 13] SSR로 동적 meta태그 생성하기 (app router) 구현 기능 마이 페이.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [react-typist] React 18 이상에서 호환 안 되는 문제 라이브러리 이슈 react-typist로 타이핑 애니메이션을 만족스럽게 구현한 직후, 콘솔창에서 아래와 같은 노란 경고창을 확인했다. Warning: componentWillReceiveProps has been renamed, and is not recommened for use ... 문제는 위의 라이브러리가 React 18에서 의도한 기능 구현이 제대로 되지 않는 것이었고, 역시나 해당 라이브러리 깃헙 이슈에도 관련 내용이 이미 2022년부터 있었다. 흐름을 보니 더 이상 업데이트가 활발하게 진행되지 않아 모인 유저들은 다 각기 다른 라이브러리를 찾아 떠나는 중이었다.. ㅋㅋ 라이브러리 교체 이후 나도 어느정도 검증되어 있는 또 다른 라이브러리인 React Simple Typewriter로 라이브러.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [react-i18next] 다국어 처리(한/영) 및 글자 강조 스타일링하기 다국적 언어 지원 기능 구현 아래와 같이 react-i18next 라이브러리를 사용하여 한/영 언어 지원이 되는 사이트를 만들어보았다. 구현 화면 적용 방법은 어렵지 않고 공식 문서 보고 그대로 따라하면 된다. 특히 주의해야 할 점은 App router 방식이 완전 다르게 구현이 되기 때문에 레퍼런스를 볼 때 꼭 확인을 해야 한다. 즉, next-i18next는 app 라우터에서는 사용되지 않는다. 1. 라이브러리 설치 pnpm add i18next react-i18next i18next-resources-to-backend accept-language 2. 폴더 구조 및 파일 └── app └── [lng] ├── second-page | └── page.js ├── layout.js └── page... 📌 PROJECT/2309 다국어 지원 포트폴리오 [Stylelint] scss 일관적인 스타일 규칙 적용시키기 Nextjs(13.5.2) App router에서의 적용기입니다. stylelint란? css, scss와 같은 스타일에 규칙을 정의할 수 있는 lint로 아래와 같은 장점이 있다. 스타일 오류를 방지 일관적인 스타일 규칙 적용 (플러그인으로 규칙 커스텀 가능) 스타일 단위 테스트 지원 특히 나의 경우에는 eslint에서 import 순서를 일관적으로 정렬하는 것처럼 css 속성 역시 일관적으로 정렬해주는 것이 굉장히 만족스러웠다. (예를 들면 position 관련 속성은 제일 위로 정렬이 된다.) SCSS로 설정하기 우선 아래와 같이 패키지를 설치했다. stylelint-config-prettier-scss : prettier와 충돌되는 stylelint SCSS 규칙을 비활성화 "stylelint":.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [JEST] next-router-mock으로 next/link 테스트 (버그 issue 진행 중) 요즘 이슈가 생기면 제일 먼저 확인해보는 곳이 해당 깃헙에 들어가서 이슈 검색을 해보는 것이다. 특히, nextjs13 같은 경우에는 블로그 등 최신 이슈 관련하여 올라온 자료들이 거의 없을 때도 있어서 우선 관련 깃헙에 들어가보면 stackoverflow보다도 더 빠르게 찾을 수 있다! 오늘도 다시 한 번 되새기자 나는 혼자가 아니야! 문제 상황 테스트하고자 했던 상황은 간단했다. 바로 nav 바의 'dots'를 누르면 '/dots' 링크로 이동하는 지 jest(v29.7.0)로 테스트 하는 것! import Link from 'next/link'; // import한 상수 -> const navMenus = ['roadmap', 'dots']; import { navMenus } from '@/con.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [JEST] react-i18next 테스트하기 해당 프로젝트에서 reaxt-i18next를 사용하여 아래와 같이 한/영 변환 기능을 적용하였다. 초기 기능 적용 모습 따라서 이와 관련하여 nextjs app router에서 테스트 코드를 작성해보았다. jest.setup.ts import '@testing-library/jest-dom'; // 아래 내용 추가 (useTranslation 훅 등 목업) jest.mock('react-i18next', () => ({ useTranslation: () => { return { t: (str: string) => { return str; }, i18n: { changeLanguage: () => new Promise(() => {}), }, }; }, initReactI18next: { type: '3r.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [JEST] 설정 및 스냅샷 테스트 Next.js에서 상황에 따라 선호되는 테스트 라이브러리/프레임워크는 아래와 같다. Jest : 유닛 테스트 유닛테스트란? : 소스코드의 특정 모듈(메서드)이 의도된 대로 정확히 작동하는지 검증하는 절차 하나의 기능을 독립적으로 테스트하면서 개발 단계에서 일찍 버그를 발견하여 시간을 절약하고 코드 퀄리티를 향상시켜줌 컴포넌트, 함수, 모듈 단위로 테스트함으로서 각 코드가 원활하게 작동하고 있음을 확인 React-Testing-Library : 리액트 컴포넌트를 독립적으로 테스트 예시 ) 컴포넌트 테스팅 (Component Testing) 특정한 props에 따라 컴포넌트가 에러없이 렌더링 되는가? 과거의 렌더링 결과와 현재 렌더링 한 결과가 일치하는가? 특정한 DOM 이벤트의 원하는 변화가 제대로 발생하.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 4주차(데모데이) KPT : 최선의 선빵 - 지옥의 CORS 들어가며 프론트 withCredentials: true 적용된 상태 백엔드 https://zerohip.co.kr/ 혹은 https://www.zerohip.co.kr/ 에 접속하면 vercel uri를 프록시하고, 해당 uri에서 api.zerohip.co.kr/request uri로 요청을 보내면 해당 uri따라서 http://localhost:8080으로 프록시해서 웹 서버 내부의 로직 수행. https://zerohip.co.kr/ : 인증서 적용 https://www.zerohip.co.kr/ & https://api.zerohip.co.kr/ : 와일드카드 인증서 적용 클라이언트랑 서버통신은 https , 서버내부통신 http 리버스 프록시 사용 상태 지옥의 CORS 좌절, 희망 그리고.. 좌.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 3주차 KPT : 기승전결의 ‘전’ 이번 주를 되돌아보면 참 다사다난 했던 일주일이었다. 너무 바쁜 나머지 1, 2주차처럼 회고를 틈틈이 작성할 틈도, 여유도 결코 없었다. 모든 일이 잘 해결된 지금의 시점에서 시원한 보리차를 마시며 한 주를 조금이나마 되돌아본다. 🐱 우리는 현재 가장 힘든 마지막 언덕을 오르고 있다. 그 말을 다르게 하면, 정상 역시 거의 코 앞에 있다는 것이다.. 기승전결의 ‘전’ 배포가 안 된다 가장 큰 고민은 배포가 안 되는 것이었다. 그래서 백엔드 분들과 밤을 새며, 배포에 대한 과정을 함께 하기도 했고 아서 멘토님이 보실 수 있는 에러 공유 채널에 글을 올리기도 했다. (아래는 잠을 주무시지 않고 배포에 매달리셨던 백엔드 팀원 분들..) 걱정을 잘 안 하는 성격이라 일단 해결 방법은 찾을 것이고 해결은 되겠지,.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 2주차 KPT : 나는 혼자가 아니다 1. 혼자 가면 빠를 순 있다. 1주차 회고에서 깨달음을 얻었음에도 불구하고, 인간은 역시 망각의 동물인가 갑자기 변하기는 쉽지가 않다. 이유는 아래와 같다. 발단 내가 맡은 페이지는 피그마에서 미처 만들어두지 않은 페이지(회원 탈퇴 등..)였다. 늘 극한의 효율을 추구해왔던 나는, 무에서 유를 창조하는 디자인을 하면서 공통된 디자인도 그렇고, 정말 사소한 요소들(회색 글자를 hover했을 때 글자 색)에 대해 정말 아무런 고민도 없이 휘리릭 CSS 처리를 해버렸다. 주말에 작업해서 팀원들을 호출하기 미안한 것도 있었으나, 그렇게 하는 것이 일처리에 있어서 효율적이었던 것도 있었다. (물론 피그마 작업에 인터렉티브 효과까지 있었으면 기획 단계에서 논의가 다 끝나는 문제였겠지만 아쉽게도 우리는 그렇게까지는.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 1주차 KPT : 모두가 같은 마음일 수는 없다. 그리고.. 모두가 같은 마음일 수는 없어, 그건 당연해. 직장을 다니기는 했지만 커뮤니케이션 적으로 문제가 생긴 적은 단 한 번도 없었다. 학교에서는 각자의 업무가 별개여서 안내만 하면 되는 것이었고 보통은 그 업무에 대한 것은 업무 담당자가 가장 잘 알기에 관리직을 제외하고는 말을 얹을 이유가 없는 부분이었다. 특히 나의 경우, 정보 부장을 맡았을 때도 사실 정보부엔 나 혼자(ㅋㅠㅠ)였기 때문에 내가 정보부의 대소사를 결정하고, 사업 신청하고, 예산 집행하고, 시스템을 구축하여 회의 시간에 통보만 하면 되는 문제였다. 하지만, 본격적으로 팀 프로젝트를 하면서 같은 장소, 다른 마음, 각자의 전문성을 가진 사람들과 협업하여 하나의 방향을 잡고 하나의 결과를 만들어야 하는 것은 정말 쉽지 않은 부분이라는 생각이 들었.. 📌 PROJECT/2307 제로힙 : 가계부 SNS Next.js : npx next start npx next start npx next start CLI는 Next.js 애플리케이션이 프로덕션 모드로 시작할 수 있게 하는 명령어다. Next.js 프로젝트에서 해당 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾으면 아래와 같다. 즉, npx next start를 실행했을 때 어떤 코드가 작동하는 지를 찾아보려고 한다. 찾아가는 과정 사실 npm run start? yarn start 와 같이 프로덕션 모드로 시작하게 해주는 Next.js 스크립트를 먼저 찾아야 했다. 따라서 가장 기본 문서인 getting-started의 installation에서 start와 관련한 설명을 찾았다. next.js/docs/01-getting-started/01-installa.. 📌 PROJECT/2307 제로힙 : 가계부 SNS [기획 단계] 프론트엔드 기술 스택 최종 선정 및 이유 프로젝트에 본격적으로 들어가기 전에, 어떤 기술 스택을 사용해야 하는가? 그리고 왜 사용해야 하는가? 에 대해 팀 차원에서의 자료 조사 및 (필요한 경우) 블로그 포스팅 후 최종 회의를 진행했고 결정된 스택들은 아래와 같다. 프론트엔드 사용 기술 스택 ⬆️ 기술스택 3D 관계도 제작 정보 포스팅 패키지 매니저 npm 선택한 이유 : 우선 패키지 매니저의 경우, 성능을 고려한다면 pnpm이나 현재 팀 구성원의 기술 숙련도를 고려하여 기존에 사용한 npm으로 선정하게 되었다. (다음 프로젝트에서는 꼭 pnpm을 사용하고 싶다!) 비교 과정 요약 : yarn berry : 직접 의존하고 있지 않은 모듈을 require()하는 유령 의존성에 관한 문제를 해결하기 위한 Plug'n'Play(PnP)라는 새로운 패.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 기술 스택 선정 고민 : Vite vs Next.js 앞서 포스팅한 번들러 스택 선정 고민에서 내린 결론은 아래와 같았다. 즉, 우리 프로젝트에서 서버 사이드 렌더링(SSR)이 더 효율적이라면 Next.js를, 클라이언트 사이드 렌더링(CSR)이 더 효과적이라면 Vite를 쓰는 것이다. 하지만, 이와 같은 단편적인 이유 뿐만 아니라 종합적인 pros and cons를 비교하기 위해 포스팅을 하며 개념을 정리해보고자 한다. CRA와 Vite CRA (과거 공식 문서 참고) Create-React-App(이하 CRA)는 React 애플리케이션을 쉽고 빠르게 생성하기 위한 공식적이었던(과거형) 툴체인이다. 프로젝트 구성, 개발 서버, 번들링 등을 사전 구성하여 별도의 설정 없이 React 애플리케이션을 시작할 수 있도록 해준다. 즉, 프론트엔드 빌드 파이프라인을.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 기술 스택 선정 고민 : 번들러 부제 : 스스로 불러들인 재앙 발단 : 본격적으로 메인 프로젝트에 들어가기 전에 프론트엔드 팀원들과 스택 선정에 대해 심도깊은 논의를 해보고 싶었다. 전개 : '일단 저지르고 보는 파'인 나는 팀원들에게 아래와 같은 제안을 하였다. 절정 : 역시 사랑스러운 우리 팀원들은 흔쾌히 오케이! 를 외쳐주셨다. 하지만, 5번과 6번의 개념은 나와 같이 너무나 생소한 분야라고 하시는 것 같아 잽싸게 '제가 할게요' 찬스를 썼다. 결말 : 따라서 머리를 싸매며 '번들러'와 '빌드' 등과의 개념과 열심히 맞서 싸우며 정보의 바다를 헤엄치는 중이다. 하지만, 결론적으로는 프로젝트에 들어가기 전에 꼭 필요한 개념이다! 빌드란? 빌드는 배포를 하기위한 선행과정으로 작성한 코드와 애플리케이션이 사용하는 이미지, css등을 모.. 📌 PROJECT/2307 제로힙 : 가계부 SNS [기획 단계] 제로힙 프로젝트 기획서 작성 기획서 검토 회의 드디어 메인 프로젝트가 시작되었다! 우리 팀 같은 경우에는, 프론트엔드는 미리 다 스카웃이 된 상태였고 백엔드 팀원만 구하면 됐었다. 프리 프로젝트 회고 때 만난 분들 등 웬만한 분들께 제의를 드려보았지만 이미 팀이 구성되어 있는 상황이었고, 팀 빌딩 시간 때 열심히 홍보를 해서 백엔드 분 3명을 모집할 수 있었다. 기획과 문서 작업, 사용 스택 등은 이미 어느 정도 정리된 상태였기 때문에, 팀 모집 역시 작성된 기획서를 위주로 홍보를 했고, 그렇게 결성된 팀의 첫 회의 주제는 '기획서 검토하기'였다. [노션] '기획서 검토' 회의 기록 보러가기 -> 해당 기획서를 같이 검토하며, 기술적인 구현 부분이나 더 수정/보완 등 아이디어를 정교화하는 작업을 진행했다. 노션을 활용한 검토 아래와.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) 5일 간의 솔로 프로젝트 마무리 : KPT 회고 Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. ⬆︎ 이전 1 2 3 4 5 ··· 12 다음
