본문 바로가기

전체 글

코드 리팩토링 비동기편 (await과 병렬) 비통기 통신 await과 병렬통신 프로젝트 코드를 보던 중 비동기에 대해 생각하고 있었는데 await이 지금 내 프로젝트에 어울릴까 하는 생각이 들었고 await 보다 병렬 통신이 더 잘 어울린다 생각해 병렬 통신으로 바꾸게 되었다! 비동기이란? 두 가지 작업이 동시에 실행되거나, 하나의 작업이 끝날 때까지 기다리지 않고 다른 작업을 실행하는 것을 말한다. 탕짜면 주문이 들어왔을 때와 볶음밥과 짜장면이 하나씩 주문 들어왔을때 써야할 비동기 통신이 다르다! await은 탕짜면? await은 비동기적으로 데이터베이스 쿼리를 실행하고 결과를 가져오는 방식이다. 특징은 아래와 같다. - 개별 데이터 호출에 대해 순차적으로 처리 - 코드의 가독성이 좋음 - 데이터 호출이 순차적으로 처리되므로, 데이터 호출 간의 .. 더보기
Next.js .env 파일 관리! Vercel을 이용해 배포를 하던중 GitHub에 .env 파일이 없어 배포가 되지 않는 현상을 발견했다! .env 파일을 gitignore 로 안보이게 하니 Vercel 에서 배포를 하지 못하고 에러가 났다. 이유는 Vercel은 git repository에 연결하면 새로 변경한 코드를 메인 브랜치에 병합 시 자동으로 빌드 후 배포 해주기 때문에 그런것이다! gitignore 를 이용해야 한다 생각해 한참을 삽질 했지만 답을 찾지 못했는데 문득 GitHub에 .env파일이 없어서 안되는 거면 Vercel에 등록할 수 있겠다는 생각이 들었고 검색해보니 답을 찾을 수 있었다. 해결법 Vercel로 들어가 프로젝트로 이동해 Settings 메뉴에서 Environment Variable 페이지로 이동한다. 그.. 더보기
JSON 데이터 합치기 2탄! 저번시간! 데이터를 합치기 위해 여러 시도가 있었다! 1차 시도 처음에는 아래처럼 스프레드 문법을 썼다. // 따로 변수로 담아서 const bankBaseList = api.data.result.baseList const bankOptionList = api.data.result.optionList // 이런식으로 const combined = [... bankBaseList, ...bankOptionList]; 하지만 이렇게 되면 하나의 배열 안에는 들어가지만 내가 원하는 모양인 데이터가 하나의 객체로 모이지는 않기 때문에 고민이 필요했다. // 결과 [ { "aa": "bb" }, { "cc": "dd" } ] // 내가 원하는 모양 [ { "aa": "bb", "cc": "dd" } ] 2차 시도.. 더보기
금융감독원 API 사용하기! 적금저금 프로젝트에 시중에 판매되고 있는 적금상품이 있어야 한다고 생각해 금융감독원에 인증키를 신청했고 프로젝트에 쓸 수 있었다! API를 사용해 보자 금융감독원에 있는 설명을 보고 내가 원하는 요청변수를 적어 요청을 보내야 한다! 나는 적금/json/인증키/권역코드/페이지번호/은행명 이렇게 적었고 아래를 보면 알 수 있다! (은행명은 한글로 적거나 UTF-8로 적어도 된다!) // URL은 변수에 담아 const JUK_URL = `https://finlife.fss.or.kr/finlifeapi/savingProductsSearch.json?auth=${process.env.API_KEY}&topFinGrpNo=020000&pageNo=1&financeCd=%ED%95%98%EB%82%98` // A.. 더보기
NEXT.js Lighthouse 점수 높이기와 Sharp Lighthouse 란? 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 자동화 도구이다! 어떤 웹 페이지든 (그것이 공개되었든, 인증이 필요하든) 사용할 수 있다고 한다. 왜 Lighthouse를 썼나 배포에 Vercel을 사용한 나는 Vercel 에서 재공하는 Speed Insights 가 있지만 Lighthouse를 썼는데 그 이유는 Vercel은 RUM(Real User Monitoring) 방식이기 때문이다. 이 방식은 서비스가 제공되는 중 실제 유저의 활동기록을 기반으로 성능 측정해서 사용자 환경에 따라 점수가 달라 질 수 있다. 그래서 난 Lighthouse 를 사용했다. Lighthouse 검사 프로젝트를 배포 후 크롬에서 Lighthouse를 해보니 아래와 같은 점수가 나왔다. 여기.. 더보기
솔로 프로젝트 회고! NEXT.js를 이용한 프로젝트가 5일전에 끝이났다. 프론트는 React 와 비슷해 편했고 HTML,CSS를 한 시간은 8시간이 넘지 않았다. 공부한 것을 활용하는 재미가 있었다. 조금 더 규모가 큰 프로젝트를 하고 기능이 많은 프로젝트를 새로 하고싶지만 우선은 취업부터! 배포는 Vercel 을 이용했다. 아쉬웠던 점 1. 시간이 없다고 생각해 작은 프로젝트를 진행한것. 마음이 바빠 규모가 작은 프로젝트를 진행했다. 기본적인 CURD와 서버기능만 넣었더니 섭섭한 느낌이다. 빨리 취업해 몰입하는 삶을 살고싶다! API 연결해서 날씨라도 넣을까.. 2. 디자인 패턴에 대해 깊게 생각하지 않고 개발을 시작했던 것 팩토리 메소드 페턴에 공부하고 먼저 계획을 세워 개발을 시작했다면 더 완성도 있었을것 같다. 3... 더보기
Next.js 에서 Redux 쓰기,, 호기롭게 시작한지 얼마 지나지 않아 난 큰 벽을 만났다. next.js는 최근 13 버전을 출시하며 App directory 을 사용하게 되었다는 것이었다! 이게 왜 벽이었냐! 거의 모든 블로그나 유튜브 강의 등 은 13버전을 사용하지 않아 모두 App directory쓰지 않았다는 것 때문이다. 이전 React에서 redux를 사용할때와는 다른 환경인 것이다! 그래서 버전을 낮출까 생각도 했지만 지금 상황에서 쓰는법을 알고 싶었다. 그리고 난 할 수 있을거란 근거없는 자신감이 차있었기 때문에 먼 길을 떠나게 되었다. (진짜 짱 멀었다) 어떻게 하는거죠,,? 열심히 검색을 해봐도 App directory 를 쓰는 자료는 찾기 어려웠고 공식문서에도 자세히 나오지 않았다. (내가 못찾은 것일지도,,) 그래서.. 더보기
Next.js 에서는 Redux Wrapper를 사용해야 합니다. HTML, CSS 가 끝나고 신나게 Mongodb 세팅을 마치고 POST와 GET 등 메서드를 실험해 보고 있었는데 나는 드릴링을 좋아하지 않기에 아 맞다 Redux! 라는 생각이 들었다. 기존에 사용하던 Redux-toolkit을 사용하려 했지만 React와는 달리 Next는 SSR이니 그냥 Redux-toolkit을 사용하면 안 될 것 같다는 생각이 들었고 검색을 해봤다. Redux Wrapper Redux-wrapper은 Next 개발환경에서 쓰면 좋다고 했다. 그 이유는 next-redux-wrapper 깃헙 페이지에 있는데 여기를 살펴보면 Next.js 정적 사이트 생성기 또는 서버 측 렌더링이 관련된 경우 Redux 연결 구성 요소를 렌더링 하기 위해 서버에 다른 저장소 인스턴스가 필요하므로 .. 더보기

티스토리툴바