목록전체 글 (146)
게으른개발너D
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/enw1dk/btssMBZ4ICt/qFIA7ei22cPif12NgZdcpK/img.jpg)
1. 루프 돌리기 1. 최대공약수 최대공약수는 두 수 A, B의 공통 약수들 중 가장 큰 정수이다. 가장 직관적인 방법은 min(A, B)부터 1까지 루프를 돌려 각 수를 나누어보는 방법이다. const getGCD = (a, b) => { const max = Math.min(a, b); let gcd = max; for(let i = max; i >= 1; i--){ if(a % i === 0 && b % i === 0){ gcd = i; break; } } return gcd; } 2. 최소공배수 최소공배수는 A, B의 공통인 배수들 중 가장 작은 정수이다. 가장 직관적인 방법은 max(A, B)부터 시작하는 루프를 돌려 각 수들로 나누어보는 방법이다. const getLCM = (a, b) =>{..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/2RPcS/btssHyuje49/576aM3SJAsr57qY4Q4dzIK/img.png)
개발을 하다가 API를 불러오는데 복잡한 로직이 필요없어 React Query를 쓰지 않고 Async/ Await를 통해 api를 불러오고 있었다. 하지만 가장 눈에 거슬리는 것은 리스트 item들을 API로 불러온 후 상세보기 화면으로 진입, 그 후에 뒤로가기를 하면 다시 API를 호출하여 loading 아이콘이 빙글빙글 돌고 있는 것이다. 날짜별로 localStorage에 저장한 후 다시 불러와 지난 날짜 data들은 삭제할까 싶다가 그냥 React Query를 사용하기로 했다. 역시 caching 기능을 무시할 수 없다.ㅠㅠ react query는 fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리이다. 즉, React 환경에서 비동기 query 과정을 도와주는 라이브러..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sngVv/btsr0XBVUDX/EUWuJU8WbjTA19d8moEU31/img.png)
google maps나 google books 등의 embed를 사용하거나 window 객체에 property를 추가하는 일이 있을 수 있다. 예를들어 google books 미리보기 embed를 사용하는 경우이다. html 파일에 script 태그를 사용하여 API 로더를 포함시킨다. 하지만 위의 html이 아닌 다른 ts 파일에서 아래와 같이 작성하면 window는 google이라는 property의 존재를 알지 못한다. window.google.books.load(); function initialize() { var viewer = new window.google.books.DefaultViewer(document.getElementById('viewerCanvas')); viewer.load('..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dORm0K/btsrZkKuIP4/ttwxDxzuKabai4J0dxNrt0/img.jpg)
메모리 (Memory) 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 셀 (memory cell)의 집합체이다. 메모리 셀 하나의 크기는 1바이트 (8비트)이며, 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어들인다. 각 셀은 메모리 공간의 위치를 나타내는 고유의 메모리 주소 (memory address)를 갖는다. ✨ 4.1 변수란? 변수는 왜 필요한가? 10 + 20 이란 코드를 실행하면 값 10과 20은 메모리 상의 임의의 위치 (메모리 주소)에 기억(저장)되고 CPU는 이 값을 읽어들여 연산을 수행한다. 연산 결과인 30 또한 메모리 상의 임의의 위치에 저장된다. 하지만 CPU가 만들어낸 숫자 30을 재사용할 수 없다. 30을 재사용하려..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cmhZam/btsrdi8drro/TY8afX8fUAa3dIO94rH8FK/img.jpg)
App.js (유효성 검사 실행을 불러올 컴포넌트) 유효성 검사를 실행할 email과 password input form을 불러온다. form을 submit 할 버튼에 addEventListener로 유효성 검사를 실행할 VerifyForms class의 instance를 만든다. import VerifyForms from 'VerifyForms.js'; class App { constructor({ $target }) { this.$target = $target; this.$email = document.querySelector("#email"); this.$password = document.querySelector("#password"); this.$btn = document.querySelecto..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/buO6qT/btsqtaDanmv/kFfFq6YTgg08k6K6Yv9ZF0/img.jpg)
1. test file 생성 파일명에 .spec, .test 를 넣어주면 test file로 인식된다. ex) login.test.js 2. test code 작성 test("테스트 설명", () => { expect("검증 대상").toXxx("기대 결과"); }); function solution(n) { let answer = '' const nArr = [1, 2, 4]; while(n) { answer = nArr[(n - 1) % 3] + answer; n = n % 3 === 0 ? (n / 3) - 1 : Math.floor(n / 3); } return answer; } // 테스트 코드 시작 describe('math.js', () => { // test() : 하나의 테스트 케이스를 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Ij2eZ/btsp33ShCDv/LW6AftCEEcYu1CKzkD4fXK/img.jpg)
컴퓨터 시간은 어떤 원리로 동작할까? 시간이 결정되는 법칙은 세 가지가 있다. 1. 물리량 시간은 물리학 관점에서 봤을 때 시각과 시각 사이 간격을 표현하는 단위를 뜻한다. ex) 지금 이 순간 (Instant)은 빅뱅 (Epoch) 이후 시간이 얼마나 흘렀는가? 2. 위치 시간은 위치에 따라 다르게 표현될 수 있다. ex) 경도 0도(UTC)가 정오일 때 동경 135도의 시각은? (경도상 위치) ex) 런던이 정오일 때 미국의 시각은? (국가, 지역) 3. 천문 현상 지구자전속도의 불규칙성, 지구의 자전주기와 공전주기 등 천문 현상으로 인한 시간 보정이 필요하다. ex) 윤초, 윤달, 윤년 물리 법칙이 아닌 협의에 따른 표현도 있다. 1. 문화 문화에 따라 시간 표현이 다를 수 있다. ex) 태양력, ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ri74a/btsp2biCm8i/KrZ2UQeK8wQDouUG50ZKA0/img.jpg)
브라우저에 URL을 입력하면 무슨 일이 발생할까? 브라우저 주소창에 tistory를 입력하면, 잠깐의 로딩 후에 tistory 사이트가 보이게 된다. 잠깐의 로딩 사이에 도대체 어떤 일이 발생하길래 웹사이트가 이동하게 되는걸까?! Step 1. URL을 해석한다. schema://:@:/ 예시 http://example.com:8761/members ftp://admin:1q2w3e4r@example.com/image.png mailto:kciter@naver.com http:programmers.co.kr url은 스키마, 계정정보, 호스트, 포트, 패스 정보로 이루어져 있다. 여기서 스키마는 프로토콜이 들어가는 영역이다. 계정정보는 ftp를 이용한 사람이라면 잘 알 것이다. 말 그대로 인증이 요구되는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/QW7c1/btspVNphle1/O1tudysJzAcaV4StNh5zc1/img.jpg)
✨ 스코프 유효 범위라고도 부르며 변수가 어느 범위까지 참조되는 지를 뜻한다. 어디서도 접근 가능한 전역 스코프(Global Scope)가 있고, 해당 스코프 컨텍스트 안에서만 접근 가능한 지역 스코프(Local Scope)로 나뉜다. const a = 5; // Global Scope { const b = 3; // Local Scope console.log(a, b); // 5, 3 } console.log(a, b); // Error! var를 사용하면 개발자가 예상치 못한 오류가 생길 수 있다. 블록 내부에 새롭게 선언하더라도 블록 외부 값도 변하게 된다. var a = 5; { // 호이스팅 되어 변수 선언이 상단으로 올라가버린다. var a = 10; console.log(a); // 10 }..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/eo0nCB/btspZCnsqf5/5EajJRUUWb2KBr4bamHyV1/img.jpg)
✨ Control Flow Control Flow는 우리가 흐름을 제어하는 방법 중 하나로, 조건이나 반복을 통해 상태를 제어하는 것을 말한다. 코딩을 처음 배울 때 다루는 if와 for 등의 방법이 있다. 흐름제어는 두가지 방법이 있다. Control Flow, Data Flow Control Flow 우리가 일반적으로 알고있는 조건문이나 반복문 goto if/ then/ else switch/ case for/ while let a = [1, 2, 3, 4, 5]; for (let i = 0; i < 5; i += 1) { if (a[i] % 2 === 0) { console.log(a[i]); } } Data Flow 함수형 프로그래밍 방식으로 구현이 가능함 stateless recursion pi..