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인 요소의 메모..

⚙️ 브라우저 렌더링 과정 Contents 1️⃣ 브라우저의 렌더링 과정 2️⃣ 브라우저 렌더링 과정에서 자바스크립트의 동작 3️⃣ 태그는 왜 태그 밑에 둬야 할까? 1️⃣ 브라우저의 렌더링 과정 렌더링이란? HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저에서 출력하는 과정 렌더링 과정 1️⃣ 주소창에 URL 입력 2️⃣ DNS 서버에서 주소에 해당하는 IP를 반환 ➡️ 접속 3️⃣ 브라우저가 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청➡️ 서버로부터 응답 받음 4️⃣ 브라우저의 렌더링 엔진이 서버로부터 응답받은 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성 ➡️ 이들을 결합하여 렌더 트리 생성 5️⃣ 자바스크립트 엔진이 서버로부터 ..

비동기 프로그래밍 💻 & Ajax Contents 1️⃣ 비동기 프로그래밍 ​ 🔥 동기와 비동기의 차이점 ​ 🔥 이벤트 루프 & 태스크 큐 ​ 🔥 마이크로태스크 큐 2️⃣ Ajax ​ 🔥 Ajax란? ​ 🔥 Ajax 사용 시 기존 방식과의 차이 ​ 🔥 JSON이란? ​ 🔥 JSON이 제공하는 정적 프로토타입 메서드 ​ 🔥 Ajax로 HTTP 요청을 보내기 위해 사용할 수 있는 방법 1️⃣ 비동기 프로그래밍 🔥 동기와 비동기의 차이점 ✏️ 자바스크립트는 기본적으로 싱글 스레드 엔진 기반 ➡️ 동기 처리되어 작성한 순서대로 수행 *️⃣ 프로세스 : 실행되고 있는 컴퓨터 프로그램 *️⃣ 스레드 : 프로세스 내에서 실행되는 흐름의 단위, 스레드를 여러 개 생성 ➡️ 여러 작업 동시 처리 가능 *️⃣ 싱글 스레드..

01. 네트워크란 무엇인가? 네트워크 노드들이 데이터를 공유할 수 있게 하는 디지털 전기통신망의 하나 노드 : 네트워크에 속한 컴퓨터 또는 통신 장비 분산되어 있는 컴퓨터를 통신망으로 연결한 것 네트워크에서 여러 장치들은 노드 간 연결을 사용하여 서로에게 데이터를 교환 인터넷 문서, 그림 영상과 같은 여러가지 데이터를 공유하도록 구성된 세계에서 가장 큰 전세계를 연결하는 네트워크 네트워크 ⊃ 인터넷 WWW은 인터넷을 통해 웹과 관련된 데이터를 공유하는 것 즉, WWW ≠ 인터넷 02. 네트워크의 분류 크기에 따른 분류 LAN : Local Area Network 가까운 지역을 하나로 묶은 네트워크, 근거리 통신망 ex) 스타크래프트에서 LAN으로 게임하려면 같은 피시방이어야 함 WAN : Wide Are..

link 🔗 https://www.acmicpc.net/problem/14499 14499번: 주사위 굴리기 첫째 줄에 지도의 세로 크기 N, 가로 크기 M (1 ≤ N, M ≤ 20), 주사위를 놓은 곳의 좌표 x, y(0 ≤ x ≤ N-1, 0 ≤ y ≤ M-1), 그리고 명령의 개수 K (1 ≤ K ≤ 1,000)가 주어진다. 둘째 줄부터 N개의 줄에 지 www.acmicpc.net ✏️ 단순 구현 문제! ✏️ 주사위를 굴렸을 때 어떻게 변화하는지만 찾으면 금방 해결할 수 있는 문제였다. def change(dir): # 주사위 굴렸을 때의 위치 변화 if dir == 1: dice[0], dice[2], dice[3], dice[5] = dice[3], dice[0], dice[5], dice[2..

함수와 일급 객체 ⭐ CONTENTS ✏️ 일급 객체란? 일급 객체로 무엇을 할 수 있을까? 함수형 프로그래밍이란? 순수함수란? 1️⃣ 일급 객체란? 아래의 조건을 만족하는 객체를 일급 객체라고 함 무명의 리터럴로 생성 가능 무명의 리터럴? ➡️ 함수 표현식을 뜻함 즉, 런타임에 생성 가능 const name = function(){} ➡️ 함수 표현식 & 변수에 할당될 때 생성됨 변수나 자료구조(객체, 배열 등)에 저장 가능 함수의 매개변수에 전달 가능 함수의 반환값으로 사용 가능 ⭐ 함수의 매개변수에 전달 가능 && 함수의 반환값으로 사용 가능 ​ ➡️ 함수형 프로그래밍을 가능하게 하는 자바스크립트의 장점 중 하나 ⭐ 자바스크립트의 함수는 일급객체❕ 2️⃣ 일급 객체로 무얼 할 수 있을까? 1️⃣ 고..