[typescript] 인터페이스

인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 값으로 갖도록 강제한다.인터페이

3일 전
·
0개의 댓글

[typescript] 배열, 튜플

Array ` 위 두가지 방법 사용하면 배열에 타입을 적용할 수 있다. 두가지 방법에 차이는 불변성에서 나타난다. readonly는 scores배열을 변경할 수 없고 읽을 수만 있게하는 불변성을 적용할 때 사용한다. 하지만 ``을 사용한 배열 표기에선 불변성을 지원하

3일 전
·
0개의 댓글

타입스크립트에서 함수 선언

각 인자마다 타입을 정해주며 ()뒤에 리턴받을 값에 타입을 정해준다.리턴받을 값이 없다면 void로 정해준다.함수에서 받을 인자의 갯수를 확신하지 못했을 때 옵셔널 파라미터를 쓴다.아래 함수에서 b?: number는 b라는 인자를 써도되고 안써도된다는 뜻으로 인자를 받

4일 전
·
0개의 댓글
post-thumbnail

[React] Router

사용자가 요청하는 주소에 따라 다른 컴포넌트를 보여야할때 라우터를 사용한다. 전체가 전부 렌더링되는 것이 아니라 바뀐 컴포넌트만 렌더링하여 보여준다.주소에 따라 컴포넌트가 home, about으로 바뀐다.html에서 <a>를 사용하여 url로 이동하는 방법은 페

2021년 4월 11일
·
2개의 댓글
post-thumbnail

git branch, commit 명령어 이해하기

merge는 branch를 병합할 때 가장 많이 쓰인다. merge는 커밋시간의 흐름대로 커밋을 나열한다. 그래서 직관적으로 시간의 흐름따라 어떤내용이 수정되었는지 확인 할 수 있다. 하지만, 브랜치 갯수가 많아지고 커밋을 돌려놔야할 때 다른사람이 작업한 커밋까지 돌려

2021년 4월 11일
·
0개의 댓글
post-thumbnail

npm(Node Packaged Manager)이란

npm은 Node Packaged Manager의 약자로 node.js로 만들어진 모듈을 웹에서 받아 사용한다. 여기서 node.js는 자바스크립트를 브라우저 밖에서도 사용할수 있게하는 플랫폼이다. 자바스크립트는 브라우저 안에서만 사용하는하지만 node.js를 설치

2021년 4월 11일
·
0개의 댓글

스타일 컴포넌트 사용하기

리액트에서 UI를 나누어 컴포넌트로 사용하듯 스타일도 컴포넌트화 하여 재사용이 가능하게 한다.또, 다른 컴포넌트와 className이 겹치는 경우 스타일이 충돌되는 상황을 방지하기위한 sass의 장점도 갖고있다.함수 밖에서 선언하며 컴포넌트를 지정하여 사용한다.변수로

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

[React]카카오 소셜로그인 API 기능 추가하기

asdasd

2021년 4월 4일
·
0개의 댓글

[Javascript]클로저

클로저란 클로저는 외부 변수를 기억하고 외부변수에 접근하는 함수를 말한다. 함수에 함수를 리턴하여 반환하게 되면 함수에 있는 변수는 반환되는 값에 영향을 주고 마치 함수밖에서도 반환된 함수한에서 전역변수인것처럼 보이게된다. 클로저 ` f1()안에 f2()함수를 반환하

2021년 4월 4일
·
1개의 댓글

compenentDidUpdate

compenentDidUpdate

2021년 3월 28일
·
0개의 댓글
post-thumbnail

js로 모달 구현하기

state객체의 productBasket에 값을 false를 준다(모달 off) ![](https://images.velog.io/images/ldaehi0205/post/a4d5cc3e-df1b-4133-96e6-daa927635d00/%E1%84%89%E1%85

2021년 3월 28일
·
2개의 댓글
post-thumbnail

동적라우팅을 사용하여 상품디테일 페이지 만들기

웹에서 같은 모양의 ui나 페이지를 볼 수 있다. 이러한 반복되는 컴포넌트를 재사용하기 위해 리액트를 사용한다. 예를 들어 상품 상세페이지를 보더라도 각각의 상품에 대한 정보만 다를 뿐이지 페이지의 큰 들은 항상 똑같은 모습을 보인다. 각각의 상세페이지를 하나하나 구현

2021년 3월 28일
·
0개의 댓글
post-thumbnail

동적라우팅

SPA는 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커진다. 유저가 실제로 방문하지않을 수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 떄문이다. 하지만 라우터의 경로에 특정 값을 넣어 해당 페이지로 이동할 수있게 할 수있고 이런 방법이 동적라우팅이

2021년 3월 18일
·
0개의 댓글
post-thumbnail

Lifecycle & 조건부 렌더링

Lifecycle 기본 순서constructorrendercomponentDidMount(fetch 완료)render(setState)componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)componentWillUnmountcompo

2021년 3월 16일
·
0개의 댓글

filter(), map() 사용

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 배열의 0번째 인덱스부터 array.length-1까지 인덱스를 차례로 함수에 적용한다. 또한, filter는 원본 배열을 유지한다는 장점이 있다.filter 뒤에 요소

2021년 3월 14일
·
0개의 댓글
post-thumbnail

react로 인스타그램 클론하기

로그인 페이지에서 입력한 email password 를 서버에 전송할때 method를 post로 작성한다. 서버에서 설정한 객체의 keys를 body가 가르키고있는 객체의 key로 설정을 한다.로그인 페이지에서 입력받은 이메일과 비밀번호의 값을 body 객체의 값으

2021년 3월 14일
·
1개의 댓글
post-thumbnail

javascript 인스타그램 클론하기

삼항 연산자를 이용해 코드를 간결하게 사용할 수 있다.DOM에 접근하여 createElement로 div태그를 만들고 원하는 태그이름이나 클래스이름을 정해준다. 버튼을 눌렀을 때 append를 이용해 리스트, 아이콘, 클래스이름을 추가하여 댓글이 추가되는 것처럼 보이게

2021년 3월 10일
·
0개의 댓글

인증과 인가

인증 - 인증은 로그인 절차에서 정확한 이메일 비밀번호 조합을 입력했는지 확인하는 과정단방향 해쉬- 암호를 입력하면 알수없는 문자(해쉬)로 변환하여 전달한다.salting&Keystretching문자를 해쉬로 바꾸면 유추해서 데이터로 해킹이 가능하기때문에 입력한 비밀번

2021년 3월 8일
·
0개의 댓글

[React]state

컴포넌트 내부에서 화면에 보여줄 ui의 상태를 지니고 있는 객체이다. construct에서 정의하고 setState로 데이터를 변경할 수 있다.constructor에 state안에 객체를 만든다. key는 count이며 value는 0이다.render()를 통해 화면에

2021년 3월 6일
·
0개의 댓글

[React] React?

리액트는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리다. 리액트의 장점은 데이터가 최신화 될 때 전체 ui를 수정하는 것이 아니라 부분 ui만 데이터를 자동으로 업데이트하며 계산한다. Vue2014년에 Evan You가

2021년 3월 2일
·
0개의 댓글