예방이의 개발일기

📌 공식문서 Routing: Route Groups | Next.js Route Groups can be used to partition your Next.js application into different sections. nextjs.org 📌 이게 뭔가? 일단 나는 nested 되는 레이아웃을 가지고 싶지 않았다. 그리고 1depth 페이지에서는 모두 같은 레이아웃을 가지고 있었다. 이걸 어떻게 적용해야할까 고민하다가 드디어 찾았다. 1. Root Layout 설정 일단 내가 지금 혼자 공부하고 있는 프로젝트에서 공통인 부분은 이미지에 표시한 헤더와 푸터이다. 저 부분이 RootLayout이다. 2. 각 메뉴 Sub Layout (?) 설정방법은? 하지만 나의 문제는 각 메뉴(기관소개의 이용안내..

Next.js 프로젝트를 하고 있는 중에 async키워드와 'use client' 를 같이 쓰니 에러가 났다. 서버 사이드 렌더링과 클라이언트 사이드 렌더링 때문에 생긴 오류라고 생각이 된다. 그래서 찾아보았다!! 언제 서버 컴포넌트, 클라이언트 컴포넌트를 쓰는 것 일까? 공식문서에 따르면 Fetch data는 서버 컴포넌트 내가 해당 컴포넌트에서 쓰려고 했던 Event Listeners와 Lifecycle Effects은 클라이언트 컴포넌트라고 해서 생긴 오류였다. 해결방법 일단 내가 해결한 방법은 상위 컴포넌트에서 Fetch Data를 해서 하위 컴포넌트에 props로 넘겨줬다. 근데 찾아보니까 children을 이용한 방법이 있었다. 한번 적용해봐야겠다. Configuring: TypeScript ..

yarn으로 패키지를 설치하니까 .yarn 파일이 엄청 많이 생겼다. 그것도 모르고 터미널로... git add . 해버렸더니... 깃헙 레파지토리에 올라가질 않는다...ㅎㅎㅎ ㅠㅠㅠ 그래서 그냥 프젝 다시 파서 하기로... 초기에 알아서 다행이다. 이 글을 참고했다. Am I meant to commit yarn's `.pnp.js` file? Yarn includes an optional "Plug'n'Play" feature which moves node_modules out of the project directory. In doing so it creates a .pnp.js file with references to various dependency paths on the hard ... st..

선택자 패턴에서의 우선순위 적용 규칙 !important 인라인 스타일 요소 style="color:red" #id .class 속성기반 가상 Tag * CSS 명시도 계산법 1. inline 스타일 : 1000점 2. Id 선택자 개수(#) : 100점 3. Class 선택자 개수 (.) : 10점 4. Tag, Element 선택자 개수 : 1점 5. !important : 그냥 강제로 무조건 적용 (99999999...점) 6. 전체 선택자 (*) : 0점 7. 가상 엘리먼트는 무시 * 전역선택자(*), 조합자(+, >, ~, "", ||)과 부정 의사 클래스는 명시도 영향 없음 * 부정의사 클래스 내부에 선언한 선택자는 영향을 끼침 * 점수가 같다면 가장 마지막에 (가장 하단에) 작성된 선언이 적..

JSON 데이터를 빠르게 만들어주는 사이트들이다. 가 데이터 만들 때 사용하면 편하다. DB에서 데이터 가져오는 척 해줄 수 있는 사이트 이다. 초기 프론트엔드 프로젝트 작업할 때 유용하다. ✨ JSON Generator 1. JSON GUI JSON GUI A JSON Viewer and editor for visually editing JSON files. Supported file types for importing and exporting are CSV, YAML, XML etc. You are also able to generate JSON patches (RFC6902). json-gui.esstudio.site 2. Objgen ObjGen - Live Code Generation for t..

CSS를 빠르게 압축해주는 사이트 이다. 압축되어있는 CSS를 Compression Level을 통해 풀수도 있다. min 파일을 빠르게 만들 수 있어서 좋은 것 같다. 아님 가끔 min파일을 풀어서 확일 할 때도 잘 쓰였다. CSS Compressor CSS Compressor Use CSS Compressor to compress CSS (CSS 1, CSS 2, CSS 2.1 & CSS 3) to reduce CSS code size and make your website load faster. You can select from 4 levels of compression, depending on how legible you want the compressed CSS to be versus degr..

reset css 사이트 CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */..

웹사이트 만들다 보면 아이콘을 직접 만들 수는 없으니까 인터넷에 있는 레퍼런스들을 빠르게 참고해서 사용해야하는데 아래 사이트들에서 이용하면 좋았다. 특히 이미지를 다운받고 싶으면 Iconbuddy가 유용했던 것 같고 리액트 프로젝트를 할 때는 npm으로 React Icons을 설치해서 유용하게 사용했다. 1. Iconfont Download 2400+ Free, High-Quality Icons | IcoFont icofont.com 2. Iconbuddy Iconbuddy — 180K+ open source icons Iconbuddy is a search engine that allows you to search, download, customize, and edit over 180,000 open ..

프로젝트 할 때 어떤 색상을 메인으로 해야할지? 그리고 메인 색상과 잘어울리는 색상은 무엇이며 어떻게 구성을 해야할지 고민이 많이된다. 그 고민을 줄여주는 사이트들이다. 색상팔레트, 컬러조합 등을 추천해준다. 1. Coolors Coolors - The super fast color palettes generator! Generate or browse beautiful color combinations for your designs. coolors.co 2. Paletton.com Paletton - The Color Scheme Designer Paletton, the color scheme designer In love with colors, since 2002. Paletton application..