쌓고 쌓다

textarea 태그에 입력된 엔터(줄바꿈)을 서버에서 저장하고 화면에 뿌려주는 방법 textarea 태그에 작성한 내용에 엔터(줄바꿈)이 포함되어 있다면 어떻게 서버에 저장하고필요할때 화면에 엔터(줄바꿈)를 포함해서 뿌려줄 수 있을까? 먼저 서버에 사용자가 textarea에 작성한 내용을 전송해보자. const content = $("#comment").val();$.ajax("url", { type: "POST", contentType: "application/json", data: JSON.stringify({ content: content })})우선 서버에 ajax로 textarea의 내용을 POST 요청으로 전송하는 코드의 일부이다. 엔터를 포함한 위의 내용으로 서버에 전송을 해보자. 엔터로 ..

PC버전에서는 웹 에디터에 정상적으로 텍스트가 입력이 되었지만모바일 환경에서 텍스트 입력시 띄어쓰기 이후로 자음 모음이 분리되는 현상이 일어났다.Expect :가 나 다 라 Result :가 ㄴㅏ  https://github.com/ckeditor/ckeditor5/pull/16755 Fix: composition breaks typing a Korean after space key on Android Chrome by Johnyworld · Pull Request #16755 · ckeditor/ckediThis issue still exists after version 42.0.1. Issue typing Korean after two space characters #11569 Composition ..

로그인 여부에 따라 html 파일의 일부 태그들이 변경되는 상황이다. 예를 들어 로그인하기 전에는 만 존재한다. 로그인한 후에는 위의 id="login"을 가지는 태그는 없어지고 만 가지게 된다. 그런 이유로 아래의 js 파일에서 문제가 발생했다. let loginButton = document.querySelector("#login"); let logoutButton = document.querySelector('#logout'); loginButton.addEventListener('click', () => { window.location = 'https://kauth.kakao.com' }) logoutButton.addEventListener('click', () => { window.locati..

먼저 코드를 한번 읽어보자. 간단히 미리 설명하자면 버튼 클릭 이벤트 등록시 등록 당시의 sequence의 값을 이용해 deleteButtonAndPatch 함수를 수행하길 원한다. let sequence = 0; function example() { sequence++; let btn = document.createElement('button'); btn.addEventListener('click', () => { deleteButtonAndPatch(sequence); }) } function deleteButtonAndPatch(idx) { console.log(idx); } 버튼 태그인 btn에 클릭 이벤트를 등록했다. 클릭시 이벤트 등록 당시의 sequence 값을 deleteButtonAndP..

먼저 상황은 이랬다. 사용자는 중복된 값(여행지)을 선택할 수 있다. 선택한 값 리스트중 원하는 요소(여행지)를 삭제할 수 있어야한다. 중복된 값을 선택할 수 있기에 현재 삭제를 원하는 요소를 가지고 현재 선택된 요소들을 돌며 비교 연산으로 삭제하면 먼저 만나는 값을 삭제해버리는 상황이다. 딱 원하는 순서의 요소를 삭제할 수 있어야하는게 원하는 기능이다. let selectPlaces = []; // 선택된 여행지 여행지는 리스트에 보관하고 있으며 추가와 삭제가 자유로워야하고 삭제한 순번에 맞춰 리스트의 인덱스 값도 삭제해야하는 상황이다. 먼저 여행지 추가시 보이는 화면의 HTML에 추가하고 선택된 여행지 리스트에 담아주는 코드이다. function addPlace(addPlace) { selectPla..

노드를 공부하고 있는데 아래의 코드에서 의문이 생겼다. pipeline.mjs import { pipeline } from 'stream/promises' import zlib from 'zlib' import fs from 'fs' await pipeline( fs.createReadStream('./readme.txt'), zlib.createGzip(), fs.createWriteStream('./readme.txt.gz') ) import { pipeline } from 'stream/promises'를 다음 줄의 import zlib from 'zlib'처럼 왜 작성 안 했을까? import pipline from 'stream/promises'로 작성해도 모듈의 메소드를 가져오는 건 동일할 것..

Map 주요 메소드 및 프로퍼티 new Map() : 맵 생성 map.set(key, value) : key와 함께 value 등록 map.get(key) : key에 해당하는 value를 반환. ( key가 존재하지 않으면 undefined 반환 ) map.has(key) : key가 존재하면 true, 존재하지 않으면 false 반환 map.delete(key) : key와 함께 value 삭제 map.clear() : 맵의 모든 요소 삭제 map.size : 요소들의 개수 반환 맵 생성 - new Map() const map = new Map() 맵을 사용하기위해 맵 객체를 생성합니다. 삽입 - map.set(key, value) map.set(1, 'number 1') map.set('1', 's..

널 병합 연산자(??) 왼쪽 피 연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리연산자이다. falsy 값 (0, '', false, NaN, null, undefined)일 경우 오른쪽 피연산자를 반환하는 논리 연산자 OR(||)와는 대조된다. || 연산자는 falsy 값이면 뒤로 넘어감. const a = 0; const b = a || 3; console.log(b) // output : 3 ?? 연산자는 null과 undefined일 때만 뒤로 넘어감. const a = 0; const b = a ?? 3; console.log(b) // output : 0 const e = null; const f = e ?? 3; conso..