어제보다 더 나은 오늘

부트캠프에서 프로젝트를 위해 알려준 권장 eslint, prettier 설정의 의미를 파헤쳐보는 포스팅 되시겠다. 💡 기본 개념: - prettier는 formatter이고, eslint는 linter이다. - 스타일을 교정하려면 formatter를 사용하고, 오류를 잡으려면 linter를 사용한다. - linter 룰은 크게 포맷팅(스타일) 룰과 퀄리티 룰이라는 두 가지 카테고리로 나눌 수 있다. CRA를 사용하면 기본적으로 세팅되어 있는 eslint config인 eslint-config-react-app를 사용하는 경우, non-style 룰만 포함되어 있기 때문에 별다른 설정 없이도 prettier를 같이 사용할 수 있다. 하지만 일부 eslint config를 설치해서 사용한다면(예: "esli..

💡 한 줄 결론: build command 란에 npm run build가 아닌 CI= npm run build을 입력해줘야 한다. (공백 주의) 1. npm run build 만 입력했을 때 deploy log 2. CI=npm run build (= 앞뒤에 공백없음) 입력했을 때 deploy log 이에 대한 netlify docs의 설명 : In some cases, a build may fail due to a warning message that would not cause a build failure when run locally. This is because some libraries and build tools handle warnings differently when they detect..

1. 순열 (Permutation) 서로 다른 n개의 원소 중에서 r개를 중복 없이 골라 순서에 상관있게 나열하는 경우의 수 (nPr) 예제) [A, B, C, D, E]로 이뤄진 5장의 카드가 있을 때, 이 5장의 카드 중 3장을 선택하여 나열하려고 한다. 이때, 순서를 생각하며 3장을 선택하는 모든 경우의 수를 나열하시오. 5P3 = 5! / (5-3)! = 5*4*3 = 60 🔽 for loop로 구현 function permutationLoop(list) { const result = []; for (let i = 0; i < list.length; i++) { for (let j = 0; j < list.length; j++) { for (let k = 0; k < list.length; k++..

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

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 파일을 추가하자. 상세한 방법은 여기를 참고하면 된다.