JadeCode

.m-1{margin:10px} .m-2{margin:20px} .text-sm{font-size:12px} .text-lg{font-size:18px} 자주 쓰는 스타일을 클래스명으로 만들어 사용하는 utility class utility class 여러 개 모아놓은 라이브러리이다. Bootstrap과의 차이점 bootstrap도 완성된 Component를 많이 제공하고 Utility class를 제공한다. tailwindcss가 더 많다. 그래서 tailwind가 용량은 크지만 build시 안 쓰는 스타일은 제거해준다. Material UI와 차이점 mui는 미리 만들어진 컴포넌트들을 이용하는 느낌이라면 tailwind는 className으로 빠르게 커스텀하는 느낌이다. Tailwind단점 자주 쓰는..

create-next-app으로 프로젝트를 새로 만드는데 App router(recommend)라는 cli옵션이 있었다. 아무 생각 없이 Y를 누르고 프로젝트가 생성되기 기다렸다..... 컴포넌트 구조가 기존에는 app/pages, app/styles였다면 이번에는 바로 src/app으로 통일되어있었다. 이제서야 찾아본 나. 반성하는 중이다... next.js가 13버전으로 업데이트 되면서 라우팅 방식이 바뀐 것이다. 그리고 여러가지 바뀐 점이 있는데.. 1. Layout 과거의 프로젝트에서는 따로 Layout.tsx로 파일을 만들고 _app.tsx에 제일 상단에 적용했다. import Layout from "@/components/utils/Layout"; export default function A..

모노레포를 사용하는 가장 큰 이유는 공통된 작업을 줄이기 위해서라고 생각한다.예를 들어 Header, Footer, 버튼 스타일 등 한 서비스에서 각각의 프로젝트를 진행한는데에 공통된 컴포넌트나 함수가 있을 때 공통 패키지를 만들어 사용하는 것이 효율 성이 좋을 것이다. packages/lib폴더를 생성하고 package.json파일을 생성하고, typescript를 설치한다.//루트 디렉토리상태mkdir packages/libcd packages/libyarn inityarn add typescriptpackages/lib/package.json파일 이름을 변경하고 main을 추가한다."name":"@non/lib","main":"./src/index.ts"packages/lib/tsconfig.jso..

1. yarn berry 버전 변경2. 프로젝트에 yarn berry 초기화 후 apps디렉터리 생성 후 package.json > workspaces에 apps추가yarn init -wmkdir appscd appsapps디렉토리에서 yarn create next-app으로 next.js 프로젝트 생성yarn create next-app? Tainwind ?그동안 스타일링을 scss, styled-components 등 다양한 디자인 방식을 적용해왔다.최근 Tailwild CSS를 사용하여 개발한 사람들은 개발 속도가 빨라지는 장점이 있다고 한다. 따로 css파일 없이 하는거라 컨텍스트 스위칭도 없고, 시멘틱한 클래스명을 정하는 시간도 사라지는 장점이 있다고 한다. 4. package.json 의 "n..

모노레포는 여러 개의 관련된 프로젝트를 하나의 저장소에서 관리하기 때문에 node.js버전을 통일하여 개발하는 것이 버그와 호환성 문제를 예방할 수 있다. node.js버전을 명확히 하는 것이 좋다. nvm은 node version manager로 노드 버전을 쉽게 관리하고 변경할 수 있다. 1. nvm 설치 nvm -v로 nvm설치 확인을 하자 mac os nvm 설치방법 https://jiyeongstar.tistory.com/143 [리뷰] Linux와 Node CLI command-line interface 프롬프트(prompt) CLI의 명령줄 대기모드를 가리키는 것으로, 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간 명령어 pwd // 현재 위치 확인 mkdir // 새로운 폴더 생성..

https://mealti-38fed.web.app/ MEALTI 밀티로 오늘의 식사를 기록해보세요 식비 가계부 보러가기 → 뭐 먹을지 고민 된다면? 레시피 추천 받으러 가기 → mealti-38fed.web.app 파이어베이스로 호스팅 한 내 웹 사이트 밀티! 반응형으로 구현하였기 때문에 모바일 상에서도 잘 열린다. 하지만 왠지 모르게 어플로 된다면 좋겠다... 라는 생각이 들던 와중 웹뷰로 해서 폰에 다운 받으면 어떨까 라는 생각에 웹뷰에 대해서 알아보게 되었다. React Native로 만들기! expo를 사용하면 쉽게 만들 수 있다. npm install -g expo-cli npx create-expo-app 앱이름 npm install -g eas-cli // eas 서비스 이용 Expo 회원..

보호되어 있는 글입니다.

기존에 react-native로 만들었던 앱 프로젝트를 next.js로 웹으로 만들려고 했다. 하지만 둘에서 공통으로 작업되는 함수가 있으며 비슷한 코드들이 있어서 하나의 레포로 만들면 어떨까 하는 생각으로 기술을 찾아 보다가 모노레포 라는 것을 발견했다. 모노레포(Monolithic Repository)는 하나의 저장소에 여러 프로젝트나 모듈들을 함께 저장하는 소프트웨어 개발 방법론이다. 기존에 하나의 프로젝트마다 별도의 저장소를 유지하는 멀티레포 방식과는 다르게 모노레포에서는 모든 코드를 하나의 저장소에서 관리함으로써 여러 가지 장점을 제공한다. 코드 공유와 코드 복사 붙여넣기의 양을 줄일 수 있으며, 코드 병합과 코드 배포의 작업을 더 쉽게 관리할 수 있다. 대표적으로는 Turborepo, Yarn..