본문 바로가기

programming study/JavaScript

 (186)
[프로그래머스] 방문 길이 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) // 방문 길이 function solution(dirs) { let answer = 0; // 캐릭터의 x, y 위치(처음) let positionX = 0; let positionY = 0; // 캐릭터가 움직인 경로 (정방향, 역방향) const route = []; // dirs 하나씩 접근 for (let dir of dirs) { // U, 위로 이동 if (dir === 'U') { // 전체 좌표를 넘는지 확인 if ((positionY + 1) >= -5 && (positionY + 1) = -5 && (positionY - 1) = -5 && (positionX + 1) =..
프론트엔드의 비동기 본 내용은 10분 테코톡 카일님의 강의를 토대로 작성하였습니다. 1. 비동기는 왜 나타났고 왜 처리해야할까 비동기 사용자와의 연속적인 상호작용을 처리하여 변경된 정보를 실시간으로 보여줘야 한다. 모든 상호작용을 동기적으로 처리하면 사용자가 대기해야하는 시간이 생긴다. 코드를 비동기적으로 처리하는 것은 프론트엔드 영역에서 필수 2. CallBack 비동기 처리 방식 문제1. 신뢰성 제어의 역전(Inversion Of Contral) 아래와 같은 이유로 버그가 발생할 수 있다. 필요한 데이터를 콜백에 전달 했는지 호출 시점(빠르거나 느리거나) 호출 횟수 function browserTasks() { // 제어 대상 console.log('sync task'); asyncRequest(asyncTask); }..
[얄팍한 코딩사전] 비동기 프로그래밍 본 내용은 해당 강의 토대로 작성 1. Synchronous vs. Asynchronous Synchronous 코드가 작성된 순서대로 각 작업이 마무리 되는대로 실행 각 작업이 마무리될때까지 기다려야 한다. 뒤의 작업이 지체된다. Asynchronous 코드가 작성된 순서대로 각 작업을 기리지 않고 실행 쓰레드와 프로세스가 여럿이 돌고 있는 것 멀티태스킹 JavaScript의 Asynchronous function asyncBlackBeanEaters (name) { console.log(`${name}에게 배달`); http.get("http://localhost:3000/eat-noodle-rand", function (){ console.log(`${name} 식사 완료`); } ); } let ..
[드림코딩 by 엘리] 자바스크립트 최신 문법(ES6, ES11) 본 내용은 해당 강의 토대로 작성 ES6 1. Shorthand property names object에서 key와 value의 이름이 동일한 경우 축약해서 표현할 수 있다. const name = 'siru'; const age = '3'; const siruObject = { name, age, }; 2. Destructuring assignment object에 할당된 key의 value를 중괄호를 사용하여 바로 가져올 수 있다. 중괄호안의 변수 명은 key의 이름과 같아야 한다. 콜론(:)을 사용하여 원하는 이름으로 바꿀 수 있다. 배열에서도 사용할 수 있다. // object const siruObject = { name: 'siru', age: '3', }; const {name, age} =..
[드림코딩 by 엘리] JavaScript 함수 본 내용은 해당 강의 토대로 작성 1. 함수 선언 & 호출 // 선언 // 전달받는 파라미터없이 실행되는 함수 function doSomething() { console.log('hello'); } // 호출 doSomthing(); 2. 값을 리턴하는 함수 계산 이후에 특정 값을 전달하는 함수 JavaScript는 parameter에 type을 지정하지 않는 동적 언어이다. function add(a, b){ // 전달받은 a, b를 연선하여 변수에 저장 const sum = a + b; // 더한 결과를 return return sum; } // 함수가 전달한 값을 result에 저장 // result를 정의함과 동시에 값을 할당 -> 함수 호출 -> 1,2 전달 -> 코드블록 실행(연산) -> 결과..
[드림코딩 by 엘리] JavaScript 기초 강의(12) (ES5+) 본 내용은 해당 강의 토대로 작성 async & await promise를 더 간결하고 간편하게 사용할 수 있다. promise, async & await를 적재적소에서 사용할 것 기존의 promise 위에 간단한 API를 제공 syntactic sugar JavaScript의 class 1. async 비동기 처리가 없을 때 function fetchUser(){ // 네트워크로부터 받아오는데 10초가 걸리는 요청 return 'siru'; } const user = fetchUser(); console.log(user); // 비동기처리를 하지 않으면 10초가 걸리므로 뒤의 코드 실행이 지체된다. Promise로 비동기처리 function fetchUser(){ // 네트워크로부터 받아오는데 10초가..
[프로그래머스] 소수 찾기 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) // 소수 찾기 // 순열을 만드는 함수 function makePermutations(arr, select) { // 순열 const permutations = []; // 1개를 택하면 모든 원소를 return if (select === 1) return arr.map((value) => { return [value] }); arr.forEach((fixed, index, origin) => { // 매 루프에서의 fixed(value)를 제외한 나머지 원소들의 배열 const rest = [...origin.slice(0, index), ...origin.slice(index + 1)]..
[드림코딩 by 엘리] JavaScript 기초 강의(11) (ES5+) 본 내용은 해당 강의 토대로 작성 Promise JavaScript에서 제공되는 비동기를 간단하게 처리할 수 있는 Object 콜백함수 대신 사용할 수 있다. Promise 안에서는 무거운 일을 수행하게 된다. 네트워크에서 데이터를 받아오거나 파일에서 큰 데이터를 읽는 과정을 수행하는 것을 동기적으로 처리하면, 다음 코드가 실행되지 않으므로 비동기 처리를 하는 것이 좋다. state 상태 process가 동작을 수행중인지, 완료되어서 성공 또는 실패했는지 producer / consumer 정보 제공자 / 소비자 1. state pending -> fulfilled or rejected pending: operation을 수행 중 fulfilled: operation을 완료하고 성공 rejected: o..

티스토리툴바