찐빵이의 개발일기

일을 하다가 State 어쩌고 하는 클래스가 있길래 봤는데 잘 이해가 안 갔다. 혹시나 디자인 패턴일까 찾아봤는데, 아니나 다를까 상태 패턴을 사용해서 설계한 방식이었다. 상태패턴이란? 상태 변경에 따라 객체의 행위가 달라져야 하는 상황에서 객체가 직접 상태를 체크하여 상태에 따른 행위를 호출하지 않고 상태를 객체화해서 상태가 필요한 행동할 수 있게 위임하는 디자인 패턴이다. 객체가 직접 상태를 체크해서 행위를 호출하면 뭐가 안 좋아? 코드로 보자. class Document is field state: string // … method publish() is switch (state) "draft": state = "moderation" break "moderation": if (currentUser...

그냥 태그로 다 쓰면 안돼요? 네 안돼요. 시맨틱 마크업이 무엇인지, 왜 필요한지 알아보자. 시맨틱 마크업 시맨틱(Semantic)이란 단어를 해석하면 의미론적인이란 뜻이고, 마크업은 HTML 태그로 문서를 작성하는 것을 말한다. 즉, 시맨틱 마크업은 의미에 맞는 HTML 태그를 사용해서 문서를 작성하는 것을 말한다. 의미를 가진 마크업? 어떻게 하는 건데? HTML은 여러 종류의 태그가 있다. 여러 태그 중에서 내용에 맞는 태그를 선택하여 문서를 작성하면 된다. 예를 들어 문서 제일 상단에 오는 박스인 경우 : 태그 사용 텍스트인 경우 : 태그 사용 최상위 제목인 경우 : 태그 사용 순서 없는 목록인 경우 : 태그 사용 등등.. 무작정 태그를 사용하거나, 제목인데 , css size 변경으로 스타일링을..

구글 폰트 웹 사이트에 들어가 원하는 폰트를 찾는다. 폰트를 선택하면 왼쪽 바에 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' });