Posting

import ...말 그대로 수입하다..? 다른파일에있는 변수나 함수 등을 현재 js파일(형식은 딱히 상관 없는 듯하다?) 에 끌고와서 사용하는 법이다. 다만 끌고오는 파일의 변수, 함수가 반드시 export 되어야한다 꽤 늦게 포스팅 하는바람에 이정도까지 쓸 수

코딩 쪽에 관심이 조금이라도 있었으면 들어봤을..법한 git..(실은 공부하고나서 알았음 :))국비지원 떄 잠깐..아주 잠깐 배웠었던 기억이 새록새록 나긴 했다..역시나 'git add .' 'git push origin master' 기억나는 것은 이 두가지 명령어

단어가 좀 길긴한데.. 단순히 말하면 '문자열 형식 내에서 문자열이 아닌 것들을 집어 넣는 방법' 정도로 생각 하면 될 것 같다.예를 들어보자^ㅇ^ 솔로만세됬고.. 일단 ${ } 안에 들어가는 표현들은 우리가 평소 스크립트에 쓰는 함수식, 변수 기타등등..이 그대로 연

rest.API, graphql에 대해 말하려면 일단 API에 대해서 알아야될 것 같다.API: 응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.정규강의 시간에들은 가장 쉬운 설명은, API는 백

기본적으로 try ~ catch 구문은 예외 처리를 위한 구문이다.try 문에서 예외가 발생하는 경우, catch 이후의 구문으로 분기가 갈려서 그 안쪽의 내용이 구동된다. 수업내용엔 없었던 것으로 기억하지만, 반드시 실행되어야 하는 구문인 경우 finally 라는 코

jsx는 js를 확장한 문법이다. UI가 어떻게 생겨야하는지 설명하기 위해 react와 함께 사용된다 (react전용 html) 웹 브라우저는 html, css, js만 읽을 수 있기 때문에, 최종적으로 소스코드가 실행 될 때는 jsx 가 html 로 자동 변환되어

COntainer Presenter 패턴은 쉽게말해서 구조와 기능을 다른 컴포넌트로 분리해서 작성하는 구조이다.컨테이너에서는 기능, 즉 API요청, Error, state 등의 기능과 관련된 것들이 소스로 들어가고 이것들을 props로 Presenter로 넘겨줘서 pr

React 개발시 3가지의 파일 규칙이 있다(js제외) jsx, ts, tsx이다.우선 자바스크립트는 객체 지향 프로그래밍으로  브라우저 내에서 주로 사용되며, 다른 응용 프로그램 내장 객체에도 접근 가능한 언어이다.또한 Node.js라는 런타임 환경과 같이 서버 프로

컴포넌트를 나눠서 스크립트를 작성하다보면 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야하는 경우가 생긴다.React에서는 단방향 데이터흐름을 가지고 있기 때문에, 하위 컴포넌트는 상위 컴포넌트의 데이터 데이터의 형태, 또는 타입만 알고 state에서 왔는지,

클래스형이나 함수혀이나 컴포넌트의 역할은 동일하지만,클래스형 컴포넌트는 로직과 상태를 컴포넌트 내애서 구현하기 때문에 함수형 컴포넌트에 비해 복잡한UI를 갖고있다. 반면에 함수형 컴포넌트는 단순히 props로 데이터를 받아서 UI에 뿌려주는 형태를 띄고 있다.훅(Hoo

React에서 useRef를 사용하는 경우는 다음과 같다\-예를 들면, 값을 여러개 입력하고 첫 번 째 칸으로 이동한다고 해보자,: Ref 객체를 만들어준다.: 선택하고 싶은 DOM에 속성으로 ref 값을 설정해준다.: Ref 객체의 current 값은 우리가 선택하고

이전 포스팅 중에 State Lifecycle 에 관해 포스팅 한적이있다.https://velog.io/@rlatjsdn147/state-Life-cycle (참고)위 포스팅에서는 클래스형 컴포넌트에서 state-lifecycle애관해 포스팅했다면, 이번엔 함

shllow routing 이란 새로고침 하지 안ㅎ고 url을 불러올 수 있는 next/js의 기능이다shllow routing을 이해하려면 router에 대해 몇가지 지식이 있어야 한다.콘솔에 찍힌 router를 보면 다음과 같다.pathname : 전체경로query

object.keys(obj) 메소드는 주어진 객체 속성들의 이름을 배열로써 반환한다.ex)object.keys(obj) 보다시피 매개변수로는 객체형태의 데이터가 들어간다.다음은 MDN에 있는 예시들이다.object.values(obj) 매개변수로 들어간 객체 형태의

검색 기능을 구현할 당시, 처음엔 onChange 함수로 state 값을 변화시켜 똑같은 자료를 찾는 방향으로 진행 했었다. 하지만 state 값에 변화가 있을 때 마다 브라우저가 랜더링이 되기 때문에, 랜더링이 너무 많이 발생한다는 단점이 생겼다 (비용적인 문제)이를

recoil에 대해 얘기하기 전에 atoms 와 selector에 대해 잠시 짚고 넘어가면.atoms : 상태의 단위이며, 업데이트와 구독이 가능하다. 업데이트 되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링된다. atoms는 런타임에서 생성될 수도 있

정규식, 간단히 말하면 특정 문자 조합을 찾기 위한 패턴이다.사용할 수 있는 메소드로는test(),exec 등이 있다 (실제로 사용해본 건 test() 한 가지이다.) 정규 표현식은 두 가지 방법으로 만들 수 있다.리터럴. 아래와 같이 슬래시로 패턴을 감싸서 작성. (

쿠키 cookie 란 웹브라우저에 저장되는 작은 크기의 문자열로, HTTP 통신을 할 때 값을 주고받을 수 있도록 만들어진 보조적인 기술이다.쿠키를 사용하는 목적은 크게 3가지로 볼 수 있다.세션관리: 로그인 정보나 장바구니 목록 같이 서버에서 가지고 있어야 할 정보를

간단한 예로 로그인 여부를 생각하면 될 것 같다.useEffect를 이용해 accessToken의 소지 여부를 판단해 렌더링되는 화면을 나누는 부분을 뜻한다고 생각하면 될 것 같다.요약 : 이메일과 비밀번호가 백엔드 서버에 있는 정보와 일치하면 로그인 성공.로그인 성공

클로저란 함수가 함수와 함수가 선언된 환경의 조합(MDN 출처) 이다. 함수안에 있는 변수의 유효범위 라고 요약하면 될 것 같다.쉬운말로 설명하면극단적으로 간단한 예를 든 것이지만, 내부 함수에서도 부모 함수에서 선언된 변수 또는 데이터 를 호출 할 수 있다는 의미이다

High ordered Component, High ordered Function상위 권한을 갖고있는 컴포넌트, 함수 이다.컴포넌트를 가져와 컴포넌트를 반환하는 함수이다.컴포넌트는 props를 UI로 변환하는 반면, 고차 컴포넌트는 새로운 컴포넌트를 반환한다. 수업시간

타입 선언을 해주면(MyType), 들어간타입 그대로 사용함.인자가 여러개 들어가는 경우, <> 로 묶어서 나타내준다.generic의 장점은, any와는 다르게 타입 추론(예측)이 된다.(본인이 타입을 만들 수 있다, any의 안전한 버전.)하지만 타입명이 너무

안전하지 않은 코드기 때문에, generic 형태로 바꿔준다.3번 케이스를 화살표 함수로 바꿔주면,그대로 HoC 에 적용하면 ->전에 로그인 검증을 위해 만들었던 withAuth(본인건 isloggedIn)에 적용하자.

로컬스토리지, 세션스토리지 : 브라우저 저장소쿠키 : 백엔드로 보낼수도 있고 백엔드에서 쿠키로 데이터를 담아서 보낼 수도 있음.백엔드와 브라우저간에 데이터를 주고받는 역할을 함. 옵션많음(보안관련)api말고도 쿠키를 가지고올 수 있음 document.cookie주로 로

new RegExp(pattern, flags)pattern 에는 정규표현식 문자열 이나 다른 RegExp 객체를 받을 수 있다.flags 에는 g i m s y u 문자를 받을 수 있다.g: 문자열 전체를 확인한다.i: 문자열 에서 대소문자를 구분하지 않는다.m: 문

js 에서의 = 은 수학의 = 과 달리 변수에 어떠한 값을 할당해주는 기능을 하다는 것은 잘 알 것이다. js 에서 수학에서의 등호, 즉 = 와 같은 역할은 ==, === 이 두개의 연산자가 한다. 둘다 등호의 역할은 맞는데, 무엇이 다른지 비교해보자.결론부터 말하면

ES 는 ECMAScript의 약자이다. ECMAScript 란 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다.자바스크립트를 표준화 하기 위해서 만들어졌으며 J스크립트, 액션스크립트 등도 포함하고 있다고 한다.간단하게

js : 스크립트 언어의 일종으로서 브라우저가 있어야 사용가능하다.Node.js: 브라우저 외 터미널에서도 다양한 용도로 사용이 가능하다. 정리: js (자바스크립트) 는 크롬, 사파리, 파이어폭스 등 브라우저 안에서만 작동할 수 있다.이러한 js 를 터미널, file

짧게 요약먼저 하자면, null 은 변수를 선언하고 빈값을 준 상태, undefined는 변수를 선언하고 값을 할당하지 않은 상태이다.undefined 는 자료형이 존재하지 않는 상태라고 생각하면 될 것 같다.undefined는 원시값(Primitive Type)으로,

원시자료형은 js의 기초가 되는 변수 또는 함수처럼하나의 고정된 저장공간을 원시자료형(primitive type) 이라고 한다.참조 자료형은 배열과 객체 처럼 유동적으로 늘어날 수 있는 동적인 저장공간을 가리킨다.찹조자료형은 조금 쉽게 풀어말하면 원시자료형이 아닌 모든

호이스팅이란 함수 안에 있는 선언들을 모두 끌어올려서 해당함수의 유효범위의 최상단에 선언하는 것을 말한다.코드가 실제로 실행되기전 Parser 라는 도구(도구라고하는게 맞는지 모르겠다) 가 함수안에 필요한 변수 값들을 모두모아서 유효범위의 최상단에 선언한다유효범위 :

generic타입은 어떠한 클래스, 혹은 함수에서 사용할 타입을 그 함수나 클래스를 사용할 때 결정하는 기법을 말한다.js는 원래 타입선언이 필요하지 않고, 그렇기에 특정 타입을 위해 만들어진 클래스나 함수도 타입 에러를 일으킬 여지가 있다.any라는 타입이 있긴하지만

스코프(scope), 쉽게말하면 범위이다. 어떠한 식별자에 접근규칙에 따른 유효범위이기도하다. 예를들면,간단하게 이정도가 되겠다. 스코프에는 몇가지 규칙이 존재하는데,바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능하다.반면, 안쪽에서 선언한 식별자는 바깥쪽

HTTP 상태코드는 확인만 하더라도 클라이언트가 서버로 보낸 요청이 실패했는지, 성공 했는지, 성공했다면 어떠한 성공인지, 실패했다면 어떤 실패인지 정확하게 알 수있게된 아주 잘 정돈된 코드이다.상태코드를 잘 정리할 수 있다면, 코드 리뷰는 물론, 프런트 엔드 개발자들

Currying 이란 여러개의 인자를 받는 함수를 단일 인자를 받는 함수의 체인을 이용하는 방식으로 바꾸는 것을 의미한다. 참조: https://seungdols.tistory.com/750 각설하고 예를 들어본다면 ex) > 위에서 볼 수 있듯이 단자를 받는

재귀함수란 함수의 호출결과로 함수를 리턴하는 함수를 말한다.알고리즘뿐만 아니라 여러가지로 많이 쓰이는 기법이다. 간단한 예를 들어보자.위의 코드는 1부터 10까지의 합을 구하는 매우 간단한 for문 이다.이를 재귀함수로 표현하면보통 코드는 위에서 아래로 읽히지만(본인도

전 포스팅에서 함수의 리턴값으로 함수를 리턴하는 재귀함수에 대해 포스팅했다. callback 함수란 재귀함수와 약간은 비슷하지만 함수의 파라미너로 함수를 전달받아 함수의 내부에서 실행하는 함수이다.간단한 예를 들어보자.위의 코드는 간단한 forEach문인데, forEa

수업시간에 배운 내용이 아니라서 따로 찾아서 포스팅해본다.평소에 알고리즘을 공부하다보면 가끔 이런생각을 하곤했다.'2차원 배열을 1차원으로 바꿀 수 있으면 조금 편할 것 같다..'이것이 가능한 메소드가 바로 flat()이다.바로 예제 코드를 보자.풀어서 설명하자면, 파

● JWT - JSON Web Token 으로 토큰의 형태이다 . (https://en.wikipedia.org/wiki/JSON_Web_Token)● XSS - Cross site Scripting 으로 사용자의 정보(쿠키,세션)를 탈취하는 것이 목적인 공격

promisall 을 이야기 하기전에 잠시 async, await 를 짚고 넘어가자.사진의 코드는 여러 비동기 로직이 async-await 를 통해 순차적으로 실행되는 모습이다.비동기 로직 제어에 어느정도 성공했지만, 순차적으로 실행되는 7회의 post요청으로 시간이

LazyLoading이란 체이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록 하는 방법이다. 웹페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것 이라고할 수 있다.이 방식은 웹 성능과 네트워크 비용 절감에 있어서

Optimistic UI란 특정 요청이 성공할 것이라는 가정을 하고 먼저 그 요청의 결과를 보여주는 방식의 UI이다. 어떠한 요청이 아주 높은 확률로 성공한다는 보장이 있을 때, 그리고 그 요청이 너무 늦지 않은 시간 안에 응답이 온다는 보장이 있을 때 사용할 수 있는

Memoization은 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장한다.피보나치수열을 예로 들어보자.함수 내에서 자기 자신을 다시 호출하여 작업을 수행하는 재귀함수를 구현할 때 동일한 계산을 반복해야하는 경우가 많다.

반복되는 연산에 대한 값을 받아올 때 사용하는 배열 메소드이다(알고리즘 담당멘토님 왈)아래는 Array.reduce()기본적인 정보이다arr.reduce(callback, initialValue)매개변수1\. callback 다음의 네 가지 인수를 받는다totalVal

블로그 포스팅 시점인 8주차에도 아직 제대로 이해가 안되는 부분을 꼽으라고한다면 본인은 router를 꼽을 것이다. 2, 3주차에 '그래서 router.query가 뭔데?' 라는 말을 제일 많이 했던 것 같다. 본격적으로 router에 대해 얘기하자면, 현재 배우고있는

아토믹 디자인은 디자인 시스템을 만드는 데 여러 가지 방법론 중 하나이다. 이름에서 유추할 수 있듯이 Atom(원자) 단위로 디자인 및 개발을 한다.명료하게 말해서, 원자가 결합하여 분자가 되고, 분자가 결합하여 유기체가 되는 것처럼, UI 컴포넌트 또한 가장 작은 단

SQL은 '구조화된 쿼리 언어(Structured Query Language)'의 약자이다. SQL을 사용하면 관계형 데이터베이스 관리 시스템(RDBMS)에서 데이터를 저장, 수정, 삭제 및 검색할 수 있다. 이러한 관계형 데이터베이스의 데이터는 정해진 데이터 스키마를

V8은 웹 브라우저를 만드는데 기반을 제공하는 구글에서 개발한 오픈소스 자바스크립트 엔진이다.V8은 자바스크립트 코드를 실행 전에 최적화된 머신 코드로 컴파일하는 엔진이다.(즉, V8은 자바스크립트 코드를 받아 컴파일하고 실행하는 C++ 프로그램이다.)크롬 브라우저와

코딩을 공부한지 얼마 안된 시점에 this가 js 에서 가장 헷갈리는 개념들 중 하나라고 들었던 것 같다. 아직 배우진 않았지만 검색을 통해 간접적으로나마 공부하고 포스팅을 해보고자 한다.this: 현재 실행되고 있는 코드의 실행 컨텍스트를 가리킨다.this bindi

OOP: Object Oriented Programming 의 약자로서 class와 object에 기반한 프로그래밍 디자인 패턴이다. 관련된 데이터끼리 묶어서 class를 형성하고 그 안에서 object instance를 만듬으로써 프로그램을 디자인한다코드의 재사용률을

데스크톱 뿐만아니라 모바일, 태블릿, 등 모바일 기기의 이용이 늘어남에 따라 소비자(이용자)들은 데스크톱이 아닌 환경에서도 서비스를 제공받기를 원한다. 데스크톱에 비해 태블릿, 모바일 환경은 이용자의 눈에 들어오는 영역이 좁기 때문에 (데스크톱의 모니터 환경과 다르기

HTTPS(Hyper Text Transfer Protocol) : 서버, 클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다.즉, HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다.따라서 HTTP는 서버가 80번

Observable은 시간의 흐름에 따라 발생하는 이벤트들의 스트림이라고 볼 수 있다.pipeline을 설치하여 여러 이벤트나 데이터를 Observer에게 보낸다.스트림은 관념적으로 뒤에 $를 붙인다.또한 스트림에선 항상 데이터 생산자가 있어야 하며, 생성자는 데이터

도메인(Domain이란 인터넷에 연결된 컴퓨터를 사람이 쉽게 기억하고 입력가능하게 하도록 문자로 만든 인터넷 주소이다.)기본적으로 사람의 지문처럼 각각의 웹사이트는 특정한 도메인을 갖고 있으며, 동일한 도메인을 다른 웹에 연결할 수 없다.도메인은 온라인 상 위치를 나타

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.이 접근방식이 React의 선언적 API를 가능하게

스토리wl에 배포한 소ㅓ스코드, 프론트에 배포한 소스코드, 빌아이디가 다르다보니 서로다른 소스코드로 인식되서 오류가 뜬다. => 빌드아이디를 통일시키고 같은 내용을 스토리지와 프론트엔드 서버에 각각 보낼예정. 빌드아이디

Mutable 객체는 생성된 이후에 상태가 변경될 수 있는 객체이고, Immutable 객체는 생성된 이후 상태가 변경되지 않는 객체를 말한다. JS에서 Object와 Array를 제외한 모든 타입은 Immutable한 타입이다.변경이 불가능하다 라는 뜻은 재할당은 가

포스팅 제목을 보면 알 수 있듯이, SPA는 Single Page Application, 한개의 페이지로 구성된 어플리케이션, MPA는 Multiple Page Application, 여러개의 페이지로 구성된 어플리케이션이다.MPA 는 새로운 페이지를 요청할 때마다 정

CI: Continuous Integration, 지속적 통합CD: Continuous Deployment, 지속적 배포CI란 빌드/테스트의 자동화 과정이다. CI는 개발자를 위한 자동화 프로세스인 지속적 통합을 의미한다. CI를 성공적으로 구현 할 경우 프로젝트에 대

컴포넌트를 재사용하기 위해, 우리는 container, presenter, style 컴포넌트를 분리해서 코드를 작성했다. 당연하게도이런 코드 한개보다는이런 코드 여러페이지가 유지보수가 편하기 때문이다. 추가해서, style이 문제가 생기면 style 컴포넌트에서 해결