JS' 공부흔적

백준 문제를 풀던 중, 2차원 문자 배열에서 특정 문자가 포함되어 있는지 판별해야 했다. 그러나 2차원 배열에서 includes를 사용하게 되면 아래와 같은 문제가 발생한다. const arr = [ ["a", "b", "c"], ["d", "e", "f"], ["g", "h", "i"], ]; console.log(arr.includes("a")); // false 이는 includes 메서드에서 "a"와 2차원 배열 내의 각 row와 비교하기 때문이다. "a"와 ["a", "b", "c"]와 같은 1차원 배열은 당연히 같지 않으므로 false가 출력되게 된다. 이를 해결하기 위해서는 배열의 flat() 메서드를 사용하면 된다. flat()은 다차원 배열의 원소를 1차원 배열로 만들어주는 기능을 한다...

class Node { constructor(d) { this.data = d; this.next = null; this.prev = null; } } class Deque { constructor() { this.head = null; this.tail = null; this.size = 0; } push_front(d) { const node = new Node(d); if (this.empty()) { this.tail = node; } else { node.next = this.head; this.head.prev = node; } this.head = node; this.size++; } push_back(d) { const node = new Node(d); if (this.empty()) {..

함수 선언문 function a() {} // 함수 호출 시 a(); 함수 이름 지정 필수 호이스팅 되므로 함수 선언 전에 호출 가능 함수 선언문의 경우, 함수를 호출할 때 함수명을 사용하는 것처럼 보인다. 그러나 함수 이름은 함수 몸체 내에서만 참조할 수 있다. 그러면 어떻게 함수 이름을 사용하여 호출할 수 있을까? 사실은 함수 이름을 사용하여 호출하는 것이 아니다. 함수는 함수 이름으로 호출하는 것이 아닌, 함수 객체를 가리키는 식별자로 호출한다. 함수 선언문을 사용하면 자바스크립트 엔진이 암묵적으로 함수명과 동일한 이름의 식별자를 생성하고, 여기에 함수 객체를 할당한다. 따라서 위의 코드에서는 함수명 a로 함수를 호출하는 것이 아니라 a라는 식별자로 함수를 호출하는 것이다. 함수 표현식 var te..

git rebase는 말그대로 base를 다시(re) 설정하는 것이다. merge와 코드 결과는 같은데, 커밋 히스토리를 단순화하기 위해 사용한다. 예를 들어, master 브랜치에서 experiment 브랜치가 분기되어 나왔다고 했을 때, 아래와 같이 master와 experiment 브랜치 각각 작업한 내용(C3, C4)이 있을 것이다. merge를 사용한다면? 이때, merge를 사용해 합치게 되면 커밋 히스토리는 아래와 같다. git checkout master git merge experiment 즉, C3과 C4의 작업 내용이 합쳐져서 C5에 반영되었다. rebase를 사용한다면? 그러나 rebase를 사용하게 되면, C4에서 변경된 내용(experiment에서 작업한 내용)을 임시 저장하는 ..

useEffect에 deps 배열에 특정 값을 넣으면, 다음의 2가지 경우에 useEffect 내의 콜백 함수가 실행된다. 컴포넌트가 마운트 될 때 deps 배열 내의 값이 변경될 때 그러나 1의 경우에는 콜백 함수를 실행하지 않고, 2의 경우에만 콜백 함수를 실행해야 할 때도 있을 것이다. 그럴 때는 아래와 같이 isMounted라는 state를 선언하여 활용하면 된다. const [isMounted, setIsMounted] = useState(false); useEffect(() => { if (isMounted) { ~~ } else { setIsMounted(true); ~~ } }, [something]); 최초에는 isMounted가 false이므로 useEffect 내의 콜백함수 중 els..

React를 사용해 개발하면서 라우팅 기능을 구현할 때 대부분 react-router-dom을 사용할 것이다. react-router-dom에는 수많은 라우터 중에 HashRouter와 BrowserRouter가 존재한다. 둘 중에서 대부분 BrowserRouter를 사용하여 라우팅을 구현할 것이다. BrowserRouter와 HashRouter를 비교하는 글들이 많은데, 각각의 특징을 간단히 적자면 아래와 같다. Hash Router 주소에 Hash(#)가 붙는다. Hash(#) 때문에 검색 엔진이 읽지 못한다. (SEO 최적화 X) 별도의 서버 설정을 안 해도 새로고침 시에 에러가 발생하지 않는다. Browser Router History API를 사용한다. 별도의 서버 설정을 하지 않으면 URL에 ..

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (3) - Firestore를 사용하여 데이터 다루기 [Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (2) - Firebase를 사용하여 이메일 로그인 구 [Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기 앞으로 4편에 2junsu.tistory.com 이전 글에 이어서 이번 글에서는 지금까지 만든 프로그램을 직접 배포하는 방법에 대해 다룬다. 우선, 콘솔에 들어가서 Hosting을 클릭한 후 시작하기를 누른다. 아래 명령어를 입력한다. npm i -g firebase-tools firebase login fire..

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (2) - Firebase를 사용하여 이메일 로그인 구 [Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기 앞으로 4편에 걸쳐서 파이어베이스와 리액트를 사용하여 아주아주 간단한 프로그램을 만들어보는 글을 작성 2junsu.tistory.com 이전 글에 이어서 이번 글에서는 Firebase에서 제공하는 DB인 Firestore를 사용하여 간단한 데이터를 저장하고 불러오고 삭제하는 것을 다룬다. Firestore 기본 설정 우선, 콘솔에서 Firestore Database를 클릭하여 데이터베이스를 만든다. 프로덕션 모드에서 시작을 선택하고 다음을 누른..

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기 앞으로 4편에 걸쳐서 파이어베이스와 리액트를 사용하여 아주아주 간단한 프로그램을 만들어보는 글을 작성할 예정이다. 이번 글에서는 파이어베이스와 리액트를 연동하는 것에 대해 다루겠다 2junsu.tistory.com 이전 글에 이어서 이번 글에서는 이메일을 사용한 회원가입 및 로그인 기능을 구현해 보자. 공식문서 링크는 여기 기본 설정 우선 전에 만들었던 test 프로젝트를 눌러서 콘솔로 이동한 후에 Authentication을 클릭하고, 이메일/비밀번호를 클릭한다. 그리고 이메일/비밀번호 사용 설정에 체크한 후 저장을 누른다. 이제 이메일로 회원가입/로그인을 구현하기 위한 준비..

앞으로 4편에 걸쳐서 파이어베이스와 리액트를 사용하여 아주아주 간단한 프로그램을 만들어보는 글을 작성할 예정이다. 이번 글에서는 파이어베이스와 리액트를 연동하는 것에 대해 다루겠다. 우선 리액트 프로젝트를 만들어 준다. npx create-react-app test 그리고 파이어베이스에 접속하여 로그인 후에 콘솔로 이동하여 "프로젝트 추가"를 누른다. 프로젝트 이름을 입력하고 넘어간다. 그 다음으로는 Google 애널리틱스 사용 설정이 나오는데, 나는 그냥 설정에 체크하고 넘어갔다. Google 애널리틱스 사용 설정을 했다면 Google 애널리틱스 구성이 나오는데, Default Account for Firebase를 선택한 후 넘어간다. "프로젝트 만들기"를 누르고 프로젝트 생성을 완료한다. 그러면 아..