어제보다 더 나은 오늘

삼항 연산자, 특히 flag 변수를 이용해서 조건부 렌더링을 쓸 때가 많은데 그러다보면 값이 없을 때에는 빈자리를 채워주기 위해서 null이나 빈 문자열('')을 써주는 경우가 가끔 있다. 빨간색으로 표시한 부분은 포스팅에 대한 답변이 있으면 말풍선 이모티콘 옆에 숫자 1을 표시해주고, 그렇지 않으면 빈 공란으로 두려고 했다. 이제까지 이럴 때 다음과 같이 코드를 작성했다. {answer ? 1 : null} 똑같은 코드를 && 연산자를 써서 처리할 수도 있다. JavaScript에서 true && expression은 항상 expression으로 평가되기 때문이다. 이때 answer가 falsy한 값이면 리액트는 무시하고 건너뛴다. {answer && 1} 이걸 이용해서 아래와 같이 답변이 있는 경우 ..

지난 포스팅에서 pocket을 클론해 반응형 웹을 구현한 코드를 styled-components로 리팩토링 해보았다. 통번역 대학원 다닐 때도 시역(sight translation, 텍스트를 눈으로 읽어나가면서 입으로 소리내어 통역하는 훈련)했던 텍스트로 통역해보고 번역해보고, 정말 좋은 텍스트라면 암기하는 등 이것저것 여러 텍스트를 마구잡이로 다 보는 것보다 좋은 텍스트를 하나 정해서 여러 가지를 해보는 게 실력 증진에 더 큰 도움이 되었다. 부트캠프에서도 기본적으로는 매일매일 해야 할 과제가 다르지만 vanilla js로 작성한 코드를 리액트로 바꿔본다든지, react에서 state를 관리하는 방식으로 구현했던 과제를 가지고 똑같은 리액트 코드에서 state 관리만 redux를 적용해 본다든지 하는 ..

1. Column Grid System Column Grid System이란 컴포넌트들을 화면에 어떻게 배치할 것인지를 정하는 UI 레이아웃 구성법 중에서 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 방법론이다. 모바일, 태블릿, PC 등 화면의 크기가 다른 기기에서 화면 구성을 어떻게 할 것인지를 같이 생각할 수 있기 때문에 반응형 웹 디자인에 적합한 레이아웃이라고 할 수 있다. 위의 pocket 사이트의 UI 레이아웃을 대략적으로 클론해 보는 것이 이번 실습의 목표다. 2. 실제 구현 방법 먼저 PC / 태블릿 / 모바일 등 세 가지로 분기로 나눠 화면 구성에 대한 와이어프레임을 파악했다. 오늘도 이렇게 듬성듬성... (피그마 따위 내 사전에 없...) 빨간색으로 표시한 영역이 다른 아..

일반적인 for 문과 forEach 메소드에 차이가 있다는 점을 새까맣게 모르고, 이제까지 배열을 순회하는 여러 가지 방법 중 하나라고 생각하고 썼다. 그러던 중 주말에 알고리즘 문제를 풀면서 똑같은 코드를 forEach로 실행할 때와 for of로 실행할 때에 다르게 동작한다는 점을 깨닫고 둘의 차이를 찾아보았다. 1. for loop - 중간에 loop 건너뛰기나 종료가 가능하다 (continue나 break 키워드 사용 가능) - 반복 범위를 설정할 수 있다 (i++, i--, i+=2 등) 즉, 역순 탐색 등 다양한 방식의 탐색이 가능하다. 2. forEach - for문과 다르게 중간에 끊을 수 없고, 배열의 모든 요소를 끝까지 순회한다. forEach의 콜백 함수 안에서 return을 해도 함..

지난 목요일부터 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가지 경우는 여는 괄..

질문을 잘하는 개발자 … jbee.io 💡 질문을 하고 답변을 얻기 위해서는 Context를 맞추는 작업이 선행되어야 한다 1. 지금 이슈가 된 것이 무엇인가? - 정확한 상황 설명 - 부연 설명을 최대한 줄이기 위해 자신이 무슨 프로젝트를 하고 있는지 알고 있는, 또는 자신의 수준을 알고 있는 동료 개발자에게 질문을 하는 것이 좋다. 예시) - 지금 개발 중인지, QA 중인지, 배포 후 긴급 대응인지 - 이슈가 발생한 환경은 무엇인지 (OS, 브라우저 등) - 어떠한 상황에서 이슈가 발생했는지 2. 어디까지 해보았나? - 발생한 이슈의 원인이 무엇이라고 생각하는지 - 그 원인을 토대로 내린 결론은 무엇인지 - 결론대로 시도를 해보았는지 이러한 질문을 하면 답변자는 다음과 같은 행동을 할 수 있다. - ..

1. input 초기화 input { border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input:focus { outline: 0; } 2. color 변수 지정 및 사용 /* color palette */ :root { --main-blue: #2563cf; --font-color-primary: #292827; --bg-shadow: rgba(0, 0, 0, 0.1); --bg-hover: rgb(239, 246, 252) } // 사용할 때는 var()로 .task { color: var(--font-color-primary); } 3. svg 파일 색상 변경 - svg 파일에서 fill="currentC..

📍문제 상황 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...

axios 라이브러리는 편의를 위해 다음과 같이 http 메소드의 별칭을 제공한다. axios.get(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) axios.delete(url[, config]) 여기에서 마지막 delete 요청을 보면 post 요청과 달리 두번째 인자가 data가 아닌 config이다. 하지만 config 설정 옵션을 통해서도 서버에 data를 실어 보내는 방법이 있다. 다음은 Oauth 구현 과제에서 클라이언트 화면에 있는 로그아웃 버튼을 눌렀을 때 로컬 서버에 accessToken을 같이 보낸 다음, 로컬 서버에서 re..