728x90 반응형 분류 전체보기238 [Context] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> [Context] is not a component. All component children of must be a or Router 컴포넌트에서 났던 오류! 상황 contextAPI를 사용하기 위해 컴포넌트를 만들어 코드를 작성하고 전역으로 쓰기 위해 라우터에서 감쌌다 👇 안으로 감싸버렸더니 Routes 자식으론 나 밖에 못 받는다는 오류가 나왔다 react-router-dom v6 부터 대신 를 쓰는데 오류가 뱉은 그대로 안에는 형태만 자식으로 올 수 있다 해결 를 안에 써주었다 2023. 1. 21. React 깔끔하게 컴포넌트 import 하기 같은 폴더 authform 에서 가져오는 컴포넌트를 좀 더 깔끔하게 가져올 수 없을까 🤔 import DropBox from "./authform/dropBox/DropBox"; import useAuth from "./hooks/useAuth"; import Errormodal from "./modal/Errormodal"; import BirthInput from "./authform/BirthInput"; import EmailInput from "./authform/EmailInput"; import ImageInput from "./authform/ImageInput"; import NameInput from "./authform/NameInput"; import PasswordInput fro.. 2023. 1. 19. 2023.01.15, weekly memoirs weekly memoirs 이번 주에 한 일 ✅ 공부 1. 신청해두었던 프리온보딩 챌린지가 시작되었다. 코스와는 다르게 2주간 짧게 진행되고 강의과 과제만 있는 형식이라 여유있게 듣고 있다. 특히 강의가 리액트쿼리로 투두리스트 구현하고 리팩토링하는 방향으로 흘러가 많이 흥미롭다. 다른 분들 보니까 다들 쿼리+타입스크립트+유즈폼+스타일 컴포넌트 사용하셔서 구현하셨던데 딱 내가 프로젝트때 썼던 스택들이라 공부가 많이 되는 거 같다. 2. 오랜만에 리액트 공식문서를 읽었다. 생각보다 재밌게 읽었고, 고차 컴포넌트에 대해서 흥미롭게 보고 프리온보딩 강의를 들었는데 이걸 적용하신 분이 best practice로 뽑히셔서 놀랐다. 이런 우연이... ✅ 코딩테스트 슬슬 1단계 쉬운 것도 다 풀어가는 거 같다. 문제 .. 2023. 1. 15. 자기소개 기록을 바탕으로 성장하는 프론트엔드 개발자 조은지입니다. 🌈 끝없이 성장하고자 하는 신입 프론트엔드 개발자 조은지입니다. 다양한 프로젝트의 협업 경험으로 유연한 커뮤니케이션이 가능하며 팀원과 함께 문제를 해결하고 이를 기록해 성장해나가는 것을 지향합니다. ⚒️ Skills Hard Skills HTML5 웹 표준 문법을 준수하며 시맨틱 마크업을 적절하게 사용합니다. CSS3 문제 없이 UI를 그릴 수 있으며 반응형 활용이 가능합니다. JavaScript ES6 ES6의 let, const, 화살표 함수, 구조 분해, 스프레드 연산자를 적절히 사용합니다. 직관적이고 유연한 코드를 지향합니다. React 프로젝트 작업에 모두 react를 사용하였고 기능을 무리 없이 구현할 수 있습니다. 원하는 로직을 바로 .. 2023. 1. 9. 2023.01.08, weekly memoirs weekly memoirs 이번 주 공부한 메모 이번 주에 한 일 ✅ observer 블로깅 기술 면접 대비하면서 observer를 다시 공부했다. 언제나 봐도 새로운 Observer지만 어느 정도 자신감이 붙은 거 같다. 준호님의 cleanUp이 필요없는 무한 스크롤 로직도 오늘 제대로 이해한 거 같아서 나름 뿌듯하다. 얼른 catbow에 catbow 라이브러리 적용하면서 observer를 더 심도있게 파보고 싶다 ☺️ ✅ 코딩테스트 월요일에 기업 코딩테스트를 진행했다. 생각보다 어려운 문제는 아니었지만 테스트에서 효율성 점수는 탈락했다. 찾아보니 알고리즘을 이용해서 푸는 게 좋다고하는데 요것도 공부를 해야하나 고민이 많다 🤔 하루에 한 시간씩 공부해보면 어떨까 싶다 ✅ 캣보우 캣보우 convertPa.. 2023. 1. 8. observer API 무한스크롤 Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. developer.mozilla.org 한번에 이해하면 천재! 옵저버 공식문서 👆 let options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } let observer = new IntersectionObserver(callback, options); observer API 는 매우 유용한 API 이다. 뷰포트와 관찰자를 설정해.. 2023. 1. 8. Winnerest 메인 페이지 리팩토링(Observer 무한스크롤) Winnerest 메인 페이지 구현 (무한 스크롤, Intersection Observer) 👆 메인페이지 구현 움짤 Pinterest clone Project Winnerest 총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서 2주간 학습용으로 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡았습니다. 메인 페이지 0119eunji.tistory.com observer Intersection 라이브러리를 사용해 구현했던 메인 페이지를 캣보우 프로젝트를 하며 다시 공부한 Observer API 를 사용해 다시 리팩토링했다. const Main = () => { const navigate = useNavigate(); const token = localStorage.get.. 2023. 1. 8. 2023.01.01, weekly memoirs weekly memoirs 이번 주에 한 일 ✅ 2차 프로젝트 observer 리팩토링 이번주 목표 : observer 라이브러리 사용한 거 observer로 바꾸기 느낀점 캣보우를 하며 시간 내어 학습했던 observer로 2차 프로젝트를 다시 리팩토링했다. 무한스크롤 기능이 있던 메인 페이지만 살짝 손 봤는데 아직 완벽히 숙지했다는 느낌은 아직 없다고 느낀다. 몇번 더 써보아야할 듯 싶다. ✅ 코딩테스트 운 좋게 코딩 테스트를 받아서 열심히 코테 준비를 했다. 급하게 1,2 단계 문제를 풀었는데 어떻게 풀어야 좋을지 감이 아직 안 잡혀서 아쉽다. 매일 꾸준히 30분씩 풀어왔던게 그래도 도움이 많이 되어서 문제 이해하는데는 크게 어렵지 않았지만 생각보다 변수가 많아 어려웠다. 🥲 그래도 처음 코딩테스트.. 2023. 1. 1. 프로그래머스 js 마법의 엘리베이터 문제 마법의 세계에 사는 민수는 아주 높은 탑에 살고 있습니다. 탑이 너무 높아서 걸어 다니기 힘든 민수는 마법의 엘리베이터를 만들었습니다. 마법의 엘리베이터의 버튼은 특별합니다. 마법의 엘리베이터에는 -1, +1, -10, +10, -100, +100 등과 같이 절댓값이 10c (c ≥ 0 인 정수) 형태인 정수들이 적힌 버튼이 있습니다. 마법의 엘리베이터의 버튼을 누르면 현재 층 수에 버튼에 적혀 있는 값을 더한 층으로 이동하게 됩니다. 단, 엘리베이터가 위치해 있는 층과 버튼의 값을 더한 결과가 0보다 작으면 엘리베이터는 움직이지 않습니다. 민수의 세계에서는 0층이 가장 아래층이며 엘리베이터는 현재 민수가 있는 층에 있습니다. 마법의 엘리베이터를 움직이기 위해서 버튼 한 번당 마법의 돌 한 개를 사.. 2022. 12. 31. 이전 1 ··· 15 16 17 18 19 20 21 ··· 27 다음 728x90 반응형
