TIL(Today I Learned)

런타임이란 프로그래밍 언어가 구동되는 환경을 의미어떤 프로그래밍 언어가 동작할 수 있는 프로그램Javascript 런타임브라우저Node.js즉, 런타임이란 프로그래밍이 돌아가는 환경, Node는 Javascript 런타임NVM은 Node Version Manager의

1)의도한 대로 동작하는가 2)결함이나 문제가 없는가 3)읽기 쉽고, 유지 및 확장하기 용이한가Testing ToolEnd to end testIntegration testUnit testJest는 자바스크립트로 작성한 코드를 테스트 하기 위한 프레임워크임기초적인 사용

var 키워드에서 가능let, const 키워드에 경우에는 'ReferenceError' 가 발생함수의 Prameter에 기본값을 줄 수 있음arguments와 같이 유사배열이 아닌 배열형태(\* 배열 메소드 활용가능)

OOP(Object Oriented Programming)란 '객체지향프로그래밍' 이라고 하며 컴퓨터 프로그래밍 디자인의 철학(또는 패러다임) 중 하나임OOP에서는 객체를 중심으로 프로그래밍이 이루어며, 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론임OOP는 구성으

스택(stack)이란 자료의 입력과 출력이 한 곳에서만 이루어지는 형태의 자료구조스택을 표현하는 대표적인 예로는 프링글스라고 할 수 있는데 위에 있는 과자를 먼저 먹어야만 아래의 있는 과자를 꺼낼 수 있음이를 FILO(First In Last Out)이라고 하며 자바스

오승환님의 Javascript 프로토타입 이해하기를 바탕으로 재구성하였습니다.Link자바스크립트는 프로토타입 기반의 언어라고 불림자바스크립트는 객체지향언어이지만 객체지향언어에서 중요한 클래스(Class)라는 개념이 없음대신 프로토타입(Prototype)이라는 것이 존재

'Linked List' 란 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 형태의 자료구조연결 리스트(Linked List)는 데이터를 담고 있는 노드들이 연결되어 있고, 노드의 포인터가 다음이나 이전의 노드와의 연결을 담당함연결 리스트는 노드의 중간점에서

함수의 파라미터에서 사용

복잡도 분석이란, 알고리즘이 문제 해결을 위한 시간과 공간을 어람나 차지하는지를 분석함복잡도 분석의 중요성: 알고리즘이 얼마나 효울적인지 알 수 있음프로그래밍 인터뷰에서 중요성이 강조되고 있음모든 숫자 비교: n2 => O(n²)가장 큰 수와 작은수를 확인하여 비교:

1. Subclassing prototype: 모델의 청사진을 만들 떄 쓰는 original form constructor: 인스턴스가 초기화될 때 실행하는 생성자 함수 this: 함수가 실행될 때, scope마다 생성되는 고유한 실행 컨텍스트 new

참고자료 https://poiemaweb.com/js-prototype#42-%EC%83%9D%EC%84%B1%EC%9E%90-%ED%95%A8%EC%88%98%EB%A1%9C-%EC%83%9D%EC%84%B1%EB%90%9C-%EA%B0%9D%EC%B2%B4%EC%9D%98-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%...

N-Queens는 체스의 Queens의 특성을 이용하여 백트래킹 개념을 학습하는데 이용되는 대표적인 알고리즘이다.문제의 목표는 n \* n 크기의 체스판에서 각각의 Queen이 서로를 공격하지 않는 위치에 말을 위치시키는 것이다.이러한 Queen의 특성을 이용하여 풀어

컴퓨터는 2진수만 이해할 수 있음그러면 어떻게 우리가 작성한 코드를 컴퓨터는 이해할 수 있는가 그것은 브라우저 덕분이다. 웹브라우저란HTML로 작성된 웹페이지를 볼 수 있도록 해주는 응용 소프트웨어다.(크롬, IE 등)브라우저 사용자가 선택한 자원을 서버에게 요청하여

자바스크립트는 동기적으로 실행되는 네트워크 요청이 콜스택을 블로킹하기 때문에 브라우저는 다른 일을 동시에 할 수 없음이를 극복하기 위한 해결책으로 비동기 콜백을 이용SetTimeout() 함수의 비동기 처리는 자바스크립트의 콜 스택에서 사라졌다가 콜 스택이 비어지면 다

JSX란? Javascript XML 내장형 XML이라 HTML과 유사하게 정의된 구문을 사용 JavaScript 언어의 확장 JSX는 많은 개발자에게 친숙한 구문을 사용하여, 요소(구성요소)의 렌더링 구조를 지정하는 방법을 제공함 구성요소는 순수한 JavaScrip

Promises솔로 스프린트파일에 내용을 읽어서 그 내용을 바탕으로 다른 곳에 http요청을 보내고 응답을 다른 파일에 기록하는 스프린트Article Collectorpair 스프린트원하는 블로그 글을 긁어와서 파일에 저장하는 프로그램을 만드는 스프린트목표Promise

자바스크립트 대표적 비동기 로직: http의 요청/응답, 파일을 읽고 쓰는 파일 입/출력 등비동기로 처리되는 작업들은 흐름을 예측하기 어려움 => 예측하기 쉬운 흐름으로 만드는게 비동기 처리! (콜백, 프로미스, 에이싱크 어웨잇)스프린트 폴더의 example 간단한 예

Query문 사용스키마 설계와 더 나은 방향성 찾기SQL: Structure Query Language(구조화 된 Query 언어)Query: 직역하면 질의문 이라는 의미저장되어 있는 정보를 필터하기 위한 질문결국 SQL이란 데이터베이스 용 프로그래밍 언어, 데이터베이

서비스를 만들 때 가장 먼저 해야하는 일은 어떤 데이터가 필요한지 파악하고 데이터 간의 상관관계를 정의하는 것이 중요하다.스키마란 데이터베이스의 청사진이다.데이터베이스는 각각의 테이블이 있고 그 안의 열들을 필드라고 부른다. 그리고 그 열들의 값을 레코드라고 한다.관계

Object-Relational Mapping오브젝트 <-> ORM <-> Relational DatabaseORM을 이용하여 객체의 형태로 데이터베이스에 객체를 삽입, 수정 등이 가능하다.자바스크립트의 객체와 데이터베이스의 테이블의 형태는 서로 다르기 때문

클라이언트에서 서버에 정보요청 한다고 서버가 아무런 확인 없이 데이터를 건내주면 보안상의 이슈가 있을 것이다.그래서 클라인트가 비밀번호를 같이 넣어서 서버에 요청하면 서버는 디비에게 요청데이터와 비밀번호를 확인해서 정상적일 경우 데이터를 건내주는 방식이 필요하다.하지만

Hooks는 Sequelize가 실행되기 전후에 호출되는 함수이다. 예를 들어 항상 모델에 저장하기 전에 값을 설정하고 싶다면 beforeUpdate hook를 사용하면 된다.Note: 인스턴스에는 Hook를 사용할 수 없다. 오직 모델에서 사용된다.Hooks 오퍼레이

리액트로 만든 클라이언트를 webpack을 이용한 정적인 파일로 만든다.리액트는 다음 커맨드를 이용하여 만들 수 있다.AWS Management Console에서 s3 서비스로 접속한 뒤 버킷을 만든다.만든 버킷의 속성에서 정적 웹사이트 호스팅 설정권한에서 퍼블릭 엑세

분리된 작업 영역이며 사본이라고 생각하면 좋음(원본에 영향이 없음)각각의 브랜치는 독립된 작업 영역여러명이 하나의 프로젝트를 작업할 때, 하나의 코드로 작업할 수 없기 때문이다.각자 자신의 브랜치에서 서로에게 영향을 주지 않고 기능을 개발할 수 있다.새로운 것을 시도해

function 컴포넌트는 뭔가를 리턴하고 스크린에 표시되지만 class 컴포넌트는 react 컴포넌트로부터 확장되고 스크린에 표시된다.react는 자동적으로 class 컴포넌트의 렌더 메서드를 실행된다.클래스 컴포넌트를 쓰는 이유는 state를 쓰기 위해서다.stat

TR;DR require()는 module.export를 반환한다. exports는 module.exports를 refer하고 있으며, shortcut에 불과하다. Q1. exports로 x를 30으로 재할당하기 때문에 require()는 30을 반환하게 된다.

클로저(closure)란, 외부 함수에 접근할 수 있는 내부 함수 혹은 이러한 원리를 일컫는 용어인데 스코프에 따라서 내부함수의 범위에서는 외부 함수 범위에 있는 변수에 접근이 가능하지만 그 반대는 실현이 불가능하다는 개념이다.특징으로는 외부함수는 외부함수의 지역변수를

JavaScript에서 this란 무엇인가? this는 함수를 실행할 때 그 실행 context를 설명하는 현재 실행 문맥이다. this는 크게 아래와 같이 다섯가지의 종류로 구분할 수 있다. 첫 번째와 두 번째는 유사한 개념이므로 같이 묶도록 하겠다. 전역 스코프와

JavaScript의 '같다'에는 '=='와 '===' 두 종류가 있다. 동등 연산자 '==' > 동등 연산자는 두 피연산자의 자료형이 같지 않은 경우 같아지도록 변환한 후, 엄격 비교를 수행합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보고 있는지 판별합니다. 출처: MDN | 좌우의 타입...

var는 변수의 재할당을 허용하지만, let은 허용하지 않는다.아래의 예제 코드를 통해 조금 더 자세히 확인해 보면...'b'가 이미 선언되어 있다고 문법에러를 보여준다. 🙀 따라서 let을 사용하는 편이 같은 이름의 변수를 무심코 사용해 버린다던가, 변수가 예상 외

함수 호출과 관련하여 지금까지 자주 쓰이지는 않았지만, 반드시 알아야 할 개념이 있다. 바로 call / apply / bind을 이용한 함수 호출 방법이다.자바스크립트에서 함수를 호출하는 방법에는 먼저, 가장 일반적이고 빈번히 사용되는 함수 뒤에 ()를 붙여 호출하는

자바스크립트에서 객체 복사는 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)로 나뉜다.spread 방식이나 Object.assign 등으로 객체가 지닌 키, 밸류만을 얕게 복사하는 방법이다. 원본 객체와 다른 주소를 바라보기 때문에 값이 변동될 때

null, undefined는 둘 다 변수에 값이 없는 것을 나타내지만, 둘의 의미는 꽤 다르다.null은 NULL의 심볼이며, 의도를 갖고 변수에 null을 할당하여 값이 없다는 것을 나타낸다. null이 할당된 변수의 타입을 확인해 보면 object인걸 확인할 수

함수의 형태를 갖고 있지만, 특정한 이름을 갖고 있지 않는 함수이다.함수를 만드는 일반적은 방식으로 익명 함수와 다르게 특정한 이름을 갖고 있는 함수이다.가장 큰 차이로는 호출 순서의 차이를 말할 수 있다. 예를 들어 'foo' 라는 함수를 먼저 호출하고 난 뒤에 fo

브라우저에 정보를 저장할 수 있는 아래 세 방식의 차이점에 대해서 간단하게 정리하고자 한다.CookielocalStoragesessionStorageCookie의 용량은 4KB로 다른 두 방식에 비해 굉장히 적다. 그리고 HTTP 요청으로 헤더에 담아 브라우저에서 서버

리퀘스트 시, 클라이언트 측에서 모든 렌더링을 한다. (CSR)리퀘스트 시, 서버 측에서 최소한의 렌더링을 하고(퍼스트 뷰), 그 이후에는 클라이언트에서 렌더링한다. (SSR + CSR)JS의 빌드 시에 서버 측에서 최소한의 렌더링을 하고 정적 파일을 생성한 후, 리퀘

오리진(origin) 이라는 단어가 괜히 CORS를 이해하는데 방해가 되는 느낌이 들기에 간단히 정리하고자 한다. 오리진과 비슷한 개념으로는 도메인(domain)이 있다. 둘 사이의 구체적인 예로는 아래와 같다.도메인(domain): naver.com오리진(origin

전편에 이어 CORS에 대해 조금 더 알아보고자 한다.먼저, 클라이언트 측에서는 특별히 할 게 없다. 별도의 오리진으로의 요청은 아래와 같이 'Origin' 이라는 필드를 추가하면 된다.Fetch API에서는 'cors mode'을 설정할 필요가 있다.다음, 서버 측에

CSRF는 크로스 사이트 리퀘스트 변조라고 하며, 한 문장으로 정리하면 '웹 어플리케이션 유저인 자신이 의도하지 않은 처리가 실행되는 취약성 또는 공격수법' 이라고 할 수 있다.즉, 사용자가 자신의 의지와는 무관하게 공격자의 의도한 행위를 특정 웹사이트에 요청하게 하는

먼저, XSS란 '유저가 웹 페이지에 접속하는 것으로 올바르지 않은 스크립트가 실행되는 취약점 또는 공격방법' 을 말한다.사이트 간 스크립팅으로 웹 앱에서 많이 나타나는 취약점의 하나이며, 웹 사이트의 관리자가 아닌 일반 유저가 웹 페이지에 악성 스크립트를 삽입할 수

먼저, 간단히 정리하자면 MVC란 Model, View, Controller의 약자로 각각의 역할을 나누어서 코딩을 하는 모델(패턴)이다.MVC 각각의 역할은 아래와 같다.Model: 시스템의 비즈니스 로직을 담당한다.View: 화면의 표시, 입력 등의 처리를 한다.C

단일 페이지로 구성된 웹 어플리케이션을 말한다. SPA는 화면이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않고(서버사이드 렌더링 X), 필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다.기존 어플리케이션은 화면이동 시에 화면 이동에

AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. 출처: https://developer.mozill

Ajax와 비동기 통신의 구현하기 위해 필요한 기술들을 간단히 정리하고자 한다.XMLHttpRequestJavaScriptDOMXMLAjax 비동기 통신을 위해서는 위 네 가지의 기술들을 이용해야 구현이 가능하다.XMLHttpRequest(XHR) 객체는 서버와 상호작

CSS를 공부하던 중에 Sass라는 것을 알게되어, 사용에 앞서 개념적으로 공부해 볼려고 한다.Sass는 'Syntactically Awesome StyleSheet' 의 약자이다. 직역하자면 '구문적으로 쩌는 스타일시트' 라고 한다.이름이 멋있어서 Sass에 대해 조

먼저, CSS에서 폰트 사이즈를 설정하는 방법은 두 가지가 존재한다.절대치: 10px이라면 무조건 10px상대치: 부모 요소의 사이즈에 의해 가변px는 폰트 사이즈의 절대치를 설정하는 단위이다.em은 부모 요소의 폰트 사이즈를 기반으로 크기를 설정한다.em과 같이 부모

확장자란 파일의 종류를 식별하기 위한 문자열이다. 이미지나 텍스트를 저장했을 때, 파일명의 우측에 표시되는 '.jpeg'나 '.txt' 등의 문자열이 그것이다.이 확장자에 따라 파일을 열 수 있는 어플리케이션이 달라진다. 예를 들어 '.xlsx'는 엑셀, '.doc'는

앞에 이어 이미지 파일 확장자의 특징을 알아보고, 특징에 따라 웹에서 어떻게 사용해야 하는지에 간단히 알아보도록 하겠다.각 이미지 파일 확장자들의 사용빈도는 JPEG와 PNG가 가장 많이 이용된다고 한다. 그러면 각 확장자별로 어떤 특징들이 있는지 아래의 표로 정리하였

유니코드(Unicode)는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이며, 유니코드 협회(Unicode Consortium)가 제정한다. 이 표준에는 ISO 10646 문자 집합, 문자 인코딩, 문자 정보 데이터베이스, 문자들

앞에서 아스키 코드와 유니 코드에 대해 공부하던 중 어디선가 자주 본 UTF-8에 대해 궁금증이 생겨 조금 더 알아보았다.UTF-8은 유니코드의 여러 방식 중 하나이다. UTF-8 외에도 16, 32 등이 존재한다.UTF-8은 하나의 문자를 나타내기 위해 1바이트에서

지금까지 두 번의 프로젝트를 진행하면서 모두 백엔드 위주로 프로젝트를 진행하였다. 왜냐하면 클라이언트가 요청하는 사항을 내가 구축한 서버가 제대로 서비스를 제공하는 것이 너무 재밌었기 때문이다.하지만 웹 서버라는게 단순히 '유저가 브라우저를 통해 발생시키는 이벤트를 클

웹에서 클라이언트와 서버 간에 요청/응답 프로세스를 가능하게 해주는 것이 HTTP를 이용한 방법이다. 그래서 오늘은 HTTP에 대해 공부해 보고자 한다. HTTP 란? HTTP는 'HyperText Transfer Protocol'의 약자이며, 한국어로는 초본문전송규

앞서 HTTP에 대해 공부하였는데 그 예시로 https://naver.com과 같이 'URL'을 언급하였다. 그래서 URL에 대해 개념을 확립하기 위해 정리하도록 하겠다.URL은 'Uniform Resource Locator'의 줄임말로 인터넷 상의 콘텐츠를

HTTP 메소드는 클라이언트가 하고 싶은 처리를 서버에게 전하는 역할을 한다.메소드는 총 8개가 존재하며 아래와 같다.GET: 서버로 부터 데이터를 취득POST: 서버에 데이터를 추가, 작성 등PUT: 서버의 데이터를 갱신, 작성 등DELETE: 서버의 데이터를 삭제H

웹 개발에 있어서 클라이언트의 요청에 문제가 있을 때, 서버에서 클라이언트에게 어떤 에러 응답을 보여줄 것인지는 매우 중요한 부분이라고 생각한다.그래서 에러처리와 관련하여 조사하던 중 발견한 qiita의 'WebAPIでエラーをどう表現すべき？15のサービスを調査してみた'을

각 서비스들의 API가 제공하고 있는 정보를 표에 정리하였다.이번에 조사한 범위에서는 모든 서비스가 사람이 읽고 이해할 수 있는 형식의 메세지를 반드시 에러에 포함시키고 있었다.에러 코드는 프로그램이 그 에러를 다루기 쉽도록 int 또는 string이었다. 또한 에러

그 동안 Node를 이용하여 웹 서버를 구축할 때, npm에 공유되어 있는 많은 모듈들을 받아서 쓸려면 당연히(?) require를 통해 코드를 가져와야 한다 라고 막연히 생각하고 있었다.그래서 require는 뭔지 import는 뭔지 궁금증이 생겨, 먼저 Requi

React를 공부하다 보면 Hooks라는 말을 자주 접하게 된다. 그래서 Hooks에 대해 공부해 보고자 한다. React Hook란? React Hook은 React 16.8 버전에서 새롭게 추가된 리액트 라이브러리 사용방법이다. 기존에 클래스를 통해 컴포넌트의 state를 관리하였는데, Hook를 통해 함수형 컴포넌트에서도 스테이트를 관리할 수 있게...

앞서 useState(), useEffect()에 대해 알아보았다. 그렇다면 기본적으로 제공되는 두 Hook을 이용하여 인풋창에 문자열을 입력하고 버튼을 누르면 타이틀이 변경되는 Custom Hook을 만들어 보도록 하겠다. 참고로 노마드코더의 '실전형 리액트 Hooks 10개' 강의를 보고 참고하였다. 소스코드 먼저, Custom Hook을 따로 만들...

개인 프로젝트를 웹으로 진행하면서 리액트 앱의 라우팅이 필요한 상황이 있어 react-router-dom 라이브러리를 추가로 설치하여 사용하고 있다.react-router-dom을 사용하면 빠질 수 없는 history에 대해 정리하고자 한다.리액트에서 페이지를 이동할

WDMA 프로젝트에서 리액트를 진행하면서, 각 컴포넌트마다 상태를 관리하지 않고 Redux(리덕스)를 이용한 일원적 상태관리 체계를 구상하였다. 리덕스를 사용하는 것은 이번이 처음이므로 리덕스의 용어와 기초적인 개념을 먼저 정리하고자 한다.리덕스는 리액트만을 위한 상태

HTML을 브라우저에 표시할 때, 크게 2단계로 나뉜다각 HTML의 요소를 파싱하고, 각 요소가 차지하는 공간 산출하기 (Reflow)산출한 공간에 요소의 내용을 그리기 (Repaint)Reflow는 브라우저에 표시에 해야하는 요소의 배치가 바뀌는 등의 이유로 발생한다

Semantic Element란? Semantic은 사전적으로 '의미론적' 이라는 의미를 갖고 있다. 그래서 Semactic Element란 목적에 따라 어떤 특별한 의미가 부여된 엘리먼트 임을 알 수 있다. HTML5에서는 다양한 시맨틱 엘리먼트를 사용할 수 있도

HTML5의 주요 Semantic Tag HTML 페이지의 레이아웃 구성하는 주요 시맨틱 태그에 대해 정리하고자 한다. 1. article > https://developer.mozilla.org/ko/docs/Web/HTML/Element/article 독립적으로 배부 가능한 것으로 구체적으로는 블로그나 뉴스의 기사 같은 파트를 나타낸다. 그 자체만으...

IFNULL(A, B)를 이용하여 A가 NULL이면 B를 사용하는 방식으로 처리함 쿼리문 출처 https://programmers.co.kr/learn/courses/30/lessons/59410

COUNT()를 이용하여 모든 결과값의 갯수를 카운팅함 쿼리문 출처 https://programmers.co.kr/learn/courses/30/lessons/59410

grapql은 REST API의 비효율적인 fetching을 해결하고자 만들어진 API Query Language(질의어) 이다. > GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a ...

Interface와 Type는 사용상에 있어서 닮은 점이 많아 정리하고자 한다. 상속 방법 Interface와 Type 둘 다 상속할 수 있지만 방식이 조금 다르다. Interface Type Interface가 Type을 상속 참고 자료 https://typescript-kr.github.io/ https://stackoverflow.com/qu...

리액트와 그래프큐엘을 이용하여 프로젝트를 진행하면서 배열 내 요소들을 반복적으로 페칭을 할 때가 있다.이 때, 조금 더 효율적인 방법을 고려하다가 Promise.all을 이용하여 반복적으로 페칭하는 방법을 사용해 봤다.Promise.all() 메서드는 순회 가능한 객체

아래 글은 'いまさらだけどGitを基本から分かりやすくまとめてみた'을 번역하여 정리한 글입니다.출처: https://qiita.com/gold-kou/items/7f6a3b46e2781b0dd4a0Git is a free and open source distrib

아래 글은 'いまさらだけどGitを基本から分かりやすくまとめてみた'을 번역하여 정리한 글입니다.출처: https://qiita.com/gold-kou/items/7f6a3b46e2781b0dd4a0HEAD의 위치를 변경3종류의 옵션(--soft, --mixed,

출력하기 위해 print() 함수 사용파이썬은 블록 스코프를 만들기 위해 중괄호가 아닌 띄어쓰기를 사용파이썬은 완전히 객체 지향적이고 정적 타입의 언어가 아님변수를 명백하게 할 필요가 없음모든 변수는 객체숫자 타입의 경우 integers와 floating point n

결정 = 비교 + 선택비교가 쉽지 않을 때 결정을 내리기 어려움비교를 기계에게 학습시켜 결정하기 쉽게 도와주는 것손톱을 깨무는 습관을 고치고 싶을 때, 손톱을 꺠무는 사진과 깨물지 않는 사진을 학습시켜 알려주는건 어떨까?teachablemachine.withgoogle