어제보다 더 나은 오늘

to do 앱 만들기 과제를 하면서 axios로 fetch를 하게끔 코드를 작성했다. 이번 기회에 crud 요청 관련한 부분들을 정리해 보았다. axios 공식문서에서 요청 메소드 명령어는 다음과 같이 나와있다. 1. Read axios.get(url[, config]) 🔽 코드 예제 const { REACT_APP_SERVER_URL: URL } = process.env; const [todos, setTodos] = useState([]); useEffect(() => { async function getData() { try { const res = await axios.get(URL); setTodos(res.data); // (*) } catch (error) { console.error(err..

배열을 초기화할 때 다음과 같은 두 가지 방식을 쓸 수 있다. let arr1 = new Array(5).fill([]); let arr2 = Array.from({ length: 5 }, () => []); 똑같은 배열이 생성된 것 같지만, 차이가 있다. Array.fill()의 인자로 "객체가 들어올 경우, 그 참조만 복사해서 배열을 채운다." (출처: mdn) 무슨 말인고 하니 위의 arr1의 요소는 모두 같은 주소값을 가지고 있다는 뜻이다. 그렇기 때문에 빈 배열에 push를 해보면 다음과 같은 결과가 나온다. Array.fill()에 객체가 바로 들어올 때 발생하는 문제이기 때문에 다음과 같이 fill() 메소드로 원시값을 먼저 채워준 다음에 map 메소드로 배열로 바꿔주는 경우에는 이러한 문제..

1편에 이어 간단하게 정리해 두려고 한다. 1. a tag 초기화 : css 초기화의 경우 일괄적으로 reset을 할 수 있는 코드 뭉치들이 있지만 일단 지금 단계에서는 user agent(브라우저)에서 어떤 세팅들이 있는지, 그게 내가 작성하고자 하는 레이아웃에 어떤 영향을 주는지 알고 싶어서 일괄 적용은 하지 않으면서 css를 작성해보고 있다. a { color: #292827; // theme color 등 원하는 색상 지정 text-decoration: none; outline: none } a:hover, a:active { color:#292827; text-decoration: none; } 2. div 태그 가운데 정렬 태그로 구분선(.divider)을 만들었다. 이제까지 가운데 정렬을 보..

Map과 Set을 공부하면서 모던 JavaScript 튜토리얼의 과제 중에 애너그램을 걸러내는 문제가 있었다. 애너그램이란 단어나 문장을 구성하고 있는 문자의 순서를 바꾸어 다른 단어나 문장을 만드는 것이다. 다음은 한국어에서 음절 단위의 애너그램 예시이다. 국왕 - 왕국 미개 - 개미 방배역 - 배방역 피노키오 - 키노피오 영어에서는 stressed - desserts, permission to dance - stories on pandemic 등이 애너그램이다. 문제: 애너그램으로 만든 단어를 걸러내어 한 단어만 남기는 함수 aclean(arr)를 작성하세요. // 예시 const arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectare..

1. substring() vs. substr() 각 메소드의 두번째 인자가 의미하는 바가 다르다. - substring의 두번째 인자: 마지막 인덱스(포함하지 않음) - substr의 두번째 인자: 추출한 문자의 길이 const word = 'grapefruit' word.substring(4,7) // 'efr' word.substr(4,7) // 'efruit' 2. substring() vs. slice() substring()과 slice()의 사용법은 기본적으로 동일하다. 하지만 다음의 두 가지 경우에 차이가 있다. 1) startIndex > endIndex 일 때 substring()은 첫번째 인자(startIndex)가 두번째 인자(endIndex)보다 크면 swap을 하지만, slice..

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

삼항 연산자, 특히 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을 해도 함..