본문 바로가기

전체 글166

Firebase Hosting 시 GitHub Actions 사용해서 CI/CD 구축하기 CI/CD란? CI (지속적 통합, Continuous Integration) 개발자들이 소스 코드 변경 사항을 깃에 푸시할 때마다 자동으로 코드 변경을 통합하고 테스트하는 프로세스 여러 개발자가 동시에 작업하는 프로젝트에서 코드 충돌을 방지하고, 코드 품질을 유지하며, 빠른 오류 검출을 가능하게 함 자동화된 빌드 및 테스트 작업 실행 ex) Jenkins, Travis CI, CircleCI, GitHub Actions CD (지속적 배포, Continuous Deployment) 소프트웨어 변경 사항을 자동으로 프로덕션 환경으로 배포하는 것 주요 이점 코드 품질 향상 개발 및 배포 속도 향상 신속한 오류 감지 반복 가능한 프로세스 GitHub Actions란? GitHub에서 제공하는 CI/CD 도구.. 2023. 9. 12.

[공유] 개인 업무 회고 템플릿 퇴사를 앞두고 현재까지 진행한 업무들에 대해 자체 회고를 진행해보던 중 템플릿을 직접 만들어봤다. 1. 업무 진행 - 내가 이 업무를 왜 진행하게 되었고, 그 과정, 그리고 결과를 기록하였다. 2. KPT - KPT 회고론은 유명해서 다들 알 것 같다. - 템플릿에는 KPT를 모두 넣었지만, 업무의 특성에 맞춰서 내용이 없거나 필요하지 않은 부분은 생략하고 기록하였다. 3. 인사이트 - 사실 이 부분이 핵심인 것 같다. - 기술적인 부분 외에도 빠짐없이 적었다. (ex. 의사소통, 갈등 관리 등) 혹시 필요하신 분이 계시다면 아래 링크로 들어가서 템플릿 복제해서 사용하시면 됩니다 :) https://maze-slouch-c9c.notion.site/cfdefed202104227a4be8961d7aac08.. 2023. 8. 15.

styled-components와 emotion에 대한 고찰 현재 근무 중인 곳에서 스타일 관련 라이브러리로 emotion을 사용하고 있다. (근데 또 styled-components도 일부 사용하고 있다.) 하지만 나는 이곳에 들어가기 전까지는 styled-components만 주로 사용했었기 때문에, 두 라이브러리의 차이점이 궁금했다. 왜냐하면 코드 상 크게 다른 점이 보이지 않았기 때문이었다. 동료 분께 질문했을 때 돌아온 답은 "emotion이 좀 더 가벼워서요~" 였었다. 그렇지만 다른 회사들 채용 공고 페이지에 적혀 있는 것을 보면, styled-component와 emotion을 각각 균등하게 사용하고 있는 것을 볼 수 있었다. 그래서 이 둘이 도대체 뭐가 다른 건지에 대해 알아보았다. 스타일 기능 및 문법 우선 전반적인 스타일 기능은 크게 다르지 않.. 2023. 8. 13.

[Next.js] Google Maps API로 지도에 원 그리기 (당근마켓 내 동네 설정 따라해보기) 당근마켓의 내 동네 설정 기능을 보면, 하단 바를 움직일 때마다 지도에 표시된 영역의 넓이와 지도 스케일이 변하는 것을 볼 수 있다. 당근마켓처럼 지역 특성에 맞추어 자세한 다각형으로 표현하는 것은 무리고, 지역별로 중심 좌표를 정하고, 이를 중심으로 한 원을 그리는 것을 한 번 해보기로 했다. 0. Google Maps API 키 받기 가입해서 키를 발급 받으면 된다. https://developers.google.com/maps?hl=ko Google Maps Platform | Google for Developers Google Maps Platform 설명 developers.google.com 1. 설치하기 Google Maps API Docs는 순수 javascript로 설명을 해주고 있기 때.. 2023. 6. 28.

[Next.js] 번역 기능 (다국어) 적용하기 (i18next) 한국에서 운영 중인 서비스를 향후 외국까지 확장한다면, 해당 국가의 언어 적용이 필요하다. 그럴때마다 모든 페이지의 텍스트를 일일히 바꾸는 것은 매우 비효율적이므로 next-i8next라는 모듈을 사용하기로 했다. 소스코드의 깃허브 리드미에 문서가 상세히 작성되어 있어 이를 참고하며 진행했다. https://github.com/i18next/next-i18next GitHub - i18next/next-i18next: The easiest way to translate your NextJs apps. The easiest way to translate your NextJs apps. Contribute to i18next/next-i18next development by creating an accoun.. 2023. 5. 16.

SyntaxError: Cannot use import statement outside a module ※ SyntaxError: Cannot use import statement outside a module redux를 사용하면서 여러 가지 모듈을 많이 쓰다 보니, 이 에러를 다소 많이 만났다. 이것은 default로 export 하지 않은 함수를 {}를 쓰지 않고 바로 내보낼 때 나오는 에러이다. 정리하자면, export 함수 로 모듈을 만들었으면 사용할 때 import { 함수 } from './경로' 이렇게 가져와야 하고, export default 함수 로 모듈을 만들었으면 사용할 때 import 함수 from '/경로' 이렇게 가져오면 된다 2023. 5. 10.

redux-persist로 localStorage 관리하기 현재 회사에서 redux를 새로 도입하는 과정에서 미리 공부하는 중에 구글링해서 찾아낸 글들과 챗지피티의 도움을 받으며 해보던 중에 그 과정을 정리하고 발생했던 에러와 해결 방법을 정리해보았다. redux-persist란? redux의 상태는 일시적이기 때문에, 브라우저를 새로고침하면 모든 상태값들이 초기화된다. 사용자가 새로고침할 때마다 값이 사라져버리면 상태 관리를 하는 의미가 없다. 이를 개선하기 위해, redux-persist라는 라이브러리를 사용하여 redux의 상태를 브라우저 내에 저장할 수 있다. 이 라이브러리는 redux store 값들을 영구 저장소에 저장하는 데 사용되는 라이브러리로, 브라우저를 새로고침하더라도 상태를 유지할 수 있게 된다. 현재 코드 상태 지금은 특별한 프로젝트가 아니.. 2023. 5. 10.

[Redux] Redux 사용해서 Counter 구현하기 (Next.js + TypeScript) 벨로퍼트와 함께하는 모던 리액트 문서를 따라하면서 redux 튜토리얼을 진행해보았다. 대부분의 redux 튜토리얼이 (이것도 마찬가지지만) React와 JavaScript 기반으로 진행되어 생각했던 것보다는 시간이 조금 걸렸다 (헤매느라....), 그래서 나도 앞으로 안 헤매고, 또 나처럼 Next Typescript Redux를 한 번에 배우는.. 시도하는 ... 사람들을 위해서 기록해본당. 0. 설치하기 1) next 프로젝트 생성 : npx create-next-app 플젝이름 --typescript 2) redux 설치 : npm install react-redux next-reddux-wrapper 3) redux-devtools 설치 : npm install react-devtools-exte.. 2023. 5. 8.

Next.js + TypeScript + Redux 시작하기 (+ redux-devtools 사용) 1. Next.js 프로젝트 생성하기 npx create-next-app 플젝이름 --typescript 이 때, 터미널에 ESLint 쓸거냐고 물어보는데, yes라고 대답하면 ts 관련 의존성 패키지들도 알아서 다운받아준다. 만약에 안 깔아준다면, 직접 깔아주면 된다. npm install --save-dev typescript @types/react @types/node 2. Redux 설치하기 next에서 redux를 사용하려면, 2가지가 필요하다. npm install react-reduxnpm install next-redux-wrapper 3. redux devtools redux devtools를 사용하면, 현재 스토어의 상태를 개발자 도구에서 조회할 수 있고, 지금까지 어떤 액션들이 디스패.. 2023. 5. 7.

이전 1 2 3 4 5 6 7 ··· 19 다음

티스토리툴바