본문 바로가기

Programming

 (477)
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 ] 입니다. 그..
2. Javascript ES2015 (8) - Map/Set ES2015에서 추가된 새로운 자료구조들 중, 자주 사용될만한 것은 Map, 그리고 Set입니다. 이미 JAVA에서도 Map과 Set을 다룬 적이 있기 때문에, 기본적인 개념은 각각의 아티클을 참고하는 것도 좋을 것 같습니다. 컬렉션 프레임워크(4) - Map 컬렉션 1 : Map의 개념[1/2] 이번에는 Map 컬렉션에 대해서 살펴보겠습니다. Map 컬렉션은 키(key)와 값(value)으로 구성된 Entry 객체를 저장하는 구조입니다. 중요한 특성 중 하나는, key는 중복 저장할 수 없으며 value는 중복 저 nozeroslope.tistory.com 컬렉션 프레임워크(3) - Set 컬렉션 1 : Set의 개념 List와 차별화되는 Set 컬렉션의 가장 큰 특징은, 수학의 집합과 유사한 성질을 ..
2. Javascript ES2015 (7) - async/awiat [2/2] 앞선 아티클에서 살펴보았던 async/await 코드 예제를 조금 더 응용해 보겠습니다. async function findAndSaveUser(Useres) { try { let user = await Useres.findOne({}); user.name = 'zero'; user = await user.save(); user = await Useres.findOne({ gender: 'm' }); // 생략 } catch (error) { console.log(error); } } 위 코드에서 화살표 함수를 동일하게 적용하여 async와 같이 사용할수도 있습니다. 같은 코드에 화살표 함수를 적용해 보겠습니다. const findAndSaveUser = async (Users) => { try { le..

티스토리툴바