var 키워드 1. 변수 중복 선언 허용 2. 함수의 코드 블록만을 지역 스코프로 인정 함수 내부가 아니면 for 문 if 문 등 에서도 전역 변수로 인정됨 3. 변수 호이스팅에 의해 변수 선언문이 선두로 끌어올려진 것처럼 동작한다. 즉 변수 선언 이전에 참조 할 수 있지만 할당문 이전에 참조하면 undefined 를 반환 -> 변수 선언문 이전에 변수를 참조하는 것은 에러를 발생 시키지 않지만 가독성도 떨어지고 오류 발생 여지가 있다. 1 - 선언단계 + 초기화 단계 선언단계에서 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알림 초기화 단계에서 undefined 로 변수 초기화 초기화 단계부터는 참조 에러가 발생 하지 않고 undefined 출력..

https://openweathermap.org/ Current weather and forecast - OpenWeatherMapOpenWeather Weather forecasts, nowcasts and history in a fast and elegant wayopenweathermap.orgAPI 를 받아와야 하니 사이트에서 회원가입 후 로그인 우측 내정보를 보면 API 를 볼 수 있다. API 키를 복사해서 데이터를 받아올 예정 API 키는 중요 정보로 나중에 github 에 push 할때 같이 들어가지 않게 파일을 따로 관리하여서 .ignore 파일에 넣도록 해야 한다. 이제 API 로 들어가서 많은 데이터 중에서 5Day / 3 Hour forecast 를 받을 예정 API do..

Position 속성으로 absolute 를 적용하여 div 내의 input 과 button 을 강제로 화면에 위치 시키고 div 창을 감싸는 class 명 blurContainer 로 화면전체 를 덮는다이후 position 속성 absolute 적용하여 blur 적용 하면 된다. 배경을 흐리고 앞에 창을 띄우는 효과를 줄수 있다. 모달창 가운데 위치 시키기 CSS 속성position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); 1. position: absolute;부모 요소를 기준으로 위치를 지정.2. top: 50%; left: 50%;부모 요소의 왼쪽 위 모서리로부터 가로 세로 각각 50% 위치에 이 요소의 왼쪽 위 ..

1. Tailwind CSS 란 ? Tailwind CSS 는 가장 대표적인 Utility-First CSS 프레임워크이다. Utility-First 란 미리정의된 CSS 클래스들을 필요할 때마다 가져다 쓰는 방식 예를 들어 p-4 , text-blue-600, flex 등의 클래스를 HTML 에 추가하는 것만으로 스타일을 바로 적용할 수 있다. CSS 코드를 직접 작성 하지 않고, Class 이름도 안지어도 되기때문에 속도와 생산성 에서 장점이 있다. 2. Tailwin CSS 설치 ( React + Vite 기준) 1) Tailwin CSS 설치npm install tailwindcss @tailwindcss/vite 2) vite.config.js 파일의 plugin 에 tailwi..

이번 포스팅에서 다룰 내용styled-components가 무엇인지기본적인 사용법과 실습 예시컴포넌트 스타일 재사용 방법자동완성 VSCode 확장 소개styled-components의 고급 사용법props를 이용한 동적 스타일링 1. 웹프론트엔드의 기본 구성 1) HTML 2) JavaScript 3) CSS 앞에서 SCSS라는 기술을 알아 보았는데 Mixin 과 변수 및 중첩을 사용하여 문법을 좀더 단축 시킬 수는 있었지만 아직도 CSS 파일은 따로 작성해야 한다. 만약 CSS 까지도 JavaScript 파일 안에서 작성 할 수 있다면 진정한 컴포넌트 단위 개발(*CCD)이 가능 → 이렇게 해서 탄생한 기술이 Styled Componet 다 *CCD : Component Driven..

1. 프론트 엔드에서 사용하는 세 가지 언어HTMLCSSJavascript React 에서는 HTML 과 Javascript 를 JSX라는 문법으로 한파일에 작성이 가능하지만, CSS 는 여전히 별도의 파일에 작성. 하지만 React 에서 CSS 외에도 다양한 스타일링 방법이 존재 2. CSS 의 단점과 SCSS 이 등장 CSS 장점배우기 쉽고 간단하다.별도의 설정이나 설치 없이 브라우저가 바로 인식로딩속도가 빠르다 CSS 단점코드의 중복이 많다.재사용성이 낮다.구조화가 어려워 유지보수가 힘들다. 3. SASS 와 SCSS 의 차이점 1) SASS : Syntactically Awesome Style Sheets (문법적으로 짱멋진 ..