놀러와요 버그의 숲

오늘은 리드미를 작성해보려고 한다. 팀원들을 위해서 대략의 리드미 카테고리를 짜보려고 한다. 1. tree 구조 node modules 빼고 출력하기 tree -I node_modules 2. 깃허브 gif 파일 올리기 하단의 블로그 참조를 했다. https://onlydev.tistory.com/15 깃허브 README.md 파일에 이미지, gif 업로드(feat. VSCode) 코딩에 대한 감을 잃지 않기위해 토이 프로젝트들을 제 깃허브 README.md 파일에 올리려고 합니다. 이미지나 gif를 업로드하면 더 좋을 것 같아서 소소한 방법을 공유 해봅니다..! 1. 깃허브에 로그 onlydev.tistory.com 3. 깃 fetch 관련 CLI 중간에 커밋이 ahead 되었다고 나와있어서 하단의 C..

1. 리액트 useState를 이용한 input 관리 핵심은 onChangeInput이라는 onChange를 감지할 수 있는 속성을 넣어주고, userInput이라는 state안에 여러 정보들이 들어있으면, const nextUserInput = { ...userInput, [e.target.name] : e.target.value }; setUserInput (nextUserInput)을 해주는 것이다. 그리고 ... 스프레드 연산자를 이용해서 기존것을 복사를 해주어야하고, name이라는 속성도 input의 속성으로 넣어주어야 하는것을 잊지 않아야한다. 그리고 useCallback을 사용하여 userInput 값이 변할때만 인지하도록 하였다. const InputStudentNumber = () => ..

1. 개발 도중에 콘솔로그가 두번 찍히는 현상 발생 (GET, POST 요청 마찬가지) index.js 파일안에 있는 가 감싸져있어서 그렇다. 요렇게 만 남겨주면 말끔히 해결된다. StrictMode가 되어있으면 두번씩 렌더링이 되기 때문이다. 이는 리액트 쪽에서 다음 아래와 같은 문제들이 발생했을 때 도움을 주기 위해서라고 한다. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 ref 사용에 대한 경고 권장되지 않는 findDOMNode 사용에 대한 경고 예상치 못한 부작용 검사 레거시 context API 검사 참고 블로그 https://velog.io/@hyes-y-tag/React-useEffect%EA%B0%80-%EB%91%90%EB%B2%88-%EC%8B%A4%ED%96%89%..

1. 숫자로 표현된 것 요일로 변환 여기서 날짜를 달력에서 보내온 날짜와 요일 그대로 업데이트를 해야했다. const week = ['일', '월', '화', '수', '목', '금', '토']; const NowdayConvert = week[NowDay]; 이렇게 배열을 사용해서도 나타낼 수 있다. NowDay에는 숫자가 들어가는데, 이렇게 배열의 넘버링을 통해 요일을 불러올수 있다. 근데 뭔가 비효율적으로 한 느낌이라 useState를 써서 조금 더 효율적으로 할 수 있는 방법이 있는지 궁금하다. 2. Day.js에 대해서 알게되었다. 팀원 분 중 한분이 참조 블로그를 보내주셨다. https://jsikim1.tistory.com/196 day.js 사용 방법 - JavaScript 날짜 라이브러리..

1. styled-components props 전달하기 import React from 'react'; import styled from 'styled-components'; import { FaRegBell } from 'react-icons/fa'; import PropTypes from 'prop-types'; const ScheduleListItem = ({ scheduleData }) => { const { title, reservationTime, color } = scheduleData; return ( {title} {reservationTime} ); }; 이번에 styled-components에서 색상값을 props로 전달해서 처음 사용해보았다. (위에 코드에서 color props가..

1. propTypes를 설정안해줘서 생긴 eslint 에러 하단과 같은 에러가 생겼다. 'scheduleData' is missing in props validation eslint (react/prop-types) 하단의 코드처럼 propTypes를 설정해주었더니 괜찮아졌다. ScheduleListItem.propTypes = { scheduleData: PropTypes.shape({ title: PropTypes.string.isRequired, reservationTime: PropTypes.string.isRequired, }), }; 2. 코드에서 변수 선언을 함수보다 밑에 두었을 때 생긴 에러 Uncaught ReferenceError: Cannot access 'ScheduleListIt..

1. 코드리뷰 할 때 여러 줄 드래그 하는 법. +를 잡고 쭉 잡아땡기면 가능했다. 기억이 안날 때는 밑에 블로그를 참조하자. https://velog.io/@dramatic/GitHub-%EC%BD%94%EB%93%9C-%EB%A6%AC%EB%B7%B0-%EC%82%AC%EC%86%8C%ED%95%9C-%EA%BF%80%ED%8C%81 GitHub 코드 리뷰 사소한 꿀팁 GitHub으로 코드 리뷰를 하는 몇가지 사소한 팁 공유합니다 :) velog.io 2. eslint-plugin-prettier 는 가급적 사용하지 말자. https://yrnana.dev/post/2021-03-21-prettier-eslint prettier와 eslint를 구분해서 사용하자 결론부터 말하자면 오류를 잡으려면 린터..

1. border:0; 과 border:none; 차이 border-width를 0으로 만드느냐, 아니면 초기값(medium)으로 냅두느냐의 차이가 있다. (전자가 border:0; 이고 후자가 border:none; 이다. ) 우선 border:0; 을 써주는 것이 좋겠다는 생각이 들었다. border:none;을 쓸경우 우선순위가 가장 낮기 때문에 충돌이 일어날 수 있다. 참고블로그 https://nykim.work/103?category=910469 border: 0 vs. border: none 결론 border: 0 쓰자! 👻 보더 없앨 때 none 보다 0을 썼었는데 이유는 그게 더 치기 편하니까 🙄 (손꾸락은 소중하자나여) 그러다 어느날 앗 내가 혀를 어디다 두고 있었지! 를 자각하는 것처럼..

1. 스타일드 컴포넌트의 장단점 팀원 중의 한명이 정확한 styled-components의 장점을 물어보는데, 다른 것에 비해 굳이 styled-components를 쓰라고 설득을 잘 못하겠다. 그래서 우리가 쓰는 styled-components의 장점을 적어보려고 한다. 장점 1. 컴포넌트를 기반으로 CSS를 작성할 수 있게 해주는 라이브러리이다. 2. CSS in JS 방식으로 자바스크립트 코드에서 CSS를 작성할 수 있게 해준다. (기존의 웹사이트는 HTML, CSS, JavaScript를 각자의 별도 파일로 두었는데, React, Vue와 같이 모던 자바스크립트 라이브러리가 인기를 끌고 '컴포넌트 기반 개발 방법'이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JS를 포함하는 패턴이 많이 ..

오늘은 eslint 기본 프로젝트 내에서 설정해준것에 대한 오류 때문에 수정하느라 조금 애를 먹었다. 그래도 예전에 모르던 것을 알게되어 기쁘다. 1. JSDoc https://velog.io/@yijaee/JSDoc%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4-JavaScript-%ED%8C%8C%EC%9D%BC-%EB%AC%B8%EC%84%9C%ED%99%94%ED%95%98%EA%B8%B0 JSDoc을 사용해 JavaScript 파일 문서화하기 JSDoc이란? JSDoc은 Javadoc과 유사한 JavaScript용 API 문서 생성기이다. 문서 주석을 코드와 함께 소스 코드에 직접 추가할 수 있다. JSDoc은 소스 코드를 스캔하고 HTML 문서를 생성한다. JSDoc의 주목..