괘종소리 세기

프로젝트 중 반복문을 돌면서 비동기 요청을 해야 하는 상황이 있어서 찾아보았습니다.타입을 작성하는 게 이해가 쉬울 것 같아서 TypeScript로 작성하였습니다.  1. forEach무조건 비동기적으로 처리됨.const nums: number[] = [1, 2, 3];nums.forEach(num => { axios.get(`127.0.0.1:8080/${num}`) .then(() => console.log(num));});요청 순서는 1, 2, 3의 순서지만 비동기적이므로 응답이 먼저 오는 순서대로 로그가 찍힌다.async나 await로도 동기 처리가 되지 않는다.   2. for 또는 for-ofasync와 await을 사용함으로써 순서대로 처리가 가능함. 아래 코드에서는 for-of 문..

시맨틱 태그(Semantic Tag) 란? 태그처럼 block element지만, 와 다르게 의미를 포함하고 있는 HTML 태그. HTML5부터 등장함.※ 참고 : 태그는 inline element라고 하며, 줄바꿈이 없습니다.   시맨틱 태그를 이용하여 얻는 장점1. HTML5 기반 웹 페이지 일관성 향상 -> 음성 서비스 등 접근성 서비스들에 정보 제공2. 코드 가독성 향상3. SEO(Search Engine Optimization, 검색 엔진 최적화) 향상 -> 검색엔진 크롤링 봇에게 정보 제공   : 페이지 링크들이 모여 있는 네비게이션 바 : 배포가 가능한 콘텐츠(게시글) : 게시글에 포함된 미디어 콘텐츠 : 의 캡션 : 사이드바 메뉴 : 콘텐츠들을 특정 몇 개의 주제별로 묶을 때 사용

클로저(Closure)를 응용하여 반복되는 사전작업(변수 정의)을 피하는 방법을 사용해 본다.// 함수 호출 시마다 a, b라는 변수가 계속 정의된다.const compare = (x) => { const a = 10; const b = 20; return x > a && x > b ? "bigger" : "smaller"}console.log(compare(30));console.log(compare(5));↓// 클로저를 이용한다.// a와 b의 값은 compare 내부 스코프에 한 번 저장된다.// 그러면 return 안의 anonymous 함수에서 compare의 렉시컬 환경에서 a, b의 값을 참조해 온다.const compare = (x) => { const a = 10;..

이전에 React의 setInterval을 사용하면서 발생한 문제와 그 해결법에 대해 포스팅을 했었습니다. (아래 포스트 참고) [React/TypeScript] setInterval 안에서 state가 변경되지 않을 때 (useInterval 사용법) // Timer.tsx const [currentSeconds, setCurrentSeconds] = useState(0); const [isReverse, setIsReverse] = useState(false); useEffect(() => { setInterval(() => { if (!isReverse) { setCurrentSeconds(prevState => prevState + 1); } else { setCurrentSeconds(prevS..

자바스크립트는 위에서부터 아래로 순차적으로 코드를 해석하는 인터프리터(Interpreter) 언어입니다. 하지만 모든 코드가 순차적으로 동작하는 건 아닌데요, 그 이유는 호이스팅(Hoisting) 이라는 알고리즘이 정의된 함수와 변수들을 모두 찾아서 먼저 선언시키기 때문입니다. (※ 코드 위치 자체가 끌어올려지는 건 아니며, 렉시컬 환경(Lexical Environment)에 등록되는 것입니다. 렉시컬 환경에는 어떤 스코프 범위에서 사용될 변수와 함수들이 저장되며, 스코프의 개수만큼 생성됩니다. 예를 들어, 함수가 하나 있다면 그 함수 내부의 렉시컬 환경, 그리고 함수 밖의 전역 렉시컬 환경까지 총 두 개가 생깁니다.) 아래의 코드에서는 함수 선언문으로 greet()라는 함수를 만들었습니다. greet(..

ES6이란 ECMAScript의 버전 중 가장 최신 버전을 말합니다. ES1이 제일 초기 버전이고 지금은 ES6까지 나온 상태죠. 제가 개발을 시작한 건 ES6이 상용화된 이후라서 어? 이게 ES6에 추가된 문법이었구나 하고 알아가는 시간이 되었습니다. JavaScript Versions W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 위 링크에 들어가시면 ES6에는 어떤..

특정 시간이 현재 시간보다 이전에 일어난 일인지 초단위로 확인할 때, 아래와 같은 SQL문을 쓴다. SELECT CASE WHEN timestampdiff(SECOND, "2024-03-02 06:00:00.000", CURRENT_TIMESTAMP()) > 0 THEN "y" ELSE 'n' END FROM users; 단위는 초단위(SECOND) 말고도 연(YEAR), 분기(QUARTER), 월(MONTH), 주(WEEK), 일(DAY), 시간(HOUR), 분(MINUTE) 단위로도 설정할 수 있다.

코딩애플 여고생입니다 www.youtube.com 제가 평소에 즐겨보는 유튜버입니다. 채널은 여고생(?)이 운영하고 있습니다. 1. 번들링 툴 (Webpack, Vite 등) 웹 개발시 라이브러리를 쉽게 사용하기 위해 npm을 사용함. npm init으로 npm을 설치함. (이때 package.json 생성됨) npm을 사용하면 node_modules의 용량이 너무 큰데, 번들링 툴을 이용하면 실제 필요한 코드만 하나의 .js 파일로 합쳐주기 때문에 거의 반필수적으로 사용됨. Webpack은 느리지만 Vite는 esbuild(Go로 만들어짐)를 써서 빠름 npm create vite@latest로 사용 (출처: https://youtu.be/iX3Nu1FcZKA?si=zPpVDq5-z9gnuzbh) 2...

최근 아무 이유 없이 Windows 설정에 들어가서 스피커랑 헤드폰을 전환하기가 귀찮아졌습니다. 피시방에 가면 스피커와 헤드폰을 빠르게 전환할 수 있도록 바탕화면에 아예 버튼이 만들어져 있지요. 이걸 한번 만들려고 시도해보았습니다. 1. NirCmd를 다운받습니다. https://www.nirsoft.net/utils/nircmd.html NirCmd - Windows command line tool NirCmd v2.86 Copyright (c) 2003 - 2019 Nir Sofer See Also Description NirCmd is a small command-line utility that allows you to do some useful tasks without displaying any ..

네이버 메일 등과 달리 Gmail에서는 display: flex; 속성은 되지만 flex의 하위 속성은 반영되지가 않는다. 예를 들어 flex-direction: column; 이라든가 align-items: center; 등의 속성이 적용되지 않는다. 그래서 보통은 display: block; 속성으로 하되, 요소를 담은 박스를 가운데 정렬을 하기 위해서는 align="center" 과 table을 이용한다. 검은색 테두리가 메일의 전체 영역이라고 했을 때, 빨간색 테두리 부분은 가운데 정렬을, 파란색 테두리 부분 안에 있는 요소들은 왼쪽 정렬을 하고 싶을 때 쓸 수 있는 방법이다.