강디너의 개발 일지

작년부터 난 만들고 싶은 서비스가 생겼었다. 바로 냉장고 관리 앱이다. 혼자 살 때에는 냉장고에 김치밖에 없었는데, 결혼을 하고 나니 냉장고가 터지려고 했다. 특히 냉동실에 넣고 까먹은 재료들이 발굴될 때마다 너무 마음이 아팠다. 나는 이 문제를 해결하고자 냉장고 관리 앱들을 찾아봤지만 내가 만족스러운 앱이 없었다. 내가 원하는 서비스가 없는데 직접 만들자 (기획자/개발자 부부의 고질병) 하지만 나는 아이디어와 개발 능력만 있지 서비스를 기획/디자인 하지 못했다. 그렇기에 아내를 열심히 꼬셨다. 넘치는 아이디어와 왜 이 서비스를 써야 하는지 정리를 했다. 이 서비스를 만들게 된 계기 결혼 후 집에서 밥을 많이 해 먹는다. 냉장고/냉동실이 터지려고 한다. 언제나 진수성찬을 해 먹는 것이 아닌 생존요리 & ..

좋았던 점. react로 앱을 만든다. 자바스크립트다. 타입스크립트도 가능하다. 힘들었던 점. 초기 세팅이 제일 힘들다. 재설치만 몇 번한 것 같다. 무엇이 잘못된 건지도 모르겠다. 왜 잘되는지 모르겠다. 라이브러리 react-native-navigation을 통해 화면이 이동하는데, Stack이라는 개념과 Navigation이라는 개념이 있다. Stack은 웹의 히스토리나 자료구조처럼 1 > 2 > 3 으로 쌓이고 뒤로 가면 3 > 2 > 1 이런 형식이고 Navigation은 쌓이지 않는다. 앱을 껐다 켜도 데이터가 유지되려면 storage를 사용해야한다. (https://github.com/react-native-async-storage/async-storage) React-Native 특성 rea..

HTTP 상태 코드는 웹 서버와 클라이언트 간의 통신 과정에서 클라이언트 요청에 대한 서버의 응답 결과를 전달하는 코드입니다. 이 코드는 HTTP 응답의 일부로 사용되며, 성공, 클라이언트 오류, 서버 오류 등의 여러 상황을 나타낼 수 있습니다. 프론트엔드 팀과 백엔드 팀이 HTTP 상태 코드를 기준으로 특정 상황에 대한 코드 값을 약속하게 된다면 불필요한 커뮤니케이션을 줄일 수 있습니다. 예를 들어 HTTP 상태 코드가 401인 경우 로그인이 필요한 상태라고 약속합니다. 백엔드에서는 인증이 필요한 사용자일 경우 401로 내려주고, 프론트엔드에서는 401 코드만 딱 잡아서 로그인이 필요하다고 사용자에게 보여주거나, 로그인 페이지로 이동시킬 수 있습니다. 백엔드에서 HTTP 상태 코드로 구분시키는 게 아닌..

React에서 useState는 state값이 변경 될 때마다 해당 컴포넌트가 다시 렌더링을 하는 특성이 있습니다. 그래서 동기적으로 실행되는 자바스크립트 코드에서 setState를 실행하고 해당 state를 가지고 무슨짓을 하려고 할 때 이슈가 되는 경우가 있습니다. 예를 들어보겠습니다. const [fruit, setFruit] = useState({ banana: 0, apple: 0, }); const [errors, setErrors] = useState({ banana: false, apple: false, }) 여러가지 과일들이 있고, 과일이 있는지 여부를 체크할 것입니다. 가볍게 보면 banana와 apple이 0이라서 해당 조건문에 걸리고 setErrors를 하게됩니다. 그리고 check..

Next.js 에서 데이터를 가져오는 방법이 여러 가지 있습니다. getServerSideProps getStaticPaths getStaticProps Next.js에서는 서비스에 따라 다양한 방식으로 콘텐츠를 렌더링 할 수 있도록 지원해주는데 SSR, SSG, CSR, ISR 이 있습니다. 이러한 방식에 따라 데이터 패칭 하는 방식이 다릅니다.(사용하는 함수도 달라요.) getServerSideProps - SSR 공식문서 서버에서만 실행되고, 브라우저에서는 실행되지 않기 때문에 브라우저에 로그가 찍히지 않습니다. /* context object 에 있는 데이터 params: 페이지가 동적 경로일 경우 - 페이지 이름이 [id].js일 경우 params는 { id: 값 } req: HTTP reque..

React.js에서 타이틀, 설명 등 SEO 구색을 어느 정도 맞추기 위해서는 react-helmet 이란 라이브러리를 사용합니다. Next.js에서도 그럼 헬멧을 사용해야하나 ? 라는 의문에서 조사를 시작했습니다. 구글에서는 이제 SPA방식의 웹사이트도 어느 정도 크롤링 잘해주지만 특정 페이지의 title, og image 등을 바꾸기 위해 스크립트를 통해서 수정합니다. (카톡, 페이스북 공유 등.) react-helmet 동작 방식 Next.js는 조금 다릅니다. SSR 방식이기 때문에 굳이 렌더링 이후, 스크립트를 통해서 meta tag들을 바꾸지 않아도 됩니다. 렌더링 할 때 meta tag를 넣어서 렌더링 해주면 되기 때문입니다. Next.js에서는 편리하게 지정할 수 있도록 next/head ..

에러 바운더리 사용해보기 공통 오류 컴포넌트 적용하기 특정 컴포넌트만 다른 오류 컴포넌트 적용하기 고민 공식 문서 : https://react-query.tanstack.com/guides/suspense 코드 : https://github.com/DinnerKang/study_react/tree/main/packages/react-query 1. 공통 오류 컴포넌트 적용하기 최상위 루트에서 선언하고 QueryClient에 defaultOptions를 설정해서 suspense 값을 변경해줍니다. 그 후 ErrorBoundary를 선언해주면 하위 컴포넌트들은 이제 패칭 오류가 날 때 해당 ErorrComponent가 보입니다. import { QueryClient, QueryClientProvider, u..

React-Query는 이전 React 과제를 할 때 아무것도 모른 상태에서 사용해서 장점을 크게 깨닫지 못했었습니다. 그때 당시에 React-Query를 왜, 어떤 상황에서 사용하는지, 장점이 무엇인지 알고 넘어갔어야 했는데 그저 이런 라이브러리가 있구나 ~ 하고 넘어갔었습니다. 사내 기술 세션에서 React-Query 관련 이야기가 나오고, 발표도 해주셔서 관심이 가고, 도입하려면 스터디가 필요하다는 생각에 따로 공부해야겠다고 마음먹고 적게 되었습니다. 우선 React-Query의 장점은 많지만, 아래 장점들 때문에 프로젝트에서 사용하고 싶었습니다. 서버 데이터 캐싱 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능 prefetching, retry 등 다양한 옵션 쉬운 상태 관리 들어가기 전..

원본 글: HTML Tips 몰랐던 것들도 있어서 정리합니다. 1. The `loading=lazy` attribute 이미지 태그에 loading=lazy 속성을 넣으면 사용자가 스크롤해서 볼 때 까지 이미지를 호출 하지 않습니다. 웹 사이트의 로딩 시간, 성능 관리 측면에서 매우 좋으며, 페이지 초기 로딩 시 필요한 이미지의 수를 줄일 수 있습니다. 아래 GIF를 보시면 이미지가 보일 때 쯤 로딩하는 것을 볼 수 있습니다. 2. 이메일, 전화, 문자 links Send us an email Call us Send us a message 이메일 보내기, 전화 걸기, 마지막은 문자 보내기 입니다. 3. OL의 `start` 속성. 신기방기합니다 ㅋㅋ.. 쓸일이 있을지.. 4. meter 태그 음.......

장장 4개월에 걸친 토이프로젝트가 드디어 끝났습니다. 4월 말 오픈 예정이었으나, 역시 사람일은 알 수 없기 때문에... 각자의 업무가 일단 중요하니깐... 연애도 해야하고... 서비스 한 개를 만들면서 개발 플로우를 경험하고자 홀로 도전하게 되었습니다. 프론트엔드부터 백엔드, 데브옵스까지 많은 회사 동료분들께 도움을 받아서 감사의 말씀 먼저 올립니다. 초기 시작은 간단해 보였습니다.(이렇게 큰 거인 줄 그땐 몰랐지...) 백엔드, AWS 쪽을 도전하는 것이었기 때문에, 프론트엔드는 익숙한 Vue.js를 이용했습니다. 프론트엔드 모바일 전용으로 만들었으며, PWA도 생각해서 서비스 워커를 붙였습니다. 타입 스크립트 적용과 sentry를 붙여서 오류도 클라이언트 쪽에서 로깅할 수 있도록 설정했습니다. 카카..