본문 바로가기
300x250

비전공자개발자되기45

자바스크립트_동기/비동기 개념정리(callback_promise_async/await) 오늘은 비동기에 대해서 알아보겠습니다. 동기(Synchronous): 요청에 대한 결과가 동시에 일어난다. 비동기(Asynchronous): 요청에 대한 결과가 동시에 일어나지 않는다. 동기는 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어집니다. 비동기는 요청과 결과가 동시에 일어나지 않을거란 약속입니다. 동기방식은 매우 간단하고 직관적이지만, 결과가 주어질 때까지 아무것도 못하고 기다려야 하기에 효율적이지 않다는 단점이 있습니다. 비동기 방식은 동기보다 복잡할 순 있지만, 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 효율적으로 사용할 수 있습니다. 비동기와 동기의 일상생활의 예시를 들면, 커피를 마시고 카페에 갔는데 줄이 있습니다. 우리는 1. .. 2021. 5. 21.
자바스크립트_기본 함수 구현하기(_.filter, _.uniq, _.each,_.map, _.reduce) 이번 주에는 자바스크립트 유틸리티 라이브러리 underscore의 함수들을 직접 구현하는 과제를 받았습니다. 그중에서 제가 중요하다고 생각하는 몇가지만 정리해보겠습니다. _.each 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 * 배열 arr을 입력받을 경우, iteratee(ele, idx, arr) * 객체 obj를 입력받을 경우, iteratee(val, key, obj) * 이처럼 collection의 모든 정보가 iteratee의 인자로 잘 전달되어야 모든 경우를 다룰 수 있습니다. * 실제로 전달되는 callback 함수는 collection의 모든 정보가 필요하지 않을 수도 있습니다. */ // _.each는 명시적으로 어떤 값을 리턴.. 2021. 5. 19.
자바스크립트_setTimeout()과 setInterval() 개념 정리 오늘은 setTimeout()과 setInterval()에 대해 정리해보겠습니다. setTimeout 은 모두 일정시간이 지난 후에 함수를 실행하고 setInterval 일정 시간 간역으로 함수를 반복합니다. setTimeout 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function fn(){ console.log(3) } setTimeout(fn, 3000); //3초뒤에 함수가 실행된다. //위에 있는 코드는 밑에 처럼 사용하여두 된다. setTimeout(function fn(){ console.log(3); }, 3000); //인수가 필요하다면 function showName(name){ console.log(name); } setTime.. 2021. 5. 19.
자바스크립트_재귀함수 기본 개념정리_다르게 생각하기 오늘은 재귀함수에 대해 알아보도록 하겠습니다. 재귀함수는 어떤 함수가 자기 스스로를 호출하는 것을 말합니다. 자기 자신을 호출하는 함수로 조건이 충족될때까지 반복적으로 함수를 불러내면서 주어진 작업을 수행하는 것을 의미합니다. 5! = factorial(5)이라는 함수가 있습니다. 우리는 이것을 =5*4*3*2*1 가 될 것을 알고 있습니다. 이건 이렇게도 표현이 가능합겁니다. =5*4! =5*4*3! =5*4*3*2! =5*4*3*2*1! 우리는 지금 구조가 비슷하다는 걸 알수있고, 어떤 문제를 해결할때 같은 구조를 가진 문제를 해결하는 방법을 재귀라고 합니다. 재귀는 다음과 같은 상황에 적합하게 사용됩니다. 주어진 문제가 (구조는 비슷하고) 더 작은 문제로 나뉘어 질 수 있는 경우 중첩된 루프가 많거.. 2021. 5. 13.
react 컴포넌트와 props로 데이터 보내기 이번엔 props에 대해 포스팅하려고 합니다. 리액트에 장점 중 하나는 컴포넌트형으로 작은 단위로 나눌 수 있다는 것입니다. 부모 컴포넌트에 있는 데이터들을 props를 통해 자식컴퍼넌트에서 사용할 수 있습니다. 위의 사진에서 보면 movie.js 컴포넌트안에 3번째 줄엔 props라고 써져있는것을 볼 수 있습니다. 그렇다면 부모 컴퍼넌트의 어떤 자료를 사용한 것일까요/ 6번 줄에 {props.movie.title} 과 7번 줄에 {props.movie.year} 이 부모 컴포넌트에서 가져온 자료, props라고 할 수 있습니다. 사용법은 위에와 같습니다. 왜 {props.movie.year}처럼 사용했을까요? 밑에 App.js를 보면 22번째 줄을 보면 movie라는 속성에 movie라는 속성을 만들어.. 2021. 5. 12.
자바스크립트_14개의 숫자와 수학 method 정리_toFixed_isNaN_Math.random_parseFloat 이번 포스팅은 자바스크립트 숫자와 수학 method에 대해 알아보겠습니다. toSting() 1 2 3 4 5 6 7 8 9 10 toString() 10진수 -> 2진수/16진수 let num =10; num.toString(); // "10" num.toString(2); // "1010" let num2 = 255; num2.toString(16); // "ff" cs Math Math.PI / Math.ceil() / Math.floor() / Math.round 1 2 3 4 5 6 7 8 9 10 11 12 13 Math.PI; 3.141592653589793 이 나옴 (원주율) Math.ceil(): 올림 let num1= 5.1; let num2= 5.7; Math.ceil(num1); /.. 2021. 5. 11.
자바스크립트_생성자 함수 개념정리 이번 포스팅은 생성장 함수에 대해 알아보겠습니다. 굉장히 간단하게 여러 변수를 만들어낼 수 있습니다. 천천히 한번 읽어보세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 생성자 함수 function User(name, age) { this.name = name; this.age = age; }; let user1 = new User('mike', 30); let user2 = new User('jane', 20); let user3 = new User('jun', 27); // 1) 함수 이름의 첫 글자를 대문자로 바꿔준다. // 2) new 연산자를 사용하여 호출한 형태다. // 3) .. 2021. 5. 10.
react 리액트 조건렌더링 이번 포스팅은 react에서 조건렌더링 하는 방법에 대해 알아보겠습니다. useState를 사용해서 저 toggle이란 버튼을 누르면 false => true로 true=> false 바뀌게 하는겁니다. 1) 8-10 줄을 보시면 renderCondition이라는 변수를 만들고 그안에 컨디션이 true면 true를 보여주고 아니면 false를 보여준다는 삼항연산자를 사용하여 할당하였습니다. 2)이 변수를 15번 줄에 {} 중괄호를 사용해서 넣어줬구요. 3)그밑에 버튼을 하나 만들었습니다. onClick으로 toggle이라는 함수를 넣어줬습니다. 4)toggle이라는 함수는 condition이라는 변수가 반대가 될수있는 setCondition함수를 가지고 있습니다. 5) 5번줄을 보시면 useState의 .. 2021. 5. 8.
코드스테이츠 5주차 Pre-course + HA시간 후기 드디어 22주 중에 5주 간의 첫 번째 섹션이 끝났다. 5주 동안 코드스테이츠가 준비한 커리큘럼과 과제를 9시부터 6시까지 진행하며 개발자가 되기 위한 시간을 가졌다. 그리고 각 섹션이 끝날 때마다 보는 ha시간까지 마쳤다. 일종의 테스트다. 코플릿 코플릿은 문제가 나왔다. 지금까지 배운 문자열, 반복문, 배열, 객체, 고차함수 등등 모두 섞어서 문제가 꽤어렵게 나왔다. 5문제 중에 4문제는 술술풀린건 아니지만 고민을 하다보니 방법을 찾았다. 한문제가 문제였다. 코플릿에서 DOM문제가 나올지 몰랐는데 나오면서 엄청나게 당황했다, 그래서 이건 마지막에 시간을 많이 쓰면서 조건 3개중에 2개만을 충족시켰다. 코플릿은 재밌는데 잎으로 얼마나 더 어려워질지...ㅎㅎ react 리액트 또 다른 하나의 과제는 RE.. 2021. 5. 8.
반응형

티스토리툴바