bloomCode

Next 팀 프로젝트 협업 중  Naver 소셜 로그인 구현 부분에서next-auth의 NaverProvider에서 오류가 발생하였다. [auth][cause]: OperationProcessingError: "response" body "expires_in" property must be a positive numberNaverProvider 부분에서 response로 가져오는 expires_in의 타입에 문제가 있어 보였다. 해당 문제를 깃허브와 구글링을 통해 찾아보다가 제일 정리가 잘 되어있는 블로그를 발견함!참고 블로그 :https://jacob.kim/blog/next-auth-expires-in/ko해당 블로그를 보니 네이버 측에서 OAuth 2.0 스펙을 준수하지 않고, expires_in변..

Next에서 fetch는 특별하다는 말을 듣고 공부를 하게 되었다.Next fetch 공식문서:  https://nextjs.org/docs/app/api-reference/functions/fetch#fetchurl-options참고 블로그: https://youngme92.vercel.app/blog/nextjs-13-data-fetching공식문서 내용에는 Next.js는 서버의 각 요청이 캐싱을 설정할 수 있도록 기본 웹 fetch() API를 확장했다고 한다.즉 Next.js에서 서버 컴포넌트에서 fetch() 메서드를 사용하면 캐싱기능을 사용할 수 있는 것 같다.export default async function Page() { // 첫 번째 요청: 수동으로 무효화될 때까지 캐시 // 기..

타입스크립트를 사용하면서 null과 undefined 중 undefined를 사용하는 것을 권장한다는글을 많이 보게 되었다.그 이유가 궁금해서 알아보게 되었다."Use undefined, do not use null."(해당 블로그가 정리가 잘되어있다!)참고 블로그 : https://blog.shiren.dev/2021-10-05/ 일단 자바스크립트에서 null과 undefiined 차이점undefined는 아직 초기화되지 않은 값, 존재하지 않는다, 자바스크립트에서 엔진이 대신 undefined로 초기화해준다.null 은 빈 값을 표현하는 값, 존재는 한다.(마치 빈 스트링 같이),사용자가 직접 초기화한다.그럼 왜 타입스크립트에서는 undefined를 사용하라고 할까?자바스크립트에서 null과 unde..

Next.js를 배우면서 Next에서는 TailWindCSS 프레임워크를 사용하도록 권장하는데(next설치 시에도 tailwindcss를 사용할 거냐고 물어봄)그 이유에 대해 갑자기 궁금해져서 공부하게 되었다. 참고 블로그 : https://velog.io/@shinhw371/CSS-why-Nextjs-recommend-Tailwind공식 문서: https://nextjs.org/docs/app/building-your-application/styling/css-in-js Next에서의 CSS-in-js 문제?공식문서에서는 런타임 JavaScript를 필요로 하는 CSS-in-JS 라이브러리가 현재 지원되지 않는다는 내용이 나온다. Server Components와 Streaming과 같은 최신 기능을 ..

저번 Parallel Routes(병렬 라우트)를 통해 모달 창 구현하기를 이어서 모달 창 기능에 Intercepting Routes(라우트 가로채기) 기능을 추가해 보았다. Intercepting Routes (라우트 가로채기) 경로를 가로채면 현재 페이지의 콘텍스트를 유지하면서 현재 레이아웃 내에서 경로를 로드할 수 있다. 라우팅 기능은 특정 경로를 "차단"하여 다른 경로를 표시할 때 유용하다고 함. 가로채기 경로는 (..) 규칙을 사용하여 정의할 수 있으며, 상대 경로 규칙../과 유사하지만 세그먼트에 대한 규칙이다?. (.) to match segments on the same level (..) to match segments one level above (..)(..) to match segm..

인프런 Next 강의를 들으며 신기했던 Intercepting && Parallel Routes 기능을 사용해서 modal창 기능을 구현하는 내용을 정리해 보았다. Parallel Routes 병렬 라우트 병렬 라우트를 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있다고 한다. 예시 사진과 같이 team 및 analytics 페이지를 동시에 렌더링 할 수 있다. 개별적으로 스트리밍 되는 각 경로에 대해 독립적인 오류 및 로드 상태도 정의할 수 있으며 그에 따른 조건부 렌더링도 할 수 있음! 모달 창 구현해 보기 모달을 구현할 때 문제 상황은 기존 레이아웃 위에 모달 레이아웃이 보여줘야 한다. 폴더 구조로 본다면 다음과 같이 component 파일 안에 있는 log..

결론적으로 소프트웨어 설계와 유지보수에 중점을 두려면 이론이 아닌 실무에 초점을 맞추는 것이 효과적이다. - 조영호 , 7~8p SOLID 원칙에 대해 배우면서 이론에 그치지 않고 코드에 적용해 보고 기록하려고 한다 내가 작성한 코드가 맞는지 틀린 지는 모르겠지만 항상 의심하며 계속해서 수정해 나갈 예정이다. MainContainer는 UI만 처리할 것 더보기 밑에 MainContainer는 메인페이지에서 사이드별 컴포넌트들을 보여주는 컴포넌트이다 하지만 nickname이라는 유저의 정보를 가져오는 데이터 로직 비즈니스 로직이 포함되어 있고 해당 정보를 하위컴포넌들에게 props로 전달해주고 있다 SRP 단일 책임 원칙에도 어긋나고 RightSdie와 NaviSide가 결국 MainContainer에 p..

좋은 소프트웨어 시스템은 깔끔한 코드(clean code)로부터 시작한다. 좋은 벽돌을 사용하지 않으면 빌딩의 아키텍처가 좋고 나쁨은 그리 큰 의미가 없는 것과 같다. 반대로 좋은 벽돌을 사용하더라도 빌딩의 아키텍처를 엉망으로 만들 수 있다. 그래서 좋은 벽돌로 좋은 아키텍처를 정의하는 원칙이 필요한데, 그게 바로 SOLID다. SOLID 원칙은 함수와 데이터 구조를 클래스로 배치하는 방법, 그리고 이들 클래스를 서로 결합하는 방법을 설명해준다. '클래스'라는 단어를 사용했다고 해서 SOLID 원칙이 객체 지향 소프트웨어에만 적용된다는 뜻은 아니다. 여기에서 클래스는 단순히 함수와 데이터를 결합한 집합을 가리킨다. 소프트웨어 시스템은 모두이러한 집합을 포함하며, 이러한 집합이 클래스라고 불릴 수도 있고 ..

오늘은 비지니스 로직이 무엇인지에 대해 좀 더 정확히 애기해보는 시간이였다. '비니니스 로직'과 'UI 기능 구현'의 차이 결제 버튼 사용자가 온라인 쇼핑몰에서 상품을 구매할 때, "결제하기" 버튼을 클릭하면, 사용자의 결제 정보 유효성 검사, 재고 확인, 할인 적용, 결제 처리 등의 프로세스를 실행한다. 회원가입 버튼 "회원가입" 버튼에는 이메일 형식 확인, 비밀번호 강도 검사, 사용 가능한 사용자명인지 확인 등의 유효성 검사 로직이 포함한다. 버튼 자체는 단순한 UI 요소지만, 클릭 이벤트에 여러 조건들이 연결됨으로써 복잡해질 수 있다. .이러한 요구 사항들을 ‘도메인 로직 / 비즈니스 로직’이라 부르며 비즈니스 로직을 통해 버튼에 달린 이벤트 리스너는 클릭 이상의 의미를 가지게 된다. 그렇다고 액션..

이번 달도 역시 원티드에서 하는 프리온보딩 FE챌린지 강의에 신청하여 듣게 되었다. 이번 달은 지금까지 강의 중 제일 기대가 되는 주제인 비즈니스로직에 대해 다룬다. 기대만큼이나 다른 강의에 비해 참여자도 엄청 많았다. '일을 줄이기 위한 일'을 해야 하는 이유! 강의에서는 제품을 만들 때 제품이 점점 못생겨지는 이유는 화려한 스킬들을 몰라서가 아닌 그보다는 개선에 시간을 투자할 여력이 없어서 생긴 게 아닌가?라는 생각을 했다고 한다 새 프로젝트를 만들어 다시 시작한다 하더라도 실력이 동일하다면 읽기 힘들고, 재사용성이 떨어지고, 분리하기도 힘든 코드가 또다시 나오게 될 것이다. 이러한 이유는 우리의 현실 자체가 복잡하고, 코딩을 할수록 그 복잡도가 제품에 점차 반영되며 다른 하나는 그 복잡함이 어느 정..