잉여개발자

Toast UI Editor 사용하면서 알게 된 점을 정리하려고 한다. (단, 해당 글은 각자 API를 수신할 수 있는 Backend Server가 띄워져 있다는 가정하에 진행 - node.js / Flask / Django 등) 👉 1부 : Markdown 작성 및 Preview 2부 : 이미지 Upload 하여 저장하기 (S3) 3부 : Backend에서 받은 값을 받아 그려주기. 📌 Toast Editor란? Web을 통해 Markdown 기반의 글 작성을 지원하는 JavaScript UI 라이브러리 및 무료 오픈 소스 프로젝트이며, NHN Cloud에서 지속적으로 관리하고 있다. https://ui.toast.com/ TOAST UI :: Make Your Web Delicious! TOAST U..

자바스크립트에서 destructuring assignment 문법을 쓰다 보면 제대로 작동이 안되는 경우가 있다. var a = '하이' var b = '바이' // Destructuring assignment [a, b] = [b, a] console.log(a, b) // 하이, 바이 출력 => 바뀌지 않음 Error 매우 허무하게도 바로 윗줄에 세미콜론 ( ; ) 을 붙여주면 해결 된다. var a = '하이'; var b = '바이'; // Destructuring assignment [a, b] = [b, a] console.log(a, b) // 하이, 바이 출력 => 바뀌지 않음 Error

👉 이미지 Upload & Preview (with. JS)

Frontend 서버 프레임워크 없이 순수 JavaScript, JQuery, HTML, CSS 등으로만 작업하면서, HTML Import로 코드 분리 및 재활용을 하고 싶어, 여러 방법등을 고민해 보았으나, FE 서버 프레임워크를 사용 하지 않을 땐 JQuery가 가장 깔끔 한 것 같아, 해당 방법을 선택하였다. 모든 파일에서 공용으로 쓰고 싶은 nav영역의 nav.html을 작성 해두었다고 가정 main.html

1. 웹 스토리지 Web 개발시 데이터를 BE(DB) 나 클라우드 등에 저장할 필요 없을 때 웹 브라우저에 저장하는 방식.. 웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 존재 단, 웹 스토리지는 문자열 형태로만 저장 지원 2. 로컬 스토리지 vs 세션 스토리지 로컬 스토리지 세션 스토리지 웹 페이지의 세션이 끝날 때 데이터가 안지워짐 웹 재접속시 데이터 유지 O 웹 페이지의 세션이 끝나더라도 데이터 안지워짐 웹 재접속시 데이터 유지 X 3. 로컬/세션스토리지 저장 예시 코드 // 로컬/세션스토리지 데이터 저장 local_session_Storage.setItem("key", value) // 로컬/세션스토리지 데이터 읽기 l..

Blob 객체에 대한 자세한 설명은 아래 링크에 작성하였다. https://yubi5050.tistory.com/102 [Javascript] 유용한 Library 정리 1. Date Library # 날짜 및 시간 var date = new Date(); # getFullYear(), getMonth(), getDate(), getHours() .. # setFullYear(), setMonth(), setDate(), setHours() .. # Date를 문자열로 toLocaleSt.. yubi5050.tistory.com 👉 JS 에서 업로드 된 이미지 BE와 주고 받기 업로드 된 이미지를 보내고 받는 부분의 FE 이다. ex. AI 이미지 추론을 위해 이미지를 업로드 하고, 추론 결과 이미지를 ..

동기 vs 비동기 동기 (Synchronous) 는 순차적으로 일을 처리하는 것 비동기 (Asynchronous)는 동시다발적으로 일을 처리 하는 것이다. 비동기가 필요한 이유는 서버(Backend)와 통신할 때 가장 많은 시간이 소요되므로 일반적으로 네트워크를 타는 작업들은 비동기적으로 구현. Fetch API JS 에서는 Fetch API 로 비동기를 처리한다. 1. 일반 fetch().then().then() 사용법 첫번째 then으로 response를 처리하고 두번째 then으로 해당 json 형태를 자유롭게 처리 fetch("https://jsonplaceholder.typicode.com/posts") .then(function(res){ return res.json(); }) .then(fu..

1. Date Library # 날짜 및 시간 var today = new Date(); # getFullYear(), getMonth(), getDate(), getHours() .. # setFullYear(), setMonth(), setDate(), setHours() .. var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate(); var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); # Date를 문자열로 toLocaleString() // 2022.07.09. 오후 3.07:55 toLocaleDateString() // ..

👉 length 0 뜨는 문제 아래 이미지와 같이 분명 해당 object를 찾았는데 length는 0이라고 뜨는 에러가 있다. 👉 해결 방법 해당 에러는 dom이 body의 html 코드보다 일찍 로드되서 발생하는 문제로 .html의 JS Import 줄을 맨 아래로 tag 끝 난 뒤로 옮겨 주면 된다.

👉 Window.onload() vs $(document).ready() $(document).ready()와 window.onload()는 비슷한 role을 수행하지만, 실행 시점은 window.onload()가 더 느리다. DOM 생성됨 => $(document).ready(); => 외부 리소스(이미지, CSS, JS 등) 로드 => window.onload() Window.onload() 호출 시점 : 페이지의 모든 요소 (이미지, CSS, JS 등)들이 로드된 이후에 호출 특징 1) 한 페이지에서 하나의 window.onload() 함수 적용 특징 2) 가장 나중에 호출된 함수만 적용됨 특징 3) 일반 DOM 객체에도 사용 가능하다. 특징 4) JQuery에 load() 라는 함수가 같은 역할을..