TIL

변수 선언하기 ⭐️함수 선언 ⭐️⭐️: 값을 변수에 할당/대입하는것, 한번만 선언할 수 있음.함수 선언식함수 표현식이렇게 두가지 방법으로 함수 선언가능.\*\*\*궁금한점 1\. 함수선언을 배울때, 처음에 parameter(매개변수)를 배웠다. 그런데 이

: if 절이 트루면 블록값을 가지고, 펄스면 가지지않음: 문자로 이루어진 것

EX) 자바스크립트 숫자 절대값EX) How to covert string in js : 코드 입력하다가 얻은 오류를 고대로 구글링 !: 같거나 비슷한 코드를 여러번 실행시켜야 할 경우 사용하는 구문:반복할 조건을 ()안에 초기화, 조건식, 증감문 순으로 입력Ex):반

: 여러가지의 정보를 한곳에 담아두는곳. 배열처럼 여러정보를 한번에 담는 다는 공통점이 있다. 그러나 객체는 여러가지는 타입(문자열,숫자,배열,함수 등)을 저장가능하다. 객체가 배열보다 더 큰 집합이라고 이해하면 좋을것 같다.:KEY값을 하나 하나 불러올때 사용 코플릿

요구사항이 하나 이상인 문제를 여러개로 쪼개서 생각할 수 있다.문제를 일상적인 문장으로 표현할 수 있다. (해당 위치에 바르게 주석을 적을 수 있다.)잘게 쪼갠 특정 문제가 이미 배운 JavaScript의 어떤 개념과 연관되는지 생각해낼 수 있다.이를 통해 얻을 수 있

오늘은 새로 배운것이 없다. 저번주 금요일날 페어님과 같이 풀지 못했던 알고리즘 코플릿 문제를 아침부터 8시간동안 같이 풀었지만...14문제 밖에 풀지 못했다. 알고리즘 참 어렵다. 결국 수학 잘하는 사람들이 문제를 풀기에 아주 좋을것이다. 그래도 앉아서 같이 문

CLI란 : CLI 는 Command Line Interface의 약자다. 커맨드라인(코드)로 하는 인터렉션이다. 쉬운 예로 GUI 는 그래픽 유저 인터페이스, 눈에 보이는것으로 인터렉션을 한다는것을 생각해보면 코드 한줄로 상호작용한다고 보면 될 거 같다. 직관적인것

: 한국어로 '범위'라고 한다. 코드에서 범위란 코드들이 활용되어 질 수 있는 범위를 뜻한다. 코드를 작성하면 자동적으로 범위가 정해진다. 이 범위가 자동적으로 작성되어질때, 큰 역할을 하는것은 선언할때 씌여지는 let, const 그리고 var가 있다. 이 3가지를

객체지향(Object Oriented) : 하나의 모델이 되는 청사진(Blueprint)를 만들고( = Class ), 이 청사진을 바탕으로 여러 객체(Object)를 만드는 프로그래밍 패턴( = Instance ) 클래스(Class)를 만드는 방법 in ES5 >

: HTML란 HyperText Markup Language의 약자이다. 쉽게 말해 웹 페이지의 틀을 만드는 마크업 언어라고 볼 수 있다.마크업 언어이란 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어HTML은 수 많은 'Tag의 집합들' 로 이루어져 있다.

: DOM 이란 Document Object model이라는 약자다. 여기서 Document를 HTML이라고 생각해도 좋을것같다. 즉 HTML 형태의 객체 모델이라고 생각하면 좋겠다. 이 DOM을 사용하여 HTML을 Manipulate 할 수 있다. 대표적으로 CRUD

: 어제 배운 DOM을 사용하여, 로그인할때, 아이디는 몇글자, 비밀번호는 몇자에 특수문자 몇개를 적어야한다는 문자를 보여주는것처럼 버튼을 클릭했을 때, (혹은 실시간으로) 그 입력값이 유효한지 아닌지 판단하는것을 유효성 검사(form validation)라고 한다.이

고차함수를 배우기전에 자바 스크립트에는 퍼스트-클래스 객체(first-class citizen)가 존재한다. 여기서 우리가 배우려는 고차함수가 이에 해당한다고 말할 수 있다. 퍼스트-클래스란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리

Underbar는 배열, 객체를 다루는 라이브러리이다. Underbar의 모티브가 되는 라이브러리로는 <a href = http://underscorejs.org/언더바과제를 공부하면서 어려웠던 부분은 \_.each와 reduce...(아직도 어렵다...

: 비동기 호출이란, 간단하게 말하면 실행했을때, 즉시 실행되는것이 아닌 필요할때 실행되어진다고 말할 수 있다. 예를 들어, 음식을 주문하는것과 같다. 음식을 주문하면, 몇분 후에 음식을 받는것과 같다.비동기 호출의 사례들DOM Element의 이벤트 핸들러 (마우스

: 한 함수가 자기 자신을 함수 내부에서 실행시켜 원하는 값을 얻을때 까지 반복하는 함수. 반복문을 사용하지않고, 코드를 간결하게 작성할 수 있다는 장점을 가지고 있다. 그러나 이때 주의 사항은 항상 먼저 탈출 할 수 있는 base case를 먼저 작성하고, 나머지를

오랜만에 TIL 이다. 어제 찝찝함에 대해 적고 나서 내가 뭘 더 해야겠다는게 느꼈고, 내가 그 찝찝함을 만들었다는 생각이 들어서 더 열심히 공부하기로 했다 .최근에 solo week동안 복습을 했다. 공부량이 적고, 새로운 개념이라기 보다는 조금 부족했다고 느껴졌던

node.js 및 nvm, npm, pakage.json 의 역할 이해하기.git - flow 를 통해 pair와 협업하기: 런타임이란 프로그래밍 언어가 구동되는 환경이다. 우리가 JavaScript를 이용해서 코드를 적었으면 코드가 실행이 되었다면 바로 실행되는 곳이

: ES6에서 새로 도입되었다. 이 화살표 함수는 함수 표현식을 축약한 형태로 표시된다.위와 같이 화살표로 간단하게 표현이 가능하다. 여기서 더 간단하게 표현도 가능하다.위처럼 return도 생략하여 작성이 가능하다. 좀 더 나아가서 화살표 함수를 클로져에 더 효과적으

ESLint : ESLint 는 우리들의 코드를 좀 더 일관되게 작성할 수 있고, 버그를 줄이는데 많이 사용되어지고 있다. 터미널에서 우리가 사용할 파일에 위치한 후 아래와 같은 코드를 작성하여 eslint를 설치할 수 있다. >$ npm install eslint

이번 스프린트의 goal자료구조가 무엇인지 설명가능하다.자료(Data)는 문자,소리,그림, 영상등과 같은 이 모든것들이 다 자료이다. 이런 자료들을 잘 분석되고, 활용되어야 우리는 비로소 정보라고 부를 수 있다. 그러나 컴퓨터는 0과1만을 읽을 수 있기 때문에 우리가

: 크기가 동적인 자료구조다. 연결 리스트는 배열 처럼 직선적으로 요소들을 갖는다. 그러나 여기서 요소를 요소라고 부르지않고 '노드(Node)'라고 부른다. 다시 말해 이 노드들이 연결되어 이루어진 자료구조인다. 연결 리스트에는 단일 연결 리스트(Singly-Link

그래프는 노드(Node, 또는 정점 -vertex- 이라고도 부릅니다), 그리고 노드와 노드를 연결하는 간선(edge)으로 구성되어있다.그래프는 무방향(undirected)일 수 있습니다. 이는 간선에 의해 연결된 2개의 노드가 대칭일 수 있다는 의미입니다. 한편 방향

빅오 표기법에 대해서 정말 자세하고, 잘 정리한 분들이 많다. 그래도 내가 보고 이해한 만큼만 정리해 보겠다.: 알고리즘의 성능을 수학적으로 표현하는 표기법이다. 이를 통해서 시간과 공간의 복잡도를 표현할 수 있다. 데이터나 사용자의 증가율에 따른 알고리즘의 성능을 예

: OOP의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링 하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다는 것입니다.(출처 : MDN)위는 MDN 에서 가지고온

class 를 만드는데에는 4가지 방법이있습니다. functionalfunctional sharedPrototypalPseudoclassical함수로 클래스를 선언한다. 함수를 많이 사용해봤으면 뭔가 익숙하다.여기서 가장 많이 사용하는 방법은 4번인 Pseudoclas

이번 TIL은 OOP를 혼자 공부하면서 내가 오해했었던 부분이나 주의점에 대해서 적겠다. Constructor (생성자) 생성자에 대해서 오해하고 있었다. 생성자에는 그냥 this.메소드 or this.프로퍼티를

: 트리 자료구조에서 많이 사용되어지는 탐색방법이다.루트 노드(혹은 다른 임의의 노드)에서 그 자식의 노드들을 먼저 완벽하게 탐색한다. 즉, 넓게(wide) 탐색하기 전에 깊게(deep) 탐색하는 것이다.단순 검색 속도 자체는 너비 우선 탐색(BFS)에 비해서 느리지만

오늘은 HA를 문제를 풀었다. 일단 이전에 배웠던것을 혼자 다시 풀어보는 느낌이라서 엄청 어렵지는 않았지만, 아직 코드에 익숙하지 않아서 그런지 시간이 많이 오래걸렸다. 빨리 익숙해져야하는데.... 일단 오늘 6시에 딱 다 풀어서 기분은 좋지만, 좀 더 열심히 복습

: 깃이란, 쉽게 말해서 백업과 버전관리를 해주는곳이다. 내가 만들었던 코드를 깃에 저장할 수 있어서 내가 코드를 잃어버렸다면 깃에서 찾아올 수 있고, 내가 적은 코드를 디벨롭해서 깃에 올릴 수 있다.깃헙은 git 사용자를 위한 소셜 플랫폼으로, git 저장소 서버를

: 비동기 호출. 비동기 호출이란 동기 호출이랑 반대되는 개념이다. 동기는 순차적으로 호출되고 실행되어지지만, 비동기는 그렇지않다. 자바 스크립트를 배울때 비동기는 우리가 필요할때 실행시키는것을 비동기 호출이라고 부른다. 일상적인 예로는 커피를 주문할때와 같다.동기는

서버와 상호작용을 하기위해서 미리 알아야할 간단하고 깊은 terms에 대해 먼저 알고 가자.: 클라이언트가 브라우저를 통해서 원하는 source 를 request를 하고, 브라우저는 요청받은 리소스를 해석해서 얻는 다양한 데이터를 화면에 보여주는 곳이다. 예) 크롬,사

CORS

서버 만들때, 많이 참고하였던 자료다. 한글로 잘 정리 되어있으니, 필독 ! HTTP 트랜잭션 해부하기 링크 1. 서버 생성하기 : node.js에서 서버를 생성하기 위해서 노드의 내장 모듈인 http 모듈을 사용한다. 모듈을 사용하기 위해서 우리는 require

ing

ing

React JSX JSX 사용시 주의점 반드시 하나의 엘리먼트로 감싸야한다. 예) 내부에 JS 코드를 작성할 수 있는데, 이때 중괄호 안에 작성해야한다. 예) ![](https://images.velog.io/images/hwanieee/post/795c7983-8

기존 리액트는 복잡한 컴포넌트들은 이해하기 어려웠다. 컴포넌트 사이에서 state와 관련된 로직을 재사용하기 어려웠었다. 그래서 Hook를 사용하면 컴포넌

화살표함수 : ES6 문법으로 함수를 화살표로 간단하게 나타낼 수 있다. 화살표 함수를 이미 잘 알고 있다고 생각했는데, 리액트때 소괄호와 중괄호 생략 할때 많이 헷갈렸었다. 다시 한번 숙지하자 기본적으로 우리는 애로우 함수를 아래의 코드와 같이 작성한다. >let

: 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.기본 구문1\. 배열2\. 객체(주의 할점. A 와 B 부분 처럼 소괄호로 전체를 감싸준다.)배열에서 값 때어내기구조 분해 할당의 구문은

: 진실은 하나의 근원으로부터: 애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장됩니다.상태는 읽기 전용이다: 상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐입니다.변화는 순수 함수로 작성되어야한

Postion

: SELECT 데이터 베이스에서 data를 선택하는 문법이다.사용법여기서 colum1과 column2는 데이터 베이스 테이블의 field names 이다.만약에 데이터 베이스필드에서 모든것을 select하고 싶으면 \*을 사용하면된다.SELECT \* FROM tab

: MVC 는 Model View Controller의 약자다. MVC는 한 소프트웨어가 돌아가는 패턴 또는 하나의 아이디어라고 말 할 수 있다. MVC는 라이브러리나 프레임 워크는 아니지만 이러한 패턴으로 만들어진 라이브러리나 프레임 워크들이 존재한다. (예> Rub

: ORM은 Object - Relational Mapping 의 약자다.이 ORM은 JS의 객체와 database(mysql) 사이에 ORM이 위치하하여, DB의 레코드(entities)에 접근 할때 마치 JS의 객체 또는 클래스처럼 다룰 수 있다.다시 말해, OR

Promise와 async&await를 공부하기전에 알아야 할 것 모든 비동기는 Promise를 리턴한다.: 프로미스는 자바스트립트 비동기를 가능하게 해주는 객체이다. 프로미스는 3가지 상태를 가지고 있다. pending, fulfiled, rejected이다. re

공부를 하면서 혼란을 야기했던 fetch와 body.json()에 대해서.헷갈렸던 부분을 단계별로 정리하겠다.MDN에서도 아래와 같이 말한다.이 말을 해석해보면 Response stream을 가지고와서(take) 끝날때 까지 읽는다(read it to completio

(node.js) http모듈 공식문서기억해야할 메소드writeHead(statusCode, { init }) - 헤더를 보내는 요청end( ,data ) - 응답 바디를 보내기statusCode = 'number' - 상태코드 지정하기주의 할 점(http와 ex

a라는 JS 파일에서 b라는 JS파일을 불러와서 사용하고 싶다면, module.exports 와 require('')를 사용해야한다.예)module.js 파일을 index.js파일에서 사용하고 싶을때,... cooming sooooooooon

express에서 route를 사용하는 일반전인 방법은 두가지가 있다.첫번째는 app뒤에 메소드를 작성하는 방법두번째는 라우트를 자제척으로 지정하고난 뒤에 메소드를 작성하는 방법.여기서 좀 더 자세히 적고 싶은 방법은 두번째 방법이다. 첫번째 방법은 이때까지 많이 사용

w3docs에서 보기 버튼을 클릭했을때, 메일 보내는 창을 만들어보자.끝이다... 정말 간단하다 ^^기억해야할것은 <a> 엘리먼트에 href='mailto:보내고 싶은 이메일'을 적어주면 된다는것이다.

mysql에서 정적인 파일을 불러오는 방법적어주고 나서 비밀번호를 입력하면 된다.끝 !!!

소중한 비밀번호를 재설정하는 방법 !!출처는 공식문서MyNewPass에 내가 사용할 비밀번호를 넣으면된다.ALTER USER 'root'@'localhost' IDENTIFIED BY 'thisispsw';이런 식으로 !

+N일 하기 >Date.prototype.addDays = function(days) { var date = new Date(this.valueOf()); date.setDate(date.getDate() + days); return date;

스크롤을 넣기위해서는 overflow-y라는 녀석을 넣어주면된다. 여기서 주의할점은 height를 꼭 넣어주어야한다는 점이다 !

(출처)

주의 !!함수에서 만약 아무것도 반환하지 않아야 한다면 이를 반환 타입을 void 로 설정하면 됩니다.public 으로 선언된 값은 클래스 외부에서 조회 할 수 있으며 private으로 선언된 값은 클래스 내부에서만 조회 할 수 있습니다. 따라서 아래 코드에서는 cir

type 은 특정 타입에 별칭을 붙이는 용도로 사용합니다. 이를 사용하여 객체를 위한 타입을 설정할 수도 있고, 배열, 또는 그 어떤 타입이던 별칭을 지어줄 수 있습니다.<a href='https://github.com/Microsoft/TypeScrip

typescript를 사용하는것과 pure react를 사용할때, 작성법은 배우 비슷하다. 최상위 컴포넌트 app.tsx와 그 하위 컴포넌트인 greeting.tsx를 사용하여 간단한것을 렌더링 해보자

useState 를 사용하실때 useState<number>() 와 같이 Generics 를 사용하여 해당 상태가 어떤 타입을 가지고 있을지 설정만 해주시면 됩니다.useState를 사용 할 때 Generics 를 사용하지 않아도 알아서 타입을 유추하기 때문에 생

: 파이널 프로젝트를 하면서 무한 스크롤 기능이 필요하게 되어 직접 구현해봤다. 처음에 뭔가 어려울거 같았지만, 막상 해보니 별거 없었다.내가 구현한 기능은 스크롤을 웹 화면에서 가장 밑에서 스크롤을 더 내리면, 새로운 데이터들을 가지고 와서 화면에 렌더하는 기능이다.

꼭 한번 구현해보고 싶었던 기능이었는데, 내가 맡은 역할이 아니여서 못했다. 그래도 한번 꼭 해보고 싶었기에, 쉬는 시간에 코드를 보고 공부하고, 혼자 만들어봤다.

스크롤이 내려가면 아래에 있는 컨텐츠들이 효과로 보이는 것 구현하기 참고 블로그를 보고, 팀 프로젝트에 구현한 코드중 일부만 발췌했습니다. 코드 설명 위의 코드에서 함수는 element가 스크린 아래쪽에 있는지를 검사한다. 스크린 아래에 있으면 true를 반환할것

프로젝트를 하면서 페어분께서 항상 불편하다고 하셨던 기능이고, 덕분에 잘 배운 기능이다. 로그인 오어스때문에 항상 빌드할때와 로컬에서 테스트할때 유알엘을 바꿔야하는 경우가 생겼다. 그러나 파일에 따로 저장해놓고 필요할때마다 가지고와서 사용하니 계속 바꿀 필요없었다.아래

img 태그를 사용하다보면 아래와 같이 흰줄이 조금하게 생기는것을 볼 수 있다. 이를 제거하기 위해서 우리가 할 수 있는 방법은 두가지 이다. \-> 브라우저가 이미지 엘리멘트는 inline과 텍스트로 취급하기 때문에 블락으로 바꾸는 순간 하얀 선이 지워진다.\->

string\[] 과Array<string> 의 차이점은 거의 없다. 그러나 차별점을 줄 수 있는것은 바로 readonly이다. 정답은 string\[] 이다. 위와 같은 경우에 사용이 가능하다. 만약 아래와 같이 사용한다면 에러를 맛보게 된다💩

직접 세팅하는 방법과 CRA로 생성하는 방법이 있다. 우선 CRA로 생성하는 법은 아래와 같다.기존 npx create-react-app에서 --typescript를 붙이면 된다. CRA말고 직접 세팅하는 방법은 아래와 같다.빈 디렉토리 생성하고 npm으로 초기화한다

Recoil을 통해서 아톰(공유 스테이트)으로 부터 셀렉터(순수 함수)통해 흐르는 데이터-플로우 그래프를 생성할 수 있다. 아톰은 컴포넌트들이 참고할 상태(state)의 집합체이다. 셀렉터는 이러한 상태(state)를 동기적으로 또는 비동기적으로 변형 시켜주는 역할을

Installation CRA(npx create-react-app)로 리액트 파일을 생성한 후 아래 cli로 리코일을 설치한다. >js // app.js import React from 'react'; import { RecoilRoot, atom, se

2x 를 레티나 화질이라고한다. 항상 이미지를 다운받을때마다 2x가 궁금했는데, 이번에 레티나 대응하는법을 찾아보면서 알게되었다.위에서 보는 코드다. 정말 간단....위의 코드는 변수를 사용하지 않을때, 사용하면된다.만약 리액트에서 변수를 사용하여 사용하려면, 아래와

프로젝트를 하면서 작성한 코드라서 필요한 부분만 발췌했습니다.긴 설명글 같은것을 쓸때, 그 글이 얼마나 길어질지 모르기때문에 height을 정할 수 없어서 자동으로 높이가 변경되는 방법을 사용하게 되었다.처음에 CSS로 textarea의 height를 100% or a

react-beautiful-dnd 영어 버전 react-beautiful-dnd 한국어 버전 react-beautiful-dnd 원리(출처 : 공식 홈페이지) 1. react-beautiful-dnd 설치하기 >jsx import {DragDropContext

https://goodbypoor.tistory.com/162

특정 이벤트가 발생할때 연이어 호출되는 함수들이 한번에 막 발생되는것을 막아주는것사용예시, 브랜드 찾기, 검색하기와 같이 인풋이 입력되었을때, 많은 정보가 유입될때, 일정 시간 후에 한번만 실행되게 할 수 있다.아래는 내가 프로젝트를 하면서 적었던 코드를 가지고왔다.위