rigood

1. 언어별 줄바꿈(강제개행) 기준 - 한국어: 글자 기준으로 강제 줄바꿈 (글자 기준) - 영어: 단어/공백/물음표(?)/하이픈(-) 기준으로 강제 줄바꿈 2. overflow-wrap 오버플로우 됐을 때 줄바꿈 어떻게 할지?? ※ 용어가 word-wrap에서 overflow-wrap으로 바뀜 텍스트가 박스 너비를 초과할 때(=overflow) 줄바꿈을 어떻게 할 지 정하는 속성 (width 값이 있을 때에만 해당) CJK 언어(Chinese, Japanese, Korean)는 글자를 기준으로 줄바꿈을 하기 때문에 텍스트가 박스 너비를 초과하면 무조건 줄바꿈이 되지만, 영어는 단어를 기준으로 줄바꿈을 하기 때문에 아주 긴 단어는 박스를 초과해버린다. overflow-wrap: normal; 언어별 특성..

VS Code에서 !을 누르고 엔터를 치면 나오는 HTML 기본 템플릿에 대해서 알아보았다. DOCTYPE 선언문은 웹브라우저에게 HTML 버전을 알려주는 역할을 한다. 버전마다 선언 방식이 다르며, HTML5에서는 위와 같이 간단히 선언할 수 있다. HTML 태그는 아니나, 태그 전에 가장 먼저 선언해줘야 한다. html 태그는 HTML 문서의 루트 요소를 정의할 때 사용되며, DOCTYPE 선언을 제외한 모든 HTML 요소를 포함하기 위한 컨테이너이다. lang 속성은 웹문서 전체 또는 일부에 언어를 지정해주는 속성으로, 언어 설정에 따라 스크린리더, 검색엔진 및 브라우저 지원이 달라진다. ISO 언어코드(ex: ko) 또는 언어코드-국가코드(ex: en-US)를 사용한다. meta 태그의 chars..

0. 설치 // styled-components 설치 npm i styled-components npm i -D @types/styled-components // 상태관리 라이브러리는 recoil 설치 npm i recoil 1. 타입 선언 1) src 폴더 내에 styled.d.ts 파일 생성한다. 2) 상단에 styled-components를 import한다. 3) styled-components 모듈을 선언하고, DefaultTheme 인터페이스를 설정해준다. // styled.d.ts import "styled-components"; declare module "styled-components" { export interface DefaultTheme { bgColor: string; boardC..

styled-components 설치 시 Cannot read properties of null (reading 'edgesOut') 에러 발생 해결 방법 1. 파일명, 폴더명에 영문이 아닌 다른 문자가 있는지 확인 2. 최신 버전이 아닌 5.3.10 버전 설치 npm install styled-components@5.3.10

Array.reduce() - 배열을 돌면서 원하는 작업을 실행하고 최종값을 반환하는 메서드 - 누적 계산 값 반환 - 인수로 함수( (누적계산값, 현재값) => { return 계산값 } )와 초기값(optional)을 받음 배열의 모든 수 합치기 // forEach 사용 let arr = [1,2,3,4,5]; let result = 0; arr.forEach(num => { result += num; }); // reduce 사용 let arr = [1,2,3,4,5]; const result = arr.reduce((prev, current)=>{ return prev + current; }, 0); 객체로 이루어진 배열에서 특정 객체만 추출하기 객체로 이루어진 배열에서 값의 총합 구하기

Array.sort() - 배열을 정렬하는 메서드 - 정렬한 배열을 반환 (원본 배열 수정) - 정렬 로직을 담은 함수를 인자로 받음 - 인자가 없는 경우, 문자열 유니코드에 따라 정렬 (숫자도 문자열 취급하여 정렬) arr.sort((a,b) => { return a - b }) a-b > 0 이면 (a>b), b를 앞으로 보냄 a-b = 0 이면 (a=b), 그대로 a-b < 0 이면 (a

1. 기본 동작 원리 - 브라우저가 html을 읽다가 (= html 파싱) script 태그나 외부 script를 만나면, DOM 생성을 중단하고 script를 다운받고 실행함 // script 태그 // 외부 script - script 아래에 있는 DOM 요소에는 접근할 수 없음 - script 용량이 큰 경우, script를 다운받는 동안 사용자는 script 아래쪽 페이지를 볼 수 없음 2. script를 페이지 맨 아래 배치 - 1번에서 언급된 부작용은 해결되나, - html 문서 용량이 큰 경우, html을 다운받은 후 script를 다운받으면 페이지가 굉장히 느려짐 3. defer 속성 사용 (지연 스크립트) - script를 백그라운드에서 다운받으므로 html 파싱이 멈추지 않음 - htm..

일반함수 - function 키워드를 사용하여 정의하는 함수 - 함수 선언식이나 함수 표현식으로 함수를 정의할 수 있다. 화살표함수 - 자바스크립트 ES6 버전에서 등장한 문법으로, 함수를 정의할 때 사용하는 또 다른 문법이다. - 기존의 함수 표현식을 훨씬 더 간결한 문법으로 작성할 수 있게 해준다. - function 키워드를 지우고, 소괄호와 중괄호 사이에 화살표를 넣어준다. - 화살표함수를 만들어주고, 함수를 변수에 할당한다. - 변수를 함수의 이름처럼 사용하여 함수를 호출할 수 있다. const main = () => { console.log("hello"); } main(); 함수 선언식 - 자바스크립트에서 함수를 선언하는 가장 기본적인 방식 - function 키워드와 함수 이름을 쓰고, 함..