분류 전체보기
-
[javascript] promise 에 대하여javascript 2021. 4. 23. 17:00
비동기식 처리 모델(Asynchronous processing model 또는 Non-Blocking processing model) 동기적 처리가 요청이후 응답전까지 다른 작업을 진행하지 기다린다는 점에서 비동기는 non-blocking processing model 이라는 표현이 좀더 와닿는다 위 말에서 유추할수 있듯이 비동기적 이라는 말은 요청이후 응답시까지 기다리는동안 다음 태스크를 수행하고 응답완료시 이벤트가 발생하여 응답에 의한 데이터를 활용한 태스크가 이루어진다. 이벤트 핸들러 Timer 함수(setTimeout, setInterval) Ajax 요청 위 3가지가 대표적으로 비동기식 처리 모델로 진행된다. 그러면 비동기는 알겟고 promise 는 뭔지 mdn 설명을 보자 설명 Promise는..
-
[typescript] 메모장typescript 2021. 4. 23. 12:47
정적타입을 지원하는것은 개발자의 의도를 명확하게 전달 할수 있는 장점이 있다. 이는 예측가능성을 높이고 가독성을 높여준다. 인터페이스나 제네릭 등과 같이 객체지향 프로그램이적 요소가 있다. 컴파일은 일반적으로 소스코드를 바이트 코드로 변환하는 과정을 이야기 한다,. 그러나 타입스크립트에서는 자바스크립트 코드로 변환함으로 컴파일 이라는 단어보다는 트랜스파일링 이라는 표현이 적합하다. tsconfig.ts 파일은 typescritp 를 위한 프로젝트 단위의 환경설정으로 트랜스파일링할 대상과 컴파일 옵션에 대한 설정을 해놓을수 있다. 오류를 런타임 이전에 컴파일 하는 과정에서 알수있고 또한 다양한 도구를 사용할시에는 코드 작성시점에도 알수 있다. 자바스크립트가 가지고 있는 고유한 타입 이외에도(number,s..
-
[네트워크] https 에 대하여기타 2021. 4. 20. 12:47
hyper text transfer protocol secure html 도 text 이다. text 를 주고받는 규약 + 보안 ssl 통신을 이용한다. 공개키 방식을 이용한다. 공개키(비대칭) 암호화 에 대하여 공개키의 의의 ? 공개키는 누구나 가질수 있는 키이기 때문에 무슨 의미인지 알아보자 내가 공개키로 풀었다는 것은 그데이터는 개인키로 암호화 되었다는것을 의미한다. 개인키는 해당 서버만 가지고 있다. 따라서 그데이터는 해당서버에서만 올수 있는 데이터이다. 즉 그러한 데이터는 해커가 보낸게 아니라 자체로 해당 서버가 보냈다는 것을 증명한다. 반대의경우 내가 공개키로 암호화 하면 또다른 공개키로는 아무도 복호화를 못하니까 개인키를 가지고 있는 서버만 복호화해서 데이터를 확인 할수 있게 된다 즉 해커가..
-
[typescript & emotion] react 에서 emotion 사용해보기typescript 2021. 4. 19. 20:41
style-in-js 를 공부해 보는 중이다. 그중에서 emotion 을 공부해보는 중이다. styled component 형태로 만들어서 사용하기도 좋지만 css prop 을 이용해 inline 형태로도 사용할수 있다라는 점이 장점이라는데 한번 써보자!!! 먼저 인라인 형태로 써봤다. /** @jsxImportSource @emotion/react */ import React from 'react' import {css} from '@emotion/react' const Card = () => { const style = css` color : hotpink; ` return ( 카드 ) } export default Card 인라인 형태로 써봤다. 사용법은 간단하다 필요한 모듈을 다운 받고 css p..
-
로그인 (쿠키, 세션 ,토큰) 에 대해서기타 2021. 4. 19. 12:03
http 통신은 stateless 하다 따라서 어떤 사용자가 접속했는지 알수 없고 이전에 어떤걸 했는지 알수없다 단지 이번요청에대한 응답만 해줄 뿐이다. 그러나 우리가 웹페이지를 이용하다보면 서버가 클라이언트의 정보에 대해 인지하고 있어야 적합한 기능들을 제공해줄수 있는경우가 더러있다. 관련 상품을 추천한다던지 기존설정을 유지한다던지 등등 있지만 가장 대표적인 부분은 로그인 상태에 대한 부분이다. 1.쿠키 - 클라이언트에서 로그인 관련 정보들을 입력후 요청한다. - 서버에서 로그인관련 정보를 데이터와 비교후에 응답헤더의 쿠키에 로그인 관련정보를 담고 응답한다. - 이후로 클라이언트의 요청의 요청헤더에는 쿠키가 심어진채로 요청이 들어가 서버에서 지속적으로 확인할수있다. - 요청과 응답시에 클라이언트쪽에서는..
-
[상태관리] SWR 에 대하여react 2021. 4. 16. 12:02
(서론) 두번째 프로젝트: https://fineaple.com Fineapple 능력사무소 fineaple.com 사람들의 동네에서 소소한 재능을 나눌수 있는 커뮤니티 페이지를 만들었다. 커뮤니티 웹페이지의 특성상 페이지 구조가 간단할꺼라고 생각했고 굳이 전역에서 상태관리를 하지 않아도 문제될게 없을꺼같아서 상태관리 도구없이 단방향 데이터흐름으로 구성하였다. 하지만 프로젝트를 하다보니 전역공간에서 데이터를 관리하는것의 장점들을 너무 뼈저리게 느꼇다. 1. 페이지가 간단하다고 해서 컴포넌트구조도 간단한건 아니였다. 2. 렌더링에 필요한 데이터 외에도 로그인상태를 통해서 얻을수 있는정보들은 전역에서 관리해주면편하다. 3. 협업시에 전역상태관리를 안하면 많은 파일을 만지게 되고 이는 컨플릭트 유발 가능성을 ..
-
[자바스크립트] this 에 대해서 (call,apply,bind)javascript 2021. 4. 13. 12:44
자바스크립트의 this는 함수가 호출되는 상황에 따라 동적으로 결정이 된다. ( >> this) 여기서 결정이 된다라는 것은 this 라는 객체에 어떠한 객체들이 와서 바인딩이 되는가 하는 사항이다. 반면 렉시컬 스코프는 함수가 선언될때 결정된다 (>> 클로저) 호출되는 상황에는 어떠한 것들이 있을까? 1. 함수호출 2. 생성자 함수 호출 3. call / apply / bind 4. 메서드 호출 4. 메서드의 호출 - 객체의 프로퍼티값이 함수라면 우리는 그것을 메서드라고 부른다. - 메서드 내부의 this 는 메서드가 포함된 객체 를 가리킨다. 1. 일반적인 함수 호출 시에 함수내부의 this 는 전역 객체인 window (global)를 가리킨다. 왼쪽은 브라우저 콘솔에서 this를 찍었기 때문에 w..
-
[typescript error] Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'typescript 2021. 4. 12. 17:14
Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559) >>'{children:Element; }' 형식에는 'IntrinsicAttributes(고유특성)'.ts(2559) 유형과 공통되는 속성이 없습니다. 뭔말인지는 잘모르는데 대충 췰드런 자리에 뭐 넣었으니까 타입을 집어넣어라? 겟지 ? 하고 메인에 FC 를 넣어야 되나 VFC 를 넣어야 되나 어디서 본거 같애서 넣어봤다. 그런데 안되네 ?? 생각해보니가 넣어도 Main 에 췰드런을 쓴게 아니라 Header 라는 컴포넌트에 넣어줘야되서 그렇게 Header FC 를 추가해 주니까 해결 되었다. 근데 FC 랑 VFC 는 뭐하는 거고 ..