분류 전체보기89

• 2022 1월 첫째주 1. debounce 2. moment https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-2-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%9B%90%EC%8B%9C-%ED%83%80%EC%9E%85Primitive-Type-%EB%B2%88%EC%97%AD 자바스크립트 개발자라면 알아야 할 33가지 개념 #2 자.. diary 2022. 1. 6.

• 

  [javascript] 자바스크립트의 값 / truthy,falsy 자바스크립트에서 값은 이상합니다. 타입을 가지고 있지 않지만 필요에 따라 타입이 변환되기도 하고, [] == 0 이 true 이고, 심지어 if([]) console.log('aa'); 도 정상적으로 동작합니다. 도대체 자바스크립트의 값은 어떻게 동작하기에 이렇게 될 수 있을까요? [] == 0 // true if([]) { console.log('어, 이게 왜 되지?'); // 출력 O } if(0) { console.log('어, 이게 왜 안되지?'); // 출력 X } 모든것은 연산자에 따른 형변환의 값이 truthy, falsy 구분에 의한 현상입니다. 값의 종류 자바스크립트에는 두 가지 종류의 값이 있습니다. 하나는 Primitive Value(원시 값) 이고, 다른 하나는 Reference V.. javascript 2022. 1. 6.

• 

  [javascript] nullish 병합 연산자 '??' nullish 병합 연산자(nulish coalescing operator) ?? 를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있습니다. a ?? b 의 결과는 다음과 같습니다. a 가 null 도 아니고 undefined도 아니면 a 그 외의 경우는 b nullish 병합 연산자 ?? 없이 x = a ?? b 와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. x = (a !== null && a != undefined ) ? a : b ; '??'와 '||' 의 차이 nullish 병합 연산자는 OR 연산자 || 와 상당히 유사해 보입니다. 그러나, 두 연산자 사이에는 중요한 차이점이 잇습니다. ||는 첫 번째 truthy값을 반환합니다. ??는 첫 번째.. javascript 2022. 1. 6.

• 

  [javascript] padStart(), padEnd() (lpad(), rpad()) padStart() mdn : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart String.prototype.padStart() - JavaScript | MDN padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다. developer.mozilla.org padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다. const str1 = '5'; co.. javascript 2022. 1. 5.

• 

  [React] super(props) class Checkbox extends React.Component { constructor(props) { super(props); this.state = { isOn: true }; }; // ... }; super (props) 사용 클래스 필드 문법을 사용한다면 사용하지 않아도 됩니다. class Checkbox extends React.Component { state = { isOn: true }; // ... }; 왜, super를 선언하는지, super를 사용하였을때 props를 넣어주지 않으면 어떤 일이 발생하는지 ...에 대해 작성해 보았습니다. super 선언하는 이유 javascript에서는 super 키워드 실행 후 this를 사용할 수 있게 했습니다. React도 마찬가지 입니다.. react 2022. 1. 5.

• 

  [React] 자주 사용되는 생명주기 메서드 render() render() 메서드는 클래스 컴포넌트에서 반드시 구현해야 하는 유일한 메서드입니다. 이 메서드가 호출되면 this.props 와 this.state 값을 활용하여 아래의 것 중 하나를 반환해야 합니다. -- React 엘리먼트 : 보통 JSX를 사용하여 생성됩니다. ex) 와 는 React가 DOM 노드 또는 사용자가 정의한 컴포넌트를 만들도록 지시하려는 React 엘리먼트입니다. -- 배열과 Fragment : render()를 통하여 여러 개의 엘리먼트를 반환합니다. https://ko.reactjs.org/docs/fragments.html -- Protal : 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링합니다. https://ko.reactjs.org/docs/portal.. react 2022. 1. 5.

• 

  [React] React.Component React를 사용할 때 컴포넌트를 class 또는 함수로 정의할 수 있습니다. React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 합니다. class Welcome extends React.Compoennt{ render(){ return Hello, {this.props.name} ; } } render() 는 React.Component의 하위 class에서 반드시 정의해야 하는 메서드입니다. 컴포넌트 클래스를 직접 만들어서 사용하지 마세요. React 컴포넌트를 사용할 때에는 상속보다 합성을 주로 사용합니다. 컴포넌트 생명주기 모든 컴포넌트는 여러 종류의 "생명주기 메서드"를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다. 마운.. react 2022. 1. 5.

• 

  [MYSQL] - SELECT 효율적으로 사용하기 - JOIN(2) https://sewonzzang.tistory.com/10 [MYSQL] - SELECT 효율적으로 사용하기 - JOIN 1. 쿼리의 속도를 측정하는 EXPLAIN mysql 옵티마이저는 비용 기반으로 어떤 실행 계획으로 쿼리를 실행했을 때 비용이 얼마나 발생하는지를 계산하여 비용이 가장 적은 것을 택하게 된다. 어디까지 sewonzzang.tistory.com 2. JOIN 쿼리의 최적화 A,B,C테이블을 가정할 떄, A와 C를 JOIN 한다면, select * from A left join C on A.A_ID=C.A_ID 로 하게 된다면 ALL 이 될 것이다. 왜냐하면 A 테이블은 C에 없는 A_ID 행들을 가지고 있기 때문이다. A 기준으로 찾는다고 생각을 해 보면, A테이블을 다 뒤져보게 되는.. database 2022. 1. 3.

• 

  [MYSQL] - SELECT 효율적으로 사용하기 - JOIN(1) 1. 쿼리의 속도를 측정하는 EXPLAIN mysql 옵티마이저는 비용 기반으로 어떤 실행 계획으로 쿼리를 실행했을 때 비용이 얼마나 발생하는지를 계산하여 비용이 가장 적은 것을 택하게 된다. 어디까지나 추정 값이므로 정확한 비용은 실행 전까지 정확하게 알 수 없다.. EXPLAIN은 MySQL 서버가 어떠한 쿼리를 실행할 것인가, 즉 실행 계획이 무엇인지 알고 싶을 때 사용하는 기본적인 명령어이다. EXPLAIN SELECT * FROM 테이블명 WHERE 조건 SELECT 명령문을 EXPLAIN 앞에 두면, MYSQL은 쿼리 실행 플랜 (query execution plan) 정보를 옵티마이저 (optimizer) 에서 가져와서 출력한다. 즉, MYSQL은 테이블들이 어떤 순서로 조인 (join) 하.. database 2022. 1. 3.

• 

  [mysql] 자주 사용하는 select 1. RANK() / DENSE_RANK() / ROW_NUMBER() -순위매김 RANK 함수는 중복 값 들에 대해서 동일순위로 표시하고, 중복 순위 다음 값에 대해서는 중복 개수만큼 떨어진 순위로 출력하는 함수입니다. OVER()안에 RANK를 매길 조건을 입력하는데 이 때, 조건이 하나가 아닌 여러개라면 PARTITION BY절을 사용해서 특정 속성 별로 구분을 합니다. 저는 년월, 과목별 점수에 대한 학생별 등수를 보여줘야 했기 때문에, PARTITION BY년월, 과목코드 로, 등수를 매기는 조건은 점수를 내림차순으로 정렬하였습니다. RANK()를 검색하다보면 DENSE_RANK() 도 볼 수 있는데 RANK() 와 DENSE_RANK()는 둘 다 공동순위가 존재하는데, 차이점은 RANK()는 .. database 2021. 12. 31.

• 2021 마지막주 1. 코드피커 2. 클래스 필드 ㄴ 클래스 필드를 사용하면 생성자(constructor)에서 this.state를 사용할 필요가 없음. ㄴ'React 클래스 필드 검색' 3. 일반 함수와 화살표 함수의 차이 이해하기 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions 4. this 5. javascript의 형변환 동작 방법 6. leftPad, rightPad 구현 https://infotake.tistory.com/48 7. promise(동기, 비동기...) diary 2021. 12. 30.

• 

  mac - nvm으로 노드 버전 관리하기 저는 macbrew 를 설치한 상태에서 nvm으로 node의 버전을 관리했습니다. nvm을 설치하셨나요? 먼저, nvm이 제대로 설치되었는지 확인을 합니다. $ nvm -v $ nvm --version nvm -v 또는 nvm --version 명령어를 입력했을 때 명령어를 찾을 수 없다고 나오는 것이 아니라 0.33.1 다음과 같이 나와야 설치가 되어있다는 것을 확인 할 수 있습니다. nvm으로 노드 버전 관리하기 nvm을 활용해서는 다양한 버전의 Node.js를 쉽게 설치할 수 있다고 합니다. 저는 12.14.0 lts를 사용하다가 create-react-app 을 사용하기 위해서는 14이상의 버전이 필요하다고 하여 14.17.3 lts으로 변경하려고 합니다. 먼저, 변경하려는 node의 버전을 설치.. mac 2021. 12. 30.