어제보다 더 나은 오늘

1. 데이터와 상태 다루기 처음에는 더미 데이터로 화면을 만들고, 기본적인 CRUD 기능을 어설프게나마 구현을 했다. 그다음 더미 데이터를 json-server로 바꿔서 axios로 fetch하는 걸로 코드를 수정했다. 그러다보니 처음에 더미 데이터를 가지고 기능을 만들 때는 전체 to do 데이터를 하나의 상태로 관리했었는데, 이 부분을 서버와 데이터를 주고 받는 걸로 바꿔야했다. 그 과정에서 fetch로 요청을 할 때마다 페이지 새로고침을 해주지 않으면 갱신된 데이터가 화면에 반영이 되지 않았다. crud 요청이 있을 때마다 window.location.reload() 로 새로고침을 해주자니 매번 모든 컴포넌트들이 새로 리렌더링이 되면서 화면이 번쩍거리는 게 사용자 관점에서 요란스럽게 느껴졌다. 특히..

GitHub access token은 personal information이기 때문에 코드에 토큰이 그대로 포함된 채 commit을 하면 github에서 해당 토큰을 더이상 유효한 토큰으로 취급해주지 않는다. commit하기 전까지 잘 받아오던 데이터를 401 Unauthorized 에러가 뜨면서 더이상 받아올 수 없게 된다. 그리고 몇 분 후에 github에서 친절하게 아래와 같은 메일을 보내준다 😇 그렇다면 이제 할 일은? 새로운 토큰을 재발급 받아서 .env 파일을 생성하고 해당 파일에 새로운 토큰을 잘 적어주자. 그리고 .gitignore에 .env 파일을 추가하자. 상세한 방법은 여기를 참고하면 된다.

지난 목요일부터 4일째 자료구조(스택, 큐, 트리, 그래프)를 배우면서 아침부터 밤까지 내내 알고리즘 문제만 들여보고 있으니 머리가 과포화 상태다 ㅋㅋㅋ 금요일 정규 시간에 못 푼 문제들(태반...)을 주말 동안 붙잡고 늘어지느라 주말에 해야 할 다른 일들을 하나도 못했다. 😭 아직 열어보지도 못한 advanced 문제들이 남아있다는 것이 함정... 지금 본다고 알 것 같지도 않은 게 더 함정... 이번 포스팅에서는 그래프를 이용한 알고리즘 문제 중 하나였던 길찾기 문제를 셀프 크리틱해보려 한다. 알고리즘 문제에서 많이 등장하는 길찾기 패턴 문제를 처음으로 어떻게 다뤄야 하는지 알게 된 것이 이번 자료구조/알고리즘 유닛의 최대 성과였다. 💡 그래프의 각 정점을 순회할 수 있는 DFS, BFS 두 가지 방..

워낙 유명한 문제라 간략하게 입출력만 써보자면, 입력: string 타입의 문자열 출력: 입력의 문자열 내의 모든 괄호가 짝이 맞는지 여부에 대한 boolean 타입 🔽 입출력 예시 let output = balancedBrackets('[](){}'); console.log(output); // --> true output = balancedBrackets('[({})]'); console.log(output); // --> true let output3 = balancedBrackets('[(]{)}'); console.log(output3); // --> false 🔽 첫번째 문제 풀이 - switch 문으로 개별 케이스 나눔 switch 문으로 써서 풀긴 했는데, 사실 위의 3가지 경우는 여는 괄..

📍문제 상황 Login 컴포넌트에서 로그인 버튼을 누르면 GitHub OAuth 인증을 통해 Github resource server에서 사용자 정보를 받아와 Mypage 컴포넌트에서 사용자 정보를 이용해 화면을 그려줘야 했다. 이 과정에서 Mypage 컴포넌트에서 useEffect hook를 이용해 의존성 배열 자리에 빈 배열을 넣어서 Mypage 컴포넌트가 처음 렌더링 될 때 hook의 callback 함수에 axios post 요청을 해서 사용자 정보를 받아오려고 했다. useEffect(async () => { const res = await axios.post("http://localhost:4000/userinfo", { accessToken, }); setGithubUser(res.data...

자바스크립트에서 return 문을 정의하지 않은 함수의 default return 값은 undefined다. 입력값을 받아서 로직을 거쳐 출력값을 반환하는 함수라는 녀석에서 굉장히 기본적인 상식이지만 이 기본을 잊어서 곤혹을 겪는 경우가 종종 있다. 이와 비슷하게 오늘 쇼핑몰 장바구니 기능 구현 과제를 하다가 array.push()의 반환값 때문에 어처구니 없는 에러를 겪었다. 배열의 각종 메소드들은 for loop나 그밖의 다른 방법 등으로 배열을 순회하면서 각종 조건문을 걸어주면 어지간하게 다 구현할 수 있다. 하지만 메소드를 쓰면 그안의 로직은 알 바 아니고 내가 하고 싶은 일에만 집중할 수 있어서 엄청나게 편리하다. 명령형(또는 절차형)이 아닌 선언형 프로그래밍의 이점이라고 할 수 있다. 거기에 ..

📍 목표: 아래 캡처 이미지와 같이 화면의 컴포넌트가 구성되어 있는 상황에서 상단 컴포넌트의 입력값 3개(작성자 이름(author), 제목(title), 본문(bodyText))를 서버에 보낸 후, 하단 컴포넌트의 제일 위쪽에 form에서 보낸 새로운 데이터가 뜨게 하기 create-react-app으로 만든 폴더 구조는 다음과 같다. |--- /fe-sprint-my-agora-states-react-client | |--- /public | |--- /img ## icon 등 assets 이미지 파일이 들어있는 폴더 | |--- index.html | |--- /src | |--- App.js | |--- index.css | |--- index.js | |--- /components | |--- D..

앞선 포스팅에서 얘기한 것처럼 부트캠프에서 매일 하루에 한 문제씩 알고리즘 문제를 풀게 하면서 하루 일과를 시작한다. (a.k.a. Daily Coding) 이제까지 문제를 딱 보고 pseudo code를 하나도 적지 않고 바로 푼 문제도 있고, 1, 2, 3 번호를 매겨가며 pseudo code를 적은 다음 푼 문제도 있지만 어...? 하고 2초 간 얼었던 문제는 어제가 처음이었다. 나눗셈(/)과 나머지(%) 연산자를 사용하지 않고 두 수의 나머지를 구하는 함수를 작성하는 것 잠시 삼천포를 건널테니 이 포스팅을 읽는 여러분도 위의 함수를 어떻게 짤 지 한 번 생각해 보시면 좋겠다. 개인적으로 부트캠프에서 이제까지 했던 과제 중 가장 인상적인 과제를 꼽으라면 두 가지를 들 수 있겠다. (섹션이 끝날 때마..

부트캠프에서 매일 아침 알고리즘 문제를 하루에 한 문제씩 풀게 한다. 오늘의 문제는 다음과 같았다. 💡 문자열을 입력받아 아이소그램인지 여부를 리턴한다. 아이소그램(isogram)이란 각 알파벳을 한 번씩만 이용해서 만든 단어나 문구를 말한다. 처음에 문제를 보고는 별 생각 없이 다음과 같이 이중 for문으로 풀었다. function isIsogram(str) { // 빈 문자열이 들어오면 true를 출력한다는 주의사항을 반영 if (!str) return true; str = str.toLowerCase(); for (let i = 0; i < str.length; i++) { for (let j = i + 1; j < str.length; j++) { if (str[i] === str[j]) retu..

모듈을 내보내고 가져오는 데에는 크게 두 가지 방식이 있다. 1. 유명 내보내기 (named export) : 여러 값을 내보낼 때 유용하다. 가져갈 때는 변수나 함수의 내보낸 이름과 동일한 이름을 사용해야 한다. constructor를 내보내면 메소드까지 다 같이 사용 가능하다. export { func, foo } // func 와 foo (함수 또는 변수) 내보내기 import { func, foo } from "경로" 2. 기본 내보내기 (default export) : 어떤 이름으로도 가져올 수 있다. 아래 예시에서 동일한 변수명 agoraStatesDiscussions이 아닌 다른 변수명을 지정해도 상관없다. 다만 가져오는 파일 안에서 식별자 충돌이 없어야 한다. default 내보내기는 중괄..