Front-End Developer

이젠, Nav바 만들때 NavLink를 쓰자 - active일 때 CSS스타일링하기

홈페이지 하단에 네비바를 만들어야 했다. 네비 바를 만드는것 까지는 어렵지 않았으나, 해당 카테고리가 선택되었을 때 이미지 변경 & 글의 color변경하는 방법을 모르겠더라. location.pathname에 따른 img src 변경 페이지는 항상 location의 정보를 받아올 수 있는데, 콘솔에서 window.location을 찍어보면 확인할 수 있다. 참고로 window는 생략 가능하다. 이 pathname을 활용해서 이미지 src를 바꿔주는 방법을 택했다. location.pathname이 '/home'과 일치할 때 color 이미지로 변경, 그렇지 않은경우 흑백이미지로 두었다. NavLink styling하는 방법 여기서 중요한건 저 글씨색깔이었다. 리액트는 처음이다보니 자바스크립트처럼 간편하게..

회원가입페이지 코드리뷰 받은내용 고쳐보기

어떤 파일만 받을 것인가 - 아니 이렇게 쉬운 방법이? if (Blob.type.substr(0, 5) !== 'image') { alert('image만 업로드가 가능합니다'); return; } else if (Blob.type.substr(0, 5) === 'image') { const reader = new FileReader(); reader.readAsDataURL(Blob); 나는 이런식으로 file type의 substring의 0번째 index부터 5개 length가 (그냥 '첫 다섯글자가' 라는 말을 이렇게 어렵게 한다..) 'image'일 때와 아닐때를 나누어 예외처리를 해주었는데, 그냥 input 의 accept속성을 넣어주면 간편하게 해결할 수 있다. 사실 명세서에 // 이미지 파..

이벤트를 딱 한번만 일어나게 하고싶을 때 - 자바스크립트 DOM 꿀팁

자바스크립트에서 콜백이벤트가 딱 한번만 일어나게 하고싶을 때 사용할 수 있는 꿀팁! 바로 이벤트리스너의 세번째 인자값으로 once 옵션을 추가해주면 된다. document.body.addEventListener('click', () => { console.log('I run only once! 😇'); }, { once: true }); 기본값은 false로 지정되있어, 클릭될 때마다 이벤트가 항상 일어난다. once: true로 지정해주면 처음 이벤트가 일어났을 때에만 콜백함수가 실행된다. 혹은 이벤트가 일어났을 때 해당 이벤트를 remove해주는 함수를 만들어줄 수도 있다. 근데 once옵션이 너무 간단하니까~ 그걸 쓸 듯? document.body.addEventListener('click', cb..

pull했더니 내가 하던게 다 날라갔네...? git reflog로 모든커밋 확인하기

기능브랜치에서 열심히 작업한 내용을 push하려하니 원격에서 pull할게 있다고 해서 pull을 했다. 근데 내가 작업하던게 다 날라갔다... 이것밖에 없을리가 없어... 며칠동안 작업한게 다 날아간걸 확인하고, git log에도 그동안 열심히 커밋했던게 싹 사라지고 원격에 있던것만 남아있는걸 보고 순간 멘탈이 붕괴되었다가 검색을 통해 해결할 수 있는 방법이 있다는걸 알게됬다. push하기 전에 commit을 해놓았다면 git reflog를 통해 pull 전의 모든 커밋기록까지 확인할 수 있다. 맨 위에서 두번 째, 90d8e92 이름의 커밋이 내가 마지막으로 작업하고 커밋했던 내용이고. 맨 위에있는 9d0c591 이름의 커밋이 내가 원격에서 pull을받느라 내 작업을 다 없애버린 커밋이다. 일단 침착한..

searched.map is not a function - 리액트에서 Hook Flow를 이해한다는것

사건의 발단 데이터를 받아와 useState를 사용해서 화면에 뿌려주고 싶었다. 그리고 내가 받아올 데이터는 [배열] 이었다. (사실 이 기본을 생각하면 틀릴것도 없는 문제인데..) function Searched() { const [searched, setSearched] = useState('') const params = useParams(); const getSearched = async(name)=>{ const data = await fetch(`https://api.spoonacular.com/recipes/complexSearch?apiKey=${process.env.REACT_APP_API_KEY}&query=${name}&number=9`); const recipes = await da..

No routes matched location "/" 오류 간단해결방법(반전의 실수..)

사건의 발단 난 나의 Home 컴포넌트를 라우터를 사용해서 루트페이지로 설정하고 싶었다. 결과는 /와 매치되는 routes를 찾지 못했다며 오류. 간단 해결 방법 검색해보니 새로운 react-route flow에서 발생할 수 있는 이슈이며 간단히 코드스니펫을 추가해줌으로써 해결할 수 있다고 한다. 올해 업데이트되면서 이런일이 종종 있는듯? root페이지로 지정하고싶은 Route에 'index'를 추가해주면 된다. 결과 반전. Route 의 속성으로 path를 넣어줘야 하는데 to를 넣어준 것을 뒤늦게 발견했다... path로 바꾸고 index를 지우니 정상적으로 잘 작동한다.ㅜㅜ 이것때문에 몇분을 허비했는디 ㅜㅜ 아무튼 to로 잘못썼어도 index를 추가해주면 루트페이지가 잘 보인다는거..를 배움 참고자..