CodeStates55

• 

  [알고리즘] 시간복잡도 (빅오표기법) 시간 복잡도(Time Complexity) 시간 복잡도 표기법 Big-O(빅-오) : 최악의 경우를 고려 Big-Ω(빅-오메가) : 최선의 경우를 고려 Big-θ(빅-세타) : 중간(평균) 알고리즘이란 문제를 해결하는 최선의 선택 효율적인 방법을 고민한다는 것은 시간 복잡도를 고민한다는 것과 같은 말 입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 얼마만큼 걸리는가를 의미 효율적인 알고리즘 구현 : 입력값이 커짐에 따라 증가하는 시간의 비율을 최소화한 알고리즘 구성 시간 복잡도는 주로 빅-오 표기법을 사용해서 표기 1. Big-O 표기법 최악의 경우를 고려하므로, 프로그램이 실행되는 과정에서 소요되는 최악의 시간까지 고려할 수 있음 최소한 특정 시간 이상이 걸린다 혹은 이 정도 시간이 .. CodeStates/JavaScript 2022. 4. 21.

• 

  [CSS] HTML 셀렉터의 종류 1. 셀렉터 h1 {} div {} 모든 h1을 선택 모든 div를 선택 2. 전체 셀렉터 * {} 모든 엘리먼트를 선택 3. Tag 셀렉터 section, h1 {} 쉼표(,)는 section과 h1를 다중으로 선택 4. id 셀렉터 #only {} #label.center {} id가 only인 엘리먼트를 선택 id가 label이면서 동시에 class가 center인 엘리먼트를 선택 5. class 셀렉터 .center {} .show#only {} class가 center인 엘리먼트를 선택 class가 show이면서 동시에 id가 only인 엘리먼트를 선택 6. attribute 셀렉터 a[href] {} p[id="only"] {} a 엘리먼트 중에서, href 속성을 갖는 모든 엘리먼트를 선택 .. CodeStates/React 2022. 4. 16.

• 

  [배포] 클라이언트 빌드와 배포 클라이언트 빌드 SSR과 CSR 차이 : 서버에 데이터를 요청했을 때 html파일이 어디서 조작되는가 브라우저의 작동 원리 참고 1. SSR const express = require('express') const app = express() const username = db.findOne({where: {id: 1}} app.get('/', function (req, res) { res.status(200).send(username) }) 장점 : 초기 랜딩 속도가 빠르며 검색 엔진 최적화(SEO)가 가능 웹 사이트가 검색 결과에 더 잘보이도록 최적화하는 과정 단점 : 페이지를 요청할 때마다 새로고침이되며, 요청이 많아지면 서버에 부담 2. CSR function Userinfo (prop) { co.. CodeStates/React 2022. 4. 12.

• 

  [Redux] 상태 관리 라이브러리 프론트엔드 개발에서 상태의 중요성 1. 상태 상태 : UI에 동적으로 표현될 데이터 로컬 상태 : 특정 컴포넌트 안에서만 관리되는 상태 *다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터 : input box, select box 등과 같이 입력값을 받는 경우 전역 상태 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 *다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태 : 데이터 로딩 여부(로딩중), 다크모드, 국제화(Globalization) 설정 등 2. 데이터 무결성 전역 상태에서의 데이터 무결성 : 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것 무결성을 위한 방법론 : Single s.. CodeStates/React 2022. 4. 11.

• 

  [React] 컴포넌트 디자인 및 구분 CDD(Component Driven Development) 페이지 단위로 UI 개발이 이루어지는 것과는 반대로 UI 컴포넌트들부터 만들고 이를 기반으로 페이지를 구성 재사용할 수 있는 UI 컴포넌트로 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식 Storybook Component Driven Development를 지원하는 도구인 Component Explorer(컴포넌트 탐색기) 중 하나 예시 : BBC, UN Storybook 장점 각각의 컴포넌트들을 따로 볼 수 있게 구성해 한 번에 하나의 컴포넌트에서 작업 가능 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발 가능 재사용성을 확대하기 위해 컴포넌.. CodeStates/React 2022. 4. 4.

• 

  [Server] Express를 이용한 서버 구현 Express로 서버 구현하기 Express로 구현한 서버와 http 모듈로 작성한 서버의 차이 미들웨어 추가가 편리 자체 라우터를 제공 1. MERN stack JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, Node를 지칭 Express.js : Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 프레임워크로 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 2. Express 설치 npm install express --save : myapp 디렉토리에 Express를 설치한 후 종속 항목 목록에 저장 npm install express : Express를 임시로 설치하고 종속 항목 목록에 추가하지 않으려면 --sa.. CodeStates/Express 2022. 4. 4.

• 

  [Server] node.js를 이용한 서버 구현 Server 실행하기 node server/basic-server.js 서버 파일의 경로 server/basic-server.js를 입력하여 서버 실행 서버 코드를 수정할 때마다 저장 및 재실행 필요 nodedemon : 서버를 매번 다시 실행시킬 필요 없음 nodedemon 1. 설치하기 sudo npm install -g nodemon npm install -g nodemon을 입력했는데 에러가 발생할 경우 sudo로 다운로드 2. 실행하기 nodemon server/basic-server.js 서버 파일의 경로 server/basic-server.js를 입력하여 서버 실행 3. npm start로 실행하기 "start": "nodemon server/basic-server.js" package.js.. CodeStates/Node.js 2022. 4. 4.

• 

  [React] 데이터 흐름의 이해와 비동기 요청 처리 React 데이터 흐름 React의 개발 방식 : 한가지 일만 하는 컴포넌트 단위로 시작(컴포넌트를 먼저 만들고 조립) *단일 책임 원칙, 상향식(bottom-up) 1. 단방향 데이터 흐름(one-way data flow) 데이터의 흐름 : 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받음 하향식(top-down) : 데이터를 전달하는 주체는 부모 컴포넌트 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못함 2. 역방향 데이터 흐름 추가하기 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 경우 존재 State 끌어올리기(Lifting state up) : 상태를 변경시키는 함수(handle.. CodeStates/React 2022. 4. 4.

• 

  [Server] REST API & Postman REST(Representational State Transfer) API REST API : HTTP API를 만드는 방법론으로 웹(http)의 장점을 최대한 활용할 수 있는 API의 대표적인 아키텍처 Architecture(아키텍처) : 컴퓨터 시스템의 하드웨어 구조로 컴퓨터 시스템을 구성하고 있는 하드웨어 장치인 CPU, 레지스터, 기억장치, 입출력 장치 등과 같은 여러 가지 컴퓨터 구성 요소들에 대한 전반적인 기계적 구조와 이를 설계하는 방법 웹에서 사용되는 모든 자원을 HTTP URI로 표현하고, HTTP Method를 통해 요청과 응답을 정의하는 방식 REST 구성 자원(Resource) - URI 행위(Verb) - HTTP Method 표현(Representations) REST의 특징 1.. CodeStates/Node.js 2022. 4. 4.

• 

  [Server] 브라우저 작동원리 보이지 않은 곳 (URL & URI) 1. URI(Uniform Resource Identifier) http://www.google.com:80/search?q=JavaScript URI : URL, URN을 포함하는 상위개념 일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더해 query, bookmark를 포함 2. URL(Uniform Resource Locator) file://127.0.0.1/Users/username/Desktop/ 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냄 슬래시(/)를 이용해 서버의 폴더에 진입하거나 파일 요청 가능하지만 보안상 외부에서 직접 접근이 가능한 경우는 거의 없음 구성 : scheme, hosts.. CodeStates/Node.js 2022. 3. 27.

• 

  [Server] HTTP를 이용한 클라이언트-서버 아키텍처 Client-Server Architcture 클라이언트 & 서버 리소스가 존재하는 서버와 리소스를 사용하는 앱을 분리한 것 (2-Tier Archiecture) 클라이언트 : 리소스를 사용하는 앱으로 (서버에) 리소스를 요청할 수 있음 서버 : 클라이언트의 요청에 따라 리소스를 제공하는 곳으로 요청이 선행되어야함 데이터베이스 : 리소스를 저장하는 공간을 따로 마련해두는 경우도 있음 (3-Tier Architecture) 일반적으로 서버는 리소스를 전달해주는 역할만 담당 클라이언트와 서버의 종류 클라이언트 : 플랫폼에 따른 구분 웹(Wab) 플랫폼 : 브라우저를 통해 주로 이용하는 웹에서의 클라이언트는 웹사이트 또는 웹 앱 스마트폰/태블릿 플랫폼 : iOS나 안드로이드와 같은 스마트폰/태블릿에서 이용하는.. CodeStates/Node.js 2022. 3. 26.

• 

  [Node.js] 비동기 흐름 동기와 비동기 synchronous & asynchronous 동기적(synchronous) : 시작 시점과 완료 시점이 같은 상황으로 자바스크립트는 synchronous *코드가 나타나는 순서에 따라 시행되며 요청에 대한 결과가 나올 때 까지 기다림 비동기적(asynchronous) : 요청에 대한 결과가 나올 때까지 기다리지 않음(continue working) *콜백 함수를 많이 활용 blocking & non-blocking blocking : 요청에 대한 결과가 동시에 일어남 (하나의 작업이 끝날 때까지, 이어지는 작업을 "막는 것"을 blocking이라고 함) *전화처럼 하던 일을 멈춰야 함 non-blocking : 요청에 대한 결과가 동시에 일어나지 않음 *문자처럼 나중에 확인할 수 있음 .. CodeStates/JavaScript 2022. 3. 26.