ijooha 님의 블로그

React 시작하기react 공식 페이지         React? 리액트는 작업을 더 효율적으로 하기 위해 만들어진 라이브러리인데,큰 특징이 하나 있다. 변경사항이 생기면 웹 전체를 다시 구축하는 대신가상 DOM과 컴포넌트, state를 통해 변경된 부분만 업데이트 한다. 가상 DOM은 실제 DOM의 가벼운 사본으로, 변경된 부분만 찾아서 실제 DOM에 반영하기 때문에,렌더링 성능을 최적화할 수 있다.         React 시작하기 ** 노드가 설치된 상태여야 함먼저 프로젝트를 생성해준다.그냥 리액트, 그리고 vite 두가지 방식이 있는데 후자가 훨씬 효율적이므로 그것만 정리하겠다. 터미널을 연 후yarn create vite --template react꺽쇠 없이 프로젝트명을 적어주면 된다. 후..

function solution(strings, n) { return strings.sort((a,b) => a[n]-b[n]);}이렇게 썼는데 틀려서 알아보니, 저 (a,b) => a-b 식 정렬은 숫자에만 해당된다구,,,그래서 다른 방법을 생각해봤다. function solution(strings, n) { strings.forEach((word) => { word = word[n] + word; }) strings.sort().forEach((word) => { word.slice(0,1); }) return strings;}같으면 또 적용 안됨. 같은 경우의 수를 생각해야함 function solution(strings, n) { re..

function solution(X, Y) { let result = []; let x = X.split('').sort((a,b) => b-a) let y = Y.split('').sort((a,b) => b-a) for (let i=0; i n == 0) ? '0' : result.join('') //짝궁이 0만 있을 때}예시 다섯개는 다 통과했는데, 실행 시간이 너무 길어져서 통과를 못했다.반복문을 비효율적으로 쓴 것 같다. function solution(X, Y) { let result = []; let xCount = []; let yCount = []; for (let i=0; i Math.min(n, yCount[idx])) ..

'올림픽 메달 사이트 만들기'과제로 리액트 입문하기GitHub 바로가기         과제 개요 올림픽의 메달 순위를 업데이트 하여, 각 국가별 금, 은, 동, 그리고 총 메달 수를 확인할 수 있는 페이지이다.사용자는 필터 옵션을 통해 메달 종류나 총 메달 수에 따라 국가 순위를 정렬할 수 있다.• 나라와 메달 개수 입력하고 버튼을 클릭해 하단 리스트에 정보 추가 혹은 업데이트• 정렬 옵션 선택으로 리스트 재정렬• delete 버튼으로 리스트 삭제 리액트 구조를 이해하고 state나 props를 적용하기까지가 좀 시간이 걸렸고, 그 외는 할만했던 거 같다!         컴포넌트 구성 App├── Form│ ├── Country│ ├── Medal│ └── Btn└── List └──D..

Judie Movie : Movie Search PageJudie Movie 바로가기github 바로가기  다양한 영화를 검색하고, 관심 있는 영화를 북마크에 저장해 확인할 수 있는 사이트입니다.지금 가장 뜨고 있는 영화들을 실시간으로 확인할 수 있고, 모달을 통해 개봉일자, 내용 및 평점 확인이 가능합니다.         🎙️ Project Introduction Development Period2025/01/08 ~ 2025/01/17 (10 days) Tech Stack바닐라 JavaScript만 사용하여 만들어진 프로젝트입니다.   HTML5      CSS3      JAVASCRIPT            ✨🪄 Project Features UXUI사용성을 고려한 사용자 위주의 페이지를 구..

연산자 활용하기         Falsy 활용하는 방법을 알아보기 전에, 연산자에서 가장 중요한 falsy를 먼저 알아보자.0'' (빈 문자열)nullundefinedNaNfalsy에는 위 다섯가지 종류가 있다.저 값을 칠 경우 거짓으로 나온다.  그럼 이제 네가지 연산자를 활용하는 법을 알아보겠다.       || or 이라는 의미의 연산자이다.평소 조건문에서 두가지 조건 중 하나를 충족할 때 로직을 진행하는 식으로 종종 사용했다. 하지만 더 나아가return result || 'no result'이런식으로도 사용할 수 있다!왼쪽 값이 거짓이면(없으면), 오른쪽 값을 내보내줘!         ?? 이건 처음보는 연산자였다.||와 사용법이 비슷하다.return result ?? 'no result'하지만..

우선 옹알이 할 수 있는 글자들의 배열을 만들어준 뒤,입력된 옹알이 (babbling)과 할 수 있는 글자(ava) // available이라는 뜻,,를 각각 순회하며 해당되는 글자는 삭제시키고, 모두 삭제되면 카운트 하는 방식으로 만들어줬다.function solution(babbling) { const ava = ["aya", "ye", "woo", "ma"] let count = 0; babbling.forEach((b) => { ava.forEach((a) => { if (b.includes(a)) { b = b.replace(a,''); } }) ..

우선 0을 제외한 수, 당첨번호와 일치하는 수를 정의해주고,그 개수의 길이(맞춘 최저 수)와 0을 정답으로 치환한 수를 순위 배열에 매칭시켜서 답을 찾아낼 거다... (무슨말이지)function solution(lottos, win_nums) { let result = []; let lotto = lottos.filter((n) => n !== 0); //알아볼 수 있는 수들 let match = win_nums.filter((n) => lotto.includes(n)); //로또 번호와 일치하는 번호 let rank = [6,6,5,4,3,2,1] //순위 배열 let guess = lottos.length - lotto.length; //알아볼 수 없는 번호의 개수 ..

일단 문제 자체가 이해하는데 시간이 오래 걸렸다...ㅎ공책 펴두고 적어가면서 정리했는데, 1 for문 사용하여 기사들 수 반복2 각 기사의 약수의 개수(즉 각 공격력)을 담은 배열 초기값 설정 (arr = [];)3 약수의 개수를 찾는 반복문, 개수를 (2번)배열에 push 해주기4 (2번의)약수의 개수 담은 배열에 .map 사용하여 초과값 power로 변경5 .reduce 사용하여 모든 값 더해주기 이렇게 정리했고, 순서대로 코드를 짜봤다.function solution(number, limit, power) { let factor = []; for (let i=1; i { if (p > limit) { return power; } retu..

function solution(n, m, section) { //칠한 횟수 let result = 0; //마지막으로 칠한 section let painted = 0; for (let i=0; i= section[i]) continue; //칠하지 않은 부분 칠 painted = section[i] + (m-1); result ++; } return result;}칠한 횟수와 마지막으로 칠한 section 0으로 설정 이후 계속 칠해주되, 이미 칠한 부분이면 스킵해주는 형식으로 반복했다.그리고 횟수 리턴