ijooha 님의 블로그

[react/공부] Hook이 뭐야?

Hook 알아보기추가로 보면 좋을 링크        Hook? Hook을 사용하면 컴포넌트에서 더 많은 react 기능을 사용할 수 있다.react hook은 정말 다양한데, 가장 중요하고 많이 사용하는 두가지 (state hook, effect hook)을 알아보겠다.         State Hook 전 게시글에서 얘기한 바 있는 그 state가 맞다.State를 통해 컴포넌트는 사용자의 입력과 같은 정보를 기억할 수 있다.전 게시글에서 소개한 사이트의 경우 나라명과 메달 개수를 기억하도록 했다.const ['상태 값', '상태를 변화시키는 함수'] = useState('초기값')상태를 변화시키는 함수를 통해 변하는 값을 계속 저장하고, 상태값으로 이를 렌더 등으로 사용한다.         Effec..

[gitHub] 커밋 컨벤션

개발은 대부분 협업이 디폴트이기 때문에 주석을 남기듯 커밋에 대한 메시지를 남겨 어떤 부분이 바뀌었는지 공유해야 한다.  Commit Message의 구조type: subject //type: 어떤 의도인지 명시 //subject: 마침표 없이, 동사를 가장 앞에 두고, 첫 글자는 대문자body //긴 설명이 필요한 경우, 무엇을 왜 했는지footer //issue tracker ID를 명시하고 싶은 경우에 작성  type어떤 의도인지 명시feat새로운 기능 추가fix버그 수정docs문서의 수정style코드의 스타일 변경 (코드 정리)refactor코드를 리팩토링test테스트 관련한 코드 추가 / 수정chore코드 수정 없이 설정 변경build빌드 파일 수정ciCI 설정 파일 수정perf성능 개선rena..

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; //알아볼 수 없는 번호의 개수 ..