봉보로봉봉

커스텀 훅을 쓰는 이유 자주 사용하는 로직을 하나로 묶어 반복을 최대한 줄이고 재사용하기 위해서 사용한다. useTitle 커스텀 훅을 만들 땐 똑같이 use~로 시작하는 함수를 선언한다. 넘겨받을 인자가 있다면 넘겨주면 된다. 커스텀 훅을 만들 때도 useState나 useEffect와 같은 리액트 훅을 사용할 수 있다. 컴포넌트에 전달하는 값이 아닌 커스텀 훅은 바로 실행시켜서 사용할 수 있다. const useTitle = initialTitle => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle..

그동안 프로젝트를 하면서 GET메소드밖에 쓸 일이 없어서 헤더나 바디에 뭘 넣어서 보내본 적이 없었다...🥲 오직..GET data만을 외치며 걸어온 인생...⭐️ 최근들어 axios 통신에 바디랑 헤더 넣어서 보내는 걸 알게돼서 기록해 둔다. axios.get()에 headers 넣기 // axios.get(url, {headers: {키 : 밸류}}) axios .get('http://localhost:8000/posts', { headers: { Authorization: localStorage.getItem('token') }, }) axios.post()에 body 넣기 // axios.get(url, {키 : 밸류}) axios .post( 'http://localhost:8000/posts'..

잘 쓰던 closest를 쓰려고 했는데 안써졌다... const handleDockMenu = (e: React.MouseEvent) => { const target = e.target; const newDockState = [...dockState].map((state) => // closest에 빨간줄 target.closest(`#${state.id}`) ? { id: state.id, selected: true } : { id: state.id, selected: false } ); setDockState(newDockState); }; Property 'closest' does not exist on type 'EventTarget'. 이유 이벤트타겟에 없다고 하니 e.target에 Elemen..

카카오 로그인 (Javascript SDK) 구현 나는 오늘 카카오를 죽였다. 이유는 터무니없다. 어떻게 하는지 모르겠기 때문이다.. 이번 프로젝트는 카카오 로그인을 구현했다. 저번에 카카오 지도 API랑 2번 싸웠는데 이번에도 또 로그인 API랑 싸웠다.....🤯 쉽지 않아... 하지만 끝끝내 내가 이겼다... ㅎㅎㅎ 사실 이번에 나는 카카오 인가 코드까지만 하고 나의 팀플 메이트인 지은이 다 해줬다. 지은 최고! 최고의 백엔드! 야호! 😀😀😀 카카오 Javascript 로그인은 이런 순서로 진행되는데 우리는 이런식으로 처리하기로 했다. 유저 동의 화면 때문에 프론트에서 Redirect URI로 카카오 인가 코드를 받아서 백으로 넘기면 백에서 카카오 토큰을 받아서 회원정보를 가져오고 그 정보로 자체 회..

tsconfig는 타입스크립트 파일을 자바스크립트 파일로 컴파일할 때 속성들을 설정해주는 파일이다. 매우 많은 옵션이 있지만 여러 강의에서 소개하는 옵션들과 vite로 생성한 프로젝트에 있는 옵션들에 대해 찾아봤다. 터미널에서 tsc --옵션을 해서 타입스크립트 파일을 컴파일할 수 있다. --help 명령어에 대한 도움말을 볼 수 있다. --init config를 만드는 명령어. 하지만 직접 파일을 생성해도 된다. compilerOptions : Object allowJs : boolean 기본적으로 타입스크립트에서는 js파일을 허용하지 않는다. 보통 학습할 때 js에서 ts로 많이 넘어오는데 js파일을 순차적으로 변경한다고 하면 모든 js파일을 ts파일로 바꿀때까지 배포가 불가능하다. 파일의 개수가 엄..

컴포넌트를 나누는 기준 팀 프로젝트를 진행하면서 여러 번 들었던 생각은 '저 사람은 왜 컴포넌트를 이렇게 나눴을까?'라는 궁금증이었다. 그러면서 내가 컴포넌트를 나누는 기준은 옳은가라고 되돌아보게 되면서 '컴포넌트를 나누는 좋은 기준은 무엇일까'라는 의문이 들었다. 리액트 공식 홈페이지를 보면 컴포넌트는 독립적이고 재사용이 가능한 최소 단위인데 컴포넌트를 나누는 기준을 판단하기에는 모호한 표현같다. 그래서 사람마다 컴포넌트를 나누는 기준도 모두 다르고 검색을 했을 때도 다양한 의견들이 나온다. UI를 기준으로, 비슷한 관심사를 기준으로, 데이터를 기준으로, 기능을 기준으로 등등.. 어떤 글에서는 큰 문제가 발생하지 않는다면 굳이 불필요하게 컴포넌트를 나눌 필요 없다고도 말한다. 여러 글들을 읽어보고 내가..

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

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