DEV_달리자

useEffect란 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 됨 (기존 클래스형 컴포넌트에서만 사용 가능했었음) 작업 실행 기준 : 작업 = effect mount unmount update 기능 : 생명주기 메소드의 네가지 기능을 수행함 componentDidMount: mount된 직후 componentDidUpdate: 갱신이 일어난 직후 componentWillUnmount: 마운트 해제되어 제거되기 직전 getDerivedStateFromProps: 최초 마운트 시와 갱신 모두에서 render() 메서드를 호출하기 직전 💡 Mount | 마운트 '시작하다', '올라가다', '끼우다/고정시키다'의 의미가..

지수 표기 값 참고 (연관 개념) 20 1 - 1비트(bit) 23 8 - 1바이트(byte) 27 128 - 표준 아스키 코드의 모든 글자 수 28 256 - unsigned char 자료형의 상한값 29 512 - 한 디스크 섹터의 바이트 개수 210 1,024 - 1키비비트(Kibit) 211 2,048 212 4,096 - 인텔 x86 하드웨어 페이지 사이즈 213 8,192 214 16,384 - 존재 가능한 모든 IPv4 클래스 215 32,768 216 65,536 - unsigned short 자료형의 상한값 - IPv4 클래스 B 네트워크 안에서 할당 가능한 모든 호스트 주소의 개수 231 2,147,483,648 232 4,294,967,296 - unsigned int 자료형의 상한값..

PUT vs PATCH PUT vs PATCH 공통 키워드는 '갱신', 'update'. 결론부터 말하자면, 다음과 같다. PUT: 덮어쓰기. 리소스의 모든 것을 업데이트 한다. PATCH: 리소스의 일부분을 업데이트 한다. PUT 리소스 전체 갱신 예시: 보내지지 않는 값에 대해서는 null 값으로 갱신된다. 데이터 모두 요청 시 PUT /post/1 { title: 'PUT vs PATCH', content: '전체 vs 부분 업데이트의 차이이다.', createAt: '2022-10-13' } post id 1 title 'PUT vs PATCH' content '전체 vs 부분 업데이트의 차이이다.' createAt '2022-10-13' 데이터 일부 요청 시 PUT /post/1 { title:..

Redis란 한줄 요약: “Redis는 고성능 키-값 저장소로, String, list, hash, set, sorted set 등의 자료구조를 지원하는 NoSQL” Remote Dicionary Server의 약자로 외부에서 사용 가능한 Key-Value 쌍의 해시 맵 형태의 서버라고 생각할 수 있음 ⇒ 별도의 쿼리 없이 Key를 통해 빠르게 결과를 가져올 수 있음 (Redis >> MySQL, Oracle) 오픈소스로서 NoSQL로 분류되기도 하고, Memcached와 같이 인 메모리 솔루션으로 분류되기도 함 ⇒ 디스크에 데이터를 쓰는 구조가 아닌 메모리에서 데이터를 처리하기 때문에 작업 속도 빠름 성능은 Memcached에 버금가며 다양한 데이터 구조체를 지원함으로 DB, Cache, Messsag..

폴더 구조 Root/src/ 외에는 자유롭게 관리 아래 예시는 7-1 패턴 (상황에 맞게 파일들을 나누고 폴더를 쪼개 하나의 css로 컴파일하여 사용 /* 공식 문서에서의 이상적인 구조 */ scss/ | |– **abstracts/** | |– _variables.scss # Sass 변수 | |– _functions.scss # Sass 함수 | |– _mixins.scss # Sass 믹스인 | |– _placeholders.scss # Sass 플레이스홀더 | |– **base/** | |– _reset.scss # 리셋/정규화 | |– _typography.scss # 타이포그래피 규칙 | … # 기타. | |– **components/** | |– _buttons.scss # 버튼 | |– _..

전역 범위 변수 :root{ ... } 전역 범위의 변수를 만들기 위해 사용 :root { --main-color: #111111; --default-color: #111111; --hover-color: #595c60; --active-color: #2d2d2d; --disabled-color: #a0a0a0; --background-color: #f1f3f6; } 지역 범위 변수 지역 범위로 생성하려면 변수를 사용할 선택기 내부에 선언 여기서 잠깐! scss는 변수명의 하이픈(-)과 언더바(_)를 구분하지 않음, key_color = key-color $error-colors: ( 'default': $error-color, 'hover': #cb0837, 'active': #b8002c, 'disa..

사전 지식 CSS란 Cascading Style Sheets W3C에서 1996년 도입한 것, 문서(content)와 표현(presentation)을 분리하여 수정 관리할 수 있도록 발전하게 된 계기로 탄생하게 됨 사용자에게 문서를 표시하는 방법을 지원하는 규칙 기반 언어, 웹 표준 기술 중 하나 CSS Preprocessor란 EX) Sass, Scss, Less, Stylus CSS 전(예비)처리기, CSS가 동작하기 전에 사용하는 기능, (↔ 후처리기라는 개념도 존재함!) CSS가 고도화될 수록 커지는 불편함을 해결하면서도, 웹에서는 표준 CSS만 동작한다는 점에서 나온 방식 전처리기로 작성 → 웹에서 표준의 CSS로 컴파일 → 동작 SASS란? Sass는 Preprocessing으로 궁극적인 목적..

요약 Composition API가 들어오면서 데이터 선언, 함수 선언, 상태 관리 등의 변화 컴포넌트 내에서 데이터, 함수, 상태를 호출하는 방식도 변화 없던 종류의 컴포넌트, 내부적인 성능 향상을 위한 변화 변화 요약 Composition API (→ 기본적으로 영향을 미치는 변경점!) 템플릿 생성 방식의 변화 data, method 작성 방식의 변화 Lifecycle hook 호출의 변화 computed 속성 사용 방법의 변화 props와 this 바인딩의 분리 emit과 this 바인딩의 분리 Suspended Component Fragment Portal 내부적인 변화 그 외.. 사전 지식 Composition API란? 컴포넌트 내 특정 기능의 코드를 유연하게 구성하여 사용할 수 있도록 Vue..

다국어 시스템 - 기본지식 - 용어 정리 - file 관련 - 다국어 플러그인 / 모듈 - Gettext + potfile - I18N + json 기본 지식 첫 글자와 끝 글자와 그 사이의 글자가 많아 해당 문자의 개수 표현한 것이라고 한다..!㉪! 역시 개발자들의 네이밍 답다. 거의 JAVA 커피가 좋아서, 방울뱀이 좋아서 Python 급이다. 간단 명료한 네이밍 동기!!!@! L10n: Localization 지역화의 약칭 소프트웨어를 사용하는 사용자를 위해 한 언어에 맞추어 개발 되어있다는 뜻 한번에 다중 언어를 사용할 수 없음 I18n: Internationlization = multiligual(m17n) system 국제화의 약칭 여러 언어를 동시에 입력해서 사용할 수 있어야 해당 반열에 오..

BEM의 기본 구조 및 장점 기본 구조 Block(”블록”, 구역), Element(요소), Modifier(”변경자”, 수식어) 컨벤션 사용 각각 --, __로 구분 기본적으로 ID를 사용하지 않으며, 오직 class만을 사용 '어떻게 보이느냐'가 아닌 '어떤 목적인가'에 따라 이름 지음 예시 에러 메시지를 띄우는 P 태그에는 .red가 아닌 .error라는 이름 block-name과 같이 하이픈 하나만 써서 해결 장점 class name 중복을 방지 직관적임 전체 DOM tree 구조를 다시 보지 않아도 됨 Block Element Modifier 각 개념 정리 Block (블록) : 구성 요소의 가장 바깥쪽 상위 요소를 블록으로 정의 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트 (다른 곳에 여..