css의 부분은 관심이 있어서 이것저것 만지고 다른 사람들 한 것을 참고하다보면서 익숙해진 부분도 있어서 모든 것을 기록하기 보다는 몰랐던 부분만 기록할 예정입니다. CSS 선택자 :hover : html 요소에 마우스를 올렸을 때 반응하게 하는 css 요소 :active : 사용자가 활성화한 요소, 활성은 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미 :nth-of-type() : 동일한 유형(태그 이름)의 형제 간의 위치를 ​​기반으로 요소를 일치 예를 들자면, p:nth-of-type(2n) { color: blue } 짝수마다 색깔이 파란색을 적용 :checked : on 상태인 라디오(), 체크박스(), 옵션() 요소 ::before : 선택한 요소의 첫 자식으로 의사 요소를 하나 생성 :..

해당 강의에서 처음에 돌아가는 구조를 먼저 간략하게 설명을 하면 아래와 같습니다. 더보기 인터넷 네트워크를 통해 정보를 공유하고 프로토콜을 이용하여 통신하는 것을 의미, TCP/IP라는 통신 프로토콜을 이용하여 정보를 주고 받을 수 있습니다. 웹 특정 사이트에서 정보를 요청을 하고 서버에서 응답을 하여 원하는 데이터를 html, css, javascript로 만들어서 보내주면 브라우저에서 사용자가 보기 편하게 봐꿔서 보여줍니다. 프론트엔드와 백엔드 프론트엔드에서는 사용자가 보는 웹에서 어떠한 행위를 누르게 되고 백엔드에서는 요청사항에 대해서 응답을 하고 필요한 데이터를 만들어서 전달을 합니다. 그러면 다시 프론트엔드는 그 데이터를 가지고 사용자가 브라우저에서 볼 수 있도록 재구성 되어서 보여주는 역할을 ..

Weather API [여기] 로그인을 하여 current weather API 사용을 위해, API key 발급 사용을 위해서는 왠만한 API의 경우에는 해당 사이트에 정리가 잘 되어 있다. Fetch : Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것 간단하게 API를 사용하기 위해서 정보를 받아오는 역할이다. (물론 post 역할도 있지만, 지금 당장에는 get) fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다. HTTP Statue Code가 404나 500을 반환하더라도요. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환, 보..

알아두어야 하는 것 querySelector preventDefault classList addEventListener localStorage querySelector 문서 내에서 일치하는 querySelector() 첫 번째 항목을 반환 "#idName" : id 가 idName과 일치하는 ".className" : class가 className과 일치하는 "input" : input과 일치하는 preventDefault [여기] 이벤트가 명시적으로 처리되지 않으면 기본 작업이 정상적으로 수행되지 않아야 한다고 사용자에 알려줌 classList 클래스를 조작하는데 사용, add() remove() replace() 그리고 toggle() 메서드가 있다. addEventListener [여기] Event..

predictable state container, 프론트 엔드 개발에서 가장 인기 있는 라이브러리 중 하나로 state를 관리하기 위한 패턴인 상태 컨테이너이며 클라이언트, 서버 및 기본 환경에서 일관되게 동작하고 테스트하기 쉬운 자바 스크립트로 앱을 빌드하는 데 도움이 되도록 설계되어 있습니다. Action, 이벤트로서 Store로 데이터 (API 호출 또는 양식 제출 등)를 보냅니다. 앱 어디에서나 작업을 호출 하는 것이 쉽고 Dispatch method를 사용합니다. Reducer, 현재 state를 가져와서 작업을 수행하고 새로운 state로 반환합니다. callback(reducer)을 허용하고 여러 형태의 값을 얻을 수 있는 array reduce method를 기반으로 작동합니다. 현재 s..

Animation 속성을 이용하여, 사라지는 효과를 가지고자 한다. FadeIn: 서서히 생기는 효과 .box { /* animation : 효과(@keyframes 이름) 동작시간 */ animation: fadein 3s; } @keyframes fadein { /* 효과를 동작시간 동안 0 ~ 1까지 */ from { opacity: 0; } to { opacity: 1; } } @keyframes를 이용하여 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정 from을 시작으로 to로 변화하는 과정을 만들 수 있다. FadeOut: 서서히 사라지는 효과 .box { /* animation : 효과(@keyframes 이름) 동작시간 */ animation: fadein 3s; } ..

Flex 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하며, flex-grow, flex-shrink, flex-basis의 단축 속성이다. 부모 div 안에 여러 div를 한 줄에 표현을 할 때 사용하였다. /* One value, unitless number: flex-grow */ flex: 2; /* One value, length or percentage: flex-basis */ flex: 10em; flex: 30%; /* Two values: flex-grow | flex-basis */ flex: 1 30px; /* Two values: flex-grow | flex-shrink */ flex: 2 2; /* Three value..

프로젝트를 하다보니 사용자의 편의성에 맞추기 위해서는 반응형 웹을 사용하는 것은 필연적이라 생각이 들었는데요. 그래서 모듈을 찾다보니 여러가지가 나오지만 그 중에서도 react-responsive와 react-device-detect를 비교를 하면 화면의 크기와 기기 종류로 판단하여 사용한다. react-responsive 아래와 같이 useMediaQuery를 사용하여 크기에 따라서 어떻게 반응할지 혹은 가로/세로모드에 따라서 어떻게 반응해야 되는지 Hooks을 통해서 변화를 줄 수 있다. import React from 'react'; import {useMediaQuery} from 'react-responsive'; export default function TestMap() { const isD..