JadeCode

타입스크립트는 자바스크립트에서 타입을 추가한 확장 버전이다. 타입스크립트는 정적 타입 검사를 통해 많은 런타임 오류를 컴파일 타임에 미리 잡아낼 수 있다.타입 불일치, 함수 호출 오류, 잘못된 객체 접근, 잘못된 반환 값, 잘못된 this 참조 등의 오류를 실행 전에 잡아낼 수 있어 이를 통해 코드의 안정성, 가독성, 유지보수성을 크게 향상시킬 수 있다. 타입스크립트의 타입 중 독특한 타입에 대해 알아보는 시간을 가져보자. * 더 큰 타입의 값을 더 작은 타입의 값으로 할당하는 것은 안된다.let num1: number = 10; // 더 큰 타입 ex) 직사각형let num2: 10 = 10; // 더 작은 타입 ex) 정사각형num1 = num2; // num1에 num2 할당 가능num2 = num..

.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 회원..

보호되어 있는 글입니다.