본문 바로가기
반응형

Archive188

Svelte 시작하기 스벨트 템플릿 만들기 Clone받기 npx degit sveltejs/template svelte-app 패키지 설치 및 실행 npm install npm run dev Svelte 템플릿 구조 - public/ - build/ - bundle.js - bundle.css - index.html - global.css - src/ - App.svelte - main.js - package.json - package-lock.json - rollup.config.js Rollup.config.js 는 Webpack과 같이 파일들을 watch 하며 코드 컴파일 설정을 담당한다. 그리고 코드를 컴파일하여 번들 파일을 산출해내는 역할을 한다. (기본적으로 서버는 localhost 요청에만 응답하는데, 다른 컴퓨.. 2021. 11. 11.
Svelte 란? Framework 가 아닌 Compiler 이다 스벨트는 실행시점이 아닌 컴파일 시점에서 모든 코드를 single vanilla javascript 번들로 컴파일 한다. 기존의 React 와 같은 프레임워크 라이브러리들은 Webpack 이나 Babel 등을 호출하여 프로젝트 파일을 번들하고, React와 React-dom 라이브러리 또한 번들에 포함한다. 반면에 Svelte는 컴파일러이기 때문에, 자체적으로 컴포넌트를 컴파일한다. 또한 Rollup의 트리 쉐이킹을 활용하여 실제 코드에서 사용되는 부분만 번들링한다. 즉, Svelte로 만든 앱은 빌드 후 단 하나의 자바스크립트 파일이 생성되어 ,이파일 하나 만 배포하면 되고 Svelte 라이브러리는 배포할 필요가 없다. 그래서 Svelte의 결과물은 Ru.. 2021. 11. 10.
유니캐스트 유니캐스트 라우팅이란? 인터넷에서 네트워크 계층의 목적은 발신지 -> 목적지, 목적지 -> 발신지 로 데이터그램을 전송하는 것이다. 1. 만약 데이터그램의 목적지가 단 하나를가지면(일대일전송) "유니 캐스트 라우팅"(unicast routing) 이라고 한다. 2. 목적지가 여러개라면 "멀티 캐스트 라우팅"(multicast routing) 이라고 한다. 3. 데이터 그램이 인터넷의 모든 호스트에 전송된다면 "브로드 캐스트 라우팅"(broadcast routing) 이라고 한다. 계층적 라우팅을 사용하는 인터넷에서 어떻게 유니캐스트 라우팅을 적용시킬까? 유니캐스트 라우팅에서 패킷은 포워딩 테이블을 참조하여 발신지->목적지 까지 홉 단위로 전달된다. 발신지 호스트 & 수진지 호스트 = 포워딩 테이블이 필요.. 2021. 11. 1.
[JS] Ajax 원레 html에서, 웹에서 Rest통신을 하려면, form을 사용해야하고, 새로고침이됬어야했다(새로운페이지로 라우팅). 하지만 Ajax는 비동기적으로, Rest통신을 하고, 값을 받아와서, 좀더 부드럽고,동적인형태가 가능해졌다 새로고침 없이 서버에서 데이터를 받아오는 것이다 jQuery로 Ajax요청하기 Ajax요청을 하는 법은 쉽습니다. $.ajax() 라는 함수를 쓰고 안에 {} 오브젝트 형식으로 몇개만 셋팅해주시면 됩니다. $.ajax({ url : 'https://naver.com', type : 'GET' }); {} 오브젝트 안에는 url, type 이 두개가 필수로 들어갑니다. url 정보란엔 데이터 요청할 서버 URL, type 정보란엔 요청의 종류를 적어주시면 됩니다. 그럼 위의 코드는 .. 2021. 11. 1.
[JS] filter & map Array 자료에서 원하는 것만 거를 때 filter 함수를 씁니다 var 어레이 = [7,3,5,2,40]; var 뉴어레이 = 어레이.filter(function(a){ return a < 4 }) filter 함수 동작원리는 ① 함수 안의 a라는 파라미터는 array 자료안에 있던 하나하나의 데이터를 의미합니다. ② return 오른쪽에 조건식을 적어주시면 조건식이 참인 경우에만 그 자료를 퉤 뱉습니다. ③ 그리고 filter함수의 결과는 저렇게 새로운 변수에 담아서 쓰라고 되어있습니다. Array 자료들에 똑같은 작업을 시킬 때 map을 씁니다 map() 함수 수학에서의 mapping 이런거에서 따온 것입니다 var 어레이 = [7,3,5,2,40]; var 뉴어레이 = 어레이.map(functi.. 2021. 11. 1.
[JS] sort() sort()는 기본적으로 배열에서 문자열을 정렬한다 var 어레이 = [7,3,5,2,40]; 어레이.sort(); // [2,3,40,5,7] 이렇게 변경하면 오름차순 정렬이된다 var 어레이 = [7,3,5,2,40]; 어레이.sort(function(a,b){ return a - b }); 하지만 sort 함수의 동작 원리를 잠깐 설명해드리자면 ① sort 함수의 파라미터두개는 array 자료 안에 있던 데이터들을 의미합니다. a, b 이건 그니까 7, 3 이거랑 똑같다고 보시면 됩니다. ② sort 함수는 양수(+)를 return 하면 a를 오른쪽 b를 왼쪽으로 보냄 음수(-)를 return 하면 a를 왼쪽 b를 오른쪽으로 보냄 이렇게 동작하도록 되어있습니다. ③ sort 함수는 a, b자리에 7.. 2021. 10. 31.
반응형