프로그래밍 공부 노트

styled-components는 CSS 파일 없이도 JS 파일 내부에서 CSS를 작성할 수 있도록 도와주는 라이브러리이다. 프로젝트를 진행하면서 CSS와 JS파일을 왔다갔다하는 번거로움을 줄여준다고해서 사용해봤다. styled-components를 사용해보면서 느낀 장점은 아래와 같다. 1. styled-components를 사용하면 한 창에서 디자인, 로직 모든것을 해결할 수 있다. 2. CSS 파일을 추가적으로 생성하지 않아도 된다. 3. SCSS 에서 사용하던 문법을 비슷하게 사용할 수 있다. 4. class 명칭을 고민하는 시간이 줄어든다.? 사용법과 간단하게 공부했던 내용을 정리해보려고 한다. 사용방법 import React from " react " ; import { Link } from " react-router-dom " ; import styled from " styled-components " ; import " ./MenuFont.css " ; // styled-components const List = styled . ul ` display : flex ; list-style : none ; ` ; const Item = styled . li ` padding-right : 1 rem ; ` ; const StyledLink = styled ( Link ) ` text-decoration : none ; color : black ; ` ; const CenterMenu = () => { return ( < List className = " Menu-Font " > < Item > < StyledLink to = " / " > Home </ StyledLink > </ Item

가상 클래스 사용자 동작에 반응하는 가상 클래스 :link - 방문하지 않은 링크에 스타일 적용 :visited - 방문한 링크에 스타일 적용 :hover - 웹 요소에 마우스 커서를 올려놓을 때 스타일 적용 :active - 웹 요소를 활성화했을 때 스타일 적용 ex) 웹 요소를 누르고 있을 때 :focus - 웹 요소에 초점이 맞추어져있을 때 스타일 적용 UI 요소 상태에 따른 가상 클래스 :enabled 와 disabled - 요소를 사용할 수 있을 때와 없을 때 스타일 지정 ex) 회원 약관 :checked - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때 스타일 지정 구조 가상 클래스 :root - 문서 전체에 적용 :nth-child(n) 와 :nth-last-child(n) - 자식 요소의 위치에 따라 스타일 적용 :nth-of-type(n) 와 :nth-last-of-type(n) - 특정 태그 위치에 스타일 적용 :first-child 와 :last-child - 첫 번째, 마지막 요소에 스타일 적용 :first-of-type 와 :last-of-type - 형제 관계 요소의 위치에 따라 스타일 적용 :only-child 와 :only-of-type - 하나뿐인 자식 요소에 스타일 적용 그 외 가상 클래스 :target - 앵커 목적지에 스타일 적용 :not - 특정 요소가 아닐 때 스타일 적용 가상요소 가상 클래스 선택자가 여러 태그 중에서 원하는 태그를 선택하기 위해서 사용되는 선택자라면 가상요소는 내용의 일부만 선택해 스타일을 적용할 때 사용한다. ::first-line 와 ::first-letter - 첫 번째 줄, 첫 번째 글자에 스타일 적용 ::before 와 ::after - 내용의 앞뒤에 컨텐츠 추가하기 ex) 제품 목록 옆에 'NEW!!' 텍스트를 추가할 수 있다.

옵셔널 체이닝( ?. )을 사용하면 프로퍼티에 작성되지않은 중첩객체로 발생되는 에러를 해결할 수 있다. const information1 = { team : "A" , detailOption : { name : "lee" , age : 30 , score : { first : 10 , second : 30 , third : 50 , }, }, }; const information2 = { team : "C" , detailOption : { name : "kim" , age : 30 , }, }; const getInformation = ( person ) => { console . log ( person . detailOption . score . third ); }; getInformation 함수에 information1 을 전달하면 숫자 50을 반환하지만 getInformation 함수에 information2 을 전달하면 아래와 같이 오류를 반환한다. 에러 발생 원인은  information2 내부에 프로퍼티에 작성된 중첩객체 detailOption 내부의 프로퍼티에 작성된 score에 프로퍼티로 third가 작성되지 않았기 때문이다. 이렇게 오류가 발생할때 && (AND)연산자를 사용하여 아래와 같이 해결할 수 있었다. const information1 = { team : "A" , detailOption : { name : "lee" , age : 30 , score : { first : 10 , second : 30 , third : 50 , }, }, }; const information2 = { team : "C&qu

Promise.all 여러개의 프로미스를 동시에 실행시키고 모든 프로미스가 완료된 후 데이터를 처리할 때 사용한다. 사용법 let promise = Promise . all ([... promises ...]); Promise . all ([ new Promise (( resolve ) => setTimeout (() => resolve ( 1 ), 3000 )), new Promise (( resolve ) => setTimeout (() => resolve ( 2 ), 2000 )), new Promise (( resolve ) => setTimeout (() => resolve ( 3 ), 1000 )), ]). then ( console . log ); // 프라미스 전체가 처리되면 [1, 2, 3]이 반환된다. 각각의 프라미스는 배열 구성 요소가 된다. 배열안에 작성한 프로미스가 모두 처리된 후 새로운 프로미스가 이행되며 배열안에 작성한 프로미스의 결과 값들을 담은 배열이 새로운 프로미스로 반환된다. Promise.all은 특이한점이 있는데 위 예시에서 볼 수 있듯이 Promise.all의 배열안에 작성한 프로미스들은 처리되는 순서와는 상관없이 작성한 순서대로 값을 반환한다.  Promise.all은 아래와 같이도 사용될 수 있다. let urls = [ "https://api.test1.com/users/lee" , "https://api.test2.com/users/kim" , "https://api.test3.com/users/park" , ]; // fetch를 사용하여 url을 프라미스로 매핑한다. let requests = urls . map (( url ) => fetch ( url )); console . log ( requests ); // [Promise, Promise, Promise] //