[VANILA JS NINJA]
1.[VANILA JS NINJA] Vanila Javascript Project - DOM Array Methods (21/05/03)
DOM Array Methods Array Methods를 테스트 해볼 수 있는 바닐라 자바스크립트 프로젝트를 만들어보자 1. createElement 복습 User.createNode() document 느낀점 요소 생성과 동시에 텍스트 값을 넣을 수 는 없을까?
2.[VANILA JS NINJA] Vanila Javascript Project - Modal Menu Slider (21/05/07)
fixed로 요소 고정시 자신의 컨텐츠 만큼 크기갖게 바뀌어버림부모요소를 width:100%를 정한 후 고정 요소(자식인 경우) width:inherit 하면 원래 자신의 요소 크기로 돌아간다.
3.[VANILA JS NINJA] 썸머 데브매칭 (1) (21/05/12)
DOM 접근 부분을 최소화하고, 명령형 프로그래밍보단 선언적 프로그래밍 접근하기지양해야하는 코드지향해야하는 코드생성자 - render - setState 크게 세개의 구조를 갖는다.다음은 Breadcrumps 와 Nodes들이다.기능은 다음과 같다.Nodes 코드내에서
4.[VANILA JS NINJA] 썸머 데브매칭 (2) (21/05/12)
기본 로직App.js의 isLoading 스테이트를 만들어 Loading 컴포넌트로 내려주는 구조. App.js의 setState에서 을 실행하여 Loading에 새로운 스테이트(isLoading) 주고 재 랜더링.그럼 isLoading이 변하는 시점에 setState
5.[VANILA JS NINJA] MEAL FINDER (1) api 작성 (21/05/13)
다음과 같이 비동기 요청하면 저 에러남..아예 오는 데이터가 없음. 응답이 오지 못하는 경우이다. 왜 비동기 요청에 실패하는 지 파악해보자
6.[VANILA JS NINJA] MEAL FINDER Web pack (2) (21/05/13)
타입이 모듈인 스크립트 태그는 HEAD에 있어도 된다. 페이지가 모두 로드된 후에 스크립트 태그를 실행하기 때문에..다음과 같은 라인으로 모듈시스템을 적용할 수 있었다. 하지만 모든 브라우져에서 이를 적용하지 않기에 웹팩( 모듈 번들러 )을 통해 모듈 시스템을 적용하려
7.[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는 최상위 자바스크립트
8.[VANILA JS NINJA] MEAL FINDER 구현 - 캐싱, 랜덤버튼, 컴포넌트최적화(4) (21/05/16)
App.jsForm컴포넌트로 전달되는 onSubmit함수에 입력된 음식명으로 저장된 캐시데이터가 있는지를 점검하는 라인을 추가한다.있으면 캐시데이터를 가져오고없으면 비동기요청을 하여 새롭게 fetch해온다. (이 때 온전히 가져왔다면 캐싱한다)이슈 : 노출된 음식 사진
9.[VANILA JS NINJA] EXPENSE-TRACKER (21/05/23)
부모요소.querySelector('자식 태그||클래스||아이디')innerHTML의 경우다음과 같이 코딩하고, 이벤트를 this.$target에 걸어 e.target.firstChild로 조회하면빈 문자열 text노드가 노출된다. innerHTML로 깡코딩하면 공백문