profile
superfly
post-thumbnail

react에 ts도입해보기

App.tsx Greeting.tsx

2일 전
·
0개의 댓글

타입스크립트 형변환

강제 형변환(남이 만들어놓은 타입을 내가 원하는 타입으로 바꾸고 싶을 때) const num: number = 10; 방법1-> 변수 선언 후 형변환시 () 안 붙임 const newStr = num as unknown as string; => type:string

4일 전
·
0개의 댓글

타입스크립트 기본 타입

변수 타입 정의시 Number,String...은 객체를 의미하므로 number,string처럼 소문자로 시작해야

5일 전
·
0개의 댓글

Event Loop

자바스크립트는 팔이 하나인 로보트 이 친구는 싱글스레드 방식으로 일을 처리한다.(싱글스레드=== Call Stack 1개 === 한 번에 하나씩만 처리가능) 마치 팔이 하나 있는 로보트같기에 비동기 방식으로 일을 처리한다. 즉, 오래 걸리는 일은 붙잡고 끝날때까지

2020년 9월 11일
·
0개의 댓글

이벤트 버블링/캡쳐링

브라우저는 특정 화면 요소에서 이벤트가 발생시 기본적으로 그 이벤트를 최상위에 있는 화면 요소까지 전파시킨다.(이벤트 버블링이 기본이므로) 이 때 이벤트 전파방식은 버블링과 캡쳐링 2가지로 나눌 수 있다. 버블링 화면의 하위요소->상위요소로(최상위요소 body까지 전

2020년 9월 10일
·
0개의 댓글

Lexcial Scope

Lexical Scope란? 정의 함수의 상위 scope가 함수 실행이 아닌, 함수 정의할 때를 기준으로 설정되는 것 변수를 함수 안에서 새로 선언할때 `const foo = () => { let string='100000'; foo2(); }` 변수를

2020년 9월 9일
·
0개의 댓글

this,매번 헷갈리는 친구

this 함수 호출시 binding되는 객체를 가리키는 변수 this는 함수가 어떻게 호출되었느냐에 따라 this가 바인딩되는 객체가 달라진다(함수 선언시에 this의 바인딩되는 객체가 결정되는 게 아니다). 이는 함수 선언시 상위 스코프가 결정되는 Lexical

2020년 9월 7일
·
0개의 댓글

GET과 POST

GET/POST는 HTTP의 methodHTTP는 또 뭐지?웹상에서 클라이언트-서버 간 요청/응답을 할 때 정해놓은 프로토콜(일종의 약속)클라이언트는 HTTP 프로토콜로 서버에 요청, 서버는 요청에 맞는 응답을 클라이언트에게 보낸다.이때 HTTP 메소드는(GET/POS

2020년 9월 7일
·
0개의 댓글
post-thumbnail

브라우저의 동작방식

요청과 응답:브라우저->서버에 웹페이지(HTML/CSS/JS/이미지 파일) 요청->서버가 응답(HTML/CSS/JS/이미지 파일)Parsing(돔 트리를 만드는 과정): 브라우저의 렌더링 엔진이 HTML/CSS을 HTML/CSS parser를 통해 DOM ,CSSOM

2020년 9월 7일
·
0개의 댓글
post-thumbnail

Hoisting

선언된 순서에 따라 잘 실행되는 경우위에 것을 JS Parser 통한 호이스팅한 결과\*/

2020년 9월 6일
·
0개의 댓글
post-thumbnail

리액트에서 css사용하기

.css파일 작은 프로젝트서 사용시간편 그러나 속성 클래스 이름 겹칠때 오류 발생중복 방지를 위해 컴포넌트명-클래스 방식 이름이나 css선택자 활용ex ) .App-header/ .App-link (컴포넌트-클래스명)filename.module.csssassnpm i

2020년 9월 5일
·
0개의 댓글

SPA에 대해

공통점처음 페이지 로드시, 클라이언트 -> 서버로 요청해서 HTML파일 받아와야차이점MPA페이지 이동시마다(전환요청시마다) 클라이언트->서버의 요청을 통해 받아온 HTML을 reloadSPA페이지 이동시에 서버로의 요청을 필요X페이지 전환은 자체적으로 Routing처리

2020년 9월 4일
·
0개의 댓글
post-thumbnail

Object.entries와 Object.values

Object.entries() 역할: 주어진 객체의 키/값을 각각의 배열로 만든다 return값 ->배열,이 배열의 원소는 주어진 객체의 키/값을 가지고 만든 배열

2020년 9월 2일
·
0개의 댓글

babel/npx

CRA없이 리액트의 createElement를 JSX로 바꾸기 위해서npx로 바벨을 실행시켜보았다npx @babel/core @babel/cli @babel/preset-envnode_modules/bin(binary)에는 바이너리 파일만 모여있고 npx를 통해 명령어

2020년 9월 1일
·
0개의 댓글

Redux사용

Redux사용 후기 어쩌다 사용하게 되었나? 1.리액트 컴포넌트 간의 데이터를 props로 관리하려 시도 2. 댓글을 생성하려 하는데 이용하는 라는 컴포넌트가 있다 해보자, 댓글은 크게 댓글과 대댓글로 나뉘고 댓글은 대댓글은 에서 다룬다고 할 때 컴포넌트의 pr

2020년 9월 1일
·
0개의 댓글

선택정렬

전체 배열에서 가장 작은 값을 찾는다배열에서 맨 앞의 값과 이 최솟값의 위치를 바꾼다즉,매 번 시행시마다 가장 작은 원소의 위치가 하나씩 결정된다(버블정렬은 맨 뒤에 가장 큰 원소가 하나씩 결정되던 것과 반대)맨 앞의 값을 제외하고 다시 최솟값을 찾고,이미 결정된 맨

2020년 8월 31일
·
0개의 댓글

버블정렬

필요성 JS에는 Array.sort()함수가 존재한다.그러나 정렬함수가 항상 좋은 퍼포먼스를 보장하지 않고 내가 가진 데이터의 양이나 상황에 따라 어떤 정렬을 사용하는 것이 좋을지 달라지기에 자주 쓰이는 몇 가지는 알아두려 한다. 버블정렬 배열의 처음부터 시작 인접

2020년 8월 31일
·
0개의 댓글

재귀함수

혹은

2020년 8월 30일
·
0개의 댓글
post-thumbnail

REACT특징 및 CRA

Virtual DOM(내 돔을 메모리에 저장 후 이전과 비교해서 바뀐 부분만 다시 자동으로 렌더링)SPA(페이지 이동시,웹이 아닌 앱처럼 느껴짐)->UX에 좋다.컴포넌트의 재사용,부품 조립을 하듯이 사용할 수 있다.

2020년 8월 29일
·
0개의 댓글
post-thumbnail

Destructuring

Destructuring 목적: 객체/배열의 값을 편하게 가져오기 위해 사용 console.log({...a}); a라는 객체의 * key/value*만 가져온다. -> Object {b: 1, c: Object} console.log({...a.c}) a라는 객체에

2020년 8월 28일
·
0개의 댓글