티스토리

yunrap 개발블로그

검색하기

블로그 홈

yunrap 개발블로그

yunrap95.tistory.com/m

윤랩용 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

44. REST API 44.2 REST API 설계원칙REST에서 가장중요한 기본적인 원칙은 두가지다.URI는 리소스를 표현하는데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해한다.1. URI는 리소스를 표현해야한다.# badGET /getTodos/1GET /todos/show/1# goodGET /todos/12. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다.HTTP 요청메서드GET모든/특정리소스취득POST리소스 생성PUT리소스의 전체 교체PATCH리소스의 일부수정DELETE모든/특정 리소스삭제44.3 JSON Server를 이용한 REST API 실습JSON Server는 json파일을 사용하여 가상 REST API 서버를 구축할수있는 툴이다.매번 같은 명령어를 입력하는것이 번거로우니 package... 공감수 0 댓글수 0 2024. 12. 9.
46장 제너레이터와 async/await 46.6 async/await 함수async/await를 사용하면 프로미스의 then/catch/finally 후속 처리 메서드에 콜백함수를 전달해서 비동기 처리결과를 후속 처리할 필요 없이 마치 동기 처리 처럼 프로미스를 사용할 수있다. 46.6.1 async 함수 await 키워드는 반드시 async함수 내부에서 사용해야한다. async함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다.asnyc function foo(n) { return n; }foo(1).then(v => console.log(v));// async 함수 표현식const bar = async function (n) { return n; };bar(2).then(v => console.log(v)); // 2//.. 공감수 0 댓글수 0 2024. 11. 26.
45장 프로미스 45.2 프로미스의 생성Promise 생성자 함수를 new 연산자와 함게 호출하면 프로미스 객체를 생성한다.ES6에서 도입된 Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체다.const promise = new Promise((resolve, reject) => { if( /* 비동기 처리 성공 */){ resolve('result'); }else{ reject('falure reason'); }}); Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다.이때 비동기 처리가 성공하면 콜백 함수의 인수로 전달받은 resolve 함수를 호출하고, 비동기 처리가 실패하면 reject 함수를 호출한다.생성된 직후의 프로미스는 기본적으로.. 공감수 0 댓글수 0 2024. 11. 26.
24장 클로저 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.const x = 1;function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10; } innerFunct();}outerFunc();이렇게 innerFunc가 x변수에 접근할수있는이유는 자바스크립트가 렉시컬 스코프를 따르는 프로그래밍 언어이기 때문이다. 24.1 렉시컬 스코프자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위스코프를 결정한다.이를 렉시컬 스코프(정적 스코프)라 한다.const x = 1;function foo() { const x = 10; bar();}function bar() { console.log(x);}foo();bar();.. 공감수 1 댓글수 1 2024. 11. 18.
19장 프로토타입 19.1 객체지향 프로그래밍객체지향 프로그래밍은 특징이나 성질을 나타내는 속성을 가지고있고, 이를통해 구별할 수 있다.이처럼 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라 한다.const person = { name: 'Lee', address: 'Seoul'};console.log(person); 19.2 상속과 프로토타입상속은 객체지향 프로그래밍의 핵심 개념으로 , 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; };}con.. 공감수 1 댓글수 1 2024. 11. 12.
20장 strict mode 20.1 strict mode란?function foo() { x = 10;}foo();console.log(x); // ?위의 코드를 보면 foo 함수 내에서 선언하지 않은 x변수에 값 10을 할당했다.이때 x 변수를 찾아야 x값에 할당할 수 있기때문에 자바스크립트 엔진은 x 변수가 어디에 선언됬는지스코프 체인을 통해 검색하기 시작한다.foo함수의 스코프에서 x변수 선언을 검색한다. 하지만 없으므로 상위스코프로 간다.전역 스코프에도 x 변수의 선언이 존재하지 않기때문에 ReferenceError를 발생시킬것같지만 암묵적으로전역객체에 x 프로퍼티를 동적 생성한다. 이러한 형상을 암묵적 전역이라한다.암묵적 전역은 오류를 발생시키는 원인이 크기때문에 반드시 var, let, const 키워드를 사용해야한다... 공감수 0 댓글수 0 2024. 11. 12.
[알고리즘] Linked List 이란 javascript 로 구현해보기class Node { constructor(element) { this.element = element; this.next = null; }}class LinkedList { constructor() { this.head = new Node("head"); } insert(newElement, item) { let newNode = new Node(newElement); //새로운 노드 생성 let current = this.find(item); // 삽입할 위치의 노드 찾기 newNode.next = current.next; // 찾은 노드가 가리키는 노드를 새로은 노드가 가리키기 current.next = newNode;.. 공감수 0 댓글수 0 2024. 11. 10.
[알고리즘] 배열중간삽입 - Linked List를 알기위한 사전단계 배열 순차검색 일반적으로 배열은 동일한 크기를 갖고 빈틈없이 연속적으로 이어져있다. 인덱스를 통해 단한번의 연산으로 임의의 요소에 접근할수있다. 하지만 정렬되지않는 배열에서 특정한 값을 탐색하는 경우, 모든 배열요소를 처음부터 값을 발견할때까지 차례대로 탐색해야한다. // 선형 검색을 통해 주어진 배열(array)에 주어진 값(target)이 요소로 존재하는지 확인하여// 존재하는 경우 해당 인덱스를 반환하고 존재하지 않는 경우 -1을 반환하는 함수function linearSearch(array, target) { const length = array.length; for (let i = 0; i 맨앞의 7의 숫자를 검색하는것보다. 맨뒤에있는 30을 검색한다면 7.076ms -> 7.503ms .. 공감수 0 댓글수 0 2024. 11. 10.
[알고리즘] 피보나치 수열 - dp를 알기위한 사전단계 피보나치 수열의 유래? 피보나치 수열은 규칙을 발견한 수학자 레오나르도 피보나치의 이름을 따 부르게 되었다. 레오나르도 피보나치는 이탈리아 수학자로 이집트, 그리스, 시칠리아 등의 나라를 여행하며 아라비아에서 발전된 수학을 두루 섭렵하였다고한다. 그 많은 업적 중 피보나치수열은 12세기말 이탈리아에서 처음 제안한 것으로 "한 쌍의 토끼가 계속 새끼를 낳으면 몇 마리로 불어 날까?를 연구하다 새로운 수의 체계를 발견하였다고 한다. 한쌍의 토끼는 매일 암수 한쌍의 새끼를 낳으며 새로 태어난 토끼도 태어난지 두달 후 부턴 매달 한쌍씩 암수 새끼를 낳는다고 한다. 그러면 농장주는 1년이 지난후 모두 몇쌍의 토끼를 갖게 될까? 그 결과 피보나치는 매달 관찰되는 토끼의 양이 특정한 규칙을 따르고 있음을 발견.. 공감수 5 댓글수 3 2024. 11. 9.
49장 Babel과 Webpack이용한 환경구축 크롬, 사파리, 파이어폭스, 엣지같은 브라우저의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다. 브라우저마다 ES6지원율도 다르기때문에 최신사양으로 작성된 코드를 구형 브라우저에서 문제 없이 동작시키기 위한개발 환경을 구축하는 것이 필요하다. 이번장에서는 트랜스파일러인 Babel과 모듈 번들러인 Webpack을 이용하여 개발환경을 구축해보려한다.필자는 궁금했다. 리액트를 CRA로 구축해서 개발을해와서 따로 Babel과 웹팩 이런설정을 안해주어도 문제가 없는걸까?cra프로젝트 환경설정되있는 package.json 파일을보니 CRA는 webpack, babel 등을 다 포함하고 있다.편하게 바로 개발할수있는 기능을 제공하는 보일러 플레이트이다. CRA 만들시 npm 명령어를 쓰는데 npm.. 공감수 2 댓글수 2 2024. 10. 30.
17장 생성자 함수에 의한 객체생성 객체리터럴 방식으로 객체생성하는 방식 이외에도 다양한 방법으로 생성할 수 있다.이번장 에서는 생성자 함수를 사용하여 객체를 생성하는 방식을 살펴본다.17.1 Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈객체를 생성하여 반환한다.const person = new Object();person.name = 'Lee';person.sayHello = function () { console.log("hello my name is " + this.name);};console.log(person); // { "name": "Lee" }person.sayHello(); // hello my name is Lee생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말.. 공감수 1 댓글수 0 2024. 10. 23.
컴포넌트 분리기 컴포넌트를 분리하던중 깨닳은것을 적고자한다import React from "react";import Pagenation from "../common/Pagenation";import SearchBox from "../common/SearchBox";import heart from "../../images/icon/heart.svg";import "./../css/ProductList.css";import { Link } from "react-router-dom";const Product = ({ productLists }) => { return ( {productLists?.map((data) => ( .. 공감수 1 댓글수 1 2024. 10. 22.
18장. 함수와 일급객체 18.1 일급 객체다음과 같은 조건을 만족하는 객체를 일급 객체라 한다.무영의 리터럴로 생성할수있다. 즉 런타임에 생성이 가능하다.변수나 자료구조(객체, 배열 등)에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환값으로 사용할 수 있다.// 1. 함수는 무명의 리터럴로 생성할 수 있다.// 2. 함수는 변수에 저장할 수 있다.// 런타임(할당단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.const increase = function (num) { return ++num;};const decrease = function (num) { return --num;};// 2. 함수는 객체에 저장할 수 있다.const auxs = { increase, decrease };//.. 공감수 0 댓글수 0 2024. 10. 22.
16장 프로퍼티 어트리뷰트 16.1 내부 슬롯과 내부 매서드const o = {};o.[[Prototype]] // -> Uncaught SyntaxErroro.__proto__ // Object.prototype 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖는다.내부슬롯과 내부 메서드는 ECMAScript 사양에 정의된대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다.[[Prototype]] 내부 슬롯의 경우, proto 를 통해 간접적으로 접근할 수 있다. 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체자바스크립트 엔진은 프로퍼티를 생성할때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동정의한다. 프로퍼티 어트리뷰트.. 공감수 0 댓글수 0 2024. 10. 16.
15장 let, const 키워드와 블록레벨 스코프 15.1 var 키워드로 선언한 변수의 문제점15.1.1 변수 중복선언 허용var 키워드로 선언한 변수는 중복선언이 가능하다.var x = 1;var y = 1;var x = 100;var y; // 초기화문이 없는건 무시console.log(x); // 100console.log(y); // 1중복선언, 값할당됬다면 의도치않게 먼저 선언된 변수값이 변경되는 부작용이 발생한다.15.1.2 함수 레벨 스코프var 키워드로 선언한 변수는 오직 함수블록만을 지역스코프로 인정한다.var x = 1;if(true) [ var x = 10;}console.log(x); // 10코드블록내에서는 모두 전역변수가 되므로 값이 변경되었다.15.1.3 변수호이스팅console.log(foo) // undefinedfoo .. 공감수 0 댓글수 1 2024. 10. 13.
14장 전역변수의 문제점 14.1 변수의 생명주기14.1.1 지역변수의 생명주기전역변수의 생명주기는 애플리케이션의 생명주기와 같다.하지만 함수내부에서 선언된 지역변수는 함수가 호출되면 생성되고 종료하면 소멸한다.console.log(x); // referenceErrorfunction foo() { console.log(x); // undefined var x = "local"; console.log(x); // local return x;}foo();console.log(x); // referenceError 변수선언은 코드가 한줄씩 순차적으로 실행되기전에 런타임이전단계에서 자바스크립트 엔진에 의해 먼저실행된다고 앞장에서 다뤘었다.하지만 지역변수 x는 함수호출전에는 생성되지않는다. 함수가 호출된후 그다음 자바스크립트 엔진이.. 공감수 2 댓글수 1 2024. 10. 13.
13장 스코프 13.1 스코프란스코프는 유효범위는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.var var1 = 1; // 코드의 가장 바깥에서 선언한 변수if(true) { var var2 = 2; // 코드블록 내에서선언한 변수 if(true) { var var3 = 3; // 중첩된 코드블록내에서 선언한 변수 }}function foo() { var var4 = 4;// 함수내에서 선언한 변수 function bar() { var var5 = 5; // 중첩된 함수 내에서 선언한 변수 }}console.log(var1); //1console.log(var2); //2console.log(var3); //3console.log(var4); //ReferenceError : var .. 공감수 0 댓글수 2 2024. 10. 8.
12장 함수 12.1 함수란?함수는 함수정의, 함수호출로 나눠진다.함수 정의function add(x, y) { return x + y;} 함수 호출add(2,4); // 6 12.2 함수를 사용하는 이유함수는 코드의 재사용측면에서 유용하다.만약에 코드를 수정해야될때 함수를 사용하지않는다면 중복된 횟수만큼 코드를 수정해야하기때문이다.즉 유지보수의 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있다. 12.3 함수 리터럴var f = function add(x, y) { return x + y;}여기서 보면 함수를 만들어서 변수에 할당하고있다.함수리터럴도 값을 생성하기때문에, 값은 객체이다. 즉 함수는 객체이다.단 일반객체는 호출할수없지만 함수는 호출할 수 있다. 필자는 함수가 객체이다 라는게 와닿지않는다. 그냥 함.. 공감수 1 댓글수 2 2024. 10. 8.
27장 배열 27.1 배열이란?배열은 여러값을 순차적으로 나눈 자료구조이다.// 배열접근arr[0]arr[1]arr[2]// 배열길이arr.length // 3// 배열은 객체타입typeof arr // object 필자는 배열이라는 타입이 존재하지않아서 typeof 로 타입을 알아보면 객체타입이란걸 알수다니이번에 알게된사실이다.27.2 자바스크립트 배열은 배열이아니다.배열은 인덱스를 통해 효율적으로 접근할수있다.function searchText(array, target) { const length = array.length; for(let i = 0; i위의예제로 특정인덱스에 맞는 값을 찾으려면 차례대로 검색하기때문에 , 시간복잡도 O(n)이 커진다.또한 추가하려면 배열 요소가 추가되면 그위치 뒷자리도 모두 이.. 공감수 1 댓글수 0 2024. 10. 2.
11장 원시값과 객체의비교 11.1 원시값원시 타입은 변경 불가능한 값이다.불변성을 갖는 원시값을 할당한 변수는 재할당되면 새로운 공간을 확보하고,재할당한 값을 저장한후, 변수가 참조하던 메모리 공간의 주소를 변경한다.이를 불변성이라 한다.11.1.2 문자열과 불편성var str = 'Hello';str = 'World';// 변수에 재할당자바스크립트는 개발자편의를위해 원시타입인 문자열타입을 제공한다.문자열은 원시타입이며 변경 불가능하다.var str = 'string';console.log(str[0]); // sconsole.log(str.length); // 6console.log(str.toUpperCase()); // STRING// 단, 변경불가. 데이터신뢰성 보장str[0] = 'S';console.log(str);.. 공감수 0 댓글수 0 2024. 10. 2.
10장 객체리터럴 10.1 객체란?자바스크립트는 구성하는 모든것이 객체다.var counter = { num: 0, // 프로퍼티 increase: function() { // 메서드 this.num++; }}이처럼 객체는 프로퍼티와 메서드로 구성된 집합체이다. 10.2 객체 리터럴에 의한 객체생성객체 리터럴로, 중괄호 { } 안에 프로퍼티를 정의한다. 10.3 프로퍼티객체는 프로퍼티 집합이며, 키와 값으로 구성된다.var obj = {};obj['hello'] = 'world'; // 동적으로 생성하는 방법console.log(obj); // {hello: "world"}10.4 메서드var circle = { radius: 5, //프로퍼티 getDiameter : function () { retu.. 공감수 0 댓글수 2 2024. 10. 2.
9장 타입변환과 단축평가 9.1 타입 변환이란?var x = 10;var str = x.toString();console.log(typeof str, str); // string 10console.log(typeof x, x); // number 10타입변환을 하면 값이 변경되지 않는다.이점은 다시 생각해볼만하다var x = 10;var srt = x + '';console.log(typof str, str); // string 10console.log(typeof x, x); // number 10위의 경우는 자바스크립틍 엔진에의해서 의도적으로 바뀐 암묵적 타입변환이다.이렇게 암묵적타입은 새로운값의 타입을 만들고 단한번 사용하고 버리게된다.드러나지않게 타입이 자동변환되어 예측가능하기 어렵다.예측가능한 코드로 만들기위해 코드를 .. 공감수 0 댓글수 0 2024. 9. 27.
8. 제어문 제어문은 조건에 실행하거나 반복실행할때 사용한다.8.1 블록문블록문은 0개이상의 문을 중괄호로 묶은것으로 코드블록이라 부른다.// 블록문 { var foo = 10;}// 제어문var x = 1;if ( x 8.2 조건문8.2-1 if…else 문var num 2;var kind;// if문if ( num > 0 ) { kind = '양수';} else if { kind = '음수';} else { kind = '영';}console.log(영); // 양수8.2-2 switch 문다양한 case에 실행할 코드블록을 결정할 때 사용한다.var month = 11;var monthName;switch( month ) { case 1: monthName = 'january'; break; case 2: .. 공감수 1 댓글수 1 2024. 9. 27.
7. 연산자 연산자는 피연산자를 연산해 새로운 값을 만든다.7.1 산순연산자수학계산을 이용해 값을 만든다. 연산이불가능한 경우 NaN을 반호나한다.7.1.1 이항 산술 연산자이항산술연산자는 2개의 피연산자를 연산하여 값을 만든다5 + 2; // 75 - 2; // 35 * 2; // 105 / 2; // 2.57.1.2 단항 산술 연산자1개의 피연산자를 연산하여 값을 만든다.var x = 1;x++;console.log(x); // 2x--;console.log(x); // 1var x = 5; result;result = x++; // 할당 후에 증가console.log(result, x); // 5, 6result = ++x; // 증가 후에 할당console.log(result, x); // 7, 7+10; .. 공감수 0 댓글수 0 2024. 9. 24.
6. 데이터타입 데이터타입데이터타입은 값을 종류를 말한다.자바스크립트(ES6)는 7개의 데이터타입을 제공한다.원시타입문자열타입 불리언타입 undefined 타입 null 타입 심벌 타입객체 타입객체, 함수, 배열 등 1 과 ‘1’은 값을 생성한 목적과 용도도 다르다.메모리공간, 크기도다르고 메모리에 저장되는 2진수도 다르고, 해석하는방식도 다르다.데이터 타입의 특징을 알아보자.6-1 숫자타입java의 경우 숫자를 표현하려면 int long float double 등 다양한 숫자타입을제공하는 반면javascript는 하나의 숫자 타입만 존재한다.숫자타입은 모든수를 실수로 처리한다.console.log (1 === 1.0) // true6-2 문자열 타입자바스크립트 문자열은 원시 타입, 변경 불가능한 값이다.즉 문자열이 생.. 공감수 1 댓글수 2 2024. 9. 22.
5. 표현식과 문 개념을 이해한다는것은 바로 용어를 정확히 이해하고 설명할수있다는 것이다.용어에대한 정확한 이해는 정확한 커뮤티케이션을 가능케 한다.5.1 값표현식이 평가되어 생성된 결과를 말한다.var sum = 10 + 20;// 변수 10 + 20 이 평가되어 생성된 숫자 값 30이 할당된다. 5.2 리터럴리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.3 // 숫자도 리터럴이다. -> 3을 기술하면 자바스크립트엔진은 이를 평가해 숫자 3을 생성한다.'Hello' "World" // 문자리터럴true false // 불리언리터럴null // null리터럴undefined // undefined 리터럴{ name: 'Lee' , address: 'seoul' } // 객체.. 공감수 0 댓글수 0 2024. 9. 22.
4. 변수 4.1 변수란 무엇인가? 왜 필요한가?컴퓨터는 연산과 기억을 수행하는 부품이 나눠져있다.CPU를 사용해 연산하고 메모리를 사용해 데이터를 기억한다.또한 메모리에 저장되는 모든값은 2진수로 저장된다. (1바이트단위,8비트로 데이터를 read write함)메모리주소를 통해 직접 값에 접근하는 방법은 올바르지않기때문에메모리에 저장된 값을 변수로 가져올수있다.이게 바로 변수이다. 즉 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체이다.변수를 선언변수를 할당 (대입, 저장)변수를 참조자바스크립트 엔진은 변수명 메핑된 메모리주소를 통해 접근해 저장된값을 반환한다. 4.3 변수 선언var score; // 변수 선언, var 키워드 자바스크립트 엔진은 키워드를 만나면 자신이 수행해야 할 약속된 동작을 수행.. 공감수 1 댓글수 0 2024. 9. 22.
싱글톤 레지스트리 토비의 스프링책을 읽던중에 정리해보고자한다 싱글톤이뭘까?? 용어가 궁금했다. 싱글톤패턴이란 인스턴스를 하나만 생성하여 사용하는 디자인패턴이라한다.즉 객체의 인스턴스가 JVM상에 하나만 존재한다는 뜻이다. 이러한 인스턴스가 왜하나만 존재하는지이유를 살펴보면스프링 웹서비스를 기반에 둔 프레임워크이다.서버클라이언트환경에서 여러개의 클라이언트가 동시다발적으로 서버에 객체 생성을 요구한다.이로인해 서버에 부하가 발생할 가능성이커진다.이를 방지하기위해 싱글톤 패턴으로 특정객체의 인스턴스를 한나만 생성시키고이를 공유해 서버 부하 및 메모리 낭비를 방지한다. 이렇다면 하나의 인스턴스를 공유함으로서 서버부하를 줄일수있는 효과가 있을수있겠구나 생각이든다. 하지만 이러한 싱글톤도 문제가있다고한다.바로 private !!c.. 공감수 0 댓글수 0 2024. 6. 11.
싱글 페이지 애플리케이션이란? SPA 란? 싱글페이지 애플리케이션이란 하나의 페이지로 이루어진 애플리케이션이라는 의미이다. 이를 이해하기위해선 싱글페이지 애플리케이션이란 개념이 생기기전에 사용되던 멀티 페이지 애플리케이션이 어떻게 작동하는지 살펴봐야한다. 멀티페이지 애플리케이션에서는 사용자가 다른페이지로 이동할때마다 새로운 html을 받아오고, 페이지를 로딩할때마다 서버에서 CSS,JS, 이미지 파일등의 리소스를 전달받아 브라우저의 화면에 보여주었다. 각페이지마다 다른 html 파일을 만들어서 제공을 하거나, 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용하기도했다. 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 이 방식이 적합하지 않.. 공감수 0 댓글수 0 2024. 4. 1.
[javascript] 중복된 함수 이름 문제해결 프로젝트를하면서 js로 탭기능이 구현된상태에서 jsp에서 함수의 이름이 같을때 원하는 함수로 태우지않는 경우가있다. function search() { } function paging() { } 이렇게 사용하다보면 함수가 겹치는 경우가있어서 jsp화면에 원하는 함수를 태우지못하는 경우가있다 이유는 브라우저의 스코프는 공용공간으로 쓰이기 때문에 나중에 로딩된 같은 이름의 함수가 먼저 로딩된 함수를 덮어쓰게된다. 이러한 것을 방지하고자 js의 유효범위를 만들어 사용한다. jsp화면의 특정 객체를 만들어 해당 객체에서 필요한 모든 function을 선언하는 것이다. 이렇게 되면 겹칠 위험이 사라진다. var boardNew = { search : function (type, pageNo){ }, paging .. 공감수 0 댓글수 0 2024. 3. 30.

문의안내

티스토리
로그인
고객센터

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