Javascript/etc 19

vercel로 프론트 배포하기

vercel? https://cocobi.tistory.com/105 [Next.js] Vercel로 프론트 배포하기 ❔ Vercel 이란 Vercel 은 Next.js 에서 제공하는 배포플랫폼으로 [빌드 + 배포 + 호스팅] 서비스를 제공한다. Next.js 공식문서에서는 Vercel를 통한 Front Project 배포를 권장하고 있으며, github의 레파지토.. cocobi.tistory.com Vercel 은 Next.js 에서 제공하는 배포플랫폼으로 [빌드 + 배포 + 호스팅] 서비스를 제공해준다. 1. github repository 생성 2. 프로젝트 생성 > npx create-react-app my-app --template typescrip 위의 명령어로 설치안되는 경우 먼저 yarn..

Javascript/etc 2022.07.27

Json(JavaScript Object Notation)

Json(JavaScript Object Notation) 웹 네트워크 상에서 일반적으로 데이터 교환을 위해 사용되는 것으로, 객체가 문자열화된 형태이다. JSON.stringify() 객체 형태를 JSON 형태로 바꾸어 준다. const user = { name: 'mihee', age: 27, hobby: 'sleep' } const jsonUser = JSON.stringify(user); console.log(jsonUser) // {"name":"mihee","age":27,"hobby":"sleep"} JSON.parse() JSON형태를 객체 형태로 바꾸어 준다. const user = { name: 'mihee', age: 27, hobby: 'sleep' } const jsonUser =..

Javascript/etc 2022.07.10

[ JAVASCRIPT ] - 객체 메소드

Object.assign( ) 객체 형태로 복제하여 준다. const user = { name: 'mihee', age: 27, like: 'snack' }; const new_user = Object.assign(user); // user의 내용을 {}에 담아 new_user에 할당한 것이다. // { name: 'mihee', age: 27, like: 'snack' } console.log(new_user); const info1 = { like: 'tv' } const info2 = { hobby: 'sleep' } Object.assign(new_user, info1, info2); console.log(new_user); // { name: 'mihee', age: 27, like: 'tv',..

Javascript/etc 2022.06.10

[ Javascript ] - Promise란?

HTML 삽입 미리보기할 수 없는 소스 프로미스는 자바스크립트의 비동기 처리에 사용되는 객체로, 작업의 순서에 따른 실행을 가능케 합니다. 예를 들어 서버를 통해서 데이터를 받아 그 값을 반환하는 식의 작업인 경우, 비동기 처리 방식인 자바스크립트의 특성상 서버로부터 값을 받기 전에 값을 반환하여 문제가 발생할 수 있습니다. 이러한 상황에서 프로미스 객체를 사용하여 서버로부터 값을 받은 후에 다음 작업이 실행되도록하여 작업의 순서를 보장할 수 있습니다. * 비동기 처리 : 특정 코드의 실행이 완료될 때까지 기다리지 않고, 다음 코드를 실행하여 작업이 완료되는 순서대로 결과물을 출력하는 것. function delay(sec, callback) { setTimeout(() => { callback(new ..

Javascript/etc 2022.05.26

[ Javascript ] - 비동기 처리?

자바스크립트는 기본적으로 한 번에 여러 작업에 대한 처리가 가능한 비동기 처리 방식을 취하고 있습니다. 자바스크립트의 비동기 처리 방식은 사용자가 페이지 요청시 서버로부터 응답이 올 때까지 기다리지 않고, 서버에 데이터 요청 후 다른 코드를 실행함으로써 페이지를 요청한 사용자에게 보다 빠르게 페이지를 출력하여 보여 줄 수 있습니다. * 비동기 처리 이전 작업의 실행 완료 여부와 상관없이 동시에 여러 작업을 실행하여, 실행이 먼저 완료되는 대로 결과물을 출력한다. 즉 이전의 작업이 완료되기 전에 다른 작업을 실행한다. * 동기 처리 작업의 우선 순서에 따라 작업이 실행되며, 이전 작업이 완료될 때까지 다른 작업은 대기 상태가 되었다가 이전의 작업이 모두 완료된 후 순서에 따라 다음 작업이 실행되는 것이다...

Javascript/etc 2022.05.26

[ Javascript ] - 기본 함수

1. concat( ) 여러 배열을 합쳐서 새로운 배열을 반환해주는 함수이다. const arr1 = ["a", "b", "c"]; const arr2 = ["d", "e", "f"]; const arr3 = arr1.concat(arr2, 'g'); console.log(arr3); // [ 'a', 'b', 'c', 'd', 'e', 'f', 'g' ] const str1 = 'hello'; const str2 = 'world'; console.log(str1.concat(" ",str2)); // 이와 같이 string을 붙이는 것도 가능하다. 2. push( ) 배열의 끝에 새로운 요소를 추가하고, 요소가 추가된 전체 배열을 반환한다. const arr1 = ['apple', 'mango']; c..

Javascript/etc 2022.05.22

[ 자바스크립트 ] - some ( )

/* arr.some(조건[currentValue, index, array]) ================================================== index와 array는 optional */ const array = [1,2,3,4,5]; const even = (ele) => ele % 2 === 0; console.log(array.some(even)); // true 출력 // 배열 요소 중 하나라도 해당 조건을 충족하면 true 출력 const array2 = [1,3,5,7,9]; const even2 = (ele) => ele % 2 === 0; console.log(array2.some(even2)); // false 출력 // 배열 중 모든 요소가 조건을 충족하지 ..

Javascript/etc 2022.05.17