FRONT/JAVASCRIPT 78

[Javascript] 알고리즘 기본 문제 - 문자 찾기

10. 문자 찾기 내 풀이 function solution(s, t) { let answer = 0; for (let x of s) { if (x === t) answer++; } return answer; } let str = "COMPUTERPROGRAMMING"; console.log(solution(str, "R")); split 사용 function solution(s, t) { let answer = s.split(t).length; // 입력받은 문자로 분리시켜 문자 배열화 return answer - 1; // 문자열은 구분한 문자보다 하나 더 생기므로 } let str = "COMPUTERPROGRAMMING"; console.log(solution(str, "R")); 이 때, str마..

FRONT/JAVASCRIPT 2022.03.22

415 에러, Blob 에러 해결 과정

415 에러는 Unsupported Media Type 에러이다. Content Type이 맞지 않는다는 메세지이다. 보내주는 메세지 타입에 맞는 Content-Type을 잘 설정해줘야 한다. 나의 경우 Multipart/form-data 방식으로 js 내장객체인 formData를 사용하여 파일을 formData형식으로 만들어 클라이언트쪽에서 요청을 보냈는데 content type가 맞지 않아 에러가 뜨는 것이였다. 이 에러와 더불어 Failed to execute 'append' on 'FormData' : parameter 2 is not of type 'Blob'. 이란 에러가 반복적으로 나왔다. 이를 해결하기 위해 const data = new FormData(); let content = { c..

FRONT/JAVASCRIPT 2022.02.17

[javascript] Blob 객체란?

Blob이란? Blob은 일련의 데이터를 처리하거나 간접 참조하는 객체다. Blob이란 이름은 SQL 데이터베이스에서 유래하였으며 '대형 이진 객체(Binary Large Object)를 의미한다. Blob은 대개 바이트의 크기를 알아내거나 해당 MIME 타입이 무엇인지 요청하며, 데이터를 작은 Blob으로 잘게 나누는 등의 작업에 사용된다. 데이터 자체라기보다는 데이터를 간접적으로 접근하기 위한 객체인 것이다. JS에서 Blob(Binary Large OBject)은 주로 이미지, 오디오, 영상 등의 데이터를 다룰 때 사용한다. (꼭 미디어 관련해서만 사용하는 것이 아니라 html, plain text 등 바이너리로 표현 가능한 많은 데이터에서 쓸 수 있다.) Blob 생성 const newBlob =..

FRONT/JAVASCRIPT 2022.02.17

[Javascript] 스크롤 맨 위, 아래로 내리기

https://zetawiki.com/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%8A%A4%ED%81%AC%EB%A1%A4_%EB%A7%A8_%EC%95%84%EB%9E%98%EB%A1%9C_%EB%82%B4%EB%A6%AC%EA%B8%B0 자바스크립트 스크롤 맨 아래로 내리기 - 제타위키 다음 문자열 포함... zetawiki.com document.body.scrollTop = document.body.scrollHeight; // 아래로 window.scrollTo(0,0); // 위로 document.body.scrollTop = 0; // 위로

FRONT/JAVASCRIPT 2022.02.08

[Javascript] 프로미스(Promise), fetch, axios

프로미스란? 비동기처리를 위한 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. 프로미스란 ES6에서 도입한 비동기 처리를 위한 패턴이다. 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. // Promise 객체의 생성 const promise = new Promise((resolve, reject) => { // 비동기 작업을 수행한다. if (/* 비동기 작업 수행 성공 */) { resolve('result'); } else { /* 비동기 작업 수행 실패 */ reject('failure reason'); } }); 프로미스는 Pro..

FRONT/JAVASCRIPT 2022.02.08

[Javascript] 동기 처리 / 비동기 처리

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝 되어 제거된다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 동시에 2개 이상의 함수를 실행 할 수 없다는 것을 의미한다. 이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. 동기 처리 현재 실행 중인 테스크가 종료될 때까지 다음에 실행될 테스크가 대기하는 방식을 동기(synchronous)처리라고 한다. 장점: 실행 순서가 보장..

FRONT/JAVASCRIPT 2022.02.08

[Javascript] Rest API란?

REST API란? API(애플리케이션 프로그래밍 인터페이스)는 애플리케이션이나 디바이스가 서로 간에 연결하여 통신할 수 있는 방법을 정의하는 규칙 세트이다. REST (Representational State Transfer)는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이다. REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. RESTful API라고도 한다. REST API의 작동 방식 HTTP 요청 메서드 종류 목적 페이로드 GET index/retrieve 모든/특정 리소스를 조회 x POST create 리소스를 생성 ○ PUT replace 리소스의 전체를 교체 ○ PATCH modify 리소스의 일부를 수정 ○ DELETE del..

FRONT/JAVASCRIPT 2022.02.08