우당탕탕 개발일기

나를 무려 이틀 반동안 골치아프게했던 문제가 해결되었다.생각보다 너무 어이없는 이유라서 티스토리에도 기록을 남겨본다.. ✅ 문제 상황React + Express로 개발 중, 새로운 메뉴를 추가해야만 했다.프론트 라우터에 새로운 경로를 등록했고, 백엔드에도 해당 API 및 미들웨어를 잘 붙여놨다.그런데 문제는...메뉴를 직접 클릭해서 이동하면 잘 되는데, 새로고침만 하면 ENOENT: no such file or directory가 발생하는 것!Error: ENOENT: no such file or directory, stat '...경로...\client\index.html' 🔍 문제 원인을 찾아서'spa 새로고침 404'로 검색하니 SPA 라우팅 문제라고 곧잘 내용이 정리되어있었다. Spring..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

"Warning: Received false for a non-boolean attribute className." className에 boolean 형태의 값을 받았다는건데 아무리 검색해봐도 boolean을 갖고 있는 형태는 들어가있지 않았다. 구글링해보니, &&연산자를 사용해도 동일한 에러를 발견할 수 있다는 결과가 있었고 실제로 &&연산자를 사용하고 있었다. // ❌ This will throw the above error // ✔️ Use a ternary instead && 연산자를 삼항연산자로 변경하니 에러는 사라졌다! className={state && value} 인 경우에는 state가 false일 때도 있으므로 boolean 값이 들어가 이게 오류의 원인이었던것, https://webt..

콘솔 에러 정리 중 만난 에러 useEffect must not return anything besides a function, which is used for clean-up. useEffect(() => 이 부분이 원인,[]) 중괄호({})로 감싸주면 뚝딱! https://velog.io/@posinity/%EC%97%90%EB%9F%AC-Warning-useEffect-must-not-return-anything-besides-a-function-which-is-used-for-clean-up [에러] Warning: useEffect must not return anything besides a function, which is used for clean-up. Warning: useEffect ..

https://medium.com/tinyso/how-to-create-a-timeline-component-with-reactjs-779520c81209 How to create a Timeline Component with ReactJS Last week, my coworker had no idea to implement a Timeline Component which is reusable for other pages. Then I helped her step by step to… medium.com 그저..빛...

모달창 배경 만들기 https://penguingoon.tistory.com/249 [CSS] 모달창 + 어두운 배경 반드는 기본적인 방법 안녕하세요! 오늘은 아래와 같은 모달창을 만들 때 필요한 기법(?)을 소개하도록 하겠습니다. 모달창이란 사용자와의 상호작용을 위해 제공되는 인터페이스의 한 종류이비다. 보통 모달창을 띄 penguingoon.tistory.com 모달창 화면 크기에 맞춰 중앙에 위치하게 하는 css position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-tr..

리액트 컴포넌트 설계하는 방법 중 하나인 아토믹 디자인! 명확한 컴포넌트 설계 기준을 정하기 위해 회의 때 아토믹 디자인이 제시해주셔서 알아보기로 했다. - 디자인 시스템이란? 재사용이 가능한 컴포넌트를 먼저 구성하고 이를 조립하는 방식 아토믹 디자인은 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념이며, 일관된 UI를 만들고 유지보수성을 향상시켜준다. 아토믹 디자인은 화학적 관점에서 영감을 얻은 시스템이라 단어들도 화학적인 느낌이 난다. 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 효과적인 인터페이스 시스템을 만든다. 원자(Atom) - 더 이상 분해할 수 없는, 가장 작은 구성의 기본 컴포넌트 ex. label, i..

https://developer-talk.tistory.com/102 [React]Key 이해하기 React에서 배열 요소를 렌더링하는 경우 map()을 사용합니다. 아래 예제는 header라는 array의 object 수만큼 ... 를 렌더링하는 예제입니다. See the Pen by JaeSung2386 (@jaesung2386) on CodePen. 위 코드를.. developer-talk.tistory.com 나는 map을 사용하지 않았는데 자꾸 key값 달라고 에러가 떴다. 근데 검색해보면 거의 다 map 사용시에 key값 에러가 뜨는 거에 관한 글들이라 조금 더 원초적인 대답을 찾기로했다. 위의 글이 key를 이해하는데 큰 도움이 되었다. 나 같은 경우에는 아마 "리스트"인데 키 값을 주지 않..

말그대로 과 사이에 빈칸이 존재하면 안되는데 존재하는 경우의 에러! 나같은 경우에는 삼항연산자로 ''를 나오게 해놨더니 발생했다. null로 수정해서 해결! null과 ''의 차이의 중요성을 또 한 번 알게 됐당 https://stackoverflow.com/questions/39914455/react-validatedomnesting-text-cannot-appear-as-a-child-of-tr React: validateDOMNesting: #text cannot appear as a child of Can you explain me why react show warning Warning: validateDOMNesting(...): #text cannot appear as a child of . ..