강디너의 개발 일지

기술 블로그에 기술을 안적고 계속 회고만 하는 것 같다. 이게 나이를 먹으면 말만 많아진다는 것일까...  그래서 이번에는 어디에 갔는가 ?테이블링이라는 맛집 줄서기 서비스를 운영하는 회사에 갔다.그곳은 왜 갔는가 ?먹을 것을 좋아하는 나는 맛집을 가는 것도 좋아한다. 가성비를 따지기는 하지만, 먹기 위해 돈버는 스타일? 이기 때문에 먹는 것에 아끼지 않는 편이다. 그렇기에 맛집에서 줄 서는 서비스인 테이블링을 이미 알고 있었다. (예전에는 웹으로도 봤었는데, 지금은 접었다고 한다.) 특히 면접 분위기가 너무 좋았고, 팀 분위기도 좋아 보였다. (이게 제일 컸던 것 같다)  역할은 무엇인가 ?미들급 FE개발자? 의욕 빵빵한 개발자 ?팀장 말 잘듣고 열심히 개발하는 실무자?이런 역할이지 않을까 싶다.  ..

또 이직을 했다.약 2년 6개월 와디즈를 다녔고, 올해 3월 마무리를 했다. (이제야 회고를 적는다)개발 지식뿐만 아니라 문서화, 개발 프로세스 등 개발자에게 필요한 많은 것들을 배우며 성장했다고 생각한다. 이직이 확정되었을 때 기쁨보다 동료들에게 어떻게 말해야 하나 싱숭생숭했다. 그만큼 팀 분위기가 너무 좋아서 떠나는 게 맘 편하지 않았다.  왜 또 이직을 했는가?이력서를 정리하다 보니 벌써 8년 차가 되어버렸다. 쭈니어일때 10년차 개발자는 완전 능력자 + 시니어 개발자라고 생각했는데, 내가 곧 10년 차라는 생각에 덜컥 겁이 나버렸다.와디즈에는 시니어 FE 분들이 많아 보살핌을 듬뿍 받고 자라서, 만약 이분들이 없어진 상태에서 10년 차가 넘어버린다면…? 이라는 생각이 드는 순간 뭔가 준비를 해야..

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

좋았던 점. 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..

최근 팀 내 주니어끼리 모여 ‘나의 강점 찾기’ 스터디를 하고 있다. (feat. 내년 연협을 잘하자.) “자신의 강점을 찾고 강화하자” 라는 목표를 갖고 매주 모여서 짧게 이야기를 나누기 시작했지만, 강점 찾기란 매우 힘든 일이었다. 강점을 찾기 위해 이력서도 다시 써보고, 서로가 생각하는 강점에 대해 이야기를 나누며 생각보다? 유익한 시간이었다. 그래서 나의 강점을 3가지로 정리해 보았다. 생산성이 높은 개발자 먼저 나서서 시도하고 도전한다. 긍정적이며, 동료들과 의견을 잘 나누며 잘 받아들인다. 생산성이 높은 개발자 생산성이 높은 개발자는 업그레이드된 버전인데, 그전에는 ‘빠르게 개발해서 빠르게 피드백받아 개선하는 것’이 내가 자신 있게 말할 수 있는 강점이었다.(말이 고급져졌다) 이 강점을 오랫동..

작년과 올해는 나에게 중요한 시간이었다. 작년은 이직한 곳에 나를 증명해야 했고, 결혼 준비와 함께 올해 초 결혼을 했기 때문이다. 그래도 그 와중에 강의도 찍어보고, 간간히 블로그를 적었었다. 마침 회사에서 성장했는지, 나의 강점은 무엇인지 자꾸 물어봐서 이번 기회에 한번 되돌아보기로 했다. 나는 성장 하였는가? 남자로서, 남편으로서 성장을 했다. 집도 같이 보러 다니고, 면허도 따고, 결혼도 잘 마무리 지었다. 아내는 매우 만족해한다. 하지만 개발자로서는 크게 성장하지 못한 것 같다. 주어진 업무는 잘 해내었지만, 새로운 기술 서칭이나 개선 업무를 앞장서서 하지 못했다.(결혼준비라는 핑계로...) 블로그도 꾸준히 작성하지 못한 것도 아쉬움이 크다. 내가 일하면서 배운 것과 혼자 공부하며 정리해야 기억..

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 ..