KEEP CODING

인터페이스(interface) 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 참고(https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4) 인터페이스 사용 예시는 아래와 같다. 1 2 3 4 5 6 7 8 9 10 // 반복되는 타입을 하나의 인터페이스로 간단하게 표현할 수 있다. interface User { age: number; name: string; ..

Typescript에서 타입 지정은 기본적으로 변수의 오른쪽에 명시된다. 기본 타입의 선언 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 // TS 문자열 선언 let str: string = "hello"; // TS 숫자 let num: number = 10; // TS 배열 let arr: Array = [1, 2, 3]; let heros: Array = ["Capt", "Thor"]; let items: number[] = [2, 3, 4]; // TS 튜플 // 특정 위치(인덱스)의 타입을 따로 지정할 수 있다 let address: [string, number] = ["gangnam", 11]; // TS 객체 let o..

Typescript 시작하기 TS파일은 컴파일 과정을 거쳐 JS파일로 변환해야 브라우저에서 사용할 수 있다. 콘솔에서 npm 명령어를 통해 typescript를 다운받는다. npm i typescript -g typescript로 코딩한 후, 아래 명령어로 컴파일한다. tsc index.ts (파일 이름이 index.ts 인 경우) 위 명령어를 입력하면 index.js라는 파일이 만들어진다. 아래 사이트에서 컴파일 후의 JS파일을 확인해 볼 수 있다. https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write Type..

Typescript란? Javascript에 타입을 부여한 언어. 브라우저에서 실행하려면 JS로 바꿔주는 과정을 거쳐야 한다. 이 과정을 컴파일이라고 한다. Typescript의 장점 에러를 사전에 방지할 수 있다. 개발 생산성을 향상시킬 수 있다.(코드 가이드 및 자동 완성 기능) 사전 에러 방지 console.log를 사용해 브라우저에서 확인했어야 하는 정보들을 미리 알 수 있다.(property 이름, 형식) 오탈자에 대한 부분을 개발자에게 알려준다 -> 에러를 사전에 방지함 TS사용하지 않는다면 JSDoc으로 미리 타입을 명시해줘야 한다. /** */ 사이에 내용을 적어야하며 가독성이 떨어지고 코드가 길어지는데 TS로는 더 간결하게 타입을 명시할 수 있다. 함수를 생성할 때 입력받는 값의 타입 지..

처음엔 이렇게 구상했었다. https://joylee-developer.tistory.com/178 해피 저금통 만들기 인터넷에서 '해피 저금'이라는 것을 발견했다. 행복한 순간들을 적어서 병에 넣어두고 연말에 열어보는 거라고 한다. 개인적으로 해보고 싶었는데 아예 홈페이지로 만들어보면 어떨까 했다. 화 joylee-developer.tistory.com 병에 넣는 것을 시각적으로 표현하고 싶었는데 구현하다보니 내가 원하는데로 되지 않았다. 그리고 굳이 만들 필요가 있나 싶어서 삭제하고 저장한 글들을 목록으로 보여주는 식으로 만들었다. 완성된 해피 저금통! https://purple402.github.io/jarOfHappiness/ 해피 저금통 purple402.github.io 기능 설명 사이트 ht..

LocalStorage 브라우저에 자료를 저장할 수 있는 저장소이다. cookie와의 차이점 Cookie LocalStorage 공통점 브라우저에 자료를 저장하는 저장소 키-값 형태의 자료를 저장한다 차이점 만료 기한이 있다(휘발성) 만료 기한이 없다 (영구성, 브라우저를 닫았다가 다시 열어도 자료가 남아있다) 4kb의 용량 제한이 있다 용량제한이 있지만 쿠키보다 크다 모바일은 2.5mb, 데스크탑은 5mb~10mb (브라우저마다 다르다) 서버 요청시 쿠키가 전송된다 서버로 자동 전송되지 않는다 SessionStorage LocalStorage와 같이 브라우저에 데이터를 저장할 수 있는 저장소이다. 데이터가 영구적으로 저장되지 않는다는 점이 다르며, LocalStorage와 사용법은 같다. 로컬 스토리지..

firebase에 저장된 내용을 매번 불러오는 것 보다 localStorage를 사용하는 것이 더 좋을 것 같아서 localStorage를 이용해봤다. 기본적인 사용법 https://joylee-developer.tistory.com/187 [Javascript] localStorage 사용하기 LocalStorage 브라우저에 자료를 저장할 수 있는 저장소이다. cookie와의 차이점 Cookie LocalStorage 공통점 브라우저에 자료를 저장하는 저장소 키-값 형태의 자료를 저장한다 차이점 만료 기한이 있다( joylee-developer.tistory.com 일단 firebase의 자료와 localStorage의 자료를 어떻게 사용하고 불러올지 flow chart를 만들어보았다. count 는..

https://joylee-developer.tistory.com/184 [React] Modal 만들기(1) CSS, 외부클릭 방지 React에서 Modal을 만들어보았다. Modal은 현재 화면 위에 새로운 창을 만들어 추가적인 일을 실행할 수 있도록 한다. Modal의 특징이 몇 가지 있다. 1. 현재 화면과 구분하기 위해 현재 화면은 어둡게( joylee-developer.tistory.com React에서 Modal 만들기에 대한 글을 작성하다가 글이 길어져서 스크롤 방지에 대한 내용은 따로 글을 작성했다. 3. modal이 떠 있을 땐 화면 스크롤이 금지되어 있다. 스크롤에 대한 설정을 따로 하지 않으면 뒷쪽 화면이 움직일 수 있다. 뒷면이 움직이지 않도록 모달이 떠 있을 땐 스크롤을 금지하고..

React에서 Modal을 만들어보았다. Modal은 현재 화면 위에 새로운 창을 만들어 추가적인 일을 실행할 수 있도록 한다. Modal의 특징이 몇 가지 있다. 1. 현재 화면과 구분하기 위해 현재 화면은 어둡게(혹은 어둡고 흐릿하게) 처리한다. 2. modal안의 x버튼 혹은 modal의 외부를 누르면 modal이 사라진다. 3. modal이 떠 있을 땐 화면 스크롤이 금지되어 있다. 첫 번째는 CSS로 설정가능하며, 두 번째와 세 번째 특징은 react 코드로 작성해주어야 한다. 일단 Modal component를 만든다. 재사용을 위해 modal안의 내용은 props.children을 사용한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22..

desktop site를 기준으로 버튼을 만들었더니 mobile 에서는 버튼이 두 줄이 넘어갔다. 문구를 수정할까 하다가 버튼 안에 글을 두 줄로 작성하려 방법을 찾아보았다. HTML에서 사용할 수 있는 방법 button 태그를 활용할 때 1 2 3 4 5 행복 작성하기 cs button 태그를 사용하면 버튼 안의 내용이 안에 작성된다. input type="button"과 다르게 여러 가지 방법을 사용해봤지만 두줄로 나오지 않았다. 을 사용하니 원하는 대로 버튼 안의 글이 두 줄로 나왔다. (strong태그를 사용하지 않아도 줄바꿈 가능하다) input type="button" 태그를 사용할 때 1 2 cs value를 작성할 때 줄바꿈을 해준다. 들여쓰기가 되어있다면 들여쓴 공백도 입력되므로 두번째줄..