프론트엔드/JavaScript

자바스크립트 자료구조란?

자바스크립트 자료구조에 대해 알아보려합니다. 배열(Array) 순서가 있는 목록을 표현하는 자료구조로, 원소에 대한 인덱스를 통해 접근할 수 있습니다. 자바스크립트에서 배열은 Array 객체를 사용하여 생성하며, 대괄호([])로 감싸진 목록을 사용할 수 있습니다. const arr = [1, 2, 3, 4, 5];객체(Object) 키(key)와 값(value)의 쌍을 저장하는 자료구조로, 자바스크립트 객체는 일반적으로 해시테이블로 구현되어 있습니다. 중괄호({})로 감싸진 아이템들은 키-값 쌍으로 구분됩니다. const obj = { key1: 'value1', key2: 'value2', };해쉬 테이블 해시 테이블(Hash Table)은 키(key)를 값(value)에 ..

Call by value 와 Call by reference

자바스크립트에는 Call by value 와 Call by reference라는 개념이 존재합니다. 자바스크립트에서는 기본적으로 함수의 인자 전달 방식이 Call by value 방식으로 전달하게 됩니다. 예시로 설명하면 다음과 같습니다. Call by value function sample(item) { item = item + 2; } let a = 11; sample(a); console.log(a); // 11; 위 코드를 살펴보면 sample 함수에 a 값을 인자로 전달했고 sample 함수는 전달받은 인자에 2를 더했습니다. 하지만 콘솔로 a를 출력해보면 기본 값인 11이 나옵니다. 즉, 함수에 인자로 전달될 때 값 복사를 통한 방식인 Call by value 방식으로 전달하기에 원래 인자의 ..

웹브라우저의 동작원리

웹상 통신과정 브라우저는 사용자가 서버에 자원을 요청하고 요청한 자원을 브라우저에 표시하는 역할을 합니다. 웹 브라우저에 URL을 입력하면 웹 서버에서 웹 브라우저에 웹 페이지를 제공합니다. 웹 브라우저와 웹 서버는 다른 곳에 위치합니다. 그렇기에 서로 연결하려면 웹 서버가 돌아가고 있는 곳에 주소가 필요합니다. 이것을 IP 주소라고 합니다. IP 주소는 111.111.1.0 와 같이 사람들이 외우기 힘들게 되어있습니다. 그래서 우리가 흔히 알고 있는 google.com 와 같이 사람들이 기억하기 쉽게 문자로 사용하는데요, 이것을 도메인이라고 합니다. 사람들이 도메인 이름으로 URL을 입력하면 컴퓨터가 알아들을 수 있도록 IP 주소로 변환을 해야합니다. 이렇게 변환을 해주는 것을 DNS라고 합니다. 이 ..

TTS 자바스크립트로 구현하기

자바스크립트로 TTS를 구현하는 코드입니다. window 객체를 사용해야하므로 next.js로 ssr를 구현하시는 분은 추가적인 작업이 필요합니다. export const textToSpeech = (text: string, isActionHandler: (isAction: boolean) => void) => { const synthesis = window.speechSynthesis; const utterance = new SpeechSynthesisUtterance(text); utterance.lang = "ko-KR"; utterance.onend = function (event) { isActionHandler(false); }; synthesis.speak(utterance); }; 해당 함..

구글 스프레드시트 API 조회하기 | Node.js

구글 스프레드시트에서 작성한 내용을 API를 통해 조회해서 간단한 DB처럼 사용할 수 있는 방법에 대해서 알아보려합니다. 속도는 느리지만 간단한 DB용도 및 크롤링하기에 좋은 것 같습니다. 방법은 다음과 같습니다. 구글 스프레드시트 설정 1. 상단에 공유 버튼을 눌러 일반 액세스에 링크가 있는 모든 사용자가 볼 수 있도록 설정해주세요 2. 그 다음 링크 복사를 눌러 링크를 확인해보시면 https://docs.google.com/spreadsheets/d/`스프레드시트\_아이디`/edit?usp=sharing d/에서부터 다음 / 까지 적혀있는 문자가 해당 스프레드시트의 ID입니다. 저 부분만 따로 복사해주세요. Node.js 설정 지금 알아볼 것은 단순 조회이기에 fetch나 axios와 같은 HTTP ..

자바스크립트 이진수 자릿수만큼 0 채우기

자바스크립트에서 이진수를 만들고 자릿수에 맞게 0을 채우는 간단한 코드에 대해 알아보자 보통 코딩테스트에서나 활용되는 코드인데 현업에서 가끔 이진수 등으로 변환하는 경우도 있다 먼저 이진수로 변환하는 코드이다. let num = 123; num.toString(2); // 1111011 위 코드처럼 toString에 인자로 2를 넣어주자 123이 이진수로 변환된 값을 반환해준다 여기서 만약 01000으로 나와야되는 수가 toString으로 변환하면 1000으로 나오는 경우가 있다 이런 경우에 0을 자릿수만큼 채워줘야하는데 이것도 간단한 함수로 해결할 수 있다 let num = `1000`; num.padStart(5, "0"); // 01000 이렇게 padStart를 통해 첫번째 인자로 넘겨준 자릿수만..

리액트, Next.js에서 three.js GLFT 모델 적용하기

https://www.kaen.site/ 위 화면처럼 포트폴리오 메인 화면에 사용될 Three.js를 적용하는 방법에 대해 공유하려합니다 자세한 내용보다는 해당 코드를 복붙해서 사용할 수 있는 정도로만 간단하게 공유할 예정입니다 리액트 세팅 우선 리액트 코드입니다 const loadingHandler = (toggle: boolean) => { setLoading(toggle); }; useEffect(() => { three(gltfName, loadingHandler); }, []); return ( SUNGHUN LEE Frontend Developer About me ) three라는 함수를 통해 gltfName과 loadingHandler를 전달해주면 gltf 폴더안에 해당하는 gltfName ..

자바스크립트 이벤트 루프가 뭘까

자바스크립트 이벤트 루프가 뭘까 이벤트 루프 자바스크립트는 이벤트 루프를 이용해 비동기 방식으로 동시성을 지원한다 마치 비동기처럼 보이는게 이것때문인데 그럼 이벤트루프란 뭘까 브라우저에서 지원하는 기능이며 콜스택과 콜백큐를 감시해 콜스택이 비면 콜백큐에서 콜백함수를 가져와 콜스택에 넣어 실행시키는 기능이다 추가적으로 태스크 큐와 마이크로태스트 큐가 존재한다 태스크 큐는 콜백큐와 동일한 말이다 그렇다면 마이크로태스트 큐는 뭘까? 기본적으로 이벤트 루프는 제일 오래된 태스크(콜백 함수)를 꺼낸다 결론적으로는 마이크로태스크 큐에 들어간 태스크를 먼저 처리하고 태스크 큐를 처리하는데 그렇다면 태스크 큐에 들어가는 함수와 마이크로태스크 큐에 들어가는 함수들을 구분지어보자 태스크 큐 setTimeout setInt..

GET과 POST의 차이는 뭘까

GET과 POST의 차이는 뭘까 우선 정의부터 알고가는게 나을것 같습니다 정의 GET 클라이언트에서 서버로 정보를 요청할때 사용되는 메소드이다 GET 요청시 URL 주소 끝에 쿼리스트링이라는 파라미터로 전송되며 www.sample.gg/sample?key=value&test=tester 이런식으로 전달됩니다 즉 데이터를 전혀 건드리지 않고 읽기만할 때 사용됩니다 또한 요청이 캐시되며 파라미터에 내용이 노출됩니다 POST 리소스를 업데이트 혹은 생성하기 위해 서버에 데이터를 보낼때 사용되는 메소드이다 전송할 데이터를 body에 담아서 전송합니다 데이터가 눈에 보이지 않아 GET보다 보안적이다 사실 개발자 도구로 확인할 수 있기때문에 조심해야한다 차이점

클로저란 것은 뭘까

클로저를 짧게 요약하면 외부 함수의 변수에 접근할 수 있는 내부 함수라고 할 수 있다 외부 함수에 접근할 수 있다는 특성으로 클로저는 현재 상태를 기억하고 변경된 최신 상태를 유지하게 활용할 수 있다 모듈처럼 데이터를 캡슐화하기에 장점이 있지만 언제든지 스코프 밖에서 사용할 수 있도록 메모리에 계속 저장하고 있는 거라서 메모리 사용량이 늘어난다라는 단점이 있지만 장점이자 단점이에요 ㅖ