본문 바로가기

반응형

Coding

(39)
MySQL : connection 중복 이슈 MySQL 연동하는 과제를 진행하면서 GET/POST 시에 계속 에러가 발생했다. DB 연결은 되었지만 요청을 하면 매번 아래와 같은 타입 에러가 발생했다. TypeError: db.query is not a function. //도대체 왜!! 쿼리 스트링에는 오류가 없었기 때문에 에러 로그로는 원인을 알 수 없었다. 아직 디버깅이 서툴기 때문에 에러 로그로 확인이 안 될 때가 가장 답답한데, 시간을 많이 허비하고 나서야 원인이 DB 연결 쪽의 이슈라는 것을 발견했다. 원인은 DB connection의 중복. node-mysql 모듈을 사용하는 경우 mysql.createConnection()을 하고 나면 아래에 connection.connect()로 다시 연결할 필요가 없다고 한다. 불필요한 코드이고 ..
MySQL: SQL문 입력하다 ' 또는 `을 입력했을 때 이번 주 데이터베이스 입문, 지난 이틀간 에러를 해결할 수 없어 MySQL을 설치했다 설치했다 지웠다를 몇 차례 반복했다. 원인을 명확하게 알 수 없었고 뭐가 뭔지 모르는 상태라 분노가 상승했지만 튜토리얼과 여러 블로그들의 도움을 받아 어찌어찌 연동에 성공하고 심신의 안정을 찾을 때 즈음. sql문을 입력하다가 작은따옴표가 실수로 입력됐다. 그리고 빠져나올 수가 없었다. 순간 너무 화가 났다!! 해결방법 : sql문 끝에 작은따옴표(') 또는 백 틱(`)을 입력한 경우 다시 한번 같은 부호를 입력해 주고 세미콜론(;)을 닫아준다. mysql> SHOW TABLES' '> '> ; '> ; //세미콜론 만으론 안끝남 '> '> '> //원래의 화살표(->) 모양이 '> 또는 `> 이렇게 바뀌어 나옴 '> ..
JavaScript: Promise, async & await 이해 이전 과제를 진행하던 중에 Promise라는 개념이 이미 몇 차례 등장했었는데 그때는 그때 당장 익혀야 할 다른 것들이 많아서 프로미스는 공부하지못했다. 나중에 다루게 될 개념이라고 들었기 때문에 이런 게 있구나 정도로 넘겼음. 하지만 자바스크립트에서 비동기 처리는 중요한 부분이기 때문에 이번에 정리를 해 둔다. 레퍼런스: MDN: Using promises 캡틴판교: 자바스크립트 Promise 쉽게 이해하기 비동기 처리 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하는 것.(non blocking) 비동기 처리의 예로는 setTimeout(), ajax 통신을 들 수 있다. 이런 특징은 코드를 실행하는 시간을 효율적으로 쓸 수 있지만, 실행되는 순서를..
ES6: Destructuring (구조분해 할당) 이번 스프린트부터 리액트를 다루게 되는데, ES6 문법을 잘 알고 있어야 리액트를 활용한 과제를 진행할 수 있다고 한다. 그중 Destructuring이 익숙지 않아 블로그에 정리해 본다. Destructuring assignment란? 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 JS 표현식인다. 간단히는 배열과 객체를 좀 더 편하게 다루기 위해 ES6에서 추가된 방법이다. 해체라는 단어가 모호하기 때문에 이전 문법과 비교해서 예시를 보는 게 이해하기 쉬웠다. Array destructuring 이전 문법에서 우리가 배열에서 어떤 값을 추출하기 위해서는 아래와 같이 변수들 각각의 인덱스를 지정해 주어야만 했다. var number = [1, 2, 3, 4, 5]; var a = ..
CORS(Cross-Origin Resource Sharing) 에 관하여 스프린트를 진행하면서 CORS라는 개념이 등장했다. 웹 개발을 위해서 알아야 할 기본적이고 중요한 이슈인 듯한데 짧은 세션 영상으로는 이것이 왜 필요한지, 언제 사용하는지 정확히 이해가 되지 않아서 조금 더 알아보고 정리해둔다. CORS : Cross-Origin Resource Sharing? 추가 HTTP 헤더를 사용하여 브라우저에게 한 출처에서 실행 중인 웹 응용 프로그램의 다른 출처의 선택된 자원에 대한 접근 권한을 알려주는 메커니즘.이라고 MDN에 나와있지만 좀 어렵다. 예들 들면 현재 도메인과 다른 도메인으로 리소스가 요청되는 경우, https://domain-a.com에서 제공되는 프런트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.co..
브라우저는 어떻게 동작 할까 - Basic Web Architecture 드디어 클라이언트와 서버 간의 요청과 응답을 주고받는 과정을 공부하고 있다. 매일 사용하는 브라우저와 그 안의 웹페이지 뒷단에서 통신이 이루어지는 과정을 배우는 건 흥미진진하고 놀라운 일이다. 이렇게나 복잡한 과정을 통해 이루어지는 일들을 나는 정말 무심하게 당연하게 사용하고 있었구나 라고. 하지만 알아둬야 할 내용이 상당히 많다. Browser HTML로 작성된 웹페이지를 볼 수 있도록 해주는 응용 소프트웨어다. (크롬, 사파리, IE 등) 컴퓨터는 2진수만 이해할 수 있지만, 우리가 작성한 코드를 컴퓨터가 이해할 수 있는 것은 브라우저 덕분. 브라우저는 사용자가 선택한 자원을 서버에게 요청하고, 받은 내용을 다시 브라우저에 나타낸다. 다시 말하면, 사용자가 웹브라우저를 통해 웹서버에게 Request ..
함수이름 앞에 언더바(_)를 쓰는 이유 함수 명 앞에 _ 언더 바가 있는 코드를 발견했다. 왜일까? var printArray = function() { function _print(targetArr) { //왜 print가 아니라 _print로 썼을까? //코드생략 } } _print(arguments[0]); }; 코딩 컨벤션(스타일 가이드) 함수명 앞에 _ 언더바를 붙여주는 것은 일종의 코딩 컨벤션이다. 코딩 컨벤션이란 프로그래밍 언어별로 권장하는 코딩 규칙(스타일)이다. 예를 들면 구글에서 권장하는 방식은 링크를 통해 확인할 수 있다. 반드시 따라야 하는 룰이라기 보다는 이해하기 쉬운 코드를 작성하기 위한 가이드 정도로 참고해서 활용할 수 있다. 보통은 지역변수나 sub function일 경우 이름앞에 언더바를 써 주는데 이는 자바스크..
Time Complexity: 시간 복잡도와 Big-O 표기법 Complexity Analysis(복잡도 분석) 복잡도란 알고리즘이 문제를 해결하는 데 있어서 시간(time complexity)과 공간(space complexity)을 얼마나 차지하는지를 나타내는 지표이다. 여기서 공간 복잡도는 코드를 저장하고 수행하기 위한 시스템 공간 등을 의미한다. 시간과 공간의 복잡도는 왜 중요할까? 시간과 공간의 복잡도가 그 알고리즘이 얼마나 효율적인지를 나타낼 수 있기 때문이다. 시간과 공간이라는 자원이 무한정이라고 가정한다면 이 복잡도라는 것은 의미가 없다. 심지어 알파고 조차도 플레이 가능한 모든 가짓수를 계산해서 넣는다면 거의 무한에 가까운 경우의 수가 나온다고 해도 언젠가는 가능할 것이기 때문이다. 하지만 현실적으로는 불가능한 일. Time complexity 이 ..