Prettier이란? Visual Strudio Code에서 코드를 보기 좋게 정리해주는 확장 프로그램이다. 대부분의 프로그래밍 언어에서 사용 가능 협업 시 코딩 스타일이 달라서 merge할 때 문제가 생길 수 있으므로 사용하는 것이 좋음 설치방법: Visual Studio Code 화면에서 왼쪽 사이드 바에서 테트리스같이 생긴 extension(확장)아이콘을 누르고 prettier를 검색 후 설치합니다. (가장 위에 뜨는 걸 선택하면 됩니다.) 맨 하단을 보면 Prettier가 설치된 모습을 확인할 수 있다.▼ + 빨간색으로 체크한 부분을 클릭하면 프리티어에 관한 상세 속성을 볼 수 있다. ▼ 프리티어 적용이 안될 때, 해결방법 1. Format on Save 확인 vscode 설정(settings)에..
웹표준은 W3C에서 지정한 웹에서 표준적으로 사용되는 기술과 규칙을 말함 웹 표준에 호환성과 접근성도 포함 호환성: 다양한 디바이스, 브라우저에서 일관성있게 보이고 같은 기능을 제공하는 것 접근성: 호환성과 함께 웹사이트에서 제공하는 정보를 차별없이 누구나 다양한 환경에서 일관성 있게 볼 수 있도록 보장하는 것 아래의 사이트를 통해 HTML 코드 오류나 전체적인 문법 검사를 할 수 있습니다. ->이후에 그 아래에 있는 CSS 마크업 검사를 하면 됩니다. https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on s..
크롬 개발자 도구 TIP: 크롬 개발자도구(F12) -> Element -> Properties 를 통해서 선택된 엘리먼트가 DOM에 대한 어떤 속성을 가지고 있는 지 알려줍니다. Elements 돋보기 클릭시 찾고자하는 요소를 쉽게찾을수있다 Computed Style - 선택된 엘레멘츠의 최종적인 css효과나타냄 Styles - 현재 선택된 엘레멘츠의 사용자가 적용한 css를 나타냄 Metrics - 엘레먼츠의 박스모델을 보여줌 (높이,폭,두께 등등) , 실시간으로 수정이 가능함 Properties - 선택된 엘레멘츠가 돔에대한 어떤 속성을 가지고 있는지 나타냄 DOM Breakpoints - 속성이 변경된경우 변경된부분에서 자바스크립트가 멈춤 Event Listeners - 선택된 엘레멘츠에 어떤..
▶자바스크립트 작명방법 +a : 링크 내부에는 없지만 할당된 값이 string인 상수는 전부 대문자로 작성한다.( 확인 필요 ) 공백 X 특수문자 ( _ , $ )만 가능 숫자 시작 X 변수,인스턴스,함수,메서드 항상 소문자로 시작하는 카멜케이스 생성자 함수는 대문자 카멜 케이스 자바스크립트 변수 명명 규칙 잘 정리되어 있는 링크 자바스크립트 스타일 가이드 - 네이밍 컨벤션 편 본 글은 아래의 자바스크립트 코딩 스타일 가이드를 참고 및 번역하여 작성되었습니다. 의역 및 잘못된 해석으로 잘못된 정보가 포함될 수 있으니 원문과 함께 참고해주세요. Google Airbnb Nexedi W3S velog.io https://google.github.io/styleguide/jsguide.html#naming-r..
참고 사이트: https://uipac.com/451 CSS 네이밍 규칙 네이밍 규칙 공통 규칙 공통 네이밍 규칙 예 잘못된 예 올바른 예 설명 Tit_pop.html *-hidden-obj 03_btn_more.gif tit-section 시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.(파일 및 폴더 제외) c. uipac.com simple ver https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=kty4523&logNo=221586270676 [작업가이드] 파일,CSS 네이밍 규칙 공통규칙 - 이름은 영문 소문자로만 시작할 수 있다. - '형태_의미_상태' 순서로 조합하며, 3단... blog.naver.com ht..
https://home.openweathermap.org/ Members Enter your email address and we will send you a link to reset your password. home.openweathermap.org 1. 회원가입 -> 이메일 확인 -> 로그인 2. 로그인 화면에서 API 클릭 3. API 중에서 내가 필요로 하는 API 쓰기 4. API 적용하기(여러 방법이 있습니다.) (이 경우에는 아래의 URL에 알고 싶은 위치의 latitude 값과 longitude값 그리고 내 API 키를 넣어주면 됩니다. //주황색으로 표기되어 있는 부분, {} 중괄호 내부에 쓰는게 아니라 주황색 부분을 아예 대체하시면 됩니다.) 결과물이 아래와 같은 식으로 뜰텐데 chr..
Block: Encapsulates a standalone entity that is meaningful on its own. (자체적으로 의미있는 독립 실행형 엔티티를 캡슐화한다.) block with HTML ... block with CSS 주의사항 ▷Use class name selector ONLY ▷태그 네임이나 아이디는 안됨 ▷해당 페이지에 다른 블록이나 엘레멘트에 의존성이 있으면 안됨 Modifier: flags on blocks or elements. Use them to change appearance, behaivor or state CSS class is formed as block's or element's name plus or element's name plus two dash..
- Total
- Today
- Yesterday
- reactAPI
- float 레이아웃
- getServerSideProps
- getStaticPaths
- 틸드와 캐럿
- fs모듈 넥스트
- nvm경로 오류
- 프리렌더링확인법
- is()
- D 플래그
- 부트캠프항해
- 타입스크립트 장점
- 항해99프론트
- grid flex
- nvm 설치순서
- 형제 요소 선택자
- tilde caret
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- 항해99추천비추천
- ~ ^
- 원티드 FE 프리온보딩 챌린지
- && 셸 명령어
- aspect-ratio
- 항해99프론트후기
- 원티드 3월 프론트엔드 챌린지
- text input pattern
- Prittier
- 프리온보딩 프론트엔드 챌린지 3월
- 타입스크립트 DT
- 원티드 프리온보딩 FE 챌린지
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |