selectionSort는 말 그대로 선택해서 정렬한다. 작은 것을 찾아서 앞으로 보낸다. 이것이 전부다. 이 걸 또 정렬될 때까지 계속하는 거다. 새로운 배열을 만들어 가장 작은 값을 하나씩 넣어서 줄 수 도 있겠고, 원본 배열을 변경해서 하는 방법이 있을 수도 있겠다. 나는 원본 배열을 변경하는 방식으로 진행을 하려 한다. 역시 이번에도 반복문을 어떻게 구성해야 할지가 제일 중요하다. 일단 전체 요소만큼 에 사이클이 나올 것이고, 한 사이클마다 최솟값을 찾아야 한다. 또한 한 사이클을 돌게 되면 맨 앞은 제일 작은 수가 된다. code function selectionSort(array){ for(let i=0; i

bubbleSort는 인접한 두 요소를 가지고 비교해서 정렬하는 정렬 알고리즘이다. ... 한 사이클을 돌면 이렇게 가장 큰 요소가 제일 뒤로 간다. 또 다음 싸이클을 돌면 요소는 10, 12, 13, 15, 16, 20으로 정렬이 되어있을 것이다. 이걸 정렬될 때까지 계속하는 것이다. 개인적으로 이런 정렬 알고리즘을 풀 때 반복문을 어떻게 구성하느냐가 핵심인 것 같다. 나는 항상 이론으로는 이해가 어렵지 않은데 코드로 옮기려고만 하면 너무 어려웠다. 지금도 뭐 다르진 않지만... 각설하고, 모든 요소만큼 사이클이 돌아야 하므로 반복문은 0 ~ 배열의 길이 - 1 까지는 돌아야 할 것 같고, 한 사이클당 반복은 인접한 요소들을 모두 확인하고 마지막 요소가 가장 크다는 것을 알고 있으니까 0 ~ 배열의 길..

포트폴리오 사이트를 하나 만들었다. portfolio Web site created using create-react-app www.artdev.me (이놈에 cra를 안쓰던지 해야겠다. 내가 초기세팅을 해버려야겠다... 저게 계속뜬다...) ec2를 이용해서 배포를 했는데 안되는 부분이 있어서 로그를 남긴다. 지금 배포된 상태는 ec2에 express를 설치하고 static파일을 보여주는 방식으로 배포가 되어있다. static파일들은 react에서 빌드된 파일들이고, 따라서 해당 사이트에 접근하려면 포트번호를 명시해주어서 접근해야 한다. 내가 사용하는 ec2는 **** port를 tcp포트로 열어놓고 사용하고 있다. (80포트는 못쓰게? 되어있는것 같았다.) express는 지금 ****포트를 사용하고..

Flux? flux 패턴은 mvc의 복잡함때문에 나온 패턴이다. [Development] MVC 패턴 MVC 는 로직을 model, view, controller로 분리하여 data를 처리하는 방법을 말한다. view에서는 화면을 담당한다. controller는 data를 받아서 model에게 넘겨준다. 또한 model에서 data를 받아와서 view에게 주.. artdev.tistory.com mvc패턴은 view와 model사이에 양방향으로 data가 흐르기 때문에 한쪽 view에서 data 변경을 하면 다른쪽view에서도 data가 변경되고 또 그에따른 data가 변경에 다른 view가 영향을 받고...이런식으로 꼬일수가 있다고 한다. 특히 app의 규모가 커지면 이런일이 발생하게 된다고 한다. 사..

MVC 는 로직을 model, view, controller로 분리하여 data를 처리하는 방법을 말한다. view에서는 화면을 담당한다. controller는 data를 받아서 model에게 넘겨준다. 또한 model에서 data를 받아와서 view에게 주는 역할도 한다. model은 해당 data를 관리한다. 말로만 들어서는 잘 이해가 가지 않을 수 있다. // headers.pug 위 코드는 html template 언어인 pug를 사용하여 작성한것이다. indent를 사용하여 구분하는것 외에는 큰 차이는 없다. form tag로 get요청을 보내는 소스이다. 검색어를 넘기는것 같다. view에서 data를 넘기면 controller는 // controller.js controller는 해당 dat..

앞선 포스팅에서 비동기 함수를 사용할때의 callback hell을 설명한 바 있다. [Javascript] 비동기함수(2) - CallBack 비동기와 콜백 저번 포스팅에서는 비동기 함수가 어떻게 작동하는지 보았다. client에서 자원을 server에게 요청하는 코드들은 대부분 비동기함수로 작동을 한다. 예를 들어 어떤 이벤트가 발생했을때 아래의 함수.. artdev.tistory.com 2015년 6월 , Ecma International 에서는 es2015라는 새로운 문법을 도입하였다. 약 500p 분량의 내용이 있는데 나도 아직 모르는문법이 수두룩하다. ecma2015바로가기 es6라 불리는 이 문법에 promise가 설명되어있다. 조금 deep해서 mdn의 설명을봐도 좋을것 같다. -mdn m..

비동기와 콜백 저번 포스팅에서는 비동기 함수가 어떻게 작동하는지 보았다. client에서 자원을 server에게 요청하는 코드들은 대부분 비동기함수로 작동을 한다. 예를 들어 어떤 이벤트가 발생했을때 아래의 함수가 실행된다고 가정해보자. server에게 data를 가져오는 http요청을 하는 함수이다. // Client side code... function getUserData() { //request (kim 이라는 user의 데이터를 요청 ) someCallToServer({username:"kim"},(err,data)=> { if(err){ return "err!!!"; }else{ // 받아온 data를 가지고 작업... } }) } 보통 이런식으로 작업을 하게 된다. callback으로 넘겨..

// JWT란? // 왜쓰는가? // npm package 소개

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. mdn 그렇다. 말 그대로, 내 출처(도메인, 프로토콜, 포트)에서 다른 출처(도메인, 프로토콜, 포트)에 있는 자원에 접근할 때 적용되는 규칙이다. 자원의 요청을 아무나 막 하면 안되니까, 이런 정책이 있는것이다. 해당 자원을 가져오고 싶으면 해당자원을 가지고 있는 서버로부터 권한을 부여 받아야 한다. "preflighted" requ..

코드는 위에서 아래쪽으로 순차적으로 실행된다. console.log('첫번째'); console.log('두번째'); console.log('새번쨰'); 콘솔에 당연히 순서대로 찍힐것이다. 하지만, web api 중 일부를 사용하다보면 코드가 순서대로 실행되지 않는경우를 볼수가 있다. 바로가기 : [ Javascript WEB API ] console.log('1'); window.setTimeout(function(){ console.log('1초 후 실행'), 1000 }) console.log('3'); 위의 코드는 web api중 하나인 setTimeout이라는 매서드를 사용한것이다. 코드의 실행시간을 정할수가 ..