본문 바로가기
320x100

전체 글83

[TS]02 readonly / Tuple / any 타입 readonly - 읽기전용속성. js에서는 없는 속성이다. type Player = { readonly name: string, // 앞에 readonly를 적어주면 읽기전용으로 바뀐다. age?: number } const playerMaker = (name:string) : Player => ({name}) const player = playerMaker("Tom") player.name = 'Jay' // 위에서 readonly속성을 주었기 때문에 수정하려고 시도하면 오류가 난다. //배열에서 readonly 사용하기 const numbers: readonly number[] = [1, 2, 3] number.push(1) // readonly속성을 가졌기 때문에 추가가 안되고 오류표시가 생긴다... 2022. 5. 10.
[TS] 01 문법 / object, 함수 return의 타입지정 기본 문법 // 변수명 뒤에 ': 타입이름' 을 적어준다 let a : number = 1; let b : string = 'string'; let c : boolean = true; //array로 바꾸기 let aa : number[] = [1, 2]; let bb : string[] = ['string', 'hello']; let cc : boolean[] = [true]; // 타입은 자동으로 추론하는게 좋다. 굳이 명시할 필요 없음. 오브젝트 타입지정방법 & 옵셔널 // (1) 문제상황: age의 타입을 지정해줬지만 player안에 age가 없다면? -> age뒤에 '?'를 추가해서 옵셔널로 준다. const player : { name: string, age?: number } = { name.. 2022. 5. 10.
리액트에서 이미지 엑박 이미지를 public 폴더에 넣어놓고 잘뜨던 이미지가 갑자기 엑박이 뜨면서 오류가 났다. 찾아보니 엑박을 해결하는데에는 몇가지 방법이 있었는데 먼저 이방법으로 사용했었지만 해결은 안되었고,,, process.env.PUBLIC_URL를 사용하여 해결하였다. render() { // Note: this is an escape hatch and should be used sparingly! // Normally we recommend using `import` for getting asset URLs // as described in “Adding Images and Fonts” above this section. return ; } 리액트 공식문서 참고: https://create-react-app.dev.. 2022. 5. 9.
[TypeScript] 리액트에서 타입스크립트 적용하기 01. 설치하기 (1) 타입스크립트를 전역으로 설치해준다. 설치할때 에러가 나서 찾아보니 sudo를 앞에 붙이면 해결이 된다. 컴퓨터 패스워드를 입력해주면 설치가 실행이 된다. npm install -g typescript sudo npm install -g typescript //위에 것이 오류난다면 sudo를 붙이고 다시 해보기! (2) Typescript의 필수 설정파일인 tsconfig.json을 생성하자. *tsconfig.json은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정한다. tsc --init 위의 패키지를 설치해도 되고 파일을 만들어도 된다. { "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noIm.. 2022. 5. 8.
[React] react-scroll-motion 사용하기 DEMO https://1000ship.github.io/react-scroll-motion/ 설치하기 # Use npm npm install react-scroll-motion # Use yarn yarn add react-scroll-motion 코드 예시 https://github.com/1000ship/react-scroll-motion/blob/master/_readme/docs.md import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, FadeOut, Move, MoveIn, MoveOut, Sticky, StickyIn, StickyOut, Zoom, ZoomIn, ZoomOut } from "react-scroll-mot.. 2022. 5. 4.
[Typescript]리엑트에서 타입스크립트 사용하기 1. 터미널에서 타입스크립트를 설치해준다 npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom 2. 파일 확장자명 변경하기 js파일 → .ts jsx 파일 → .tsx 3. 인터페이스 만든 뒤 props타입을 만들어준 인터페이스로 선언하기 *인터페이스란 타입을 정의한 규칙을 의미한다. //(1) interface 만들기 interface IProps { //word: any; any는 절대로 남발하면 안된다. word: IWord } interface IWord{ //프로퍼티들에게 타입을 지정할 수 있다. day: string; isDone: boolean; id: number;.. 2022. 4. 29.
[React]'Recoil' 상태관리 라이브러리 사용하기 공식문서: https://recoiljs.org/ko/docs/introduction/installation 1. 설치하기 //npm 설치 npm install recoil //yarn 설치 yarn add recoil 2.사용방법 (예제-Character Counter 만들기) (1) RecoilRoot: ​부모트리에 로 감싸준다 //App.js import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( //->감싸주기 ); } (2). Atom Atom은 상태(state)의 단위를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽.. 2022. 4. 21.
[React-API]api 불러오기 오류 해결 api를 이용해 영화앱 만들기 강의를 듣는데 강의내용은 메인페이지까지고 세부페이지는 스스로 응용해서 만들어야 하는데 페이지에 영화타이틀이랑 썸네일 등을 넣으려고 했지만 계속 오류... 왜 오류가 날까...ㅎㅎ 콘솔창엔 에러만뜨고 페이지는 아예 보이지 않았다. 알고보니 세부페이지의 json을 살펴보니 메인페이지 api와 조금 달랐다. 메인페이지는 [] 즉, 배열로 되어있고, 세부페이지는 {} 객체로 표기되어 있었다. 아나,, ㅎ 이래서 map함수가 Uncaught TypeError: movie.map is not a function 뜨면서 에러가 났던것.. 원인을 아니 속이 너무 시원하다. 이럴땐 map함수 대신 바로 프로퍼티를 찍어주면 된다. (아래 코드 참고) import { useParams } fr.. 2022. 4. 12.
[API]open API 사이트모음 1. GIPHY Devlopers -gif를 이용해 재미있는 어플리케이션을 만들어보고 싶다면. https://developers.giphy.com/ GIPHY Developers The GIPHY Developer Portal is how you integrate the world's best GIF API into your business, app or project. developers.giphy.com 2. 요리관련 https://www.edamam.com/ Edamam – Food Database API, Nutrition API and Recipe API www.edamam.com 3. 밈 제너레이터 http://apimeme.com/?ref=apilist.fun APIMeme - Meme Ge.. 2022. 4. 7.
[React-css] styled-component 설치 및 사용법 + 작업환경 셋팅하기 CSS-in-JS 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법. Component가 많을 경우, class명이 중복될 수 있는 문제를 방지해준다. 💅 1. 패키지 설치 (1) 터미널로 설치. $ npm i styled-components //타입스크립트로 작성시 아래와 같이 입력 $ npm i styled-components @types/styled-components (2) component파일 상단에 styled함수를 임포트한다. import styled from "styled-components"; 💅 2. 사용방법 (1) 기본문법 styled.태그 뒤에 백틱(``)을 작성하고 그안에 css스타일링을 한다. (작명시 첫글자 대문자 필수) con.. 2022. 4. 5.
React 설치 및 기타설치 모음 🐶 01 React 설치 준비하기 //(1)버전확인해서 node.js 안깔려있으면 사이트들어가서 설치하기 $ node -v $ npm -v //--------------------------------------------------------------- //(2)npx 설치하기 npm install npx -g //npm install -g에서 -g옵션은 시스템 디렉터리에 패키지를 설치하는 것을 의미한다. //-g 옵션이 없다면 module은 현재 디렉터리 내부에 로컬로 설치된다. //--------------------------------------------------------------- //(3)작업파일 생성 npx create-react-app my-app //'my-app'은 폴더이름이.. 2022. 4. 1.
[Planner App/JS] D-day 생성하기 html의 input date타입을 사용하여 D-day 생성기능을 구현하고 싶었다. 구글링시 대다수가 아래와 같은 방식으로 알려주는데 내가 해보면 계속 NaN가 나왔다. 😭 function diffDay() { const masTime = new Date("yyyy-mm-dd"); const todayTime = new Date(); const diff = masTime - todayTime; const diffDay = Math.floor(diff / (1000*60*60*24)); } 이렇게 해보고 저렇게 해봐도 오류가 나서 다른 방법이 없을까 물색하던중 이 글을 참고하기로 했다. function dDay(){ const leftDay = inputDate.value const date = new .. 2022. 3. 14.
[JS]08-async 동기와 비동기 (callback, promise, async, await) JavaScript is synchronous. 자바스크립튼 동기적이다. -호이스팅이 된 이후부터 코드가 위에서부터 하나하나씩 동기적으로 실행된다 (호이스팅: var, 함수선언들이 제일 위로 올라가는것) console.log('1'); console.log('2'); console.log('3'); // 1-2-3 차례로 실행 console.log('1'); setTimeout(() => console.log('2');, 1000);//1초뒤에 실행하라는 명령을 내림 console.log('3' ); // 1-3-2 순서로 나옴 callback synchronous callback (동기 콜백) function printImmediately(print){ print(); } printImmediately.. 2022. 3. 8.
[CSS] all 속성 - 스타일 초기화하기 요소의 기본 스타일 속성을 초기화하려면 all: unset; 요렇게 써주면 된다. 간단하다. 스타일 하나하나 바꿀 필요 없이 한줄이면 끝! /* BAD */ button{ background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer } /* GOOD */ button{ all:unset; } button뿐만 아니라 a태그, ul,li 등등 디폴트 스타일이 있다면 모두 사용이 가능하다. 굿굿! 2022. 3. 6.
[Planner App/JS] to do list 전체삭제 하기 구현 JS입문강의를 다듣고 크롬앱을 만드는 강의를 들으며 플래너 앱을 만들어보기로 했다. 드디어 JS를 이용해 만들어보는 첫 프로젝트다 얼추 틀은 갖춰졌지만 강의에 없는 내용을 구현하기 위해 해결해야할 문제들이 있었다. 그중 하나는 clear버튼을 하단에 만들어서 해당 요일의 리스트를 전체삭제를 하는것! 간단한 기능이니 구현하기 쉬울줄 알았다. 하지만 좀처럼 되질 않았고.. (더닝크루거 효과가 생각난다. 우매함의 봉우리에 있었다. 쉬울거라 생각한거 취소!ㅠㅠ) 어제 밤부터 고민하며 잠들다 오늘아침에 해결했다(꿈에서 까지도 이것때매 끙끙거리는 꿈을 꿨다..😂) 어쨋든 구현하느데 성공해서 신나서 글을 쓴다. 투두리스트 하단에 clear 버튼을 만들어서 목록을 전체삭제 하게끔 구현하는데 드디어 성공.! 처음에는 개.. 2022. 3. 3.
[JS]07-JSON(stringify, parse) JSON - JavaScrips Object Notation 자바스크립트 객체표기법 (단순 데이터 표기방법이다.) 1. Object to JSON (오브젝트를 제이슨으로 변환하는 방법) JSON.stringify(obj) const rabbit = { name: 'tori', color: 'white', size: null, birthDate: new Date(), //아래와 같은 심볼이나 함수등 자바스크립트에만 있는 데이터들은 포함되지 않는다. symbol: Symbol('id'), jump:() => { console.log(`${name} can jump!`); }, }; json = JSON.stringify(rabbit); console.log(json); //원하는 목록 생성가능 json = .. 2022. 3. 2.
[JS]06-Array 배열 1. 선언하는 방법 const arr1 = new Array(); const arr2 = [1, 2]; // 좀더 흔하게 쓰이는 방법 2. Index positon const fruits = ['apple','banana']; console.log (fruits); console.log (fruits.length); //2 console.log (fruits['0']); //apple이 출력됨 console.log (fruits[fruits.length -1]); //마지막 데이터 접근 3. Looping over an array //for for(let i = 0 ; i console.log(fruit)); 4. Addition, deletion, copy push / pop //push: 배열끝에 아.. 2022. 2. 26.
[JS]05-object(for..in, for..of 등) Object - object = {key : value}; 1. Literals and properties -Object literal: {}를 이용해서 만드는 방법 const obj1 = {}; -object constructor: class를 이용하여 new라는 키워드를 이용한 방법 const obj2 =new Object(); function print(person){ console.log(person.name); console.log(person.age); } const tom = { name: 'Tom' , age: 20}; print(tom); //dynamically typed language라 properties를 나중에 추가 가능함 tom.hasJob = true; //추가 console.. 2022. 2. 25.
[JS]04-Class(클래스 만들기, 게터와 세터, static 등) class -template -declare once -no data in 연관있는 데이터들을 한데 묶어놓은 컨테이너같은 역활 붕어빵틀같음 청사진이라고 불리고 템플릿이라고도 불림 class Person{ //속성 fields name; age; //행동 method speak(); } Object -instance of a class -created many times -data in 붕어빵같음 1. Class declarations 첫번째: 클래스를 만들어준다.(템플릿 같은 역할. 데이터x) class Person{ //constructor:생성자를 이용해서 나중에 오브젝트를 만들때 필요한 데이터를 전달함 constructor(name, age){ //fields: 전달된 데이터를 바로 할당해줌 thi.. 2022. 2. 25.
[JS]03-function(함수, parameters (변수), 콜백 함수, 화살표함수/first class fn 등) Function -기본적인 빌딩블럭. (fundamental building block in the program) -subprogram 이라고도 불리며 여러번 재사용이 가능함 - 한가지의 task 나 값을 계산하기위해 쓰여짐 1. Function 선언하기 function name(param1, param2){ body... return; } -하나의 함수는 한가지 일만 하도록 만들어야함 -함수의 이름을 작성할땐 동사형태로 지정하기. e.g. createCardAndPoint -> createCard, creatPoint 처럼 세분화 하는게 함수를 깨끗하게 만들 수 있다. -js에서 function은 object 이다. 그렇기 때문에 함수를 변수에다 할당할 수 있고 파라미터로 전달이 되고 함수를 리턴할 .. 2022. 2. 24.
[JS] 02-operator (연산, 반복문, for, while, swich 등) 1. String concatenation (문자 연결) 문자열 + 문자열 console.log('my'+'cat'); -> my cat 문자열 + 숫자형 console.log('1'+2) -> 12 백틱을 이용한 스트링형 `${값}` console.log(`string literals : 1+2 = ${1+2}`); -> string literals : 1+2 =3 2. Numeric operators (숫자 연산자) console.log(1 + 1); console.log(1 - 1); console.log(1 / 1); console.log(1 * 1); console.log(1 % 1); -> 나누고 나머지값 console.log(2 ** 3); -> 2의 3승 3. Increment and de.. 2022. 2. 23.
[JS ]01-variable (var와 let차이, const, primitive 타입 등) 1. Use strict 'use strict'; js 최상단에 적기. 타입스크립트를 사용한땐 안써도 되지만 바닐라 자바스크립트를 사용할땐 적는것이 좋다. js의 flexible한 요소들을 막아준다.(선언되지 않은 함수의 값을 할당한다던지 기존의 존재하던 프로트타입을 변경한다던지 이런 비상식적인 것들을 막아주기 위함.) 2. variable(읽고 쓰기 가능) -var 와 let var는 절대 쓰지 말것! 이유1: 호이스팅문제 때문. (호이스팅: 선언을 최상단으로 끌어올리는것) 이유2: has no block scope. 블럭스코프 밖에서도 호출이되는 문제가 있음 그래서 나온게 let let은 Mutable 타입 (변화가능) * block scope란?: {}로 감싸는것. {}안에 코드작성시 안에서만 유.. 2022. 2. 23.
[JS] html에서 script를 읽는 다양한 방식 (async와 defer) 1. 아무것도 안한 상태의 script 읽는 방식 js가 실행되는 과정 (1) parsing html (한줄한줄 읽다가) (2) [blocked] -script부분을 만나면 parsing html을 잠시멈추고, -fetching js (서버에서 다운받는일)를 한뒤 -executing js (실행)한다. (3) 다시 parsing html 문제점 : js파일이 크거나 인터넷이 느리면 사용자가 웹사이트를 보는데까지 많은시간이 걸림 2. body안 끝단에 script를 추가하는 방식 js가 실행되는 과정 (1) parsing html (2) fetching js (3) exeuting js 문제점: html을 끝까지 읽은 뒤 js 다운 및 실행되기 때문에 사용자가 html의 컨텐츠를 빨리 보는 장점은 있지만 .. 2022. 2. 23.
320x100

티스토리툴바