bloomCode

강의를 들으며 jest로 테스트코드를 작성중 SyntaxError: C:\Users\jh\Desktop\dutchpay-app\src\components\CreateGroup.spec.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (7:12): 라는 오류가 발생했다. const renderComponent = () => { //render 함수('렌더링할컴포넌트') render() const input = screen.getByPlaceholderText('2022 제주도 여행'); const saveButton = screen.getByText('저장'); const errorMessage = screen.queryByTe..

리액트를 통해 프로젝트를 생성하게 되면 따라오는 jsest와 테스트 코드 파일을 보고 사용 방법과 왜 사용하는지에 대해 항상 의문이었는데 테스트 코드에 대해 처음부터 알아보려고 한다! 강의를 통해 TDD부터 알아보게 되었는데 TDD란 Test Driven Development의 약자로 ‘테스트 주도 개발’이라고 한다. 매우 짧은 개발 사이클을 반복하는 소프트웨어 개발 프로세스 중 하나로, 개발자는 먼저 요구사항을 검증하는 자동화된 테스트 케이스를 작성한 후 그 테스트 케이스를 통과하기 위한 최소한의 코드를 생성한다. 마지막으로 작성한 코드를 표준에 맞도록 리팩터링 한다. 먼저 오류가 나는 코드를 작성하고 -> 그 코드를 테스트에서 통과시키며 -> 리펙토링 하는 것이 순서라고 한다! 보통 일반 개발 방식은..

next 프로젝트 강의를 들으면서 react-hook-form을 사용하게 되어 react-hook-form에 대해 알아보다 여러 블로그를 다니다 react-hook-form 은 react 렌더링 관련 최적화와 깊은 관련이 있는 것 같았다. 그러다 눈에 들어온 것이 colocation이라는 단어였다. Coloctaion의 의미? colocation의 원리는 코드를 최대한 그것과 연관 있는 곳에 배치하는 것이다. 최대한 영향이 가는 부분을 최소화한다는 개념이라고 한다. 코드양이 점점 늘어나게 되면 의존성을 관리하는 것이 점점 어려워질 수 있으니, 주석이나 css 등 코드들을 관련 있는 것끼리 모아놓는 것을 뜻하는 것 같다. Colocation 원문 : https://kentcdodds.com/blog/col..

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재상용 가능한 코드조각을 말한다! 모듈은 단지 파일 하나에 불과하며. 스크립트 하나는 모듈 하나이다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리하며 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖기 때문에 모듈에 있는 객체는 기본적으로 바공개 상태며 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 캡슐화:객체의 속성(data fields)과 행위(메서드, methods)를 하나로 묶고, 실제 구현 내용 일부를 외부에 감추어 은닉한다. 애플리케이션과 분리되어 개별적으로 존재만 한다면 모듈은 재사용이 불가능하므로 존재의 의미가 없어지는데 공개가 필요..

저번에 React와 Next를 비교하면 Next공식 문서를 읽으며 Next가 어떻게 SSR 동작하는지에 대해 조사해 보았었다.https://zoon-bloom.tistory.com/112 Next 와 ReactNext 강의를 들으면서 Next를 잘 다루려면 Next를 본문을 많이 읽어봐야겠다는 생각이 들어 이번에 Next 본문을 읽으면서 React도 좀 더 자세하게 파헤쳐봐야겠다는 결론으로 Next를 쓰는 이유에 대해zoon-bloom.tistory.com이후에 좀 더 Next에 대해 알아보다 Pre-rendering과 Hydrate라는 것을 발견하였다.Next 동작 과정을 보면 Pre-rendering 과 hydrate에 대해 알 수 있다.  Next.js 동작과정- 초기화면 수행 (SSR 방식 이용)..

강의를 듣다 cloudinary라는 저장소를 이용해 이미지 저장을 손쉽게 처리할 수 있다고 해서 cloudinary에 대해 파해쳐보기로 했다. cloudinary 페이지 https://cloudinary.com/products/programmable_media Programmable Media | Cloudinary Create fast and personalized visual media experiences with Cloudinary APIs, Widgets, and SDKs. cloudinary.com Cloudinary는 웹사이트 및 모바일 애플리케이션용 이미지와 동영상을 관리, 최적화, 전송할 수 있는 플랫폼을 제공하는 클라우드 기반 서비스이며. Cloudinary를 사용하면 미디어 자산을 클..

라우팅은? 네트워크 용어로써 네트워크상의 주소로 이동하여 해당 주소에 연결되어 있는 데이터를 사용하는 일련의 과정을 의미한다. 라우터는 라우팅을 수행할 수 있는 장치이다. AWS 라우팅 공식 문서: https://aws.amazon.com/ko/what-is/routing/ React의 라우팅 리액트는 react-router-dom을 사용해서 path를 설정하고 태그로 컴포넌트를 감싸준다 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜준다. Next.js 라우팅 Next js의 경우 따로 path를 설정하는 것이 아니라 /pages 혹은 /src/pages 폴더 내의 폴더명, 파일명에 맞춰서 자동으로 path가 설정 된다.(pages 폴더가 src/pages 폴..

next-auth를 이용해서 로그인한 후 session을 통해 권한이 없다면 특정페이지로 이동할 수 없게끔 구현하기 위해 Next.js에서 지원하는 middleware를 생성했다 middleware는 요청 핸들러 전에 실행되는 함수로, 수신된 요청을 더 세밀하게 관리할 수 있도록 도와주는 역할을 한다 Next.js middleware공식 문서: https://nextjs.org/docs/pages/building-your-application/routing/middleware next-auth middleware 공식문서 https://next-auth.js.org/tutorials/securing-pages-and-api-routes middleware란? 프로그래밍 언어에서 응용 소프트웨어가 운영체제..

Next-auth를 이용해서 로그인 기능을 구현하다가 session.user안에 있는 프로퍼티 정보들을 타입스크립트 설정을 통해 추가할 수 있는 방법이 있다고해서 시도해 보았다. next-auth 설정파일에 사진에 id라는 프로퍼티 값을 검색되지 않는다. id를 추가해보자! src경로에 다음과 같이 next-auth.d.ts라는 폴더를 만든 후 위 사진과 같이 declare module이라는 설정을 통해 'next-auth'를 기입 후 interface Session에 추가할 프로퍼티와 & DefaultSession ['user']를 추가한다! 프로퍼티가 추가된 것을 볼 수 있다! 끝~ next-auth 타입스크립트 공식 문서 : https://next-auth.js.org/getting-started/..

Next 강의를 들으면서 Prisma를 사용하게 되었다 백엔드 쪽까지 손을 보기로 작정을 하고! 이 Prisma는 무엇인지 알아보기로 했다. Prisma 공식문서 : https://www.prisma.io/docs/concepts/overview/what-is-prisma What is Prisma? (Overview) This page gives a high-level overview of what Prisma is and how it works. It's a great starting point for Prisma newcomers! www.prisma.io Prisma 공식문서를 들어가면 친절하게 자기소개부터 해주고 있다. 프리즈마는 차세대 ORM이며 다음을 제공한다고 한다! Prisma 클라이언트..