티스토리

카엔
검색하기

블로그 홈

카엔

kusdsuna.tistory.com/m

https://www.kaen.site/

구독자
0
방명록 방문하기

주요 글 목록

  • 자바스크립트 자료구조란? 자바스크립트 자료구조에 대해 알아보려합니다. 배열(Array) 순서가 있는 목록을 표현하는 자료구조로, 원소에 대한 인덱스를 통해 접근할 수 있습니다. 자바스크립트에서 배열은 Array 객체를 사용하여 생성하며, 대괄호([])로 감싸진 목록을 사용할 수 있습니다. const arr = [1, 2, 3, 4, 5];객체(Object) 키(key)와 값(value)의 쌍을 저장하는 자료구조로, 자바스크립트 객체는 일반적으로 해시테이블로 구현되어 있습니다. 중괄호({})로 감싸진 아이템들은 키-값 쌍으로 구분됩니다. const obj = { key1: 'value1', key2: 'value2', };해쉬 테이블 해시 테이블(Hash Table)은 키(key)를 값(value)에 .. 공감수 0 댓글수 0 2023. 7. 2.
  • 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 방식으로 전달하기에 원래 인자의 .. 공감수 0 댓글수 0 2023. 6. 22.
  • 웹브라우저의 동작원리 웹상 통신과정 브라우저는 사용자가 서버에 자원을 요청하고 요청한 자원을 브라우저에 표시하는 역할을 합니다. 웹 브라우저에 URL을 입력하면 웹 서버에서 웹 브라우저에 웹 페이지를 제공합니다. 웹 브라우저와 웹 서버는 다른 곳에 위치합니다. 그렇기에 서로 연결하려면 웹 서버가 돌아가고 있는 곳에 주소가 필요합니다. 이것을 IP 주소라고 합니다. IP 주소는 111.111.1.0 와 같이 사람들이 외우기 힘들게 되어있습니다. 그래서 우리가 흔히 알고 있는 google.com 와 같이 사람들이 기억하기 쉽게 문자로 사용하는데요, 이것을 도메인이라고 합니다. 사람들이 도메인 이름으로 URL을 입력하면 컴퓨터가 알아들을 수 있도록 IP 주소로 변환을 해야합니다. 이렇게 변환을 해주는 것을 DNS라고 합니다. 이 .. 공감수 0 댓글수 0 2023. 6. 20.
  • 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); }; 해당 함.. 공감수 0 댓글수 0 2023. 6. 13.
  • 구글 스프레드시트 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 2023. 5. 15.
  • 자바스크립트 이진수 자릿수만큼 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를 통해 첫번째 인자로 넘겨준 자릿수만.. 공감수 0 댓글수 0 2023. 4. 28.
  • 리액트, 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 .. 공감수 0 댓글수 0 2023. 4. 25.
  • 자바스크립트 이벤트 루프가 뭘까 자바스크립트 이벤트 루프가 뭘까 이벤트 루프 자바스크립트는 이벤트 루프를 이용해 비동기 방식으로 동시성을 지원한다 마치 비동기처럼 보이는게 이것때문인데 그럼 이벤트루프란 뭘까 브라우저에서 지원하는 기능이며 콜스택과 콜백큐를 감시해 콜스택이 비면 콜백큐에서 콜백함수를 가져와 콜스택에 넣어 실행시키는 기능이다 추가적으로 태스크 큐와 마이크로태스트 큐가 존재한다 태스크 큐는 콜백큐와 동일한 말이다 그렇다면 마이크로태스트 큐는 뭘까? 기본적으로 이벤트 루프는 제일 오래된 태스크(콜백 함수)를 꺼낸다 결론적으로는 마이크로태스크 큐에 들어간 태스크를 먼저 처리하고 태스크 큐를 처리하는데 그렇다면 태스크 큐에 들어가는 함수와 마이크로태스크 큐에 들어가는 함수들을 구분지어보자 태스크 큐 setTimeout setInt.. 공감수 0 댓글수 0 2023. 2. 16.
  • GET과 POST의 차이는 뭘까 GET과 POST의 차이는 뭘까 우선 정의부터 알고가는게 나을것 같습니다 정의 GET 클라이언트에서 서버로 정보를 요청할때 사용되는 메소드이다 GET 요청시 URL 주소 끝에 쿼리스트링이라는 파라미터로 전송되며 www.sample.gg/sample?key=value&test=tester 이런식으로 전달됩니다 즉 데이터를 전혀 건드리지 않고 읽기만할 때 사용됩니다 또한 요청이 캐시되며 파라미터에 내용이 노출됩니다 POST 리소스를 업데이트 혹은 생성하기 위해 서버에 데이터를 보낼때 사용되는 메소드이다 전송할 데이터를 body에 담아서 전송합니다 데이터가 눈에 보이지 않아 GET보다 보안적이다 사실 개발자 도구로 확인할 수 있기때문에 조심해야한다 차이점 공감수 0 댓글수 0 2023. 2. 15.
  • 클로저란 것은 뭘까 클로저를 짧게 요약하면 외부 함수의 변수에 접근할 수 있는 내부 함수라고 할 수 있다 외부 함수에 접근할 수 있다는 특성으로 클로저는 현재 상태를 기억하고 변경된 최신 상태를 유지하게 활용할 수 있다 모듈처럼 데이터를 캡슐화하기에 장점이 있지만 언제든지 스코프 밖에서 사용할 수 있도록 메모리에 계속 저장하고 있는 거라서 메모리 사용량이 늘어난다라는 단점이 있지만 장점이자 단점이에요 ㅖ 공감수 0 댓글수 0 2023. 2. 14.
  • 호이스팅이란게 뭘까 호이스팅이란 것에 대해 알아보자 호이스팅은 함수 안에 있는 선언들을 해당 함수 유효 범위내 최상단에 선언하는 것을 뜻한다 실제로 코드가 끌어올려지는 것은 아니고 그냥 자바스크립트 파서가 내부적으로 최상단에서 처리하는 것뿐임 그래서 메모리에는 변화가 없다 여기까지만 얘기해도 호이스팅은 코드를 작성할때 혼란스럽기만할 것 같은데 왜 알아야될까 그건 ES6 때문이다 아직 ES6로 모든 것을 개발하기에는 시간이 걸린다 그래서 우리는 ES5로 컴파일을 해야할때가 생기는데 이때를 위해 우리는 호이스팅을 알아야하는 것이다 공감수 0 댓글수 0 2023. 2. 13.
  • 브라우저 렌더링 과정에 대해 알아보자 브라우저 렌더링 과정에 대해 알아보자 브라우저 렌더링 과정에 대해서 알아보자 그전에 먼저 알아둬야할 용어 몇가지만 먼저 얘기하면 용어 렌더링 엔진 요청 받은 내용을 브라우저 화면에 표시해주는 친구 HTML과 CSS 이미지를 표시한다 렌더링 엔진은 브라우저 별로 다르다 예를 들면 크롬은 웹킷 엔진을 사용하고 파이어폭스는 게코 엔진을 사용한다 렌더링 과정 사용자가 웹 사이트에 접속 서버로부터 HTML, CSS 등 리소스를 다운 받음 브라우저 렌더링 엔진이 HTML과 CSS를 파싱해서 DOM과 CSSOM을 생성 생성된 DOM과 CSSOM을 결합해 렌더트리 생성 브라우저의 자바스크립트 엔진이 서버로부터 응답된 자바스크립트를 파싱해 바이트코드로 변환하여 실행 렌더트리를 기반으로 HTML요소의 레이아웃을 계산 브라.. 공감수 0 댓글수 0 2023. 2. 12.
  • 자바스크립트에서 this란 대체 무엇일까? 자바스크립트에서 this란 대체 무엇일까? 자바스크립트에서 this라는 것에 대해 알아보자 짧게 요약하면 this란 자기 자신이 속한 객체나 해당 코드에 대한 인스턴스를 가리키는 자기 참조 변수이다 무슨 말인지 모르겠다 그냥 누가 나를 호출했냐라고 생각하면 편할 것 같다 나를 호출한 사람이 this다 당장 개발자 도구를 켜서 this를 쳐보자 다음과 같이 나온다 호출한 애가 브라우저니까 this는 Window다 라고 나오게 된다 함수 그럼 함수로 생각해보자 예시를 두가지로 나눌건데 하나는 엄격 모드 X고 하나는 엄격 모드 O일때이다 엄격 모드 X let whoAmI = 'string'; function thisFunction() { this.whoAmI = 111111; console.lo.. 공감수 0 댓글수 0 2023. 2. 10.
  • 화살표함수와 일반 함수의 차이점 자주 사용하는 함수 표현식인 화살표 함수는 분명히 일반 함수와는 형태로도 기능적으로도 차이가 존재한다는 것을 알고 있다 그래도 좀 더 자세히 알고 사용해보자 혹시 화살표 함수가 뭐냐면 ES6에서 추가된 함수이며 화살표 함수는 기존 함수 표현식에 비해 간단하게 표현이 가능하다 function 일반함수() { ... } const 화살표함수 = () => { ... } 차이점 이제 차이점을 알아보자 우선 결과적으로 정리하자면 총 3가지 차이점이 존재한다 this 생성자 함수 사용 여부 Arguments 사용 여부 this 일반 함수 먼저 알아보자 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 동적으로 결정된다 화살표 함수는 일반 함수와 반대로 정적으로 결정되며 항상 상위 스코프의 this를 가리킨.. 공감수 0 댓글수 0 2023. 2. 7.
  • ChatGPT 활용해보기 ChatGPT에 활용성에 대한 글이 많아지면서 실제로 사용했을때 어떤식에 피드백을 받을 수 있을지 구글과 비교했을때 얼마나 효율적일지에 대한 궁금점이 생겨 실제로 몇가지 질문을 해보기로 했다 리액트 최적화에 대한 질문 코드 최적화 Next.js로 만든 포트폴리오 index.tsx 코드 하나를 최적화 시켜달라고 하면 어떻게 될까 우선 무작정 index.tsx 코드를 붙여넣어봤다 돌아온 답변은 놀라웠다 해당 코드가 어떤식으로 구성되어있는지와 어떤 스타일 요소가 적용되어있는지에 대한 설명을 알려주는 것은 물론이고 어떤 역할을 하는 코드인지에 대한 추측까지 담겨있다 그럼 이 코드를 최적화시켜달라고 하면 어떤 답변이 나올까 리액트 최적화 훅들을 소개해주는 것은 물론이고 인라인으로 적용한 스타일에 대한 지적과 re.. 공감수 0 댓글수 0 2022. 12. 22.
  • DAO, DTO, VO 개념 정리 DAO (Data Access Object) 데이터베이스의 Data에 접근하기 위한 객체 데이터베이스에 접근하기 위한 로직과 비즈니스 로직을 분리하기 위해 사용함 DTO (Data Transfer Object) 계층 간 데이터 교환을 하기 위해 사용하는 객체 로직을 가지지 않는 순수한 데이터 객체 VO (Value Object) 값을 위해 쓰이는 값 오브젝트 ( read only ) DTO와 유사하지만 DTO는 값이 변할 수 있다는 차이점이 있음 공감수 0 댓글수 0 2022. 12. 6.
  • 자바스크립트 텍스트 클립보드 복사하기 ( Clipboard JS ) 요약 window.navigator.clipboard.writeText('복사할 내용') 위 코드를 원하시는 코드 위치에 넣어서 사용하시면 됩니다 공감수 0 댓글수 0 2022. 12. 3.
  • 크롬 안드로이드 웹 디버깅 chrome://inspect/#devices 해당 링크를 통해서 안드로이드 웹 디버깅 가능 공감수 0 댓글수 0 2022. 10. 23.
  • Cannot convert a BigInt value to a number 에러 해결방법 Math.pow는 BigInt 계산을 지원하지 않음 babel 이슈 바벨 es버전 2020이 아닐시 10n ** 10n 같은 거듭제곱 공식이 Math.pow로 변환됨 es버전을 2020으로 올리거나 거듭제곱 공식 제거 공감수 0 댓글수 0 2022. 9. 30.
  • 자바스크립트 24시간 전 타임스탬프 구하기 const now = Math.round(new Date().getTime() / 1000); const yesterday = new Date(new Date().getTime() - (24 * 60 * 60 * 1000)); 공감수 0 댓글수 0 2022. 9. 29.
  • Event Handing Event Handing addEventListner addEventListner() 메서드는 지정한 이벤트가 발생할때 설정한 함수를 호출 문법 document.addEventListener(event, function, useCapture); event : 반응할 이벤트 유형 function : 이벤트가 발생할 때 실행할 함수 useCapture : eventTarget으로 전송하기 전, 등록된 function으로 타입의 이벤트 전송여부를 나타내는 불린값 ( 생략 가능 ) .innerText html 태그를 해석하지 않고 텍스트를 그대로 출력함 .innerHTML html 태그를 해석해서 출력해줌 .preventDefault 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소함 .. 공감수 0 댓글수 0 2022. 1. 2.
  • 순열, 조합, 중복순열, 수열, 최대공약수 코드모음 코딩테스트에서 주로 사용되는 순열, 조합 등을 함수화 시킨 코드입니다 필요한 부분에 삽입해서 사용하시면 됩니다 순열 코드 순열이란 서로 다른 n개중에 r개를 선택하는 경우의 수를 의미합니다 ( 순서 상관 o ) 일반식 : nPr = n! / (n - r)! 5장에서 3장을 선택하는 모든 순열의 수 = P = (5 X 4 X 3 X 2 X 1) / (2 X 1) = 60 function permutation(arr, selectNum) { let result = []; if (selectNum === 1) return arr.map((v) => [v]); arr.forEach((v, idx, arr) => { const fixer = v; const restArr = arr.filter((_, index).. 공감수 0 댓글수 0 2022. 1. 2.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.