캐나다 개발자

프론트엔드의 입장에서 코딩을 하다보면, 정말 자주 마주하게 되는 에러중 하나는 Uncaught TypeError: Cannot read properties of undefined (reading 'users') 그리고 타입스크립트에서는 'inputRef.current' is possibly 'null'.ts(18047) 이렇게 두 종류가 있습니다 😫 결론부터 말하자면, 이 둘은 자바스크립트에서 제공되는 기능으로 처리하기가 아주 간단합니다 🤔 undefined의 경우에는 아래처럼 undefined가 들어올거 같은 데이터뒤에 ? 이 물음표 하나만 넣어주면 에러가 해결되고 allUsersAPI.data?.users?.map() 아래의 경우에는 data가 null일지도 모른다는 그 데이터 뒤에 ! 하나만 추가해..

1. 컴포넌트 트리의 변경(자동 batch를 위해서) ReactDOM.render -> ReactDOM.createRoot 코딩애플님 유튜브에서 잘라왔는데, 이 부분은 정말 엄청 큰 매리트가 있어 보입니다. 2. 새로운 훅 useId - Dom을 위한 유니크 id를 만들어주는 훅 -> 어디에 쓸까 생각을 해봤는데, 유니크id가 항상 필요한 map함수내의 key값에 줘도 되겠다 라는 생각이 듭니다. function Checkbox() { // 이 id를 가진친구들은 유니크 아이디가 생긴다 const id = useId(); return ( Do you like React? ); } useTransition - 느린 컴포넌트 성능 향상 isLoading에는 startTransition이 처리중일때는 true..

프론트엔드 개발을 할때 서버가 필요한데, 서버에 대해 1도 모른다, 하지만 나는 서버가 보내주는 데이터가 필요하다. CRUD 연습하고 싶다, 할때 쓸만합니다. 사용법이 어렵지 않아서 그냥 명령어로 정리했습니다. 설치 npm install -g json-server 시작 json-server --watch db.json 내가 원하는 포트에서 열기 (이미 시작했으면 컨트롤+c로 원래 서버를 닫고 여는걸 권장합니다.) json-server -w db.json -p 3500 내가 원하는 폴더에서 열기 json-server -w 폴더이름/db.json 🔅 이제 https://jsonplaceholder.typicode.com/todos 위의 주소에 가서 있는 데이터들을 복사해서 db.json에 넣어두고 get 부..

주소창에 자꾸 없는 url 치는 사람들이 있습니다.🤦‍♂️ 정말 이해할 수는 없지만, 웹 페이지를 부수려는 사람은 생각보다 많습니다.. 대체로 부수는 방법: 데이터 빠르게 fetching 시도하기, url에 이것저것 입력하기, 오토마우스 등등.. 모든 경우를 처음부터 막는건 저같은 응애 주니어 한테는 아주 어렵지만, url로 이것저것 시도하는 부량배들은, 🚫 404 (page not found)를 보여주면서 아래 구글에서 가져온 예시처럼 디자인 해줄수도 있습니다. 리액트에서는 Route정보를 아래처럼 할 경우, 404 페이지들을 잡을 수 있습니다. 즉 내가 설정한 다른 Route url이 아닌 나머지 모든건 다 저 Error page가 열리게 됩니다. 에러페이지는 따로 디자인을 해서 위의 예제들처럼 보여..