vanila [VANILA JS NINJA] Vanila Javascript Project - Modal Menu Slider (21/05/07) 아래 사진의 토글 버튼을 클릭하면 사이드 nav바 나온다. (나온 상태에서 다시 누르면 들어감) body 아래 nav - header -container - modal이 존재 nav가 나오게하려면 누르는 순간 => body를 flex로 만들어 노출 nav가 나오게하려면 누르는 순간 => header container를 nav크기 만큼 옆으로 이동 시킴. nav크기만큼 옆으로 이동시키기 우선 ... vanilavanila [VANILA JS NINJA] MEAL FINDER (1) api 작성 (21/05/13) 다음과 같이 비동기 요청하면 저 에러남.. 아예 오는 데이터가 없음. 응답이 오지 못하는 경우이다. 왜 비동기 요청에 실패하는 지 파악해보자 https를 앞에 붙여주니 제대로 동작함. 다음과 같이하면된다. API_KEY : 모든 API가 공통으로 갖는 키 KEY : API를 구분하는 키 keyword : API 요청에 넣어줄 인자... vanilavanila [VANILA JS NINJA] 썸머 데브매칭 (1) (21/05/12) 🚬 본 페이지는 페이지를 보고 정리한 페이지입니다. DOM 접근 부분을 최소화하고, 명령형 프로그래밍보단 선언적 프로그래밍 접근하기 [지양해야하는 코드] [지향해야하는 코드] 생성자 - render - setState 크게 세개의 구조를 갖는다. 다음은 Breadcrumps 와 Nodes들이다. 기능은 다음과 같다. Nodes 코드내에서 Breadcrump 직접 다루거나 업데이트 하도록 코드... vanilavanila [VANILA JS NINJA] Vanila Javascript Project - DOM Array Methods (21/05/03) Array Methods를 테스트 해볼 수 있는 바닐라 자바스크립트 프로젝트를 만들어보자 사용 의 createElement () 메소드는 지정된 이름의 요소 노드를 만들 수 있습니다. 요소 생성과 텍스트 값 넣기 요소 생성과 아이디 값 넣기 Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 ... vanilavanila [VANILA JS NINJA] Vanila Javascript Project - Hangman Game (21/05/08) 같은 클래스 메서드인데 어떤건 this가 본인 객체이고, 어떤건 window인 이슈 handler로 들어가는 함수의 this는 window. handler 함수를 밖으로 뺌 그렇다면 객체를 어떤 식으로 전달해주어야할까???? keyPressHandler함수를 bind 메소드를 통해 새로운 함수로 만들어 Game.handler 변수에 담는다. 이렇게 되면 다음과 같이 이벤트를 걸어주었을 때, ... vanilaTILTIL
[VANILA JS NINJA] Vanila Javascript Project - Modal Menu Slider (21/05/07) 아래 사진의 토글 버튼을 클릭하면 사이드 nav바 나온다. (나온 상태에서 다시 누르면 들어감) body 아래 nav - header -container - modal이 존재 nav가 나오게하려면 누르는 순간 => body를 flex로 만들어 노출 nav가 나오게하려면 누르는 순간 => header container를 nav크기 만큼 옆으로 이동 시킴. nav크기만큼 옆으로 이동시키기 우선 ... vanilavanila [VANILA JS NINJA] MEAL FINDER (1) api 작성 (21/05/13) 다음과 같이 비동기 요청하면 저 에러남.. 아예 오는 데이터가 없음. 응답이 오지 못하는 경우이다. 왜 비동기 요청에 실패하는 지 파악해보자 https를 앞에 붙여주니 제대로 동작함. 다음과 같이하면된다. API_KEY : 모든 API가 공통으로 갖는 키 KEY : API를 구분하는 키 keyword : API 요청에 넣어줄 인자... vanilavanila [VANILA JS NINJA] 썸머 데브매칭 (1) (21/05/12) 🚬 본 페이지는 페이지를 보고 정리한 페이지입니다. DOM 접근 부분을 최소화하고, 명령형 프로그래밍보단 선언적 프로그래밍 접근하기 [지양해야하는 코드] [지향해야하는 코드] 생성자 - render - setState 크게 세개의 구조를 갖는다. 다음은 Breadcrumps 와 Nodes들이다. 기능은 다음과 같다. Nodes 코드내에서 Breadcrump 직접 다루거나 업데이트 하도록 코드... vanilavanila [VANILA JS NINJA] Vanila Javascript Project - DOM Array Methods (21/05/03) Array Methods를 테스트 해볼 수 있는 바닐라 자바스크립트 프로젝트를 만들어보자 사용 의 createElement () 메소드는 지정된 이름의 요소 노드를 만들 수 있습니다. 요소 생성과 텍스트 값 넣기 요소 생성과 아이디 값 넣기 Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 ... vanilavanila [VANILA JS NINJA] Vanila Javascript Project - Hangman Game (21/05/08) 같은 클래스 메서드인데 어떤건 this가 본인 객체이고, 어떤건 window인 이슈 handler로 들어가는 함수의 this는 window. handler 함수를 밖으로 뺌 그렇다면 객체를 어떤 식으로 전달해주어야할까???? keyPressHandler함수를 bind 메소드를 통해 새로운 함수로 만들어 Game.handler 변수에 담는다. 이렇게 되면 다음과 같이 이벤트를 걸어주었을 때, ... vanilaTILTIL