본문 바로가기

전체 글

 (686)
4. Node 기능 살펴보기 (1) - REPL 사용 Javascript는 스크립트 언어입니다. 이것이 무엇을 의미할까요? 이는, 타 언어처럼 미리 컴파일 과정을 거치지 않더라도 즉석에서 코드를 실행할 수 있다는 것을 의미합니다. 그래서 크롬의 콘솔 탭에서 즉석으로 코드를 입력해 결과를 보는 것이 가능했던 것입니다. 노드에서도 크롬의 콘솔 탭과 비슷한 역할을 하는 콘솔을 제공합니다. 이를 REPL이라고 하는데, 이는 Read(읽고) / Eval(해석하고) / Print(결과물을 반환하고) / Loop(종료할 때까지 반복하고)를 의미합니다. 명령 프롬프트(맥의 터미널)에서 node를 입력하거나, VS Code 에서 [ Ctrl + ` ]를 눌러 터미널을 실행하고 node를 입력하면 됩니다. PS C:\xxxx\xxx> node Welcome to Node.j..
3. Front-end Javascript (4) - 데이터 속성과 dataset 노드를 사용한 웹서버는 당연히 클라이언트, 즉 프런트엔드와 데이터를 주고받게 되고 - 이 과정에서 서버에서 보낸 데이터를 프런트엔드에 전달해 저장해야 합니다. (원론적인 얘기를 하자면, 프런트엔드에 데이터를 보낼 때는 보안을 가장 신경 써야 합니다. 민감한 데이터를 내려보내서는 안 되죠) 데이터를 프런트엔드로 전달했을 때, 기본적으로는 자바스크립트 변수에 저장을 해도 되지만 HTML5에서 공식적으로 지원하는 데이터 저장 방식도 활용이 가능합니다. 여기서 활용하는 것이 데이터 속성(data attribute)입니다. 아래 HTML 예제를 살펴보겠습니다. 여기서는 태그에 속성 값을 선언하는 방식으로 데이터 속성을 부여했습니다. A1 B1 C1 D1 E1 태그에 data-id, 그리고 data-user-job..
3. Front-end Javascript (3) - encode(decode)URIComponent AJAX 요청과 관련된 또 하나의 기능을 살펴보도록 하겠습니다. 요청을 보낼 때 URL에 한글이 들어가는 경우도 존재합니다. 그런데 서버에 따라서는 이러한 한글이 포함된 URL을 처리하지 못하는 경우가 있기 때문에, 별도의 처리가 필요합니다. 이럴 때 사용하는 메서드가 encodeURIComponent입니다. 이는 window 객체의 메서드인데, 노드에서도 사용이 가능합니다. 사용 방법은 간단합니다. 한글 주소 부분만 encodeURIComponent 메서드로 감싸주면 됩니다. 아래 예제에서 적용하는 방식을 살펴보겠습니다. 한글 주소는 %EB%85%B8%...라는 형식의 문자열로 변환됩니다. 받은 쪽에서는 decodeURIComponent(' %EB%85%B8%...'); 를 이용해서 원래의 한글로 변환..
3. Front-end Javascript (2) - FormData FormData는 HTML form 태그에서 사용하는 데이터를 동적으로 제어할 수 있는 기능입니다. 주로 AJAX와 함께 사용됩니다. form 태그에 대해서는 아래 아티클도 다시 참고해 보세요. 3. 입력 양식 작성(1) - 기본 form 태그 웹 상에서, 특정 값을 입력하여 서버나 DB로 값을 보내 처리하는 등의 동작을 위해서는 여러 가지 입력 폼(form)을 사용하게 됩니다. 아마 html에 조금 익숙하신 분들이라면 태그를 가장 먼저 떠올 nozeroslope.tistory.com 사용 방식이 아직은 정확히 와닿지 않을 것입니다. 우선 하나씩 예제를 살펴가면서 이해를 진행해 보겠습니다. 일단, FormData 생성자를 이용해 formData 객체를 생성합니다. 그리고 아래와 같이 메서드를 사용해 데이..
3. Front-end Javascript (1) - AJAX [2/2] 앞선 아티클에서 HTML의 스크립트 태그에 axios.get을 사용해서 GET 요청을 보내는 예제를 살펴보았습니다. 프로미스를 충분히 학습하셨다면, 위 axios.get 내부에 new Promise가 선언되었다는 사실을 기억하실 겁니다. 프로미스는 중요한 개념이기 때문에, 이 then과 catch 사용과 관련해 기본 형식을 다시 한번 짚고 넘어가겠습니다. 2. Javascript ES2015 (6) - 프로미스 [1/5] 당연한 이야기이지만, Javascript와 Node에서는 비동기를 주로 사용하게 되고, 이벤트 리스너에서 콜백 함수에 대한 정의를 자주 쓰게 됩니다. 그러나, 이 콜백 함수들의 사용은 꽤나 코드를 복잡하 nozeroslope.tistory.com const condition = true..
3. Front-end Javascript (1) - AJAX [1/2] 지금부터는 프런트엔드, 즉 HTML의 script 태그 내에서 사용하게 되는 기능들에 대해서 몇 가지 살펴보도록 하겠습니다. 물론 지금 다루는 내용들이 다소 심화된 내용이므로 현 단계에서 즉시 이해가 되지 않을 가능성이 많습니다. 그러므로 차근차근 읽어나간 다음, 반복해서 살펴보시기 바랍니다. 우선 AJAX에 대해서 먼저 살펴보겠습니다. AJAX(Asynchronous Javascript And XML)는 비동기적 서비스 개발 시 사용되는 기법입니다. 간단히 정의만 얘기하자면 이는 페이지의 이동 없이 서버에 요청을 보내고 받는 기술을 의미합니다. 웹 사이트에서 페이지의 전환 없이 새로운 데이터를 불러오는 경우, 대부분 AJAX를 사용하고 있다고 보시면 됩니다. 일단 이 AJAX요청은 jQuery, axi..
2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [2/2] 앞선 아티클에서 널 병합(nullish coalescing)에 대해서 살펴보았습니다. 이제 이어서 옵셔널 체이닝(optional chaining)에 대해서도 살펴보겠습니다. ○ 옵셔널 체이닝(optional chaining) 기본적으로 옵셔널 체이닝의 적용 양식은 [ .? ]입니다. 이 형태가 지금은 금방 이해가 가지 않으실텐데, 단락을 읽어나가면 충분히 이해가 가실 겁니다. 옵셔널 체이닝의 용도는, 우리가 어떤 객체의 프로퍼티를 조회하는 경우가 있을텐데 이 때 일반적인 객체가 아닌 null이나 undefined의 프로퍼티를 조회하려고 시도하는 경우의 에러 발생을 대비하기 위한 예외처리를 위함입니다. 자, 아래 예제를 하나씩 살펴보도록 하겠습니다. const a = {}; a.b; const c = nu..
2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [1/2] 널 병합과 옵셔널 체이닝 문법은 ES2020에서 추가된 연산자입니다. 간단하면서도 유용한 문법들이니, 차근차근 살펴보겠습니다. ○ 널 병합(nullish coalescing) 널 병합은 우선 [ ?? ]으로 나타냅니다. 물음표 두 개라니, 다소 뜬금없는 문법인 듯합니다. 하지만 이것이 무엇을 대체하는지 알게 되면 금세 감이 잡히게 됩니다. 바로 [ || ]과 비슷한 동작을 취하죠. 그럼 Javascript에서 [ || ]가 어떻게 동작하는지부터 간단하게 짚어보고 넘어가겠습니다. 예를 들어 아래와 같은 경우가 있다고 가정해 봅시다. const a= 0; const b = a || 3; console.log(b); 자, 위와 같은 코드에서 b를 출력하면 어떤 값이 나올까요? 답은 바로 [ 3 ] 입니다. 그..

티스토리툴바