2024/06(20)
-
Web/Web Programming
2024.06.30
[Web] 웹팩(Webpack)이란 무엇인가? - 사용해야 하는 이유
웹팩(Webpack)이란?웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러입니다. 여기서 모듈 번들러는 여러 개의 모듈을 하나로 조합하여 하나의 파일 또는 여러 개의 파일을 하나로 묶어주는 도구를 뜻합니다. 이렇게 여러 개의 모듈을 하나로 묶어주면 서버에 보내야 하는 HTTP 요청을 줄이고, 프로그램 성능을 최적화할 수 있습니다. 특히 Webpack은 최근에 유행하는 React, Angular, Vue와 같은 최신 프론트엔드 프레임워크에서 널리 사용됩니다. 그렇다면 모듈이란 무엇일까요?여러개의 모듈을 합친다? 여기서 모듈은 무엇일까요? 개발자가 개발을 할 때, 유지보수와 개발효율성을 고려해서 여러개의 .js파일로 나눠서 개발하게 될 텐데요. 여기서 위의 .js 하나하나가 다 모듈이라고 할 수 있..
-
ETC.
2024.06.29
1
[복붙하세요] 자동차, 주차 특수기호, 이모지 모음
주차, 자동차 같은 표지판에 특수기호를 사용하면 글로 쓰는 것 보다 명확하고, 깔끔하게 의사를 표시할 수 있습니다. 윈도우에서도 이모지 기능을 사용하면 표지판의 그 기능을 사용할 수 있는데요. 원하는 이모지를 한번에 찾기가 힘들어 포스팅으로 정리합니다. 필요하신분들은 복붙하셔서 사용하시면 좋을 것 같습니다. 🅿️ : 주차 표시🚗 : 자동차🚘 : 다가오는 자동차🏎️ : 레이싱카🚌 : 버스🚍 : 다가오는 버스🚎 : 트롤리버스🚐 : 미니버스🚑 : 구급차🚒 : 소방차🚓 : 경찰차🚔 : 다가오는 경찰차🚕 : 택시🚖 : 다가오는 택시🚙 : 지프차🚚 : 배달 트럭🚛 : 트레일러🚂 : 기차🚃 : 지하철🚄 : 고속 기차🚅 : 고속 기차🚆 : 고속 기차🚇 : 지하철🚈 : 지하철?..
-
ETC.
2024.06.28
[복붙하세요] 금지 표시(X표) 특수기호, 이모지 모음
X표시나 금지를 알려야할 때 금지 표시 특수기호를 쓰면 아무래도 직관적으로 표현할 수 있기 때문에 보는사람들로 하여금 깔끔합니다. 금지 특수기호는 윈도우 이모지는 [Window Key] + [.] 키를 같이 눌러 찾으면 되는데요. 원하는 이모지를 한 번에 찾기가 힘들기에 포스팅으로 정리합니다. 필요하신분은 복붙 하셔서 사용하시면 좋을 것 같아요. ❌ : 금지 기호⚠️ : 경고 기호⛔ : 진입 금지🚫 : 출입 금지 기호🚷 : 보행 금지🚯 : 쓰레기 무단 투기 금지 기호🚳 : 자전거 금지🚱 : 식수 금지 기호🔞 : 18세 이하 금지 기호📵 : 휴대전화 사용 금지🚭 : 금연 기호🤷♀️ : 어깨를 으쓱하는 여자🤷 : 어깨를 으쓱하는 사람🤷♂️ : 어깨를 으쓱하는 남자🙅♀️ : 안된다는..
-
ETC.
2024.06.27
[복붙하세요] 얼굴 표정(웃는, 우는, 화난 표정) 특수문자, 이모지 모음집
자료를 만들거나 글을 쓸 때 사람 표정 이모티콘을 많이 쓰게 되는데요. 윈도우 이모지는 [Window Key] + [.] 키를 같이 누르면 사용할 수 있지만 원하는 이모지를 한 번에 찾기가 힘들기에 포스팅으로 정리합니다. 필요하신 이모지만 복붙 하셔서 사용하시면 좋을 것 같아요. 웃는 얼굴 특수 문자(이모지) 모음 😄 : 입을 벌리고 미소 짓는 눈으로 웃는 얼굴😊 : 미소 짓는 눈으로 웃는 얼굴😄 : 입을 벌리고 미소 짓는 눈으로 웃는 얼굴😆 : 입을 벌리고 눈을 꼭 감은 채로 웃는 얼굴😀 : 입을 벌리고 웃는 얼굴😃 : 이를 살짝 드러내고 활짝 웃는 얼굴😁 : 이를 드러내고 활짝 웃는 얼굴😂 : 기쁨의 눈물을 흘리는 얼굴🤣 : 바닥을 구르며 웃는 얼굴😉 : 윙크하는 얼굴😋 : 맛..
-
Web/JavaScript
2024.06.26
[JavaScript] 디폴트 파라미터(default parameter) 사용법(기본 파라메터)
자바스크립트 ES6부터는 디폴트 파라미터(default parameter)를 사용해 함수 파라미터의 기본값을 지정할 수 있습니다. 이번 포스팅에서 알아보겠습니다. 기본 매개변수(default parameter) 사용법 // 사용법function 함수명(파라미터명="기본값") {// 함수 본문}디폴트 파라미터(default parameter)의 사용법은 간단합니다. 위와 같은 형식으로 파라미터 뒤에 = "초기값"을 지정해 주시면 됩니다. 왜 사용할까?See the Pen 디폴트 파라미터 by 우정태 (@sxqouumz-the-reactor) on CodePen. 기본 파라미터가 왜 필요할까요? 바로 위와 같은 상황을 방지하기 위해서입니다. 자바스크립트에서는 초기화 되지 않은 변수를 사용하더라도 에러가..
-
Web/JavaScript
2024.06.25
[JavaScript] 가변 파라미터 ...나머지 매개변수(rest parameter) 사용법
자바스크립트 ES6부터는 가변 파라미터(rest parameter)라는 기능이 있는데 이걸 사용하면 여러 개의 파라미터 값을 배열로 받을 수 있습니다. 이렇게 되면 함수에 전달하는 파라미터의 개수를 가변적으로 적용할 수 있겠죠. 이번 포스팅에서 알아보겠습니다. 나머지 매개변수(rest parameter) 사용법 // 사용법function 함수명(...매개변수명) {// 함수 본문}가변 파라미터(rest parameter) 사용법은 간단합니다. 이렇게 ...파라미터명 형식으로 사용해 주시면 됩니다. 단, 마지막 파라미터로만 사용하셔야 합니다. See the Pen 나머지 파라미터 by 우정태 (@sxqouumz-the-reactor) on CodePen. 사용 예제를 짜봤습니다. multiply 함수는..
-
Web/JavaScript
2024.06.24
[JavaScript] ...문법 - 스프레드(spread) 연산자 사용법
자바스크립트에서 ...으로 되어있는 연산자는 두 가지 용도로 사용됩니다. 하나는 함수의 나머지 인자의(rest parameter)로 사용하는 것이고, 또 다른 하나는 이번 포스팅에서 알아볼 스프레드(spread) 연산자입니다. 자바스크립트 스프레드(spread) 연산자 사용법 자바스크립트의 스프레드(spread) 연산자는 배열이나 객체의 요소를 개별 요소로 펼칠 때 사용되며 주로 배열을 복사하거나 합칠 때, 객체를 복사하거나 업데이트할 때 유용하게 사용할 수 있습니다. 스프레드 연산자 문법// 사용법// ...배열 or 객체// 예시 -> 배열의 요소들을 개별 인자값으로 함수에 전달function sum(x, y, z) { return x + y + z;}let arrNum = [1, 2, 3];co..
-
Web/JavaScript
2024.06.23
[JavaScript] 화살표 함수(Arrow Function) 사용시 주의할 점 (어휘적 범위 - Lexical Scope)
화살표 함수(Arrow Function)는 자바스크립트 ES6에서 나온 간결한 함수 표현 문법으로, 주로 익명 함수나 콜백 함수로 사용됩니다. 코드의 가독성을 높이고 작성할 코드의 양을 줄일 수 있습니다. 하지만 화살표 함수(Arrow Function)를 사용할 때 몇 가지 주의할 점이 있는데요. 이번 포스팅에서 한번 알아보도록 하겠습니다. ※ 먼저 화살표 함수의 기본 사용법을 모른다면 아래 글을 읽고 와주시기 바랍니다.[JavaScript] 화살표 함수(arrow function) 사용법 & 예제 총정리 화살표 함수(Arrow Function) 사용시 주의할 점 화살표 함수(Arrow Function)의 어휘적 범위(Lexical Scope)Lexical Scope(어휘적 범위)는 함수가 정의된 시점..
-
Web/JavaScript
2024.06.22
[JavaScript] 화살표 함수(Arrow Function) 사용법 & 예제 총정리
ES2015에서 처음 등장한 화살표 함수(arrow function)는 기존 함수 표현식을 화살표로 간결하게 표현할 수 있는 새로운 문법으로 화살표 함수라는 이름은 문법의 생김새를 차용해 이름이 지어졌습니다. 화살표 함수는 짧고 간단하게 함수를 작성할 수 있게 해줍니다.화살표 함수는 this를 자신이 속한 환경에서 가져와서, this 키워드를 더이상 사용하지 않아도 됩니다.화살표 함수는 arguments 객체 대신 나머지 매개변수(...)를 사용합니다.화살표 함수는 new 키워드로 객체를 만들 수 없어서 객체 메서드로 사용할 때 주의하셔야 합니다. 자바스크립트 화살표 함수(Arrow Function) 사용법 기본 문법(param1, param2, param3) => { // 함수 본문}기존의 문법과..
-
Web/JavaScript
2024.06.21
[JavaScript] 배열 정렬하는 간단한 방법(sort) - 문자열, 숫자, 객체 배열 정렬하기
배열에 학생들의 성적을 넣어놨는데 순서대로 보여주고 싶다면 어떻게 해야 할까요? 이럴 때는 배열을 성적이 높은 순으로 정렬을 해야 할 텐데요. 자바스크립트에서는 sort() 메서드를 사용하면 간단하게 배열을 정렬할 수 있습니다. 이번 포스팅에서 알아보겠습니다. 자바스크립트 배열 정렬하는 sort() 함수 //사용법배열.sort();sort() 메서드는 문자열 유니코드 순서로 배열을 정렬합니다. 문자열 배열 정렬See the Pen Untitled by 우정태 (@sxqouumz-the-reactor) on CodePen. sort() 함수는 유니코드 순서로 정렬을 실행하기 때문에 문자열 배열 정렬에 최적화되어 있습니다. 위를 보시면 a, b, c, d가 무작위로 배치된 배열을 sort() 함수 호출로..
-
Web/Web Programming 2024.06.30[Web] 웹팩(Webpack)이란 무엇인가? - 사용해야 하는 이유 웹팩(Webpack)이란?웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러입니다. 여기서 모듈 번들러는 여러 개의 모듈을 하나로 조합하여 하나의 파일 또는 여러 개의 파일을 하나로 묶어주는 도구를 뜻합니다. 이렇게 여러 개의 모듈을 하나로 묶어주면 서버에 보내야 하는 HTTP 요청을 줄이고, 프로그램 성능을 최적화할 수 있습니다. 특히 Webpack은 최근에 유행하는 React, Angular, Vue와 같은 최신 프론트엔드 프레임워크에서 널리 사용됩니다. 그렇다면 모듈이란 무엇일까요?여러개의 모듈을 합친다? 여기서 모듈은 무엇일까요? 개발자가 개발을 할 때, 유지보수와 개발효율성을 고려해서 여러개의 .js파일로 나눠서 개발하게 될 텐데요. 여기서 위의 .js 하나하나가 다 모듈이라고 할 수 있..
-
ETC. 2024.06.29 1[복붙하세요] 자동차, 주차 특수기호, 이모지 모음 주차, 자동차 같은 표지판에 특수기호를 사용하면 글로 쓰는 것 보다 명확하고, 깔끔하게 의사를 표시할 수 있습니다. 윈도우에서도 이모지 기능을 사용하면 표지판의 그 기능을 사용할 수 있는데요. 원하는 이모지를 한번에 찾기가 힘들어 포스팅으로 정리합니다. 필요하신분들은 복붙하셔서 사용하시면 좋을 것 같습니다. 🅿️ : 주차 표시🚗 : 자동차🚘 : 다가오는 자동차🏎️ : 레이싱카🚌 : 버스🚍 : 다가오는 버스🚎 : 트롤리버스🚐 : 미니버스🚑 : 구급차🚒 : 소방차🚓 : 경찰차🚔 : 다가오는 경찰차🚕 : 택시🚖 : 다가오는 택시🚙 : 지프차🚚 : 배달 트럭🚛 : 트레일러🚂 : 기차🚃 : 지하철🚄 : 고속 기차🚅 : 고속 기차🚆 : 고속 기차🚇 : 지하철🚈 : 지하철?..
-
ETC. 2024.06.28[복붙하세요] 금지 표시(X표) 특수기호, 이모지 모음 X표시나 금지를 알려야할 때 금지 표시 특수기호를 쓰면 아무래도 직관적으로 표현할 수 있기 때문에 보는사람들로 하여금 깔끔합니다. 금지 특수기호는 윈도우 이모지는 [Window Key] + [.] 키를 같이 눌러 찾으면 되는데요. 원하는 이모지를 한 번에 찾기가 힘들기에 포스팅으로 정리합니다. 필요하신분은 복붙 하셔서 사용하시면 좋을 것 같아요. ❌ : 금지 기호⚠️ : 경고 기호⛔ : 진입 금지🚫 : 출입 금지 기호🚷 : 보행 금지🚯 : 쓰레기 무단 투기 금지 기호🚳 : 자전거 금지🚱 : 식수 금지 기호🔞 : 18세 이하 금지 기호📵 : 휴대전화 사용 금지🚭 : 금연 기호🤷♀️ : 어깨를 으쓱하는 여자🤷 : 어깨를 으쓱하는 사람🤷♂️ : 어깨를 으쓱하는 남자🙅♀️ : 안된다는..
-
ETC. 2024.06.27[복붙하세요] 얼굴 표정(웃는, 우는, 화난 표정) 특수문자, 이모지 모음집 자료를 만들거나 글을 쓸 때 사람 표정 이모티콘을 많이 쓰게 되는데요. 윈도우 이모지는 [Window Key] + [.] 키를 같이 누르면 사용할 수 있지만 원하는 이모지를 한 번에 찾기가 힘들기에 포스팅으로 정리합니다. 필요하신 이모지만 복붙 하셔서 사용하시면 좋을 것 같아요. 웃는 얼굴 특수 문자(이모지) 모음 😄 : 입을 벌리고 미소 짓는 눈으로 웃는 얼굴😊 : 미소 짓는 눈으로 웃는 얼굴😄 : 입을 벌리고 미소 짓는 눈으로 웃는 얼굴😆 : 입을 벌리고 눈을 꼭 감은 채로 웃는 얼굴😀 : 입을 벌리고 웃는 얼굴😃 : 이를 살짝 드러내고 활짝 웃는 얼굴😁 : 이를 드러내고 활짝 웃는 얼굴😂 : 기쁨의 눈물을 흘리는 얼굴🤣 : 바닥을 구르며 웃는 얼굴😉 : 윙크하는 얼굴😋 : 맛..
-
Web/JavaScript 2024.06.26[JavaScript] 디폴트 파라미터(default parameter) 사용법(기본 파라메터) 자바스크립트 ES6부터는 디폴트 파라미터(default parameter)를 사용해 함수 파라미터의 기본값을 지정할 수 있습니다. 이번 포스팅에서 알아보겠습니다. 기본 매개변수(default parameter) 사용법 // 사용법function 함수명(파라미터명="기본값") {// 함수 본문}디폴트 파라미터(default parameter)의 사용법은 간단합니다. 위와 같은 형식으로 파라미터 뒤에 = "초기값"을 지정해 주시면 됩니다. 왜 사용할까?See the Pen 디폴트 파라미터 by 우정태 (@sxqouumz-the-reactor) on CodePen. 기본 파라미터가 왜 필요할까요? 바로 위와 같은 상황을 방지하기 위해서입니다. 자바스크립트에서는 초기화 되지 않은 변수를 사용하더라도 에러가..
-
Web/JavaScript 2024.06.25[JavaScript] 가변 파라미터 ...나머지 매개변수(rest parameter) 사용법 자바스크립트 ES6부터는 가변 파라미터(rest parameter)라는 기능이 있는데 이걸 사용하면 여러 개의 파라미터 값을 배열로 받을 수 있습니다. 이렇게 되면 함수에 전달하는 파라미터의 개수를 가변적으로 적용할 수 있겠죠. 이번 포스팅에서 알아보겠습니다. 나머지 매개변수(rest parameter) 사용법 // 사용법function 함수명(...매개변수명) {// 함수 본문}가변 파라미터(rest parameter) 사용법은 간단합니다. 이렇게 ...파라미터명 형식으로 사용해 주시면 됩니다. 단, 마지막 파라미터로만 사용하셔야 합니다. See the Pen 나머지 파라미터 by 우정태 (@sxqouumz-the-reactor) on CodePen. 사용 예제를 짜봤습니다. multiply 함수는..
-
Web/JavaScript 2024.06.24[JavaScript] ...문법 - 스프레드(spread) 연산자 사용법 자바스크립트에서 ...으로 되어있는 연산자는 두 가지 용도로 사용됩니다. 하나는 함수의 나머지 인자의(rest parameter)로 사용하는 것이고, 또 다른 하나는 이번 포스팅에서 알아볼 스프레드(spread) 연산자입니다. 자바스크립트 스프레드(spread) 연산자 사용법 자바스크립트의 스프레드(spread) 연산자는 배열이나 객체의 요소를 개별 요소로 펼칠 때 사용되며 주로 배열을 복사하거나 합칠 때, 객체를 복사하거나 업데이트할 때 유용하게 사용할 수 있습니다. 스프레드 연산자 문법// 사용법// ...배열 or 객체// 예시 -> 배열의 요소들을 개별 인자값으로 함수에 전달function sum(x, y, z) { return x + y + z;}let arrNum = [1, 2, 3];co..
-
Web/JavaScript 2024.06.23[JavaScript] 화살표 함수(Arrow Function) 사용시 주의할 점 (어휘적 범위 - Lexical Scope) 화살표 함수(Arrow Function)는 자바스크립트 ES6에서 나온 간결한 함수 표현 문법으로, 주로 익명 함수나 콜백 함수로 사용됩니다. 코드의 가독성을 높이고 작성할 코드의 양을 줄일 수 있습니다. 하지만 화살표 함수(Arrow Function)를 사용할 때 몇 가지 주의할 점이 있는데요. 이번 포스팅에서 한번 알아보도록 하겠습니다. ※ 먼저 화살표 함수의 기본 사용법을 모른다면 아래 글을 읽고 와주시기 바랍니다.[JavaScript] 화살표 함수(arrow function) 사용법 & 예제 총정리 화살표 함수(Arrow Function) 사용시 주의할 점 화살표 함수(Arrow Function)의 어휘적 범위(Lexical Scope)Lexical Scope(어휘적 범위)는 함수가 정의된 시점..
-
Web/JavaScript 2024.06.22[JavaScript] 화살표 함수(Arrow Function) 사용법 & 예제 총정리 ES2015에서 처음 등장한 화살표 함수(arrow function)는 기존 함수 표현식을 화살표로 간결하게 표현할 수 있는 새로운 문법으로 화살표 함수라는 이름은 문법의 생김새를 차용해 이름이 지어졌습니다. 화살표 함수는 짧고 간단하게 함수를 작성할 수 있게 해줍니다.화살표 함수는 this를 자신이 속한 환경에서 가져와서, this 키워드를 더이상 사용하지 않아도 됩니다.화살표 함수는 arguments 객체 대신 나머지 매개변수(...)를 사용합니다.화살표 함수는 new 키워드로 객체를 만들 수 없어서 객체 메서드로 사용할 때 주의하셔야 합니다. 자바스크립트 화살표 함수(Arrow Function) 사용법 기본 문법(param1, param2, param3) => { // 함수 본문}기존의 문법과..
-
Web/JavaScript 2024.06.21[JavaScript] 배열 정렬하는 간단한 방법(sort) - 문자열, 숫자, 객체 배열 정렬하기 배열에 학생들의 성적을 넣어놨는데 순서대로 보여주고 싶다면 어떻게 해야 할까요? 이럴 때는 배열을 성적이 높은 순으로 정렬을 해야 할 텐데요. 자바스크립트에서는 sort() 메서드를 사용하면 간단하게 배열을 정렬할 수 있습니다. 이번 포스팅에서 알아보겠습니다. 자바스크립트 배열 정렬하는 sort() 함수 //사용법배열.sort();sort() 메서드는 문자열 유니코드 순서로 배열을 정렬합니다. 문자열 배열 정렬See the Pen Untitled by 우정태 (@sxqouumz-the-reactor) on CodePen. sort() 함수는 유니코드 순서로 정렬을 실행하기 때문에 문자열 배열 정렬에 최적화되어 있습니다. 위를 보시면 a, b, c, d가 무작위로 배치된 배열을 sort() 함수 호출로..