열정보단 시스템

오랜만에 글을 써봅니다. 바쁜 탓에 블로그를 들어오지 못한 사이 누적 조회수가 1만이 넘어섰는데 뭔가 기쁘네요. 제 블로그가 공부에 대한 기록이지만 그와 동시에 누군가가 공부하기에 도움이 되길 바라는 마음이었는데 실제로 그랬을지.. 6월 중순에 모빌리티 서비스 개발을 하는 스타트업에 들어가게 되었습니다. 현재까지 열심히 달렸고 며칠 전에 정규직 계약을 했습니다. 수습을 마치고 새 계약서를 쓰면서 더 열심히 달릴 예정이에요. 요새 드는 생각은 개발자하기를 참 잘했다고 생각합니다. 능동적으로 발전하는 직업을 갈구했고 그게 적성과 맞아서 꽤 기쁩니다. 신입 개발자로서 지금 회사에 들어오게 된 것은 제가 이뤄낸 인생에서 첫 번째 성공이자 도약점입니다. 지금 제 모습이 5년,10년 후에는 월급쟁이로 사는 것 이상..

너무너무 오랜만에 글이다.. 최근에는 졸업 전시 관련 하드웨어 쪽 코드를 다루고 이력서 작성에 정신이 팔려서 개발의 비중이 조금 줄어들었다. 이력서를 작성하면서 느낀 것 중에서 클린 코드에 대해 다룬 것이 있다. 서칭을 하면서 찾아보는데 클린 코드를 위한 가장 기본적인 참고사항은 적용을 마쳤다. 변수명(네이밍 규칙) 명시적으로 변경 삼항연산자의 상황에 따른 대응 ( + 논리 연산자(&&)로 조건부 렌더링 적용 ) True(boolean) 값을 Props로 넘길시 생략 useEffect Hook 내부 함수는 밖으로 뺄 것 인자가 Event 뿐인 이벤트 핸들러 함수는 함수명만 명시 React-Query와 Axios 모듈화로 API 요청 관리 (진행중) 정도가 될 것 같은데 마지막 항목은 현재 작업 중이다. ..

어제 React Native 포지션의 이력서를 드디어 제출했다. 개발로서의 첫 번째 이력서였으며, 이래저래 많은 생각이 들었다. 무엇보다 가장 강하게 든 생각은 '이력서를 쓰는 과정조차 좋은 경험'이라는 것이다. 배우는 과정은 정리하고 되풀이하는 데에서 그 모양이 더 잡힌다는 것을 잘 알고 있지만, 이력서를 정리하고 쓰는 이 전체 과정은 이를 강하게 보여주면서 동시에 현실적인 내 모습을 냉정하게 드러내는 고통스러운 시간이지 않나 싶다. 내가 어떤 게 부족하고, 어떤 것들이 어필이 덜 되는지를 스스로 느끼는 도중에도 정리를 멈출 수 없음이 마음을 더 무겁게 한다. 혹자는 '부족한 것을 알면서 왜 더 준비하고 내지 않는가?'라고 물음을 던질지도 모르겠다. 필자는 학원과 같은 커리큘럼 없이 구글링으로 시작하여..

오늘은 헷갈린 Hook들에 대해 정리해보려고 합니다. useState와 useEffect보다는 useMemo, useCallback이 다소 헷갈리기 때문에 해당 글을 작성하게 되었습니다. useEffect의 라이프사이클 관련 정리도 필요해 보이지만 그건 추후 추가된 글에서 다뤄보겠습니다. "useMemo와 useCallback이 왜 필요한가?"를 먼저 생각해보겠습니다. 리액트 내장 훅인 이 두 함수가 우리에게 편리함을 제공해준다면, 분명히 필요성이 제시되었기 때문에 누군가 개발했다는 것을 의미를 합니다. 가장 핵심적인 키워드는 '렌더링 최적화'입니다. 예시를 하나 들어보겠습니다. 컴포넌트가 렌더링 되었다는 것은 사용자가 해당 함수(컴포넌트)를 호출시켰다는 것을 의미하며, 이 과정에서는 내부에 있는 변수 ..

오늘은 스토리지에 대해서 다뤄볼까 합니다. 스토리지를 다루기 위해 두 가지 라이브러리를 정리해보려고 하는데, Async-storage와 Encrypted-storage가 바로 그 주인공입니다. 가장 먼저, 스토리지(Storage)를 왜 써야하는지, 어떤 데이터를 넣어야하며- 그렇다면 redux는 어떻게 활용 측면에서 비교가 되는지 정리를 하고 마지막엔 코드 예제까지 정리하면서 마무리 해보려고 합니다-! 어제 작성한 글에서는 효율적인 상태 관리를 위해서 Redux-toolkit을 다뤄보았다. Redux의 store는 데이터 저장 공간으로 활용되며 실제로 앱이 켜져있는 상태에서 데이터를 불러오는 성능이 가장 뛰어나다. 하지만 앱이 꺼지면 데이터가 사라지는 일시적 저장 공간이기 때문에 그 한계 또한 명확하다...

Redux는 React Native 공부를 하면서 채용조건을 찾아볼 때마다 자주 보였던 녀석이다. 하지만 적용해야 할 필요성을 느끼지 못했기에 여태 구현을 해오다가 상태 관리를 조금 더 효율적으로 관리할 필요가 생기면서 찾아보게 되었다. 처음엔 꽤 난잡한데 이해하기 위해서는 큰 그림을 볼 필요가 있었으며, 손 코딩을 하는 것이 큰 도움이 되었다. 그럼 이번 게시글에서는 redux-toolkit을 어떻게 적용하였는지에 대해 간략히 적어보려고 한다. (참고로 이 게시글에서는 Redux가 아닌 Redux-toolkit에 대해 다룰 것이기 때문에 Redux에 대한 기본 지식이 습득된 상태로 볼 것을 추천한다😉) 공홈 링크는 다음과 같고, 설치 방법은 생략한다. https://redux-toolkit.js.org..

여태 공부했던 서버 요청에 대한 모든 것들을 정리하려고 한다. 일단 서버와의 통신을 위해 axios를 쭉 사용해왔는데 가장 먼저 왜 'axios'인지부터 시작해서 .get/.post에 대한 구현 방법을 다루고, 두 번째 글에서는 모듈화를 위한 react-query, custom Hook 작성까지 다뤄볼 예정이다. (axios.create로 인스턴스를 만들어 간단한 모듈화 진행은 다음 링크를 타고 가면 볼 수 있다.) 앱 개발자에게 있어 굉장히 중요한 주제들 중 하나라고 생각한 만큼 이번 글은 길어질 것 같으니 공부하시는 분들에게 필요한 개념만 쇽-쇽 찾아가길 바란다. // if(도움이 된다면...) 왜 Axios 인가 서버와의 통신을 위해 어떤 기술을 써야하는가가 독학 초반에서의 가장 큰 궁금증이었다. ..

로그인을 성공한 상태에서 앱을 껐다 켰을 때 로그인 상태를 유지시켜주기 위한 코드를 짜다가 난관에 부딪혔다. 엄청 간단해보이던 구현이 생각보다 길어졌으나 그 덕에 AsyncStorage에 대해 더 공부하게 되었다. (아니면 지름길을 내가 볼 줄 모르는 것이라던지..) 기존에는 로그인/회원가입을 담당하는 AuthStack과 BottomTabNavigator로 이루어진 MainTab에 대한 분기점은 아래 코드와 같이 삼항연산자를 통하여 간단하게 구현해놓았던 상태이다. 무튼 리액트네이티브서울 커뮤니티에 이번 일을 계기로 질문글을 하나 작성하게 되었다. 작성하는 김에 Redux를 활용하면 어떠한 이점을 취할 수 있는지 구체적인 솔루션을 물어보았다. 부족한 질문에 대한 답변을 두 분이나 달아주셔서 안도.. 우선,..

제목 그대로 토큰과 url path 등 모든게 정상적으로 설정이 되어있음에도 불구하고 403 에러가 난다. 결론은 서버 내부 권한 문제인데 이는 strapi 페이지에서 Setting 항목을 통해 수정이 가능하다. 스택플로우 참고-! Strapi API calling error: {"statusCode":403,"error":"Forbidden","message":"Forbidden"} I am working with strapi and i am getting an error 403 Forbidden on calling an api e.g http://localhost:1337/data I've called all the APIs and the result is same 403 error I've trie..

useContext가 가지는 의미. 역할. 로 시작 https://pks2974.medium.com/react-context-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC-9c35ce6617fc React Context 간단 정리 React Context API 를 간단한 예제로 알아보자 pks2974.medium.com 유저 정보를 위한 전역 상태 관리를 적용하려고 시작한 공부.. 아직 정리 중 context 만들었으면 앱 전체를 Provider로 감싸주기 context 실제 사용. 사용한 곳은 가입을 담당하는 Hook 에 적용 가입시 발생한 토큰 저장, 로그아웃시 토큰 삭제를 담당하는 함수