봉보로봉봉

useLocation() 사용자가 현재 머물러 있는 페이지에 대한 정보를 받아온다. http://localhost:3000/home?keyword=react location에서 pathname을 사용하면 쿼리를 제외한 /home을 가져오고 search를 하면 ?keyword=react 쿼리스트링을 가져온다. useLocation을 선언하고 location.pathname이나 location.search로 접근할 수 있다. import React from 'react'; import { useLocation } from 'react-router-dom'; const App = () => { const location = useLocation(); console.log(location.pathname) //..

경계다루기 // a와 b에 들어가는 경우들과 함수 네이밍 const myFunction = (a, b) => {} Max, Min 최소값과 최대값을 다룬다. 최소값과 최대값 포함 여부를 결정해야한다. (이상 vs 초과, 이하 vs 미만) 네이밍에 최소값 최대값 포함 여부를 포함한다. Begin, End 숙소 예약을 하는 프로그램에서 예약 시작일, 예약 마지막일과 같은 경우이다. 함수명을 잘 지어서 인자의 순서 자체로 무엇인지 추론할 수 있도록 하면 좋다. 예 : reservationDate(begin, end) First, Last 연속성이 보장되지 않는 경우에 사용한다. 연속적인 규칙은 없지만 항상 first와 last는 존재하기 때문이다. 연속되지 않는 숫자들이나 학생들 같은 경우도 연속성이 보장되지..

클린코드 함수를 작성할 때 함수는 한가지 일만 하도록 작성하는 것이 좋고, 함수 안에서 let으로 임시변수를 선언한 뒤 계속해서 값을 재할당 해 사용하는 것은 직관적이지 않고 유지보수가 힘들다. let의 유혹을 떨쳐버리고 const를 사용하는 습관을 들여야한다. 그리고 값을 변수에 담아 리턴하기 보다는 함수 자체에서 리턴 되도록 하는 것이 좋다. eqeq(==)사용을 줄이고 eqeqeq(===)를 써야한다. ==를 사용하면 암묵적인 형변환이 되기 때문에 원치않은 결과를 발생시킬 수 있다. ==와 ===는 큰 차이가 있다. (참고 사이트 확인) 개발을 혼자하는 것이 아니라면 지켜서 사용하는 것이 좋다. 타입이 다를 때 비교를 해야한다면 JS가 암묵적으로 형변환을 하게 두기보다 개발자가 명시적으로 형변환을 ..

Controlled Component, Uncontrolled Component(제어 컴포넌트와 비제어 컴포넌트) 비제어 컴포넌트는 기존의 바닐라 자바스크립트 방식과 비슷하다. useState를 사용하지 않고 ref를 사용해서 값을 받아온다. 비제어 컴포넌트는 값을 실시간으로 동기화하지 않는다. 반면에 제어 컴포넌트는 항상 최신값을 유지한다. 제어 컴포넌트를 사용하는게 조금 더 리액트스럽다고 한다. input의 경우 value와 이벤트 함수로 컴포넌트를 제어하는 하면 제어 컴포넌트이고, ref를 사용해서 ref의 current.value를 가져오면 비제어 컴포넌트인 것 같다. 제어 컴포넌트를 좀 더 추천하는 것 같아서 이제는 되도록 제어 컴포넌트를 사용해야겠다. 참고 useRef useRef는 .curr..

propTypes propTypes으로 props로 들어올 데이터타입을 검사할 수 있다. isRequierd로 필수 항목도 지정해줄 수 있다. 문자와 숫자 말고도 다양한 타입을 검사할 수 있다. import PropTypes from 'prop-types'; MyComponent.propTypes = { name: PropTypes.string.isRequired, // 필수 항목 picture: PropTypes.string, // 필수 항목 아님 score: PropTypes.number.isRequired, }; 참고 커스텀 컴포넌트에는 addEventListener를 달 수 없다. length 0 arr.length = 0 이면 리액트는 0을 출력하기 때문에 배열의 길이가 0일때는 출력하지 않을거..

제목 ( Headings ) hn태그처럼 크기별로 사용할 수 있다. # heading1 ## heading2 ### heading3 #### heading4 ##### heading5 ###### heading6 인용 ( Quoting text ) >를 사용해서 인용구를 사용할 수 있다. >>으로 중첩도 가능하다. Sample Text > Sample Text > >> Sample Text 코드 강조 ( Quoting code ) 백틱(`)을 사용해서 코드를 강조 할 수 있다. Sample Text Code // 인라인 강조 `Sample` Text Code // 블럭 강조 ``` Sample Text Code ``` 링크 ( Links ) [글자](링크)를 사용해 링크를 만들 수 있다. [blog li..

요즘은 백준 문자열 단계를 푸는 중이다. 전 단계인 함수단계를 셀프넘버고 한수고 도저히 문제부터 이해할 수 없어서 건너뛰었다. 세상의 머리 아픈 일은 다 수학과 수학자가 원흉이다. 문자열 단계는 그거보다는 낫겠지 싶었는데 첫번째 문제부터 아스키코드 문제가 나오던 것을 무시하지 말았어야했다.. 백준 2675 문자열 반복 map에 map에 map에 map을 한 뒤 repeat메소드를 사용해서 해결했다. 풀면서도 꽤나 코드가 지저분하다고 느꼈는데 코드가 깔끔하기 이전에 문제를 해결해야한다는 마음이 커서 그냥 그대로 제출했다. 지난 주부터 부트캠프 과제를 진행하면서도 일단 굴러가면 넘어갔는데 매번 리팩토링을 할 수는 없으니 조금 더 코드 짜는게 익숙해지면 깔끔한 코드를 위해 의식적으로 노력해야겠다. 그리고 아직..

git merge 브랜치를 병합하는 명령어이다. merge를 할 때는 합치려고 하는 메인 브랜치에 위치해있는 상태로 합쳐서 끝낼 브랜치를 병합하면 된다. 병합 후에는 더 이상 필요없으므로 합쳐서 끝낸 브랜치를 삭제하면 된다. // 메인 브랜치로 이동 => 합쳐서 끝낼 브랜치를 병합 git checkout git merge // 머지한 브랜치 삭제 git branch -d 3-way merge 메인브랜치에 브랜치가 나뉜 커밋을 기준으로 이후에 커밋이 있을 때 진행된다. 두 브랜치가 합해지면서 새로운 커밋이 생성된다. fast-forward merge 새로운 브랜치가 생성된 커밋 이후로 메인 브랜치에 커밋이 없을 때 진행된다. 메인 브랜치의 head가 새로운 브랜치의 최신 커밋을 가르키게 된다. 빨리 감기라..