본문 바로가기

javascript54

JavaScript - Primitive Value & Casting 오늘은 자바스크립트 기초를 정리해보았다. 내가 정리한 챕터는 Primitive Value & Casting 이다. Primitive Value 이란Primitive value (원시값)은 말 그대로 원초적인 단순 값이다 → 객체 x / 메소드 x / 속성 x 을 가지지 않는 데이터 → 원시값 자체는 불변이다. 변수가 변할 뿐! 원시 타입에는 각각의 객체마다 내장함수들이 있다 ex) toLocaleString(), toFixed() (그래서 이 타입의 값들을 핸들링할 때, 이 함수들을 요긴하게 사용한다) 하지만 null / undefined 는 아무것도 없 - 다 (그래서 undefined 값인 변수를 사용할 때 TypeError가 꽤나 발생하므로, 예외처리는 필수이다) Primitive Value 원시 .. 2023. 10. 31.
JavaScript - 자바스크립트 엔진 / 이벤트 루프 / 테스크 큐 올 초부터 점심시간마다 모던 자바스크립트 딥다이브를 한 장씩 읽고 있다. 기초 개념들을 익히기에 좋은 자투리 시간인 것 같다. 잊지 않기 위해 내가 이해한 내용들을 바탕으로 쉽게 풀어 포스팅 해보려고 한다. JavaScript - 자바스크립트 엔진 / 이벤트 루프 / 테스크 큐 자바스크립트는 싱글 스레드 언어이다. (언제나 그렇듯이) 싱글 스레드는 카페에서 직원 한명이 모든 주문을 다 처리하는 것과 같다. 하지만 싱글스레드는 하나의 일이 끝나야 다음 일을 한다. (동기적) 에스프레소샷을 내리는 사이 - 얼음을 컵에 담아놓고 - 샷을 얼음컵에 담아 건낸다 주문을 받고 - 동전을 거슬러 주고 - 영수증을 준다 그렇지만 브라우저가 등장하면 이야기가 달라진다. 동시에 여러 일을 할 수 있도록 매니저가 지시해주는.. 2023. 8. 1.
JavaScript - This 에 대해서 요즘 바닐라 자바스크립트를 사용해서 코드를 짜다보니 this 가 여간 걸리는 게 아니다 리액트에서는 this 의 개념이 없어서 안다고 했지만 그동안 간과해왔던 이 친구 정확히 정체가 뭘까? 설명할 수 없는 지식은 완전한 지식이 아니기 때문에 공부하고 정리해보았다 JavaScript - This 에 대해서 함수 호출 시 this 의 값이 결정된다. (선언이 아니다) 클로저 (상위 스코프를 참조하는 성질) 때문에 this 도 마찬가지로 상위 값을 참조한다 다만 엄격 모드와 논엄격 모드에서는 차이가 좀 있다 ** 참고로 함수의 상위 스코프는 글로벌(window)이다 단독으로 사용한 this 의 경우 → 함수 상위 스코프인 window 로 바인딩 된다 함수 안에서 사용한 this 의 경우 → 함수 상위 스코프인.. 2023. 7. 30.
JavaScript - 동기와 비동기의 쉬운 이해 Updated 03/16/23 항상 헷갈렸던 부분을 의식의 흐름에 따라 정리해보려고한다. 요청과 응답 HTTP 통신을 할때는 클라이언트와 서버가 서로 커뮤니케이션을 한다. 통신을 할 때는 순서가 중요하다. 그래서 통신을 할 때 동기적 처리가 필요하게 되었다. 요청 - 클라이언트 → 서버 응답 - 서버 → 클라이언트 동기와 비동기 동기는 하나가 완료하고 차례차례 그 다음 테스크를 처리하는 방식이다. 비동기는 동시에 병렬적으로 핸들링하는 방식이다. 자바스크립트는 싱글쓰레드 언어이다. 싱글쓰레드는 이 말인즉슨 일꾼이 한명이다. 동시 진행이 안된다. 하나의 함수를 실행하고 있으면, 다른 함수는 블로킹(Blocking)이 된다. 멀티쓰레드는 병렬진행이 가능하다. ex) 크롬 창을 보면 알수있다. 한탭에서 에러가 .. 2023. 3. 9.
JavaScript - 유용한 정규식 예제들 내가 보려고 만든 유용한 정규식 예제들 🤩 정규식은 사랑입니다 💝 (계속 업데이트 해서 채워나갈 예정) JavaScript - 유용한 정규식 예제들 URL 검사 const validURL = (url: string): boolean => { if (!url) { return false; } const regex = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/g; return regex.test(url); }; 이메일 검사 const validEMAIL = (email: string): boolean => { if (!email) { return false; } const regex = /^([\w._-])*[.. 2023. 3. 2.
JavaScript - 재귀함수 만들기(feat. 반복문 비교) 프로그래머스 코테 문제를 풀어보다가 while 문을 사용한 함수를 → 재귀함수로 바꾸어 한번 더 풀어보았다. 처음에는 어렵지만 유형을 익히고 이해하게 될수록 참 재미있어 지는 것 같다. JavaScript - 재귀함수 만들기(feat. 반복문 비교) 문제를 간단히 설명해보면 다음과 같다. (출처 : 프로그래머스 - 콜라문제) 콜라 빈병 2개를 가져가면 → 새것 1병으로 교환해준다. 나는 총 빈병 20개를 가지고 있다. → 그럼 새것 10병을 받을 것이다. 10병을 그자리에서 마신다 → 그럼 새것 5병을 받을 것이다. 5병을 그자리에서 마신다 → 그럼 새것 2병을 받을 것이다. + 빈병 1개가 남을 것이다. 2병을 그자리에서 마신다 → 그럼 새것 1병을 받을 것이다. 새병 1개 마셔버리고 + 아까있던 빈병.. 2023. 3. 1.
JavaScript - 조합 구하기 (재귀함수) 조합은 순서 상관없이 경우의 수를 구하는 것이다. 그림을 보면 한번에 이해가 될 것이다. [1,2,3] 배열의 경우 [1,2], [2,3], [1,3] 이렇게 세가지 조합이 나온다 JavaScript - 조합 구하기 (재귀함수) 조합을 구하기 위해서는 재귀함수를 응용한다. 반복문으로 구할 수 있지만 일일이 구하고자 하는 숫자만큼 반복해주어야되어 코드가 길고 복잡해질 수 있기 때문이다. // 1 function getCombination(arr, selectNum){ const result = []; // 결과값을 담은 배열선언 if(selectNum === 1) { // selectNum 이 1 일 떄 (재귀함수의 종료조건, 탈출구!) return arr.map(item => [item]) // ex) .. 2023. 1. 4.
JavaScript - 소수구하기 (에라토스테네스의 체) 소수는 자기 자신과 1 로만 나뉘어지는 수이다. 예를 들어 5 는 1 로만 나뉘어 질 수 있다. 자, 소수를 구하는 판별식을 정리해보았다. 이제 당신은 이걸 가지고 응용하기만 하면 된다 :) JavaScript 에서 소수인지 검사하기 위해서는, For 문으로 검사를 할 때, { number 이 0, 1 이면 탈락 → 1은 소수가 아님 number 가 2 이면 소수이다 → 2은 소수이다 number % index === 0 이라는 조건에 들거든 탈락 → 자기자신과 1로만 나뉘어져야 된다는 소수의 조건 성립이 X) } 방법 1) 반복문 함수 판별식 함수는 보기에 너무 간단하다. 하나하나씩 다 돌려서 소수에 부합하는 것을 찾아낸다. 시간복잡도는 O(N) 으로 무난하지만, 해당하지 않는 숫자까지 일일히 하나하나.. 2022. 12. 30.
React(89) 글 작성시간 계산함수 만들기 (몇분전/몇시간전/몇일전) 게시글 작성 시간을 현재시간 기준으로 표시해주는 유틸성 함수를 만들어 보려고 한다 moment.js 라이브러리를 활용하면 아 - 주 간편하게 시간계산함수를 만들수있다 그럼 몇 분 전, 몇 시간 전, 몇 일 전 을 표시하는 함수를 만들어보자 결과화면 미리보기 React(89) 글 작성시간 계산함수 만들기 (몇분전/몇시간전/몇일전) Date 객체로 작성시간을 매개변수로 받아오자 today 날짜를 구한뒤 diff 내장함수로 day, hour, minute 의 차이를 구하면 된다. export const getDayMinuteCounter = (date?: Date): number | string => { if (!date) { return ''; } const today = moment(); const pos.. 2022. 12. 28.
반응형

티스토리툴바