본문 바로가기

전체 글

 (122)
Javascript - 변수, 주석 변수, 주석 자바스크립트 2019-10-28 16:27:33 1. 변수 variable. 대명사와 비슷한 역할. 'var'로 시작하고 '변수를 선언하겠다'는 의미. var a = 1; a는 1이다. alert(a); 알림창에 1 표시. var a = 10; a는 10이다. alert(a); 알림창에 10 표시. ▶ 연산 var a = 1; alert(a+3); 결과: 4 ▶ 문자 var first = 'Eun'; alert(first + 'luck'); 결과: Eunluck first = '은' 첫 줄에 var first 를 썼기 때문에 var 를 안써도 변수 first 의 값이 바뀜. ▶ 여러개 var a = 'Eun' , b = 'luck'; var 를 맨 앞에 한 번만 사용했다. alert(a+b)..
Javascript - Number,String Number, String 자바스크립트 2019-10-28 15:50:25 alert(1); 1을 알림 창에 띄운다. 1. Number 정수=0,1,2,3,4,5 실수= 소숫점이 있는 수. ▶Math. 수에 관련된 연산을 해주는 카테고리. ex) Math.pow(3,2) = 3의 제곱 = 9 Math.round(?) = 반올림 Math.round(?) = 올림 Math.floor(?) = 내림 Math.sqrt(?) = 제곱근 Math.random() = 0~1사이의 랜덤 한 수 하나. 100*Math.random(); = 100이하의 랜덤 한 수 하나. Math.round(100*Math.random()); = 100이하 랜덤수의 반올림 값. 2. String ▶문자는 큰따옴표, 혹은 작은따옴표 사이에..
typeScript 프로젝트 생성 - VSCode 터미널에서 아래 명령어 입력으로 해당 폴더를 node 프로젝트로 만든다. // npm 은 package manager // package.json 생성 npm init -y // 타입스크립트 설치 npm i typescript // typescript 파일을 javascript파일로 바꾼다. npx tsc // tsconfig.json 생성 npx tsc --init // 타입검사한 내역이 터미널에 뜬다.(Editor사용 안할경우 계속 쳐서 봐야한다.) npx tsc --noEmit - txconfig.json 설정 // javascript 와 typescript 같이 쓰려면 "allowJs" 주석 풀기. "allowJs": true, // "strict" 옵션은 절대 false로 바꾸지..
typeScript 기본 지식 - typescript는 최종적으로 javascript로 변환된다. deno로 순전한 typescript 코드를 돌릴 수 있으나 대중화되지않음. 브라우저, 노드는 모두 js 파일을 실행. - typescript는 언어이자 컴파일러(tsc)이다.컴파일러는 ts 코드를 js로 바꿔준다. >> 컴파일러보다는 트랜스파일러가 더 맞는 표현이라고 하심 - tsc는 tsconfig.json(tsc --init 시 생성)에 따라 ts 코드를 js(tsc 시 생성)로 바꿔준다. 인풋인 ts와 아웃풋인 js 모두에 영향을 끼치므로 tsconfig.json 설정을 반드시 봐야한다. >> 옵션을 읽고 internet ex 에서 돌리수있게도 설정할 수 있음(변환할 javascript 버전 설정 가능) - 단순히 타입 검사만 하..
React - createContext, provider, reducer - 최상위에서 export const TableContext = createContext({ tableData: [], halted: true, dispatch: () => {}, }); // reducer는 case문으로. // action을 어떻게 처리할지 관리하는 함수 const reducer = (state, action) => { switch (action.type){ case START_GAME: return { ...state, data: { row: action.row, cell: action.cell, mine: action.mine, }, openedCount: 0, tableData: plantMine(action.row, action.cell, action.mine), halted:..
React - Hooks의 useState, useRef, useEffect, useMemo, useCallback 차이 * 공통점 - 얘네 전부 조건문안에 넣으면 안되고, 반복문, 함수에 웬만하면 넣으면 안된다. - 항상 최상위에 두기. - 다른 Hooks 안에서 또 다른애를 실행하면안된다. * 차이점 1) useState - 렌더링과 관련된 값. 2) useRef - 렌더링과 관련되지 않은 일반 값 3) useEffect - 대상을 인자로(배열로) 받음. - lifeCycle과 관련해 실행. - 대상별로 수행할 일이 다르면 여러번 써도 된다. - 대상배열이 빈 배열이면 바뀐 것이 없으니 다시 실행도 안된다.(무조건 componentDidmout 처럼 사용됨) 4) useMemo - 대상을 인자로(배열로) 받음 - 렌더링과 관련되지 않은 복잡한 결과 값을 기억. - useMemo 안에서 쓰이는 state 들은 두번째 인자..
React component life cycle * class의 경우 constructor() render() ref componentDidMount() (렌더함수가 실행되고 리액트가 jsx를 돔에 붙이는 순간!) setState/props 바뀜 shouldComponentUpdate값이 true (false면 7,8번 건너뛰고 9번으로) render() componentDidUpdate() (부모가 나를 없앴을 때) componentWillunmount() (부모가 나를 없애지 않으면 9, 10번은 없음) 소멸 * Hooks의 경우 따로 lifeCycle 없지만 UseEffect로 비슷하게 할 수 있음. useEffect(() => { // 여기에 componentDidmount, componentDidUpdate 로직 return() => { 여기..
React CreateRef * Class 에서 ① 함수로 - 얘를 쓰는 경우 : 함수여서 ref를 설정할 때 자유도가 조금 있다. 미세하게 조정가능한 장점이 있다. inputRef; onInputRef = (c) => { this.inputRef = c ; }; ② 얘는 세팅시 current 필요 inputRef = createRef(); inputRef.current = "~~~"; inputRef.current.focus(); * Hooks에서 const React = require('react'); const { useState, useRef } = React; const WordRelay = () => { const [word, setWord] = useState('aaa'); const inputRef = useRef(n..

티스토리툴바