본문 바로가기
300x250

개발 공부143

nodejs_클라이언트(client)와 서버(server) 구조 그리고 데이터베이스(database) Client Server Architecture 다른 말로는 2티어 아키텍처라고 불립니다. 우리는 스마트폰의 앱이나 웹브라우저로 다양한 서비스를 이용합니다. 그것이 가능한 이유는 그 프로그램들이 외부로 요청을 보내고, 응답을 받아오기 때문입니다. 여기서 요청을 보내는 것은 클라이언트(client)이고, 요청을 받고 응답을 해주는 것은 서버(server)이다. 이용하는 서비스에 따라 클라이언트가 요청하는 서버는 달라집니다. 응답으로는 text, html, cdd, javascript, image, video가 올 수 있고, 그 응답을 바탕으로 화면을 구성하게 됩니다. 그렇게 우리가 문제없이 서비스를 이용할 수 있게 됩니다. 일반적으로 서버는 리소스를 전달해주는 역할만 담당합니다. 리소스(응답)를 별도로 저.. 2021. 5. 21.
자바스크립트_동기/비동기 개념정리(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.
자바스크립트_자료구조 stack과 queue 개념 정리 오늘은 자료구조에서 stack과 queue에 대해서 알아보겠습니다. 먼저 자료구조가 무엇인지 설명해보겠습니다. 자료구조란 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 것들을 우리는 자료라고 합니다. 자료들이 잘 분석되고, 정리되고 활용되어야만 의미가 있다고 볼 수 있는데, 무분별하게 마구잡이로 자료를 체계없이 저장하면 의미가 없어집니다. 자료를 구조화 시키는 것. 그렇기에 우리는 잘 정리된 자료를 활용하기 위해 자료 구조를 갖추려고 하는 것입니다. Stack stack이란 후입선출(LIFO, Last-in-first-out)의 구조이다. 스택은 데이터를 차곡차곡 쌓아 올린 형태의 자료구조를 말한다. 만약 0-1-2-3-4-5 순으로 쌓았다면, 5-4-3-2-1-0 순으로 빼낼 수 있다. .. 2021. 5. 19.
코드스테이츠 6주차 리뷰-section 2 시작 5월6일 ha테스트를 통과하고 섹션투의 첫째주가 지나갔다. 한 주동안 재귀함수와 자료구조/알고리즘에 대해 배웠는데 많이 해맸다. 한문제 혹은 한 과제를 만날때마다 어떻게 문제를 해결해야하는가에 대한 고민으로 많은 시간을 보냈다. stack, queue, graph, tree에서 많이 해맸는데 수학과 거리가 멀었던 나는 이해하기조차 쉽지않았다. 특히 개념을 이해하였더라도 활용하기가 더 어려웠다. 매일 아침 9시부터 10까지는 toy algorism 문제 하나를 푸는 시간이지만, 1시간 중 30분은 고민만하다가 30분은 레퍼런스를 보고 이해하는 시간이 되고 있다. 기존의 알고리즘문제는 내가 접근할 수는 있었지만, 이건...그렇지도 않다. 같이 하고 있는 70명 중 대부분 나와 같은 마음일거같다. 다들 문제가.. 2021. 5. 16.
자바스크립트_재귀함수 기본 개념정리_다르게 생각하기 오늘은 재귀함수에 대해 알아보도록 하겠습니다. 재귀함수는 어떤 함수가 자기 스스로를 호출하는 것을 말합니다. 자기 자신을 호출하는 함수로 조건이 충족될때까지 반복적으로 함수를 불러내면서 주어진 작업을 수행하는 것을 의미합니다. 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.
반응형

티스토리툴바