Web/JavaScript(55)
-
Web/JavaScript
2024.07.07
1
[JavaScript] 자바스크립트 쿠키 생성, 삭제, 확인(+CORS 오류 해결법)
웹개발을 하다 보면 쿠키값을 만져야 하는 경우들이 생기는데요. HTTP 쿠키란 웹 서버에 의해 사용자의 컴퓨터에 저장되는 데이터를 일컫습니다. 이 쿠키를 사용하면 사용자를 특정할 수 있고, 사용자의 행동을 트래킹 할 수도 있고, 서버에 저장되어야 할 정보들을 분산하여 저장하여 과부하도 줄여주는 등 다양한 장점이 있는데요. 이번 포스팅에서는 이 쿠키값을 제어하는 방법과, 사용 시 주의사항에 대해 알아보도록 하겠습니다. 자바스크립트 쿠키 사용법 쿠키를 제어하는 방법 자체는 크게 어렵지 않지만 가끔 개발하다보면 보안상의 이유로 쿠키가 제대로 동작하지 않는 경우들이 있습니다. 그래서 웹 정책들을 잘 알아야 하는데요. 아래 주의사항을 한 번씩 읽어보고 개발을 진행해 주시기 바랍니다. 쿠키 사용시 주의사항HTT..
-
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/JavaScript
2024.06.18
[JavaScript] 자바스크립트 배열(array) 합치는 간단한 방법
자바스크립트에서 배열을 합치는 방법은 여러 가지가 있습니다. 그중에서도 가장 간편한 방법은 concat 함수를 사용하거나 ES6부터 추가된 스프레드 연산자를 사용하는 방법 이렇게 두 가지가 있을 것 같은데요. 이번 포스팅에서 그 방법에 대해 알아보도록 하겠습니다. 자바스크립트 배열(array) 합치는 간단한 방법 concat 메서드 사용하기//사용법배열1.concat(배열2)See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen. 배열에서 제공하는 기본 함수인 concat을 사용하는 방법으로 배열을 합치는 방법으로 가장 정석적인 방법이라고 할 수 있겠습니다. 위의 예제에서 array1과 array2를 concat으로 합쳐서 1,2,3,4,5,6이 출력된 것..
-
Web/JavaScript
2024.06.16
1
[JavaScript] 자바스크립트 배열에 요소 추가 / 삭제하는 다양한 방법
일반적으로 길이가 고정적인 다른 프로그래밍 언어와는 달리 자바스크립트에서 배열은 동적인 데이터 구조로, 프로그램의 상태나 사용자의 입력에 따라 배열의 내용을 추가하거나, 삭제할 수 있습니다. 이번 포스팅에서는 자바스크립트의 배열에 요소를 추가, 삭제하는 방법에 대해 알아보도록 하겠습니다. 자바스크립트 배열 요소 추가 push - 배열 맨 끝에 요소 추가See the Pen push by wjdxo513 (@wjdxo513) on CodePen. 자바스크립트 array에 push 메서드를 사용하면 배열 끝에 요소를 추가할 수 있습니다. 위의 예제에서 1, 2, 3 있었던 배열에 new라는 값을 push 하여 총 4개의 요소를 가진 배열이 된 것을 보실 수 있습니다. unshift - 배열 맨 앞에 요..
-
Web/JavaScript
2024.06.15
2
[JavaScript] 자바스크립트 배열 선언 및 사용법 총정리
어느 언어에도 마찬가지겠지만 자바스크립트에도 배열이 존재합니다. 배열을 사용할 때는 어떤 경우일까요? 배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용할 수 있습니다. 100개의 데이터를 처리해야한다고 칩시다. 배열을 사용하지않고 100개의 데이터를 저장시키려면 100개의 변수가 필요하겠죠? 그렇다면 값을 넣는 코드도 출력코드도 100번씩 적어야할것입니다. 굉장히 코딩하기도 힘들고 코드량도 길어집니다. 하지만 배열을 선언한다면 효율적으로 코드를 짤 수 있습니다. 100개의 주소값을 가지는 배열을 하나 선언하고 그 주소값에다가 For문을 이용해 값을 넣어주고 출력을 해준다면 굉장히 효율적인 코드가 되기 때문입니다. 자바스크립트 배열의 선언 방법자바스크립트의 배열선언 방법은 다른 언어들과는 조..
-
Web/JavaScript 2024.07.07 1[JavaScript] 자바스크립트 쿠키 생성, 삭제, 확인(+CORS 오류 해결법) 웹개발을 하다 보면 쿠키값을 만져야 하는 경우들이 생기는데요. HTTP 쿠키란 웹 서버에 의해 사용자의 컴퓨터에 저장되는 데이터를 일컫습니다. 이 쿠키를 사용하면 사용자를 특정할 수 있고, 사용자의 행동을 트래킹 할 수도 있고, 서버에 저장되어야 할 정보들을 분산하여 저장하여 과부하도 줄여주는 등 다양한 장점이 있는데요. 이번 포스팅에서는 이 쿠키값을 제어하는 방법과, 사용 시 주의사항에 대해 알아보도록 하겠습니다. 자바스크립트 쿠키 사용법 쿠키를 제어하는 방법 자체는 크게 어렵지 않지만 가끔 개발하다보면 보안상의 이유로 쿠키가 제대로 동작하지 않는 경우들이 있습니다. 그래서 웹 정책들을 잘 알아야 하는데요. 아래 주의사항을 한 번씩 읽어보고 개발을 진행해 주시기 바랍니다. 쿠키 사용시 주의사항HTT..
-
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/JavaScript 2024.06.18[JavaScript] 자바스크립트 배열(array) 합치는 간단한 방법 자바스크립트에서 배열을 합치는 방법은 여러 가지가 있습니다. 그중에서도 가장 간편한 방법은 concat 함수를 사용하거나 ES6부터 추가된 스프레드 연산자를 사용하는 방법 이렇게 두 가지가 있을 것 같은데요. 이번 포스팅에서 그 방법에 대해 알아보도록 하겠습니다. 자바스크립트 배열(array) 합치는 간단한 방법 concat 메서드 사용하기//사용법배열1.concat(배열2)See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen. 배열에서 제공하는 기본 함수인 concat을 사용하는 방법으로 배열을 합치는 방법으로 가장 정석적인 방법이라고 할 수 있겠습니다. 위의 예제에서 array1과 array2를 concat으로 합쳐서 1,2,3,4,5,6이 출력된 것..
-
Web/JavaScript 2024.06.16 1[JavaScript] 자바스크립트 배열에 요소 추가 / 삭제하는 다양한 방법 일반적으로 길이가 고정적인 다른 프로그래밍 언어와는 달리 자바스크립트에서 배열은 동적인 데이터 구조로, 프로그램의 상태나 사용자의 입력에 따라 배열의 내용을 추가하거나, 삭제할 수 있습니다. 이번 포스팅에서는 자바스크립트의 배열에 요소를 추가, 삭제하는 방법에 대해 알아보도록 하겠습니다. 자바스크립트 배열 요소 추가 push - 배열 맨 끝에 요소 추가See the Pen push by wjdxo513 (@wjdxo513) on CodePen. 자바스크립트 array에 push 메서드를 사용하면 배열 끝에 요소를 추가할 수 있습니다. 위의 예제에서 1, 2, 3 있었던 배열에 new라는 값을 push 하여 총 4개의 요소를 가진 배열이 된 것을 보실 수 있습니다. unshift - 배열 맨 앞에 요..
-
Web/JavaScript 2024.06.15 2[JavaScript] 자바스크립트 배열 선언 및 사용법 총정리 어느 언어에도 마찬가지겠지만 자바스크립트에도 배열이 존재합니다. 배열을 사용할 때는 어떤 경우일까요? 배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용할 수 있습니다. 100개의 데이터를 처리해야한다고 칩시다. 배열을 사용하지않고 100개의 데이터를 저장시키려면 100개의 변수가 필요하겠죠? 그렇다면 값을 넣는 코드도 출력코드도 100번씩 적어야할것입니다. 굉장히 코딩하기도 힘들고 코드량도 길어집니다. 하지만 배열을 선언한다면 효율적으로 코드를 짤 수 있습니다. 100개의 주소값을 가지는 배열을 하나 선언하고 그 주소값에다가 For문을 이용해 값을 넣어주고 출력을 해준다면 굉장히 효율적인 코드가 되기 때문입니다. 자바스크립트 배열의 선언 방법자바스크립트의 배열선언 방법은 다른 언어들과는 조..