전체 글 114

[일상] 요즘 일상

오랜만에... 일상글입니다.  *벌써 회사에 다닌지 2년하고 한 달이 됐습니다. 제가 속해 있는 웹 개발팀에 신입분이 오셨습니다.벌써 두 번째 후임이네요.학교 졸업하고 거의 바로 회사에 들어와서 후임분들이 저보다 나이가 많습니다. 처음엔 그게 조금 불편하지 않으실까 싶었는데, 괜한 걱정이더군요.일단 두 분 다 굉장히 순하시고, 나이가 적은 제게 질문을 하는 것에 대해서도 부담스러워하지 않아 하셔서 다행이라는 생각을 했습니다. 그런데 이번 분이 "저 너무 못하는 것 같아요" 라는 말을 하시더군요.........들어온지 이틀밖에 안 됐는데... 그래서 처음부터 잘하는 사람이 어딨냐며.... 신입이 처음부터 잘하면 그건 산업스파이다... 뭐 이런 말을 해드렸습니다.그런데 제가 처음 들어왔을 때 모습이랑 참 겹..

일상 2024.05.12

[JavaScript/TypeScript] 반복문 안에 있는 비동기 처리 방법

프로젝트 중 반복문을 돌면서 비동기 요청을 해야 하는 상황이 있어서 찾아보았습니다.타입을 작성하는 게 이해가 쉬울 것 같아서 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 문..

IT/JavaScript 2024.05.10

[HTML] 시맨틱 태그(Semantic Tag)

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

IT/기타 2024.04.29

[JavaScript] 클로저를 통해 코드 최적화(Optimizing)하기

클로저(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;..

IT/JavaScript 2024.04.29

[체험단 후기] 고철남 헬스케어 하루한포 바나바 액상스틱

오늘은 후기글을 적어볼까 합니다. 무려 건강기능식품 후기글입니다. 저 같은 직장인들은 사실 하루에 대부분을 앉아 있어야 되기 때문에 혈당에 주의해야 하는데요, 그래서인지 저도 건강검진 결과 당뇨 주의단계가 되어 버렸습니다. 그래서 저도 젊은 나이에 벌써부터 혈당관리를 하고 있습니다. 그러던 중에 닥터다이어리 어플 체험단에 운좋게 당첨돼서 아래의 제품을 받게 됐습니다. 고철남 헬스케어에서 출시한 하루한포 바나바 액상스틱이라고 합니다.혈당 관리를 하시는 분들이라면 바나바라는 이름을 대부분 알고 계실 겁니다.저도 평소 바나바 추출물이 들어 있는 알약 형태의 건강기능식품을 먹고 있었지요. 통을 까보면 위와 같이 1회분이 낱개별로 포장되어 있습니다. 코로솔산이라고 하는 바나바 추출물이 1일 섭취량 기준 최대치(1..

일상 2024.04.25

[JavaScript] 클로저(Closure)

이전에 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..

IT/JavaScript 2024.04.24

[JavaScript] 함수 선언문 vs 함수 표현식 (feat. 호이스팅, 렉시컬 환경)

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

IT/JavaScript 2024.04.23

[JavaScript] ES6 문법을 알아보자 (ECMAScript 2015)

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에는 어떤..

IT/JavaScript 2024.04.22

[IT] 프론트엔드 관련 개념 - 번들링 툴, WebAssembly, 자바스크립트 실수 오차에 대해 (코딩애플)

코딩애플 여고생입니다 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...

IT/기타 2024.04.16