DevYoon

Next.js로 개발하던 중 다음과 같은 오류를 만났다. document가 not defined라니...?! 너무 의아해서 검색해본 결과, Next.js를 사용하기 때문에 만난 에러였다. Next.js는 서버 측에서 렌더링 된 후 클라이언트로 전송되는 SSR 구조이므로, 클라이언트에서만 정의된 전역변수(window나 document)를 사용하려면 렌더링 후 사용해야 했다. 이 오류를 해결하기 위해서는 3가지 방법이 있다. 1️⃣ document의 type 확인하기 - 해당 오류는 서버 측에서 렌더링 될 때, document의 type이 undefined로 나오기 때문에 발생한다. - 따라서, document의 type이 undefined가 아닐 때 실행하게 한다. if(typeof document !==..

네비게이션 바에서 요소 클릭 시 해당 요소의 색상이 바뀌는 걸 구현해보고자 했다. 바란 것 : 메인 / 마이페이지 등 요소에서 메인 클릭 시 -> 페이지 이동 & 메인 글자 색상 바뀌기 클릭 시 클릭한 요소의 class에 active를 추가해주고, 그 전에 클릭한 요소의 class에서 active를 제거해주었다. 참고 글 : https://www.w3schools.com/howto/howto_js_active_element.asp How To Add Active Class To Current Element W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering..

하단 메뉴바를 구현하는 과정에서 가운데 정렬이 되지 않는 문제가 발생했다. 개발자도구로 확인해보니 메뉴바가 왼쪽에 쏠려있는 것을 볼 수 있었다. position: fixed; bottom:0; left:0; right:0; left와 right를 0으로 설정해두어 해결!

mui의 BottomNavigation을 사용하는 과정에서 Link 삽입에 난항을 겪었다. 1️⃣ Link 태그로 감싸기? Next에 있는 next/link를 사용해서 Link 태그로 BottomNavigationAction을 감싸주었다. BottomNavigationAction에 설정한 label 등이 나타나지 않았다. 반대로 BottomNavigationAction으로 Link 태그를 감싸니 제대로 작동하지 않았다. 2️⃣ href 설정? 단순하게 가볼까 싶어 BottomNavigationAction에 href 설정을 줘봤으나 역시 생각한 방향대로 되지 않았다. 3️⃣ next/router 사용 참고글 : https://github.com/mui/material-ui/issues/22001 단비같은 ..

배열 Contents 1️⃣ 자바스크립트의 배열은 자료구조의 배열과 같나요? 2️⃣ 배열의 메서드는 어떤 종류가 있나요? 3️⃣ 고차함수에 대해서 아나요? 4️⃣ forEach 메서드와 map 메서드의 차이점에 대해 알고 있나요? 1️⃣ 자바스크립트의 배열 == 자료구조의 배열? 자료구조의 배열 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조 ​ ➡️ 밀집 배열(Dense Array) 장점 단 한 번의 연산으로 임의의 요소에 접근 가능 ➡️ 임의 접근(random access) 시간복잡도 : O(1) ex) 메모리 주소가 1000에서 시작하고 각 요소의 크기가 8byte인 배열이라면 ​ 인덱스가 0인 요소의 메모리 주소는 ➡️ 1000 + 0*8 = 1000 ​ 인덱스가 1인 요소의 메모..