꾸매코딩

JavaScript 비트 연산자 비트 연산자(bitwise operator) 는 주어진 수를 2진수로 변환하여, 비트(bit) 단위로 논리 연산을 수행함 & (AND 논리 연산자) 비교하는 비트가 모두 1이면 1을 반환 ⇒ 두 비트가 모두 1인 값을 반환 const ex1 = 2 & 3; console.log(ex1); // 2 0010 // 3 0011 //. 0010 = 2 | (OR 논리 연산자) 비교하는 비트 중에서 하나라도 1이면 1을 반환 ⇒ 두 비트 중 하나라도 1이면 1을 반환 const ex2 = 2 | 3; console.log(ex2); // 2 0010 // 3 0011 //. 0011 = 3 ^ (XOR 배타 논리 연산자) 비교하는 두 개의 비트가 같으면 0을, 다르면 1을 반환 ..

서론 큰 이유 없이 둘을 혼용하여 사용하고 있다는 것을 느끼고, 둘의 차이를 비교하여 내 코드에 적용하기 위해 정리를 하게 되었다. Default Export Default Export는 딱 한개만 default export 할 수 있기 때문에 '메인'이라고 할 수 있는 것을 export 하는 것이 좋다. object, function, class 등이 될 수 있다. // import import DefaultValue from "./MyDefaultValue"; // export const DefaultValue = () => {} export default DefaultValue Default Export 특징 import 시 원하는 변수명을 지정해줄 수 있다. // import import Defa..

서론 JavaScript에서 클라이언트와 서버 간 데이터를 주고받기 위해 비동기 HTTP 통신을 사용한다. 그 예로 Ajax, Axios, fetch 가 있다. 비동기에 관하여 참고하면 좋은 자료 [JavaScript] Promise(프로미스) 란 무엇인가? [JavaScript] 비동기 처리 - Async / Await이란 무엇인가? [JavaScript] Promise(프로미스) 란 무엇인가? 프로미스(promise)를 이해하기 위해서는 JavaScript가 어떤 식으로 작동하는지 알아야 한다. 싱글 쓰레드 언어인 JavaScript는 비동기 처리를 위해서 콜백(Call Back)을 이용해 이를 보완하였다. 하지만 Cal shin1303.tistory.com [JavaScript] 비동기 처리 - A..

npm 이란? npm 은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다. [위키백과] npm 이란 Node Packaged Manager(노드 패키지 관리자)의 약자이다. → JavaScript 모듈을 설치하기 위해 사용된다. 예로 'pnpm', 'Yarn' 등이 있다. Node.js의 기본 패키지 관리자이므로 Node.js가 설치되어 있다면 npm을 사용하기 위해 따로 무언가 할 필요는 없다. npm에 대한 자세한 설명 https://docs.npmjs.com/about-npm About npm | npm Docs Documentation for the npm registry, website, and command-line int..

비동기 처리의 중요성 시간이 걸리는 코드를 비동기 처리하지 않으면 문제가 발생할 수 있음 Ex) 서버에서 Data를 받아와서 출력해야 하는 상황에 비동기 처리를 하지 않으면 Data를 받을때 까지 기다리며 다음 코드들도 기다리게 됨 Promise의 문제 점 체이닝(.then .then .then ...)을 계속하다 보면 코드의 가독성이 떨어짐 Async / Await 비동기 처리방식인 콜백 함수와 프로미스(promise)의 단점을 보완 비동기 처리 패턴 중 가장 최근에 나온 문법 프로미스를 간결하고 동기적으로 실행되는것 처럼 보이게 만들어주는 API Async를 사용하면 함수의 코드 블록이 자동으로 Promise로 변환 됨 Async / Await 사용 방법 function 앞에 async 키워드 Pro..

결과 FireBase의 Authentication (인증) 기능을 이용하여 로그인 창을 구현하였다. Google 아이디와 Github 아이디로 로그인 가능하도록 설정했다. SetTimer.js 내용이 너무 길어져 Modal창 부분을 따로 components로 분리했다. 오류 SetTimer.js를 분할하는 과정에서 생긴 오류 갑자기 사이트에 렉이 걸리기 시작했고, console.log()로 출력해보니 끊임없이 랜더링 되고 있었다. 생각 1. 분할하는 과정에서 props를 setDbTime={setDbTime} setState로 설정해주어서 그렇다고 생각함 → 검색해본 결과 이렇게 사용해도 상관없음, 따로 만들어서 실행해보니 이상 없음 2. 랜더링 관련 문제이니 useEffect() Hook과 관련 있을 ..