# vanila

11개의 포스트
post-thumbnail

[VANILA JS NINJA] EXPENSE-TRACKER (21/05/23)

부모요소.querySelector('자식 태그||클래스||아이디')innerHTML의 경우다음과 같이 코딩하고, 이벤트를 this.$target에 걸어 e.target.firstChild로 조회하면빈 문자열 text노드가 노출된다. innerHTML로 깡코딩하면 공백문

2021년 5월 23일
·
0개의 댓글

[VANILA JS NINJA] MEAL FINDER 구현 - 캐싱, 랜덤버튼, 컴포넌트최적화(4) (21/05/16)

App.jsForm컴포넌트로 전달되는 onSubmit함수에 입력된 음식명으로 저장된 캐시데이터가 있는지를 점검하는 라인을 추가한다.있으면 캐시데이터를 가져오고없으면 비동기요청을 하여 새롭게 fetch해온다. (이 때 온전히 가져왔다면 캐싱한다)이슈 : 노출된 음식 사진

2021년 5월 16일
·
0개의 댓글
post-thumbnail

[VANILA JS NINJA] MEAL FINDER 구현(3) (21/05/16)

상위 파일app.js : App컴포넌트를 호출컴포넌트 : App, Button, Flex, Form, Input, Meals, ResultHeading, SingleMeal 유틸 : api.js icon.jsindex.htmlapp.jsapp.js는 최상위 자바스크립트

2021년 5월 15일
·
0개의 댓글
post-thumbnail

[VANILA JS NINJA] MEAL FINDER Web pack (2) (21/05/13)

타입이 모듈인 스크립트 태그는 HEAD에 있어도 된다. 페이지가 모두 로드된 후에 스크립트 태그를 실행하기 때문에..다음과 같은 라인으로 모듈시스템을 적용할 수 있었다. 하지만 모든 브라우져에서 이를 적용하지 않기에 웹팩( 모듈 번들러 )을 통해 모듈 시스템을 적용하려

2021년 5월 13일
·
0개의 댓글
post-thumbnail

[VANILA JS NINJA] MEAL FINDER (1) api 작성 (21/05/13)

다음과 같이 비동기 요청하면 저 에러남..아예 오는 데이터가 없음. 응답이 오지 못하는 경우이다. 왜 비동기 요청에 실패하는 지 파악해보자

2021년 5월 12일
·
0개의 댓글
post-thumbnail

[VANILA JS NINJA] 썸머 데브매칭 (2) (21/05/12)

기본 로직App.js의 isLoading 스테이트를 만들어 Loading 컴포넌트로 내려주는 구조. App.js의 setState에서 을 실행하여 Loading에 새로운 스테이트(isLoading) 주고 재 랜더링.그럼 isLoading이 변하는 시점에 setState

2021년 5월 12일
·
0개의 댓글
post-thumbnail

[VANILA JS NINJA] 썸머 데브매칭 (1) (21/05/12)

DOM 접근 부분을 최소화하고, 명령형 프로그래밍보단 선언적 프로그래밍 접근하기지양해야하는 코드지향해야하는 코드생성자 - render - setState 크게 세개의 구조를 갖는다.다음은 Breadcrumps 와 Nodes들이다.기능은 다음과 같다.Nodes 코드내에서

2021년 5월 11일
·
0개의 댓글

[VANILA JS NINJA] Vanila Javascript Project - Hangman Game (21/05/08)

문자열을 배열로 만들기 : "1234".split()apply, call, bind function.변수다음과 같이 함수이름.변수를 선언한 후 ( 초기화 한 후 ) 값을 넣으면 다른 함수에서도 함수의 변수에 접근이 가능하다.vscode 명령어apply bind call

2021년 5월 8일
·
0개의 댓글
post-thumbnail

[VANILA JS NINJA] Vanila Javascript Project - Modal Menu Slider (21/05/07)

fixed로 요소 고정시 자신의 컨텐츠 만큼 크기갖게 바뀌어버림부모요소를 width:100%를 정한 후 고정 요소(자식인 경우) width:inherit 하면 원래 자신의 요소 크기로 돌아간다.

2021년 5월 7일
·
0개의 댓글
post-thumbnail

[VANILA JS NINJA] Vanila Javascript Project - DOM Array Methods (21/05/03)

DOM Array Methods Array Methods를 테스트 해볼 수 있는 바닐라 자바스크립트 프로젝트를 만들어보자 1. createElement 복습 User.createNode() document 느낀점 요소 생성과 동시에 텍스트 값을 넣을 수 는 없을까?

2021년 5월 2일
·
0개의 댓글

JavaScript Canvas

작성중!캔버스는 300px \* 150px 의 기본 크기를 갖는다.css로 canvas의 width 와 heigth 를 지정해주면, canvas의 기본 크기를 단순히 늘리기 때문에canvas태그 안에서 width와 heigth를 지정해주거나, javascript에서 c

2020년 11월 21일
·
0개의 댓글