[React] Front-End 64

ASYNC와 DEFER / ECMAScript / SPA / DOM / W3C

blog.asamaru.net/2017/05/04/script-async-defer/ 문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. 그래서 DOM이 정확히 뭐라고요? 옳은 것을 모두 골라보세요." data-og-host="velog.io" data-og-source-url="https://velog.io/@godori/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80" data-og-url="https://velog.io/@godori/DOM이란-무엇인가" data-og-image="https://scrap.kakaocdn.net/dn/bc39UX/hyJNVzM..

[React] Front-End 2021.04.07

[Javascript] POST 로 다중 파라미터 값 보내기

https://ifuwanna.tistory.com/196 [Javascript/Jquery] form, input 동적 생성 및 submit 개요 Form 태그 역시 document내 엘리먼트이기 때문에 필요할때 문서내에 없더라도 동적으로 Form 태그를 생성하여 action method 등 필요한 속성들을 설정하고 전송할 input 엘리먼트를 form안에 생성하�� ifuwanna.tistory.com /* Javascript */ // create element (form) var newForm = document.createElement('form'); // set attribute (form) newForm.name = 'newForm'; newForm.method = 'post'; newFor..

[React] Front-End 2020.06.08

[JSP/Javascript] HTTP 통신 GET방식 파라미터 값 수신

ex) 브라우져 주소창에 http://xxxxxxxx/paramTest.html?test1=a&test2=b 라고 접근했다고 가정. javascript – 주소의 파라미터값 변수로 받기 출처: Date : 2015/10/17 , Category : Javascript, jQuery Post URL : http://naminsik.com/blog/3070 http://werty.co.kr/blog/?userid=honggildong&age=21 이런식으로 접속 주소가 발생하였고 클라이언트단에서 위 주소를 기반으로 변수를 받아 인터렉션을 구현할 때 아래 방법을 쓴다. 1 2 3 4 5 6 function getParameterByName(name) { name = name.replace(/[\[]/, "\\..

[React] Front-End 2020.06.04

[Vanilla Javascript] Events, Events Handler

- window가 resize되면 function을 부르자! window.addEventListenr("resize", handleResize()); // function을 바로 부르라는 것 handleResize 만 붙이면 () 없이! 그럼 resize가 되면 handleResize 함수를 부르라는 것 // title에 #title받아온 것 넣구..(ID??) 그 title에 이벤트가 발생할 때 addEventListener, 클릭이 일어날 때, handleClick이라는 함수를 만들어라! 스 함수는 function handleClick() { title.style.color = "red"; }

[React] Front-End 2020.02.11

[노마드코더: Vanilla Javascript] Array, Object, Function

*이 게시물은 노마드코더 바닐라자바스크립트 수업 복습용으로 작성된 글 입니다. https://www.youtube.com/watch?v=PRA_bhUxuh4&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK&index=13 Array Object - 데이터에 레이블을 달 수 있음 -gender값만 얻고 싶을 때 - object안의 데이터값 변경 가능 - Object안에 array를 사용할 수도 있음 - object 내 array 내 object 이렇게 만들 수도 있음 Function - 자바스크립트에서는 ' ' 와 " " 모두 스트링을 표현한다 - ` ` 도큐먼트에 있는 모든 것이 오브젝트가 된다 => 내 페이지에서 자바스크립트로 선택한 것은 모두 Object가 된다 => 자바스크립..

[React] Front-End 2020.02.09

JSON

JSON - 경량의 데이터 교환 형식임 - JSON은 데이터 포맷일 뿐임(어떠한 통신방법도, 프로그래밍 문법도 아님. 그냥 단순히 데이터를 표현하는 방법임) - 데이터를 나타내는 대표적인 방식 XML, 데이터값 양쪽에 태그가 있음 => HTML을 근본으로 했기에 태그라는 것이 없을 수가 없음. 태그를 줄인다해도 최소한 표현하려면 양쪽에 몇글자씩 있어야하는 것이 특징.. - JSON은 태그로 표현하기보다 {} 중괄호로 표현하고 값을 , , 로 나열하기에 표현식이 간단함 - 자바스크립트 객체와 마찬가지로 key/value가 존재할 수 있으며 key값이나 문자열은 항상 쌍 따옴표를 이용하여 표기 - 자바스크립트에서 객체를 만들 때 사용하는 표현식 - 사람과 기계 모두 이해하기 쉬움 - 용량이 작아서 최근에는 ..

[React] Front-End 2020.02.09

2020 Javascript Trend | 자바스크립트 트렌드 (by.노마드코더)

1. JS Flavor Typescript - JS의 superset임 그러므로 0부터 시작할 필요가 없다는 뜻 2. Front End Frameworks React - 가장 인기 많고 계속 쓰고 싶어 함 Svelte - 많은 사람들이 관심을 가짐 라이브러리 다운 필요 없이 모든것을 바닐라 JS로 변환해줌 Angular - 노 인기 3. Data Layer Redux - 현재 가장 많은 인기 Apollo - 관심도가 높음 GraphQL - 만족도가 높음 4. Back End Frameworks Express - 계속 사용하고 싶어하고 인기 많음 - Node.js 로 뭔가할때 백엔드의 넘버원 선택은 express! Next.Js - 많은 사람들이 관심을 보임, react관련 백엔드 프레임워크 5. Mobi..

[React] Front-End 2020.01.26

[WEB] HTTP / HTTP Cache / CloudFront

https://opentutorials.org/module/3621/21673 HTTP 소개 - WEB2 - HTTP 수업소개 HTTP가 무엇인지를 살펴봅니다. 크롬 개발자 도구 내의 네트워트 기능도 살짝 살펴봅니다. 강의 opentutorials.org https://opentutorials.org/module/3830 HTTP Cache 수업소개 이 수업은 웹의 성능을 향상시키는 핵심 메커니즘은 HTTP Cache 를 다루는 수업입니다. 수업대상 이 수업은 HTTP에 대한 기본적인 이해를 요구합니다. HTTP를 모르시는 분은 HTTP 수업을 먼저 보시고 이 수업을 볼 것을 권해드립니다. 수업을 보는 다른 방법 youtube 재생목록 수업에 참여조건 지식들간의 연관관계는 아래 지식지도를 통해서 볼 수 ..

[React] Front-End 2019.09.01

[WEB] Ajax / fetch API

- 자동추천검색어가 가능한 이유? ajax를 통해서 웹서버와 통신을해서 추천검색어를 받아옴 - 페이지 리로드 할 필요 X - gmail도 페이지의 리로드 없이 새로운 메일이 보여짐 - 필요한 정보만을 부분적으로 정교하게 낚아채는 낚시꾼 => Ajax - 웹페이지 일부 정보가 달라졌음에도 전체 페이지를 리로드 하는 것은 비효율적. => Ajax는 리로드 없이 웹서버에 정보를 요청해서 부분적으로 정보를 갱신해주는 기술 - 페이지 리로드를 줄여서 사용자 경험을 향상시킬 수 있음 - 리로드 할 때마다 모든 정보를 다운로드 하는 비효율이 불만인 경우 해결 가능 - 단 하나의 index.html 이라는 페이지를 재사용하고 바뀔 수 있는 부분과 고정될 수 있는 부분을 구분해서, 바뀔 수 있는 부분만 Ajax로 동적으..

[React] Front-End 2019.08.17