FE 개발일지

다들 프론트엔드에서의 OOP(객체지향 프로그래밍) 어떻게 생각하시나요? https://www.youtube.com/watch?v=1V6mQom0paI&ab_channel=%EA%B0%9C%EB%B0%9C%EB%B0%94%EB%8B%A5 관련해서 개발바닥 유튜브 영상도 정말 재밌게 봤던 것 같습니다. 클래스에 대한 고민은 제가 타입스크립트를 도입하면서 같은 Url Prefix를 사용하는 Api들을 어떻게 묶어볼 수 없을까?부터 시작되었는데요. 레퍼런스가 많이 없기도 하고 실제로 FE에서는 FP가 더 중심적이고 OOP에 대해서 많은 고민과 고찰이 없었던 것도 사실인 것 같습니다. 굳이 필요한가?란 생각도 있구요. 그래서 더더욱 클래스를 도출하기까지 시간이 좀 걸린 것 같기도 합니다. 당연히 클래스만 쓴다고 ..

저번 포스트에서 웹뷰 및 인앱 브라우저 환경을 고려한 프로세스로 작업을 다시 하기로 했었는데요. 결론은 해결하려고 하는 방식으로 잘 해결하였고, 배포까지 마무리 되었습니다. 그러나 많은 곳은 아니지만 몇군데 참조를 해보니 인앱환경에서 안되는 곳도 많았습니다. 꼭 SNS 뿐만 아니라 팝업 형식이면 본인인증 프로세스도 되지 않더라고요. 순간적으로 인앱 환경까지 고려해야 할까?란 생각도 들었지만 SNS는 대중적으로 많이 사용되고 있고, 사용자의 편의성을 조금이나마 개선하기 위해서라면 하는게 맞다란 결론을 내렸습니다. (서비스 중점적 개발 개선) 물론 인앱 환경을 위한 프로세스로 작업을 하면서 겪었던 문제들을 보면 방향성에 대한 의구심이 들긴 합니다. 이래서 고려를 안했나?란 생각도 들었고요.. (각 회사의 정..

1. 확장자명 js, ts, tsx 파일 파일 확장자명 js에서는 뭐가 js고 jsx인지 모릅니다. 그러나 ts 파일 내에서는 ts와 리액트 컴포넌트들을 구분해서 처리를 하기 때문에 react에 관련 import 즉 tsx를 알 수 없습니다. 정리해보면 .ts - 순수 Typescript 파일에 사용 .tsx - JSX를 포함하는 파일에 사용 (리액트 구성요소) 간혹 모든 파일 확장자명이 tsx로 되어있는 것을 보면 아 이래서 그랬구나라고 깨달았던 것 같습니다. 저희는 로직만 담은건 ts로 처리하고 React 구성요소가 포함되어 있으면 tsx로 처리하기로 했습니다. 2. Typescript의 타입 자동추론은 정말 강력하다. 타입스크립트와 vscode 둘 다 마이크로소프트에서 만들었기 때문에 에디터간의 자..

TS 마이그레이션 이전에.. 이전에 디자인 패턴의 대한 고민과 redux-saga에서 react-query로 리팩터링의 대한 글을 올렸었는데요. 이 모든 리팩터링 과정은 타입스크립트 마이그레이션 전에 적용되어야 할 우선순위였습니다. 최종적으로 목표는 타입스크립트 마이그레이션이였고, 원할한 TS 마이그레이션을 위해 디자인 패턴을 바꾸어 필요없는 파일은 줄이 redux-saga로 관리되던 비동기 코드들은 react-query로 전환하여 원하는 기능들을 더 편리하게 사용하게끔 만들었습니다. 이렇게 타입스크립트를 위한 빌드업은 끝났고, 타입스크립트 마이그레이션을 하게 되었는데 결코 쉽지 않았습니다. 백엔드분들이 IDC에서 NCP로 이전을 해야되는 상황이였기 때문에 api작업은 원할하게 진행될 수 없던 상황이였고..

저는 가장 관심있어 하는 부분 중 하나가 프로젝트를 밑바닥부터 쌓아 올릴 때, 이 프로젝트를 어떻게 빌드업 해나갈 것인가? 즉, 설계에 대한 부분에 큰 관심이 있습니다. 클라이언트단에 어떠한 요구사항이 들어와도 처리할 수 있는 능력과 프로젝트 설계 능력을 가장 중점적으로 생각하고 있습니다. 제가 처음 입사해서, 프로젝트를 맞이했을 때와 현재 시점에서 프로젝트를 볼 때 관점의 차이가 생기는 것 같습니다. 다들 프로젝트의 디자인패턴은 어떤 걸 사용하시나요? 처음 프로젝트를 맞이했을 때, 저희 프로젝트는 가장 기본적인 디자인 패턴 Container, Presenter패턴을 사용하고 있었습니다. Container에서는 비즈니스 로직과 관련된 코드, Api를 수행하고 state를 조작해서 props로 Presen..

지난 포스트에 이어 react-query를 사용하며 얻은 유용한? 점 들에 대해 정리해보려고 합니다. react-query는 정말 다양한 기능들을 제공해주고 제어할 수 있게 해줍니다. 저는 제가 직접 사용했던 범위내에서 헷갈리거나 유용했던 것들을 정리해보겠습니다. 잠깐 npm trends를 보면 react-query의 인기가 실감나지 않나요? 많은 개발자분들이 react-query를 사용중인 것 같습니다. #1 useQuery isLoading VS isFetching useQuery의 isLoading과 isFetching 이 둘이 순간 헷갈렸던 적이 있는데요. isLoading과 isFetching을 가장 간단하게 설명하면 isLoading은 처음 로드할 때, 아직 데이터가 없을 때 isFetchin..

다들 상태관리에 대해서 어떻게 생각하시나요? 정말 간단하게 말하면 변화하는 데이터를 관리 즉, 개발자 입장에서 문자열, 배열, 객체 등의 형태로 저장된 데이터들을 관리해야 하는 것을 상태관리라고 요약할 수 있겠습니다. 그러면 다들 서버 상태관리 라이브러리로 어떤걸 사용하고 계신가요? 프로덕트가 커짐에 따라서 상태를 관리하기에 어려움도 커지고, 상태들은 시간에 따라서 계속 변화하고 React는 단방향 바인딩이므로 Props Drilling 이슈도 존재합니다. 이에 따라 저희도 요즘 상태관리에 대한 고민이 되게 많았습니다. 기능추가를 할수록 계속해서 커지는 Store API 통신 관련 코드를 작성하는데 반복되는 코드작업과 너무 긴 코드 라인 수 비효율적이게 지속적으로 호출되는 API 그렇다고 저희 클라이언트..

https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes Routing: Dynamic Routes | Next.js Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here. nextjs.org Next Docs Dynamic Routes 섹션에서 어렴풋이 보고 넘겼던 적이 있는데, 이번에 인앱 브라우저 환경 관련 SNS 작업을 하면서 적용하게 된 내용을 정리해보려고 합니다. 처음엔 SNS 로그인 라우터 설정을 메인페이지로 넘어가서 체크를 했습니다. 이렇게 되면 회원..

혹시 리액트의 useState 훅을 이용하면서 스코프 안에 console.log로 찍은 값은 잘 나오는데, setState로 처리된 결과값이 달랐던 경험이 있으신가요? useState가 비동기로 작동된다.. useState의 Functional Updates 등 기본적인 동작원리는 다들 알고 계실겁니다. // way 1 useEffect(() => { let startOfMonth = moment(date).daysInMonth(); const monthDate = moment(date).format("YYYY-MM"); while (startOfMonth > 0) { if (getItem !== null) { setText((prev) => [ ...prev, `Date_${monthDate}-${st..

#1 들어가기 저번 포스트에서 https://kjhg478.tistory.com/34 SSR 환경에서 쿠키값을 넣는 포스트를 작성했었습니다. 쿠키값과 관련한 모든 문제를 해결했다고 생각하고 다시 테스트 및 추가 작업을 하고 있었습니다. 그러나 Next.js의 SSR(getServerSideProps) 및 SSG(getStaticProps)로 Date Fetching을 하는 페이지에 세션이 만료된 상태로 접근하게 되면 에러가 나는 것입니다. https://nextjs.org/docs/basic-features/data-fetching 제가 또 어떤 부분을 놓쳤는지 포스트를 해보도록 하겠습니다. #2 이슈 총, 두 가지 상황에서 에러가 났습니다. 세션이 만료되었을 때, SSR 환경인 투자하기 페이지 접근 및..