Blog

Full Stack CRUD Applicationwith springboot, supabase, react, bootstrapfrontendhttps://github.com/gi0210lee/learnfullstack-frontbackendhttps://github.com/gi0210lee/learnfullstack-backend설명 및 구성간단한 crud app 만들기springboot, supabase, react, bootstrap 등을 활용함start.spring.io기본설정 후 dependencies 만 spring web, spring data jpa, mysql driver 추가기본 설정 생성 후 intelij 실행db는 planetscale 을 활용하여 mysql 을 쓸까했는데 유료로 변경..

다른 것에 신경 쓰다 보니 Next.js의 업데이트된 기능 및 개발 구성에 대해 잊혀지고 있어 다시 확인해보았다.개발 환경구성use clientmetadataprefatchsuspensevercel deploymovie wiki with nextjs, react, typescriptdemo: https://learn-nextjs14-pyog3hama-gi0210lees-projects.vercel.app/

Blog Project with React, SpringBoot, Oracle 후기 Visual Studio Code에서는 React를 사용하여 프론트엔드를 개발하였고, IntelliJ에서는 Spring을 사용하여 백엔드를 구현하였다. 또한, DBeaver에서는 Cloude Oracle을 활용하여 데이터베이스 관리를 진행하였다. 일반적으로 샘플 프로젝트를 개발할 때는 다양한 라이브러리를 활용하여 복잡한 부분을 해결하곤 하는데, 이번 프로젝트는 다르게 접근하였다. 이 프로젝트는 가능한 한 최소한의 라이브러리만을 사용하여 개발을 진행하였다. 이는 프로젝트의 기본적인 요소들을 명확하게 이해하고 구현하는 데 중점을 두었다. 인증, CRUD(Create, Read, Update, Delete) 연산, REST A..

expo, react, react native snack.expo.dev 브라우저에서 react 앱을 만들수 있게 해주는 온라인 코드에디터 expo 를 설치해 ReactNative 개발 환경을 만든다 npm install --global expo-cli 플레이스토어에서 expo 앱을 받는다. expo는 React Native 로 작성한 코드 전송받아 즉시 확인할 수 있게 하는 앱이다. 명령어를 통해 앱을 만든다 (템플릿은 blank) expo init RNWeather 생성된 앱을 확인한다. cd RNWeather, yarn start 정상 실행을 확인해 보고 expo 에 회원가입 및 로그인을 한다. expo register or expo login 로그인 후 다시 실행하여 qrcode는 폰에서 인식해 ..

사이드 프로젝트로 레딧을 개발해 보기로 했다. 활용할 기술들은 아래 정도다. NextJS, React, SQL, Supabase, SteoZen, GraphQL, TypeScript, Tailwind 아래 명령어를 사용해 tailwindcss 및 typescript 를 활용한 기본 구조를 만든다 npx create-next-app -e with-tailwindcss clone-reddit-2또는 TailwindCSS with NextJS(https://tailwindcss.com/docs/guides/nextjs) 위에 따라서 clone-reddit-2 프로젝트를 만들고 세팅한다. Header, PostBox, Feed, Subreddit 크게 4가지 영역을 확인하고 컴포넌트를 구성한다. 각 컴포넌트 구..

함수형 리엑트 코드 작성 시 import Link from "next/link" 를 사용하다보면 Solved: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? 에러가 나타날 때가 있는데, 자식요소에게 ref를 전달하면서 발생하는 듯하다. 자식컴포넌트를 FowardRef를 래핑해서 활용하는 방법등이 있지만, 로 한번 더 감싸주는 것이 간단한 방법인듯 하다 https://github.com/vercel/next.js/issues/7915

yarn을 통해 multer 설치 중 아래와 같은 메시지가 뜨며 설치가 안된다. info There appears to be trouble with your network connection. Retrying... 프락시 문제인지 네트워크 문제인지 종종 나타나는 것 같은데, yarn 캐시를 지우고 패키지 업데이트 후 설치하니 정상적으로 된다. yarn cache clean yarn install yarn add multer