찐빵이의 개발일기

구글 폰트 웹 사이트에 들어가 원하는 폰트를 찾는다. 폰트를 선택하면 왼쪽 바에 Use on the web이라는 메뉴가 보인다. 위에 보이는 링크를 복사해서 HTML 헤더에 추가한다. CSS에서 폰트를 적용할 지역에 CSS rules to specify families에 나온 폰트 코드를 넣어준다. body * { font-family: 'Noto Sans KR', sans-serif; }그럼 폰트가 적용된 화면을 볼 수 있다.

최근에 많이 사용되는 다크모드, 라이트모드를 구현해 보면서 처음 알게 된 내용을 정리해보려고 한다. 1. OS 설정에 맞춰 모드 변경하는 방법 : prefers-color-scheme prefers-color-scheme 미디어 쿼리는 OS에서 설정된 라이트/다크 모드를 감지하여 자동으로 라이트, 다크 모드 스타일을 적용하는 기능이다. 일반식으로 쓰면 아래처럼 표현할 수 있다. @media (prefers-color-scheme: 모드) { /* 해당 모드에 적용할 스타일 */ } 다크모드 스타일 설정 예시 @media (prefers-color-scheme: dark) { body { background-color: var(--background-color); color: var(--text-color..

자바스크립트에서는 스트링 객체와 문자열 원형을 다르게 취급한다. 문자열 원형과 String 객체는 어떻게 다를까? 원형 문자열 : new 키워드 없이 “” (따옴표)로 생성되는 문자열 String 객체 : new String() 키워드로 생성되는 문자열 const string_prim = "This is string"; const string_obj = new String(string_prim); console.log(typeof string_prim); // string console.log(typeof string_obj); // object 둘 다 String이지만 타입이 다르다. 값을 출력했을 때도 다르게 나오는 것을 확인할 수 있다. 1. 원시 타입을 출력했을 때 2. 객체 타입을 출력했을 때 ..

settings.json 에 아래 내용을 추가하면 된다. { "workbench.colorCustomizations": { "titleBar.activeBackground": "창이 활성화된 경우 제목 표시줄 배경", "titleBar.inactiveBackground": "창이 비활성화 된 경우 제목 표시줄 배경" } }

PureComponent 클래스와 같은 역할을 한다. props 데이터가 변경되었을 때만 컴포넌트를 업데이트한다. memo 사용법 import React, { memo } from 'react'; //memo를 import 한다. const Card = memo(props => { // props를 전달해준다. ... // 코드 작성 } ); react hook 함수에서도 라이프 사이클을 사용할 수 있게 해주는 것. state를 선언할 때 useState를 사용하면 된다. const [count, setCount] = useState(0); useState는 아무리 호출돼도 동일한 값을 메모리에 저장해놓기 때문에 걱정하지 않아도 된다. 클래스와 함수의 차이점 클래스는 한 번 만들어지면 멤버 변수는 처음에..

1. 리액트는 Component의 집합이다. 2. 데이터가 하나라도 변경되면 전체적으로 애플리케이션이 re-render 된다. 모든 elements들이 rerender 되지만, 리액트는 Virtual DOM에 이 트리를 보관하고 있고, 실제 DOM과 V-DOM을 비교해서 필요한 부분만 업데이트한다. 문제점 데이터가 변경되지 않아도 컴포넌트만 변경되면, 라이프 사이클에 등록한 로직이 수행된다. 만약 그 로직이 무거운 일이라면, 예상하지 못하게 불필요한 일을 해야할 수 있다. 이걸 방지하는 방법이 pureComponent(class인 경우)와 memo(function인 경우)이다. pureComponent와 memo 특징 컴포넌트의 state, props에 변화가 없다면 render 함수를 부르지 않는다. ..

HTML과 바닐라 JS를 사용 시에는 DOM 요소를 가져올 때 querySelector를 사용했다. react에서는 Ref를 사용해서 같은 동작을 할 수 있다. 리액트에서는 돔 요소를 직접 접근하지 않는다. 사용방법 //Ref 생성 inputRef = React.createRef(); ... //원하는 요소에 ref 연결 inputRef.current.value에는 input의 value가 들어있다. (양방향 바인딩)

컴포넌트에 데이터를 넣으려면 State를 사용해야 한다. state = { message: 'hi', } 이런 식으로 넣을 수 있다. state update 하기 this.setState를 이용해서 state를 업데이트할 수 있다. 그냥 바로 message를 업데이트하게 되면 리액트는 모른다. this.setState({ message: 'hello' });

yarn으로 설치 yarn add @fortawesome/fontawesome-free index.js import '@fortawesome/fontawesome-free/js/all.js'; ... 사용시 원하는 아이콘의 html 태그를 복사해서 붙여넣으면 된다. FontAwesome

html은 마크업 언어이고 jsx는 자바스크립트 코드이다. jsx로 작성한 코드를 Babel이 html과 javascript로 변환하게 된다. jsx는 장점은 UI를 만드는 코드에 비즈니스 로직을 작성할 수 있다는 장점이 있다. {}(중괄호)로 감싸서 코드를 넣으면 된다. return 부분에 ui가 들어가는데 꼭 하나의 노드로 만들어서 리턴해줘야 한다. 스타일링을 해줘야 할 때는 div 태그를, 그게 아니라면 비어있는 를 사용하면 된다.