sohyeon kim

💡 ES11(ECMAScript2020)에서 도입된 null 병합 연산자 : 좌항의 피연산자가 null 또는 undefined 인 경우 우항의 피연산자를 반환, 좌항이 null 또는 undefined 가 아니라면 좌항의 피연산자를 반환 let left = null; let right = "default string"; let result = left ?? right; console.log(result); // "default string" null 병합 연산자는 변수에 기본값을 설정할 때 유용! '??' 가 도입되기 전엔 논리 연산자 '||' 를 사용한 단축 평가를 통해 변수에 기본값을 설정했다. or 연산자를 사용한 단축 평가의 경우 좌항의 피연산자가 false 로 평가되는 Falsy 값 - false..

💡 그리드 속성 몇 개 더 알아보자. 기본 세팅! .container { display: grid; height: 500px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } ✳️ align-items : 플렉스박스 방식에서와 유사한 역할을 한다. 그리드 컨테이너 행 트랙의 높이, 수직축(열)을 기준으로 그리드 아이템의 배치를 결정한다. ✳️ align-self : 각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정 속성값 의미 stretch 기본값! 그리드 아이템들이 트랙 높이만큼 확장된다. start 트랙 상단으로부터 하단을 향해 배치 end 트랙 하단으로부터 상단을 향해 배치 center 할당된..

💡 그리드 컨테이너 내 그리드 아이템에 주어지는 속성에 대해 알아보자. ✳️ grid-column & row : 그리드 컨테이너의 줄 번호를 이용해 아이템을 배치한다. 기본 세팅! 6개의 리스트를 2열 3행으로 ~ 1 2 3 4 5 6 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; border: 5px solid aquamarine; } li { display: flex; justify-content: center; align-items: center; background-color: lemonchiffon; border: 5px solid pink; border-radius: 10px; } .con..

💡 grid layout : 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식 그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정된다! 그리드 방식은 컨테이너에 행 and 열을 제공한다. 행과 열을 동시에 제어해 요소를 배치할 수 있다! 그리드 컨테이너 : 그리드 방식으로 레이아웃을 결정할 요소 그리드 아이템 : 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소 display : grid 기본적으로 블록 레벨 display : inline-grid 인라인 속성으로 쓰고 싶을 때! 시작해 보아요. 1 2 3 4 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; bo..

💡 flexbox : 행 or 열을 주축('가로 ➡️' 가 기본값)으로 설정해 웹 요소를 배치 / 정렬하는 1차원 레이아웃 방식 플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소, ul 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소, li 고양이 강아지 오리 달팽이 고라니 * { box-sizing: border-box; } body { margin: 0; } #first-ul { display: flex; padding: 0; list-style: none; height: 300px; } 먼저 기본으로 이렇게 flex 를 설정해 주면 ⬇️ 한줄로 정렬된다! ⬇️ display: flex 는 기본적으로 블록레벨 속성, 그 줄을 전체 차지함 ⬇️ display: ..

💡 렉시컬 환경 : 어떤 함수가 선언(생성)될 때 그 당시의 외부 변수가 저장되는 곳! 그 정보들 : 외부 변수 등등 const x = 1; // 전역 스코프 function outerFunc() { const x = 10; // outerFunc 스코프 function innerFunc() { console.log("x : " + x); // x : 10 // (innerFunc 스코프에 x 가 없으니 이 함수가 선언될 때의 LE 인 outerFunc 로 찾으러 감) } innerFunc(); } outerFunc(); console.log("x : " + x); // x : 1 ➕ 함수를 어디서 '호출' 했는지가 아니라, 어디에 '정의' 했는지에 따라 스코프(상위 스코프) 가 결정된다! outer 내..

전에 클래스 사용법 글을 썼었지만 한 번 더 정리해 둔다. 💡 새 객체를 쉽게 추가해 주는 class! class Car { constructor(name, year, type, price) { this.modelName = name; this.modelYear = year; this.type = type; this.price = price; } makeNoise() { // 클랙션을 울리는 메서드 console.log(`${this.modelName} : 빵빵!`); } makedYear() { // 연도를 말해주는 메서드 console.log(`${this.modelName} : 나는 ${this.modelYear}년도에 만들어졌어~`); } } const car1 = new Car("현이 차", 2..

💡 for 문 이용 function isPrimeNumber(number) { if (number

💡 첫 번째 방법 split(), reverse(), join() 이용 let str = "hihelloohayo"; // 1. split() 메소드를 이용해 새 배열을 반환한다. let splitString = str.split(""); console.log(splitString); // ['h', 'i', 'h', 'e', 'l', 'l', 'o', 'o', 'h', 'a', 'y', 'o'] // 2. reverse() 메소드를 이용해 새 배열의 순서를 뒤집는다. let reverseArray = splitString.reverse(); console.log(reverseArray); // ['o', 'y', 'a', 'h', 'o', 'o', 'l', 'l', 'e', 'h', 'i', 'h'] ..

📝 문제 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 🫠 나의 풀이 function solution(strings, n) { let result = []; for (let i = 0; i < strings.length; i++) { result[i] = strings[i][n] + strings[i]; // 문자열의 맨 앞에 두 번째 글자를 넣어준다. } result.sort(); // 사전순 정렬 for (let j = 0; j < result.le..