예방이의 개발일기

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

웹페이지가 구축되기 위한 과정 1. 기획 2. 시안작업 : 시각적인 웹페이지를 구현하기 위한 용어 3. 개발작업(코딩) : 웹페이지 구현과 관련된 용어 4. 서버구축(완료) : 웹페이지 연결 및 구축과 관련된 용어 1. 시각적인 웹페이지를 구현하기 위한 용어 - 랜딩페이지 : 광고에 쓰이는 개념, 서비스 및 광고 등을 목적으로 특별 제작된 웹페이지 단일 웹페이지인 경우가 큼 - 반응형 웹 : 하나의 웹페이지로 모든 기기에 호환되는 웹디자인 형태 - 원페이지 : 광고에 쓰이는 개념, 서비스 및 광고 등을 목적으로 특별 제작된 페이지 웹페이지의 메인화면에서 브라우저에 꽉차게 레이아웃을 보여주는 형태로 스크롤링을 통해 컨텐츠를 배치하는 스타일 - 그리드 : 웹페이지 레아아웃 형성을 위한 셀의 분배, 가이드 라..

인텔리제이에 접속하니까 위와 같은 에러가 뜰 때 해결방법 일단 터미널에 들어가서 git의 위치를 알아본다 where git 그리고 경고에 적힌 명령어 그대로 실행 ㄱㄱ sudo xcodebuild - license 마지막 설명대로 agree라고 타이핑치고 엔터!!! 그리고 인텔리 제이 설정 들어가서 "git"으로 검색해서 /usr/bin/git 이라고 입력 후 Test 버튼 클릭하면 된다. 만약 위에 설정이 제대로 이뤄지지 않았으면 이미지처럼 빨간색 경고글이 뜬다. 제대로 설치됐으면 Test버튼 클릭시 git 버전이 잘뜬다.