전체 글

12월 회고

들어가며 2023년 마지막 해가 저물었다. 매해 그렇듯 빠르게 지나갔다고 느껴지는 1년이었는데 취업도 하고 이사도 다니면서 큰 이슈없이 잘 보내온 것만으로도 다행이라 생각한다. 여러 스프린트를 지나오면서 새로 배운 것들이 정말 많았지만 next.js (app router)와 typescript가 가장 기억에 남는다. next.js를 사용하면서 느꼈는데 next는 이 프레임워크에 대해 이해한만큼 성능이 나온다고 생각한다. 단순히 ssr 하나만 보고 사용하기에 제공해 주는 기능이 아주 많아 개발하는 내내 공식문서를 붙들고 있어야 했다. 이때 당장 필요한 기능들만 보다 보니 이해하고 적용하는데 시간이 꽤 걸리고 디버깅도 자주 했던 것 같다. 개발이 끝나고 기술블로그를 돌아다니다가 nextjs의 동작원리, hy..

[RN] 인생이 지루하다면 react-native upgrade (0.66.3 -> 0.72.5)

* 업그레이드 방법에 대해 깊게 다루고 있지 않습니다. 업그레이드를 고민 중이거나 낮은 rn 버전을 사용하는 분들께 도움이 되었으면 해서 작성하는 회고글입니다. Histroy 회사에서 사용하던 rn 버전은 0.66.3이다. 오래된 버전으로 인한 이슈가 잔잔하게 있었지만 먼저 해야 할 일들을 쳐내는라 급한 불만 끄면서 업그레이드를 미루고 있었는데 이제는 정말 올려야 할 것 같아 업그레이드하기로 결심했다. '이제는 정말 올려야'했던 이유는 이렇다. xcode 이슈 특정 xcode 버전에서 버그를 발생시키는 코드들이 존재한다. 예를 들어 rn 0.69.0 이하 버전에 xcode 14.3 이상 버전을 사용한다면 yoga.cpp에서 에러가 발생한다. 유사한 이슈가 몇 개 더 존재하지만 보통 xcode에서 코드 한..

9월 회고

들어가며 지난달 회고를 놓쳤으니 이번엔 꼭 기록해야만 할 것 같다. 요즘은 일주일만 지나도 뭐 하면서 보냈는지 기록을 한참 찾아봐야 할 때가 많다. 특히 이번 추석 연휴가 꽤 길었는데 최소 보름만큼의 기억이 증발하기에 충분한 연휴였다. 그래도 요즘 아침 스터디를 하고 있던 터라 쌓여가는 피로도로 지칠법한 타이밍에 잘 쉬다 온 것 같다. 돌아오면 깔끔하게 비운 머리로 의욕 넘치게 이것저것 해보려 했는데 오히려 연휴 후유증으로 지각을 겨우 면하는 중이다. 체력 그간 앉아있는 시간이 많았다 보니 슬슬 건강이 걱정되기 시작했다. 허리도 뻐근한 것 같고 조금만 무리해도 피곤에 절여지는 느낌이 드는 것. 그런고로 잊고 지내던 러닝을 다시 시작하기로 했다. 날씨도 좋고 마침 집 가까이 공원이 넓은 편이라 퇴근 후 3..

[RN] Node 업그레이드 후 빌드 오류 (error:0308010C:digital)

History 기존에 사용하던 node 버전은 v16.16.0 인데 꽤 지난 버전이기도 하고 협업과정에 node 버전 차이가 문제가 되기도 해 이번 기회에 업그레이드하기로 했다. node 버전관리는 nvm을 사용하고 있기 때문에 lts 버전을 다운로드하여 버전을 바꿔주었다. nvm install --lts 설치가 끝난 후 사용할 node 버전을 바꿔주고 별다른 이유가 없다면 default 버전도 변경해준다. nvm use --lts nvm alias default v18.17.1// 여기는 --lts 옵션이 듣질 않으니 직접 버전을 입력해줘야 한다,,, // 변경사항 확인 nvm ls node -v node 버전을 올리는 것까지는 문제없으나 metro를 실행하면 이런 에러를 받는다. Failed to c..

[programmers / JavaScript] 햄버거 만들기

https://school.programmers.co.kr/learn/courses/30/lessons/133502 // test const ingredient = [2, 1, 1, 2, 3, 1, 2, 3, 1]; sol 1 function solution(ingredient) { let count = 0; let stack = []; for (let i = 0; i = 4) { const hamburger = stack.slice(-4).join(""); if (hamburger === "1231") { console.log(hamburger); stack.splice(-..

[RN] 플로팅 버튼 아래로 스크롤 할 때만 나오게 구현(feat. reanimated)

How to 간단하게 Y값 조절로 버튼을 화면 아래 숨겨뒀다가 아래로 스크롤할 때만 나오게 하면 된다. 화면 상단에 헤더, 카테고리 버튼 등이 이미 있을 때 하단 버튼까지 만들어두기엔 스크린이 좁게 느껴져서 유저가 스크롤을 올릴 때는 버튼을 숨기고 싶었다. 자세히 보기 reanimated를 사용해서 ScrollView와 하단 버튼을 만들었다. '자세히 보기' 버튼의 경우 translateY값을 한참 높게 줘서 스크린 하단을 넘겨버리면 버튼을 숨길 수 있다. 스크롤을 내렸다는 게 감지되면 translateY의 값을 0으로 줘서 제위치로 돌아오게 하면 버튼이 아래에서 위로 올라오게 될 것이다. const translateY = useSharedValue(1000); const actionBarStyle = ..

6월 회고

들어가며 올해의 절반을 보내고 왔다. 반쯤 지나갔으니 묻어뒀던 올해 초 계획을 점검해 봐야 하는데 반도 못 채웠을 것이 훤하다. 우선, 하고싶었던 것과는 꽤 벗어난 일을 많이 해서 그렇다 변명하겠다. 인터랙티브하고 상호작용이 많은 기능들을 다루고 싶었는데 이것저것 테스크를 끌어오다 보니 업무에 너무 치중했다. 해야만 하는 일을 하다 보니 심취해서 앞만 보고 달린 게 아닐까 생각하지만 그랬기 때문에 예상치도 못한 영역에서 꽤나 배울 수 있었다. 재택에서 출근하게 된 것도 큰 변화였다. 온라인으로 소통에 문제는 없다고 생각하지만 역시 오프라인으로 보는 게 소통의 빈도나 질적인 면이 훨씬 좋아지니 프로젝트에 욕심도 많이 생겨서 과분하게 일을 끌어다 왔다. 어떻게 했지 경험해 보지 못한 일이지만 이겨내보겠다는 ..

[Next] POST로 url 요청시 request body 받아 사용하기(feat.405 error)

결제시스템을 구현 중인데 url을 POST로 요청해서 Request Data를 사용해야 하는 경우가 생겼다. Nextjs를 사용중이므로 getServerSideProps을 이용해 body를 받아보도록 하자 pages/api Nextjs의 규칙으로 pages/ 루트의 api 폴더에 index.js를 생성해 POST 요청시 어떻게 처리 할 지 만들 수 있다. 지금은 request body를 받아옴은 물론 후가공이 필요하기 때문에 이 방식으로 진행하지는 않았다. export default async function handler(req, res) { await bodyParser.json()(req, res, async () => { const requestBody = req.body; if (req.meth..