본문 바로가기
반응형

전체 글

Nest.js 시작하기 Nest.js 는 node.js를 이용한 express를 활용한 서버 측 애플리케이션을 구축하기 위한 '프레임워크'다. 공식문서를 보면 Typescript를 완벽히 지원하고 프로그레시브한 자바스크립트를 사용하며 어쩌구가 있는데 결국 가장 중요한 건 프레임워크인 만큼 프로젝트 아키텍처가 정해져 있다는 것이다. 비교적 자유분방한 express 프레임워크를 활용하여 사람마다 제 스타일로 폴더링 하고 서버를 구축하고 본인 입맛에 맞게 파일들을 만들고 그 프로젝트를 협업 혹은 인수인계 한다고 생각하면 벌써 어지럽다. 결론은 Nest.js를 사용하는 이유중 가장 큰 것은 난 고정화된 프로젝트 구조로 인해 협업 및 다른 사람들이 봐도 금방 코드를 분석할 수 있다는 점이라고 본다. Nest.js를 시작하려면 우선 ne.. 더보기
개발하면서 어떠한 라이브러리가 되었든 메이저 버전은 함부로 건드리지 말자 ... 더보기
개인 tailwindcss 세팅용 문서 1. 필요한 패키지 설치 yarn add tailwindcss postcss autoprefixer 3형제 설치 후 2. config 파일 손봐주기 npx tailwindcss init -p 하면 postcss.config , tailwind.config 두개 파일이 생성되는데 post는 냅두고 tail config 에서 /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/components/**/*.{html,js,ts,jsx,tsx}", "./src/pages/**/*.{html,js,ts,jsx,tsx}", "./src/pages/*.{html,js,ts,jsx,tsx}", ], theme: { }, plug.. 더보기
개인 보관용 eslint 설정하기 nextjs 프로젝트 세팅중에 eslint 설정을 다시 해주는데 다시 에러 떠서 뭐가 빠졋지 하다가 다시 세팅을 완료했는데 까먹기전에 써놓는다 1. lint 설정을 위해 필요한 패키지들 깐다. "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "eslint": "8.22.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-p.. 더보기
Nextjs 를 개인적으로 쓰고 싶은 이유 근래 Next.js 프로젝트를 작업할 일이 있어서 일단 작업하고 난 뒤에 Nextjs 에 대해 여러 장단점 글들을 찾아보았는데 React와 다르게 SSR 렌더링을 이용해 우선 사용자에게 html 페이지를 보여주고 ~~~, SEO에 너무 유리하고~~~ 등등이 있었는데 개인적으로 가장 끌렸던건 Routing 설정 필요 X 였다. Route를 위한 컴포넌트를 만들 필요도, 그 컴포넌트에서 매 경로마다 일일이 컴포넌트 매칭시키는 작업, 등등을 할 필요가 없는 것이 제일 써보고 싶게 만든 이유다. npx create-next-app 위 명령어를 통해 넥스트 앱을 만들게 되면 가장 상위에 pages 폴더가 있는데 그 안에 들어가는 파일 이름이 곧 라우팅 url로 인식이 된다. ex:) somedomain.com/a.. 더보기
프레임워크와 라이브러리의 가장 큰 차이 프레임워크 : 프레임워크가 갑 라이브러리 : 내가 갑 더보기
구글 서치 콘솔 HTML이 아닙니다 에러 해결법 우선 이 에러는 xml 파일을 보여주는 주소를 입력했을 때 xml 파일이 나오긴 나올 때 발생하는 것인데 첫번째 sitemap 프로토콜을 지켰는지 두번째 상단의 urlset 태그에 속성이 전부 다 박혀있는지 본인도 이 에러로 반나절 이상을 날려먹었는데 첫번째 아래의 링크를 타고 들어가서 본인 xml 파일 구조가 아래와 같이 되어있는지 확인해야한다. https://www.sitemaps.org/protocol.html 이번에 처음 구글 서치 콘솔 작업을 하고 있는데 처음에 전달 받은 xml 파일은 url 1 url 2 이런 식으로 되어있었다. 될리가 없었다. 위 사이트에서 규칙을 지키면서 옵셔널 한 것들은 빼고 xml 파일을 만든다면 아래 코드블럭 같이 나올것이다. !! 태그는 필수 url 1 url 1 .. 더보기
React recoil-persist 사용하기 리액트를 사용하면서 전역 상태 관리 라이브러리 중 하나인 recoil에도 사이트를 새로고침해도 전역 값을 유지시킬 수 있는 방법이 있다. recoil-persist 라는 패키지인데 사용법 또한 매우 간단하다. 이 recoil-persist 가 값을 유지하는 원리는 간단한데 로컬 스토리지 혹은 세션스토리지에 담아서 저장하는 것이다. npmjs 링크 https://www.npmjs.com/package/recoil-persist npm i recoil-persist 설치 해 준 뒤 import { atom } from "recoil"; export const isHeaderShow = atom({ key: 'isHeaderShow', default: true, }); 위의 코드가 일반 기본적으로 사용하던 r.. 더보기
반응형

티스토리툴바