전체 글

이벤트를 딱 한번만 일어나게 하고싶을 때 - 자바스크립트 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을받느라 내 작업을 다 없애버린 커밋이다. 일단 침착한..

21주차 회고 - 단단하게 성장하고싶다

첫 리액트 프로젝트 완성 https://koreanhamster.github.io/delicious/ React App koreanhamster.github.io 갑작스럽게 인턴으로 지원하고싶은 곳이 생겨 이틀에 걸쳐서 만든 첫 리액트 프로젝트. 후루룩 만들고 지금은 내용을 복기하면서 한번 더 만들어보고있는데, 반복적인 연습을 통해 흐름을 체득할 수 있어서 좋다. 사실 한 번 만든건 치워버리고 다시 만들고싶지 않은 경우가 대부분인데(다들 쳐다도보기싫다고 하는것처럼), 사실 그렇게 되면 머릿속에 남는게 없는 듯 하다. 투두리스트 하나를 만들더라도 계속 만들어보고 변형을 주며 또 만들어보면서 눈감고도 휘리릭~ 코드를 완성할 수 있을만큼 연습한다면 그 기능들만큼은 제대로 배울 수 있을 것 같다. 3번정도 다시..

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를 추가해주면 루트페이지가 잘 보인다는거..를 배움 참고자..