본문 바로가기
728x90

전체 글219

JavaScript에서 var, let, const의 차이점 JavaScript에서 변수를 선언하는 키워드로는 var, let, const가 있습니다. ES6에서 새로 추가된 let과 const 키워드는 var 키워드와 다른 특징을 가지고 있습니다. 이번 글에서는 let과 const 키워드가 var 키워드와 어떻게 다른지에 대해 알아보겠습니다. 1. 변수 스코프 var 키워드로 선언한 변수는 함수 스코프(Function scope)를 가집니다. 함수 내에서 선언된 변수는 함수 내부에서만 유효합니다. 하지만 let과 const 키워드로 선언한 변수는 블록 스코프(Block scope)를 가집니다. 블록 스코프란 중괄호({})로 둘러싸인 범위를 의미합니다. 따라서 블록 내에서 선언된 변수는 블록 내부에서만 유효합니다. function example() { var x .. 2023. 3. 12.
npm 어떤 패키지를 설치하지? 인기 패키지는? Node.js언어로 개발을 하다 보면, 패키지 설치를 해야 할 때가 있습니다. 내가 개발해서 사용하는 것보다는 이미 만들어진 패키지를 가져다 사용을 함으로써, 생산성(개발속도)을 향상하고, 검증된 코드를 사용하기 때문에 코드 품질이 좋아지며, 여러 사람들에 의해 개발이 이루어지기 때문에 버그와 수정 작업에 참여자가 많으므로, 보안성, 유지보수에 많은 이점을 얻을 수 있습니다. 그럼, 내가 필요한 기능을 가진 패키지를 찾는데, 찾은 패키지가 얼마나 좋은 것인지?, 더 좋은 패키지가 있지 않는지? 확인하는 방법을 알려드립니다. 그 정답은 npmtrends 사이트를 이용하는 것입니다. npmtrends의 간략한 소개 npm trends는 Node.js 패키지 매니저(npm)에서 가장 인기 있는 패키지들의 트렌.. 2023. 3. 11.
구글링 전문가 되기 구글 검색은 인터넷에서 정보를 찾는 데 가장 많이 사용되는 검색 엔진 중 하나입니다. 구글 검색에서는 검색 옵션을 사용하여 더욱 정확하고 필요한 정보를 빠르게 찾을 수 있습니다. 구글 검색 옵션은 크게 두 가지로 나뉩니다. 첫째는 검색어 자체에 대한 옵션으로, 이 옵션을 사용하여 검색어를 더욱 정확하게 지정할 수 있습니다. 예를 들어, "OR"을 사용하여 두 가지 단어 중 하나를 포함하는 결과를 검색할 수 있으며, 따옴표를 사용하여 정확한 구문 검색을 수행할 수도 있습니다. 둘째는 검색 결과에 대한 옵션으로, 이 옵션을 사용하여 특정 웹사이트나 파일 형식, 지역, 시간 등을 검색할 수 있습니다. 예를 들어, "site:"를 사용하여 특정 웹사이트에서만 검색하거나, "filetype:"를 사용하여 특정 파.. 2023. 3. 9.
ChatGPT 채팅방 오류? 요즘 어마 어마한 인기를 누리고 있는, ChatGPT에 오류가 있어서 알려드립니다. 국내 시각으로 3월 8일 오전 11시경에 발생하였으며, 지금 SNS에서 심심찮게 얘기가 나오고 있는 상황인데요. 오류 현상은 아래와 같이 2가지로 나누어 볼 수 있겠습니다. 1. 채팅방이 모두 사라짐. 이전에 저장해 두었던 모든 채팅방이 아래와 같이 모두 사라지고, "Unable to load history" 메세지와 함께 "Retry"버튼이 보이고 있습니다. 2. 채팅방이 생성이 되지 않음. 신규 채팅을 시작하면, 제목이 생기고, "+ New chat"아래에 채팅방 이름이 자동으로 생성이 되면서, 방이 하나씩 쌓여갔는데, 이제는 더 이상 생성이 되지 않습니다. 해외 및 국내 커뮤니티 상황 위 현상은 국내 커뮤니티와 해외.. 2023. 3. 9.
Ubuntu hosts파일 수정 후 적용 우분투 서버에서 hosts를 설정하는 방법입니다. 모든 OS(Windows, Unix, Linux, MAC)는 hosts라는 파일을 이용해서 DNS를 설정할 수가 있습니다. 보통 도메인으로 어떤 시스템에 접근을 하려고 할 때, 해당 도메인의 IP주소를 얻기 위함입니다. 도메인으로 접근 시 시스템은 먼저 hosts파일에 있는 도메인에 대한 정보를 먼저 검색을 하고 없으면, .com, .co.kr. kr과 같은 도메인 서버에 접속하여 해당 도메인에 대한 IP주소를 얻어 옵니다. 서버를 운영하는 경우 특정 도메인을 소유하게 되고, 해당 도메인은 그 서버의 IP가 되는 경우가 많습니다. 시스템내부에서 처리작업을 할 때 보통 localhost로 처리를 하지만, 도메인으로 처리를 해야 하는 경우가 있습니다. 그럴 .. 2023. 3. 8.
VSCode에서 HTML, CSS, Javascript 소스를 Minify하기 Visual Studio Code에서 HTML, CSS, Javascript소스를 Minify하는 방법에 대해서 설명해 드리겠습니다. 그전에 앞서 Minify를 하는 이유를 간단히 알아보겠습니다. Minify란? 웹 사이트나 웹 애플리케이션에서 사용되는 파일(예: HTML, CSS, JavaScript)의 크기를 줄이기 위한 과정을 말합니다. 이 과정은 파일에서 불필요한 공백, 줄 바꿈, 주석 등을 제거하여 파일의 크기를 줄이는 것입니다. 이렇게 함으로써 아래와 같으 효과를 얻을 수 있습니다. Minify에 의한 이점 로딩 속도 향상: 파일이 작으면 더 빠르게 다운로드됩니다. 작은 파일을 다운로드할수록 페이지 로딩 시간이 더 빠르게 줄어들어 사용자 경험을 향상합니다. 또한, 빠른 로딩 속도는 검색 엔진 .. 2023. 3. 7.
Javascript 문자열 처리 "" 혹은 '' 대신, 이제 ``를 사용하세요. 문자열 처리 시 보통 큰 따옴표("")와 작은 따옴표('')를 사용합니다. 하지만, 이제 백틱(``)을 사용해서 좀 더 편하고 직관적으로 코딩하여 가독성을 높여보세요. 보통 Template literals라고 하는데, 이에 대해 알아보도록 하겠습니다. Template literals는 ES6부터 추가된 문자열 표기법 중 하나로, 문자열 안에서 변수나 표현식을 쉽게 삽입할 수 있도록 해주는 문법입니다. 기존의 문자열 표기법과는 다르게 백틱(``)으로 문자열을 감싸며, ${}를 사용하여 변수나 표현식을 삽입할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다: 기존 처리 방식("" 혹은 '') 사용: const name = "Alice"; const age = 30; console.log('My n.. 2023. 3. 7.
JavaScript HTML Content, Attribute, CSS 제어하기 JavaScript를 사용하여 HTML 컨텐츠, 속성, 그리고 CSS를 제어하는 방법에 대해 알려드리겠습니다. HTML Content 제어 HTML 요소의 내용을 변경하려면, 해당 요소의 ID를 가져와야 합니다. 이를 위해 document.getElementById 메서드를 사용하며, 변경할 내용은 innerHTML 속성을 통해 지정합니다. 예를 들어, ID가 "demo"인 요소의 내용을 "Hello World!"로 변경하려면 다음과 같이 작성합니다. document.getElementById("demo").innerHTML = "Hello World!"; HTML Attribute 제어 HTML 요소의 속성을 변경하려면, 해당 요소의 ID를 가져와야 합니다. 이를 위해 document.getElemen.. 2023. 3. 7.
누리호 2차 주요특징, 발사장소 누리호 2차의 발사 예정시각이 금일 (2022년 6월 21일 화요일) 오후 4시로 예정되었습니다. 과연, 이 번 발사에서 성공을 거두어서 과학기술 발전에 기여할 수 있을지 기대가 됩니다. 누리호 주요 특징 국내 독자 개발 (엔진 및 주요 부품이 우리 기업과 연구진의 기술력으로 만들어짐) 지구 저궤도에 위치한 700km 고도에 7.5km/s(= 27,000km/h)속력으로 도는 위성 목표 자력으로 위성 발사 가능한 7번째 국가 목표 우주 개발사업에 한 걸음 총길이 47.2m, 중량 200t 발사 위치 발사위치는 전남 고흥군에 위치한 나로우주센터 발사대에서 발사됩니다. 하늘 높이 솟아오르므로 먼 거리에서 육안으로 관측이 가능할지는 불분명합니다. 누리호 2차 발사의 의의 국가 기술 역량 강화: 누리호 2차 프.. 2023. 3. 7.
내 홈페이지 또는 블로그가 웹 표준에 적합한지 검사하기 https://validator.w3.org 는 W3C(World Wide Web Consortium)가 제공하는 웹 문서 유효성 검사 도구입니다. W3C(World Wide Web Consortium)는 웹 기술의 발전과 표준화를 촉진하기 위해 설립된 국제기구입니다. 웹 문서의 유효성 검사는 해당 문서가 웹 표준에 부합하는지를 확인하며, 이를 통해 웹 페이지가 모든 브라우저에서 동일하게 표시될 수 있도록 도와줍니다. 웹 표준을 준수하지 않는 문서는 일부 브라우저에서는 정상적으로 표시되지 않거나, 검색 엔진 최적화(SEO)에도 부적절한 영향을 미칠 수 있으므로, 문서 유효성 검사는 웹 개발자들에게 매우 중요한 작업 중 하나입니다. W3C의 문서 유효성 검사 도구는 HTML, XHTML, CSS, RSS .. 2023. 3. 6.
Javascript 루프문 정리(8) filter문 filter() 메서드는 배열의 요소 중에서 지정된 함수에 맞는 요소만 추출하여 새로운 배열을 반환하는 메서드입니다. 이 메서드를 사용하면 배열에서 필요한 요소만 추출하여 새로운 배열을 생성할 수 있습니다. filter() 메서드는 기존 배열을 수정하지 않고 새로운 배열을 반환하기 때문에, 기존 배열을 변경하지 않고 배열을 필터링해야 하는 경우에 유용합니다. 아래는 filter() 메서드의 구조와 사용 방법에 대한 설명입니다. filter() 메서드의 구조 배열.filter(콜백함수); 배열: 필터링할 배열입니다. 콜백함수: 각 배열 요소를 검사하여 필터링할 함수입니다. filter() 메서드의 사용 방법 1. 배열에서 짝수만 추출하는 경우: const arr = [1, 2, 3, 4, 5]; const.. 2023. 3. 6.
Javascript 루프문 정리(7) map문 map() 메서드는 배열의 모든 요소에 대해 지정된 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드입니다. 이 메서드를 사용하면 배열을 순회하면서 각 요소를 변형할 수 있습니다. map() 메서드는 원본 배열을 변경하지 않고 새로운 배열을 생성하기 때문에, 기존 배열의 요소를 수정하지 않고 새로운 배열을 만들어야 하는 경우에 유용합니다. 아래는 map() 메서드의 구조와 사용 방법에 대한 설명입니다. map() 메서드의 구조 배열.map(콜백함수); 배열: 변형할 배열입니다. 콜백함수: 각 배열 요소를 변형할 함수입니다. map() 메서드의 사용 방법 1. 배열 요소를 제곱한 새로운 배열을 생성하는 경우: const arr = [1, 2, 3, 4, 5]; const newArr = arr.ma.. 2023. 3. 6.
Javascript 루프문 정리(6) forEach문 forEach() 메서드는 배열의 각 요소에 대해 지정된 함수를 호출하는 메서드입니다. 이 메서드를 사용하면 반복문을 사용하지 않고도 배열의 모든 요소를 순회하며 작업을 수행할 수 있습니다. forEach() 메서드는 배열을 순회하며 요소를 차례대로 접근하며, 배열의 각 요소를 인수로 받는 콜백 함수를 실행합니다. 아래는 forEach() 메서드의 구조와 사용 방법에 대한 설명입니다. forEach() 메서드의 구조 배열.forEach(콜백함수); 배열: 순회할 배열입니다. 콜백함수: 각 배열 요소를 처리할 함수입니다. forEach() 메서드의 사용 방법 배열 요소를 출력하는 경우: const arr = [1, 2, 3, 4, 5]; arr.forEach(function(element) { consol.. 2023. 3. 6.
Javascript 루프문 정리(5) do...while문 do...while 루프문은 while 루프문과 유사하지만, 코드 블록을 먼저 실행한 후에 조건식을 검사하는 점이 다릅니다. 즉, do...while 루프문은 일단 코드 블록을 한 번 실행한 후에 조건식을 검사하여 조건식이 참이면 다시 코드 블록을 반복 실행합니다. 따라서 코드 블록이 최소한 한 번은 실행되는 것이 보장됩니다. 아래는 do...while 루프문의 구조와 사용 방법에 대한 설명입니다. do...while 루프문의 구조 do { // 반복 실행할 코드 블록 } while (조건식); 코드 블록: 최소한 한 번 실행될 코드 블록입니다. 조건식: 반복문이 실행될 때마다 검사되는 조건입니다. 조건식이 참일 경우 코드 블록이 반복 실행됩니다. do...while 루프문의 사용 방법 1. 특정 조건이.. 2023. 3. 6.
Javascript 루프문 정리(4) while문 while 루프문은 자바스크립트에서 반복 실행되는 코드 블록을 만들 때 사용되는 루프문 중 하나입니다. 조건식이 참일 동안 코드 블록이 실행되며, 조건식이 거짓이 될 때까지 반복됩니다. 초기식과 증감식이 필요하지 않으며, 반복 횟수를 미리 알 수 없는 경우에 주로 사용됩니다. 아래는 while 루프문의 구조와 사용 방법에 대한 설명입니다. while 루프문의 구조 while (조건식) { // 반복 실행할 코드 블록 } 조건식: 반복문이 실행될 때마다 검사되는 조건입니다. 조건식이 참일 경우 코드 블록이 실행됩니다. while 루프문의 사용 방법 특정 조건이 참일 때까지 반복 실행하는 경우: let i = 0; while (i < 5) { console.log(i); i++; } // 0, 1, 2, 3.. 2023. 3. 6.
728x90

티스토리툴바