JavaScript

ASP.NET Core - [Blazor] 4. 고급 Blazor 기능

Blazor는 URL routing을 지원함으로써 여러 component가 단일 요청에서 표시될 수 있습니다. 이번 글에서는 이와 관련된 내용을 다룰 것이며 routing system을 어떻게 설정할지, route를 어떻게 정의할지 그리고 layout에서 공용 content를 어떻게 생성할 수 있는지에 대한 것들도 함께 알아볼 것입니다. 또한 Blazor 환경에 component가 능동적으로 참여할 수 있는 component 생명주기에 관해서도 다루어 볼 텐데 이것은 URL routing기능을 사용하기 시작할 때 특히 중요한 부분입니다. 마지막으로 이전글에서 설명한 부모-자식(상위-하위) 간 관계의 외부에서 component가 상호작용할 수 있는 다양한 방법에 관해서도 같이 살펴보고자 합니다. 1. Pr..

ASP.NET Core - 15. 내장 Tag Helper

ASP.NET Core는 일련의 내장된 tag helper들을 제공함으로써 일반적인 상황에서 필요한 요소의 변환을 수행할 수 있습니다. 이번 글을 통해 anchor, script, link, image요소등을 처리하는 tag helper와 content를 caching 하거나 환경에 기반한 content를 선택하는 등의 기능에 관해서도 함께 알아보고자 합니다. 1. Project 준비하기 해당 예제 Project는 역시 이전이 Project를 그대로 사용할 것이지만 Program.cs를 아래와 같이 변경하여 이전에 tag helper를 등록하기 위한 구문을 주석처리합니다. builder.Services.AddControllersWithViews(); builder.Services.AddRazorPages..

[javascript] 모듈(module)

Javascript에서 var변수를 선언하거나 함수를 정의하면 global에 등록되어서 window를 통해 곧바로 호출할 수 있습니다. 이게 문제가 될 수 있는건 중복되는 이름으로 변수나 함수가 선언되면 충돌을 일으킬 수 있다는 것입니다. 예를 들어 다음과 같이 a.js와 b.js에 공통적으로 add()라는 함수가 정의된 경우 function add(x, y) { return x + y; }; 중복되는 이름이 존재하기에 오류를 일으키게 됩니다. 이 문제를 해결하려면 각 js파일을 html페이지에서 모듈로 추가해야 합니다. 이렇게 하면 어떤 모듈에서 외부로 노출할 함수를 다음과 같이 export해야만 사용할 수 있게 됩니다. 그래서 a.js파일에 있는 add()함수를 아래와 같이 했다면 export def..

[javascript] Promise와 async/await

Promise는 어떠한 처리를 하되 당장 결과를 반환하지 않고 원할 때 결과를 갸져 올 수 있는 객체입니다. var promise = new Promise((resolve, reject) => { if (true) { resolve('true'); } else { reject('false'); } }); //다른코드 promise.then((result) => { console.log(result); }) .catch((result) => { console.log(result); }); Promise를 위와 같이 정의해 두면 Promise 내부 코드는 즉시 실행됩니다. 그런 후 필요에 따라 다른 처리를 하고 이후에 then이나 catch를 붙여서 처리결과를 가져오는 형태인데 비동기 처리와 유사합니다. 만..

[javascript] 클래스(Class)

Javascript에서도 Class는 Prototype을 사용하던 이전방식에서 벗어나 좀 더 깔끔하게 코드가 만들어질 수 있도록 해줍니다. class Car { constructor(speed) { this.speed = speed; } currentSpeed() { return this.speed; } stop() { this.speed = 0; } static acc(speed) { return this.speed + speed; } }; var car = new Car(100); car.stop(); 기존에는 prototype을 통해 함수를 정의하고 직접 속성에 메서드를 할당하는 방식을 따랐지만 필요한 함수는 함수그대로 정의하고 정적 함수의 경우 static을 붙여주는 것만으로 끝낼 수 있습니다. ..

[javascript] 호출스택과 이벤트루프

javascript의 실행은 아래 구조로 간략하게 설명될 수 있습니다. 호출 스택은 javascript안에서 어떤 함수가 실행될 때 들어가는 부분이며 백그라운드는 타이며, 콜백등이 비동기 작업을 위해 대기하는 부분, 태스크 큐는 백그라운드 종료 후 호출되어야 할 콜백 함수들이 보내지는 부분입니다. function myfunc() { alert('aaa'); }; 위와 같은 함수가 호출된다면 호출스택에 myfunc()가 들어가고 그 안에서 다시 alert() 함수가 호출되므로 myfunc() 위에 alert() 함수가 쌓이게 됩니다. 이러한 구조 때문에 스택이 됩니다. 호출 스택은 LIFO구조이므로 alert() 함수 호출이 완료되면 호출 스택에서 사라지고 뒤이어 myfunc() 함수로 사라 잡니다. se..

[javascript] 스코프(Scope)와 호이스팅(Hosting)

1. 스코프 스코프는 변수의 선언 형태에 따라 전역 스코프와 함수 스코프로 나뉘게 됩니다. 전역 스코프는 함수의 외부에서 선언된 변수이며 지역 스코프는 함수 안에서 선언된 변수입니다. var global = 1; function myfunc() { var local = 2; console.log(local); console.log(global); } myfunc(); 예제를 보면 당연한 얘기지만 global변수는 어떤 함수에서든지 접근할 수 있으며 myfunc() 함수안에서 선언된 local은 myfunc() 함수를 벗어나게 되면 접근할 수 없게 됩니다. 그런데 만약 myfunc() 함수안에서 gloabl변수를 선언하게 되면 외부에 선언된 global은 무시되고 함수 내부에 선언된 global변수를 사용..

[javascript] 쿠키(Cookies)

쿠키는 키와 값을 가질 수 있는 데이터로서 클라이언트 즉, 사용자의 웹브라우저에 저장 가능한 데이터입니다. 대부분의 경우 클라이언트 단에서 어떤 정보를 일정 시간 동안 저장하고자 하는 경우에 많이 사용됩니다. 예를 들어 어떤 웹사이트의 로그인에서는 사용자 아이디를 기억하는 기능이 있습니다. 사이트로 로그인할 때마다 매번 동일한 아이디를 입력해야 하는 불편함을 덜어주기 위해서입니다. 사이트마다 다를 수 있겠지만 이러한 기능을 구현하기에 쿠기가 많이 활용됩니다. 1. 쿠키 생성 쿠키는 다음과 같은 방법으로 생성할 수 있습니다. var date = new Date(); date.setDate(date.getDate() + 7); var _cookie = 'tmpdata=1234;expires=' + date...