봉보로봉봉

최근 진행하고 있는 프로젝트의 회원가입을 구현하면서 정규 표현식에 대해 찾아보게 되어서 다음에도 참고하면 좋을 것 같아 적는다. 정규 표현식(Regular Expression)이란? 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있다. 영어로 Regular Expression이라서 다들 변수명을 regex로 많이 하는 것 같다. 참고 정규 표현식 메소드 test() test() 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환한다. // syntax regexObj.test(str) 함수로 분리하여 정규 표현식..

axios.post에 url을 작성하고 body에 넣고 싶은 내용을 넣는다. 그리고 응답을 콘솔에 찍어보려고 하면 빨간 줄이 죽죽 생긴다. axios .post('http://localhost:8000/users/signup', { account: idValue, password: pwValue, nickname: nameValue, email: emailValue, }) .then((res)=>console.log(res)) axios 공식문서 이런 에러가 뜨는 걸로 봐서는 axios를 타입스크립트에서 사용하려면 요청 보내는 데이터와 응답받아서 오는 데이터의 타입을 지정해줘야 하는 것 같다. Property 'message' does not exist on type 'AxiosResponse'. 요청 ..

필요한 패키지를 설치한다. npm i typescript @type/node @type/react @type/react-dom @type/react-router-dom // jest도 사용한다면 추가한다. npm i typescript @type/node @type/react @type/react-dom @type/react-router-dom @type/jest 파일 확장자를 변경한다. .js => .ts .jsx => .tsx tsx로 변경한 파일부터 타입 스크립트를 얹어준다. interface를 선언하여 props에 type을 정해주거나 generic을 사용해가며 에러들을 해결해준다. ref.current 에러 해결하기 jsx를 tsx로 파일 속성을 변경하면 e와 ref.current에 빨간 줄이 ..

강의를 보며 따라해보다가 float함수를 사용해서 형변환을 하려고 했더니 에러가 발생했다. TypeError: 'float' object is not callable 이유 위쪽에서 float라는 변수를 선언해서 그런 것이었다. float라는 변수를 이름을 변경해주었더니 float함수를 사용할 수 있었다. 참고1 참고2

이번 주 스터디에서 라이트하우스(lighthouse)를 써보는게 과제라서 사용하게 됐다. lighthouse를 검색했을 때 가장 상위에 나오고 접하기 쉬운 것 같아서 크롬 확장프로그램으로 사용해보기로 했다. lighthouse 크롬 확장프로그램 localhost로 켜서 확장 프로그램을 눌러서 라이트하우스를 사용하려고 하니까 개발자 도구로 가서 사용하라고 떴다. 개발자도구에 가서 Elements, Console 같은 탭에 보면 라이트하우스가 있고 들어가면 Analyze page load를 클릭하면 페이지를 측정한다. 그럼 결과를 알려준다. 충격적...🥺 스터디 프로젝트긴 하지만 어떻게 51점을 줄 수가 있어....🥲 이런식으로 상세 항목별로 분석 결과를 알려준다. 그리고 어떻게 성능을 향상 시킬 수 있는지..

git commit을 길게 쓰고 싶은데 터미널 속 에디터가 불편해서 git commit -m에서 구구절절 쓰시나요...? 이제 그럴 필요없습니다! 에디터 설정으로 vscode에서 속 편하게 사용하세요! 😀 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ vscode에서 cmd + shift + P를 누른뒤 code를 검색하고 나오는 이 메뉴를 클릭해 설정해준다. 터미널에서 아래 명령어를 이용해 git config도 설정해준다. git config --global core.editor "code --wait" 그럼 git commit 명령어를 입력했을 때 에디터가 vscode로 뜬다! 👍

props로 받아온 id를 html태그의 id로 넣어주려고 하는데 자꾸 에러가 떴다. Type 'number' is not assignable to type 'string'. 이유 html id는 숫자로 시작할 수 없다. 이런 기본적인 것도 까먹다니 정신을 차려야한다....... 변수도 첫글자가 숫자면 선언이 안되는데!!!!!!! W3C 문서 ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). 참고1 참고2

타입스크립트에서 props 넘기기 props를 기존에 넘겨주듯이 넘겨줬다. 그랬더니 props 부분에 빨간줄이 떴다..🥹 제발.. 그만.... // 에러 const CheckList = ({ todos }) => { return ( {todos.map((el: Todos) => ( ))} ); }; export default CheckList; 이유는 props를 넘길때도 타입을 지정해주어야 하기 때문이다. 그래서 이리저리 검색을 해서 넣었더니 빨간줄이 사라졌다. interface Todos { id: number; todo: string; } interface TodosProps { todos: Todos[]; } const CheckList = ({ todos }: TodosProps): JSX.El..