Front-End Developer/React
이젠, Nav바 만들때 NavLink를 쓰자 - active일 때 CSS스타일링하기
홈페이지 하단에 네비바를 만들어야 했다. 네비 바를 만드는것 까지는 어렵지 않았으나, 해당 카테고리가 선택되었을 때 이미지 변경 & 글의 color변경하는 방법을 모르겠더라. location.pathname에 따른 img src 변경 페이지는 항상 location의 정보를 받아올 수 있는데, 콘솔에서 window.location을 찍어보면 확인할 수 있다. 참고로 window는 생략 가능하다. 이 pathname을 활용해서 이미지 src를 바꿔주는 방법을 택했다. location.pathname이 '/home'과 일치할 때 color 이미지로 변경, 그렇지 않은경우 흑백이미지로 두었다. NavLink styling하는 방법 여기서 중요한건 저 글씨색깔이었다. 리액트는 처음이다보니 자바스크립트처럼 간편하게..
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를 추가해주면 루트페이지가 잘 보인다는거..를 배움 참고자..
styled-components 사용시 Invalid hook call 오류 해결하기
문제상황 styled-component를 처음으로 설치하고 노란 버튼을 하나 만들어서 실행을 했는데 콘솔창이 시뻘개졌다. import React from 'react'; import styled from 'styled-components' let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; ` function Detail(props) { return ( 버튼 ); } export default Detail; invalid hook call이라는데. 확인해보라는대로 react 공식문서로 가서 오류를 해결해보자. 1. React와 React DOM 버전 확인해보기 react-dom이 16.8.0 버전 이하이거나 ..
리액트 유치원이 개원했습니다. (유투브 채널개설)
https://www.youtube.com/watch?v=Cs5kst_q-80 제가 워낙 지식이나 경험을 풀어서 전달하는 일을 좋아하기도 하고, '최고의 공부방법은 남에게 가르치는것이다'라는 신념 아래 제가 공부한 내용을 강의형식으로 만들어 유투브에 올리기 시작했습니다. 저의 전달력이 형편없지는 않으니 누군가에게는 도움이 되리라고 믿습니다. 물론 그 깊이는 정말 얕지만, 깊고 양질의 내용을 전달할 수 있을때까지 열심히 해봐야겠죠. 앞으로 해보고싶은 컨텐츠는 많은데요, 근본있는 자바스크립트 주니어개발자 기술면접시리즈 가능하다면 프론트앤드 개발자 취준일기 등등이 있습니다. 욕심이 많네요ㅎㅎ 요즘엔 정말 '도전'이라는게 뭔지 가슴깊게 느끼고 있습니다. 이 길의 끝에 저는 어디에 닿아있을까요. 프론트앤드 개발자..
useState Lazy initialization - 게으른 초기화가 대체 뭔소리야? (+유투브 영상 업로드)
해당 주제로 유트브에 영상을 올렸습니다! 체키라웃. 완전쉬움 https://youtu.be/Z_eWhLpnhbk 결론: 콜백은 괜히 콜백이 아니다~! 사건의 발단 useState를 배우며 Lazy initialization이라는 개념이 나왔다. 근데 당최 뭔 소리인지 이해가 되지 않았다. 콜백을 사용하면 초깃값을 한번만 실행해서 좋다는건 알겠는데... 왜 그런건지가 명확히 이해가 안되었다. 그래서 내가 이해하려고 정리해봤다. 사실 이해하니까 별거아니다! useState Lazy initialization 만약 함수컴포넌트 안 아무데나 'console.log'를 넣는다면 이후에 화면이 재렌더링되는 어떤 일을 할 때마다(버튼을 클릭했다 치자) 콘솔로그가 출력되는 것을 발견할 수 있다. 이는 당연한 결과인데,..