컴퓨터언어(271)
-
[Big O] 미래를 내다보고 코드를 효율적으로 짜자
Big O는 Input이 증가함에 따라 연산의 양이 얼마나 더 많이 증가하는지를 나타내는 지표로, 알고리즘의 성능을 나타낸다. O(1) > O(logn) > O(n) > O(nlogn) > O(n^2) > O(2^n) > O(n!) *언제나 절대적이지는 않다. 예를 들어 배열이지만 길이가 정해진 경우에는 상황에 따라 O(n) 알고리즘이 O(1) 알고리즘보다 더 성능이 좋을 수 있다. *JavaScript에서 문자열의 .length는 O(1)이다. *그렇다고 확장성만 따질 것은 아니고, 가독성 또한 좋아야 한다. https://www.bigocheatsheet.com/ Big-O Algorithm Complexity Cheat Sheet (Know Thy Complexities!) @ericdrowell ..
2020.05.19 -
[JSX] 각 모듈마다 .jsx로 분리한 뒤 import, export하면 깔끔한 앱이 된다
// Heading.jsx import React from "react"; function Heading () { return My Stacks } export default Heading; // List.jsx import React from "react"; function List () { return ( HTML/CSS/JS NodeJS Python Django React Flutter ) } export default List; // App.jsx import React from "react"; import Heading from "./Heading"; import List from "./List" function App () { return ( ) } export default App; // i..
2020.05.19 -
[JSX] HTML 요소들을 .html이 아닌 .js에서 가지고 놀게 함
// Vanilla const div = document.getElementById("root"); const h1 = document.createElement("h1"); const ul = document.createElement("ul"); const li1 = document.createElement("li"); const li2 = document.createElement("li"); const li3 = document.createElement("li"); const li4 = document.createElement("li"); const li5 = document.createElement("li"); const li6 = document.createElement("li"); h1.inner..
2020.05.18 -
[React JS] 효율적인 프론트엔드 솔루션
프론트엔드는 웹서비스의 얼굴로서 고객과 가장 맞닿은 부분을 책임지는 아주 중요한 역할을 한다. 기존 방식대로라면 하나의 페이지에 담긴 여러 HTML 요소의 이벤트에 따라 전체 페이지를 리로드해야했다. 하지만 페이스북에서 좋아요 하나 누른다고 전체 페이지를 리로드한다면 지금까지 내려서 보던 피드 스크롤이 날아갈 것이고, 페이지를 렌더링하는 데 필요한 파일들 역시 다시 다운로드 받아야 하는 낭비가 생긴다. 하지만 React는 DOM 트리를 항상 주시하고 있으며, 그중 변화가 생긴 부분만 새로 렌더링한다. 그렇기 때문에 더욱 빠르고 사용자 경험에 능하다고 볼 수 있다. 그리고 React는 클래스마냥 웹페이지를 구성하는 각 요소(nav바, 친구목록, 알림창 등)의 구조를 따로 정의해놓는다. 이때 각 요소들은 별..
2020.05.18 -
[Mongoose] 특정 필드만 Read하기
모델이름.find({"필드이름": {$ne: null}}, function (err, result) { if (err) { console.log(err); } else { if (result) { res.render("ejs파일이름", {ejs에서불러올키값: result}); } } }) 위 코드를 .get() 라우트 내에서 처리하면 된다. {$ne: null}은 해당 필드이름 중 null이 아닌 것을 가져오는 쿼리이다.
2020.05.18 -
[http] Callback
콜백함수란 어떤 함수 자체가 하나의 값으로서 상위 함수의 인자가 되는 것이다. 여기서 상위 함수를 고차함수라고 하며, 고차함수가 먼저 실행된 뒤에 그 안에 있는 콜백함수가 실행된다. http 통신에서 콜백함수가 많이 쓰이는 이유는, 통신분야 특성상 여러 대의 컴퓨터가 정보를 서로 주고받는 과정에서는 시간이 소요되고 에러의 위험이 있기 때문에, 짜여진 코드처럼 순서대로 착착 맞아떨어질 수가 없다. 만약 그냥 초보적인 수준으로 function(){}만을 사용한다면 통신을 담당하는 코드가 서버에서 자료를 온전히 불러오기도 전에 다음 코드로 진행하기 때문에 나의 웹서비스는 에러만을 출력할 것이다. 하지만 콜백을 사용하면 일반적으로 화면을 렌더링하는 등 즉각 필요한 코드들은 Stack에서 모두 실행시키고 빼버린 ..
2020.05.18