developefeel의 등록된 링크

 developefeel로 등록된 티스토리 포스트 수는 141건입니다.

JS FP 5편 - 함수형 프로그래밍의 핵심기술(Hof, clusure, currying) [내부링크]

HOF - 고계함수 JS 클로저 3편 - HOF(고계함수, Higher Order Function) HOF hof는 여러 상황에 유동적으로 대응할 수 있는 일반화된 함수를 말한다. 기본적인 함수가 전편에서 설명했던 first class의 기능을 가질 때 HOF로 만들어질 수 있다. 로그인 기능을 예시로 HOF를 만 developefeel.tistory.com //HOF const hof = () => () => 5; hof()(); const hoF = (fn) => fn(5); hoF(function a(x) { return x; }); 고계함수는 함수를 인자로 받고 함수를 리턴한다. 위 코드에서 hof는 인자로 받은 함수에 5라는 인자를 전달하여 리턴한다. 그리고 전달된 함수 a는 인자값을 그대로 리..

JS FP 4편 - 불변성(Immutability) [내부링크]

JS의 불변성 불변성이란 함수등의 동작을 거쳐도 대상이 되는 변수의 값이 변하지 않는 것을 의미하며 side effect의 중요성이 있는 FP에서는 불변성을 지키는 편이 좋다. const obj = { name: "Kim" }; obj.name = "Park"; 객체 obj가 있을 때 name 속성을 park로 바꿀 수 있다면 obj는 불변성이 지켜지지 않는 것이다. const는 재할당이 불가능하다, 하지만 그게 불변성이 지켜진다는 것은 아니다. //Immutability const obj = { name: "Kim" }; function clone(obj) { return { ...obj }; //this is pure } function updateName(obj) { const obj2 = clon..

JS FP 3편 - 선언형과 명령형(Imperative vs Declarative) [내부링크]

객체 지향 프로그래밍은 명령형 프로그래밍이다. 함수형 프로그래밍은 선언형 프로그래밍이다. 깊게 파고들어 간다면 위처럼 단정 지을 수 없지만 OOP와 FP의 차이를 이해하기 위해서는 이렇게 이해해도 무방하다고 생각한다. 친구와 약속을 잡은 상황에서 친구는 먼저 약속장소에 도착했고 나에게 기다리는 장소를 알려주는 상황이다. 명령형 - How 버스에서 내려서 앞으로 120미터 직진 후 우측 82도 각도로 회전하여 40미터 직진하면 내가 기다리는 장소야! 선언형 - What 올리브 영에서 기다리고 있을게! 명령형은 어떻게 프로그램의 절차를 밟아가는지에 집중했다고 볼 수 있다. 위 예시에서 기다리는 장소로 오기 위해서 해야 할 절차를 설명하고 있다. 선언형은 무엇을 원하는지에 집중했다. 위 예시에서 장소를 알려주..

JS FP 2편 - 참조 투명성과 멱등성(Idempotence) [내부링크]

함수형 프로그래밍에서 참조 투명성을 가진다는 것은 함수의 결괏값이 예측이 가능하다는 것을 의미한다. //Idempotence function notGood(num) { return Math.random(num); //인자에 영향받지 않는 다른 결과 console.log(num); //인자에 영향받는 같은 결과 } notGood(5); notGood이라는 함수에 어떤 인자를 넣어도 랜덤값을 출력한다. 5를 인자로 아무리 넣어도 항상 랜덤한 값을 출력하며 100을 인자로 전달해도 랜덤값을 출력한다. 이 함수는 인자에도 영향을 받지 않고 결과를 예측할 수 없으며 이런 함수를 참조 투명성을 가지지 않는다.(결과 예측 불가능) 순수합수다.(외부의 어떤 값을 변화시키지는 않음) 멱등성을 가지지 않는다.(차후 설명)..

JS FP 1편 - side effect [내부링크]

함수의 사이드 이펙트 함수의 side effect는 함수를 동작시키면서 함수 외부에서 무언가를 변화시키는 것을 의미한다. //side effect //input -> output const array = [1, 2, 3]; function mutateArray(arr) { arr.pop(); } mutateArray(array); console.log(array); mutateArray함수는 side effect를 일으킨다. 해당 함수에 인자로 전달된 배열인 array는 함수가 동작하면 pop으로 인해 변화하기 때문이다. function mutateArray2(arr) { arr.forEach((item) => { arr.push(1); }); } mutateArray2(array); console.lo..

JS OOP 6편 - 다형성(Polymorphism) [내부링크]

다형성이란 상황의 변화에 따라 유연하게 대응하는 성질이다. JS OOP의 다형성 //Polymorphism class Animal { constructor(name) { this.name = name; } attack() { return "attack with " + this.weapon; } } class Cat extends Animal { constructor(name, nail) { super(name); this.weapon = nail; } } const naby = new Cat("Naby", "sharp nail"); naby.attack(); 동물 클래스를 상속하는 고양이 클래스는 이름과 공격 외에 무기 속성을 별도로 가지고 있다. 그리고 고양이 나비는 발톱을 이용해 공격한다. class..

JS OOP 5편 - Class private 문법(#) [내부링크]

ES2022부터 클래스에 private도입이 정식스펙으로 도입되었다. Private 이전엔 IIFE 등으로 클래스 내부의 자원을 외부로부터 개입하지 못하도록 막았지만 이제는 #을 통해 private으로 설정하면 변수와 메서드를 외부에서 접근하지 못하도록 할 수 있다. //ES2022 private class class Employee { #name = "Test"; //private field constructor(name) { this.#setName(name); //ok } #setName(name) { //private method this.#name = name; } sayName() { return this.#name; } } const emp = new Employee("New"); //ok ..

JS OOP 4편 - extends(JS 클래스 상속) [내부링크]

JS의 OOP에서는 extends를 통해 상속을 구현하고 부모클래스의 구성요소를 자식요소가 가져다 쓸 수 있도록 한다. 상속이 필요한 경우 class Elf { constructor(name, weapon) { this.name = name; this.weapon = weapon; } attack() { return "attack with" + this.weapon; } } const fiona = new Elf("Fiona", "ninja stars"); const ogre = { ...fiona }; console.log(ogre); ogre.__proto__; //empty obj console.log(fiona === ogre); //false ogre.attack(); //not func err..

JS OOP 3편 - this 바인딩(new, implicit, explicit, arrow) [내부링크]

OOP의 new연산자 this 바인딩 JS에서 클래스를 사용한 OOP방식의 코드작성에는 new 연산자를 사용해 this값을 생성되는 인스턴스에 바인딩해서 this가 인스턴스를 가리키게끔 한다. 그 외에 this를 바인딩하는 방식들이 JS에는 여러 개 존재한다. Default JS는 lexical scope를 기본적으로 따르지만 this를 계산할 때는 dynamic scope방식을 따른다. 따라서 실행 익스큐션의 this value는 작성된 위치에서 계산되는 것이 아닌 실행하는 global객체를 기본적으로 가리키게 된다. new binding //new binding this function Person(name, age) { this.name = name; this.age = age; } const pe..

JS OOP 2편 - Class [내부링크]

JS의 클래스 구조 자바스크립트의 클래스는 자바의 클래스와 겉보기에는 같아 보이지만 내부의 구조는 다르다. JS의 빌트인 객체 구조에서 프로토타입 상속구조를 사용해 구현되는 것으로 기본 개념은 생성된 함수와 같이 생성되는 프로토타입 객체를 통해 상속을 구현하고 생성자 함수와 new연산자를 통해 this를 생성된 객체에 바인딩하는 구조로 작성된다. Class //ES6 class class Elf { constructor(name, weapon) { this.name = name; this.weapon = weapon; } attack() { return "attack with" + this.weapon; } } const peter = new Elf("Peter", "stones"); peter.atta..

JS OOP 1편 - factory code [내부링크]

Object Oriented Programming 객체 지향 프로그램은 패러다임이며 코드를 객체 지향의 방식으로 만들겠다는 방법론이다. JS는 크게 FP, OOP로 나눌 수 있으며 이 중 하나를 선택해서 써야 하는 것이 아닌 상황에 따라 둘 모두를 적절하게 사용할 수 있는 것이 바람직하다고 개인적으로 생각한다. 그러니깐 둘 다 잘해야 된다는 말이다. Original code const elf1 = { name: "Orwell", weapon: "bow", attack() { return "attack with" + elf1.weapon; }, }; const elf2 = { name: "Sally", weapon: "bow", attack() { return "attack with" + elf2.weap..

JS 프로토타입 5편 - OverRiding(커스텀 내장 메서드) [내부링크]

커스텀 내장 메서드 추가 //functionality of built in object //작년을 나타내려는 함수를 만드려면? new Date("2023-01-09").lastYear(); Date는 날짜를 나타내는 타입이며 해당 타입에 lastYear라는 내장 메서드는 존재하지 않는다. 여기서 입력받은 날짜의 작년 일자를 계산해 주는 메서드를 만들고자 한다. Date 생성자 함수의 prototype객체에는 Date전용 메서드들이 존재하는데, 여기에서 객체에 속성을 추가해주듯이 lastYear라는 이름의 함수를 추가해 주면 Date를 사용할 때 정의해 준 함수를 내장 메서드처럼 사용할 수 있다. 유의해야 할 것은 arrow func를 사용할 때에는 this가 dynamic scope가 아닌 lexcall..

JS 프로토타입 4편 - prototype객체와 __proto__속성 [내부링크]

__proto__ & prototype 이번 글은 프로토타입 상속계층을 이해하고 있다는 가정하에 작성되었습니다. //only function has prototype function multiplyBy5(num){ return num*5 } multiplyBy5.prototype multiplyBy5.__proto__===Function.prototype multiplyBy5.__proto__.__proto__===Object.prototype multiplyBy5.__proto__.__proto__.__proto__===null 정의한 함수 multiplyBy5의 __proto__속성을 타고 올라가면 multiplyBy5 < Function < Object < null 순서로 상속을 받고 있는 것을 볼..

JS 프로토타입 3편 - prototype chain [내부링크]

Prototype Chain JS는 프로토타입 기반 언어로 prototype 연결고리가 존재해서 상속을 받을 수 있다. hasOwnProperty const obj = { name: "obj" }; obj.hasOwnProperty("name"); //true 해당 메서드는 Object내장 메서드로 상속받아서 사용하는 속성이 아닌 자신만의 속성인지 아닌지 확인하는 기능을 가진다. obj에 name속성을 정의해 줬으므로 값은 true를 가진다. //function function multyplyBy5(num) { return num * 5; } multyplyBy5.hasOwnProperty("call"); //false 함수 또한 객체의 한 종류이므로 해당 메서드를 사용할 수 있고 정의한 함수에 call..

JS 프로토타입 2편 - prototype chain [내부링크]

Prototype Chain JS는 프로토타입 기반 언어로 prototype 연결고리가 존재해서 상속을 받을 수 있다. hasOwnProperty const obj = { name: "obj" }; obj.hasOwnProperty("name"); //true 해당 메서드는 Object내장 메서드로 상속받아서 사용하는 속성이 아닌 자신만의 속성인지 아닌지 확인하는 기능을 가진다. obj에 name속성을 정의해 줬으므로 값은 true를 가진다. //function function multyplyBy5(num) { return num * 5; } multyplyBy5.hasOwnProperty("call"); //false 함수 또한 객체의 한 종류이므로 해당 메서드를 사용할 수 있고 정의한 함수에 call..

JS 프로토타입 1편 - 상속 [내부링크]

프로토타입 상속 let dragon = { name: "Red dragon", fire: true, fight() { return 100; }, sing() { if (this.fire) { return `I am ${this.name} the breather of fire`; } }, }; 드래곤 객체는 변수 2개와 메서드 2개를 가지고 있다. let lizard = { name: "sand lizard", fight() { return 1; }, }; const signLizard = dragon.sing.bind(lizard); console.log(signLizard()); 도마뱀 객체는 드래곤의 열화판으로 멤버변수와 메서드의 이름은 같고 내용은 다르다. bind를 사용해 드래곤의 sing메서드를..

JS 클로저 6편 - 클로저 사용 이유(메모리 절약 & 캡슐화)와 호이스팅 [내부링크]

Memory Efficient //memory efficient function heavy(idx) { const bigArr = new Array(10000).fill("大"); console.log("created"); return bigArr[idx]; } heavy(411); //참조 때마다 배열1만개가 생성되고 제거됨 heavy(411); heavy(411); heavy(411); 크기 10000의 배열을 만들고 인자로 받은 인덱스의 배열값을 리턴하는 함수가 있을 때 해당 함수는 호출할 때마다 배열을 생성하고 삭제하길 반복한다. 그 증거로 콘솔창에 created문구가 호출 횟수만큼 출력되는 것을 확인할 수 있다. function heavy2() { const bigArr = new Array(1..

JS 클로저 5편 - Closure(함수 커링에서의 클로저 현상) [내부링크]

커링에서의 함수 생명주기 function a() { let grandpa = "grandpa"; return function b() { let father = "father"; return function c() { let son = "son"; return `${grandpa} > ${father} > ${son}`; }; }; } a()()(); a함수 (변수 : grandpa, 리턴값 : 함수 b) b함수 (변수 : father, 리턴값 : 함수 c) c함수 (변수 : son, 리턴값 : {a함수의 변수, b함수의 변수, c함수의 변수}로 이뤄진 문자열) a( ) == function b a( )( ) == b( ) == function c a( )( )( ) == b( )( ) == c( ) ==..

JS 클로저 4편 - Currying(함수 커링 기법) [내부링크]

Currying 커링은 두 개 이상의 인자를 받는 함수의 구조를 분리하여 인자를 받는 중간에 개입할 수 있게 하는 방법이다. const multiplyBy = function (num1) { return function (num2) { return num1 * num2; }; }; const multiplyByTwo = multiplyBy(2); multiplyByTwo(4); multiplyByTwo(5); const multiplyByFive = multiplyBy(5); multiplyByFive(4); multiplyByFive(5); 함수의 first class 성질을 이용해 외부 함수를 변수에 저장하며 리턴을 함수로 작성하게 되면 변수에는 리턴문인 외부함수가 저장되게 된다. num1의 인자에 ..

JS 클로저 3편 - HOF(고계함수, Higher Order Function) [내부링크]

HOF hof는 여러 상황에 유동적으로 대응할 수 있는 일반화된 함수를 말한다. 기본적인 함수가 전편에서 설명했던 first class의 기능을 가질 때 HOF로 만들어질 수 있다. 로그인 기능을 예시로 HOF를 만들어 보겠다. 기본적인 형태의 함수 //HOF function letAdamLogin() { let array = []; for (let i = 0; i < 100000; i++) { array.push(i); } return "Access Adam"; } function letEvaLogin() { let array = []; for (let i = 0; i < 100000; i++) { array.push(i); } return "Access Eva"; } letAdamLogin(); le..

JS 클로저 2편 - 일급 객체(First Class) [내부링크]

First Class JS뿐 아니라 몇몇 언어 또한 first class라는 개념을 가지고 있다. JS에서의 function은 객체이자 first class이며 특징은 아래와 같다. 함수를 변수에 저장할 수 있다. 함수를 인자로 전달할 수 있다. 함수를 값처럼 리턴할 수 있다. 일급객체 개념은 클로저를 이해하는 데 중요한 개념이다. 함수를 변수에 저장 //1 함수를 변수에 저장할 수 있다 var stuff = function () { console.log('this is first class'); }; stuff() 함수를 인자로 전달 //2 함수를 인자로 전달할 수 있다 function a(fn) { fn(); } a(function () { console.log("this is argument fun..

JS 클로저 1편 - 함수는 객체다 [내부링크]

JS Type 1편 - 자바스크립트 타입 종류(primitive, non-primitive) JS 타입 종류 //number 5, 3, 6 //boolen true, false //string "hello" //undefined undefined //null null //symbol Symbol("just symbol") //object {} 자바스크립트의 타입 종류는 각각 아래와 같다. number: 숫자 boolen: 참, 거짓 string: developefeel.tistory.com 참조형 변수 타입인 객체, 배열, 함수는 모두 객체 타입에 포함된다. 함수 호출 방식 //function function one() { return 1; } one(); 일반적인 함수의 호출 방식 우리가 보편적으로 사..

JS Type 4편 - 동적 타입(static&dynamic type) [내부링크]

동적 타입 결정 방식 Dynamic type 언어마다 변수 타입을 결정함에 있어 동적인지 정적인지가 나뉜다. //dynamically type lang var a = 100; var b = 'hihi'; JS는 동적으로 변수의 타입을 결정한다. a는 100이 할당된 순간 숫자로 인식하고 number타입이 부여된다. b는 'hihi'가 할당된 순간 문자열로 인식하고 string타입이 부여된다. static type 추가로 정적 타입 언어는 변수의 타입을 명시해 준다. //statically type lang ex) c int a; a = 100; string b; b = 'hihi'; 위와 같이 변수 선언 시에 타입을 명시하고 값을 할당할 때엔 변수의 타입에 맞는 값을 할당해야 된다. TS 동적타입과 정적..

JS Type 3편 - type Coercion(==, === 차이) [내부링크]

==와 ===의 차이 //type coercion 1 == "1"; //dont try coercion 1 === "1"; ==비교식은 변수의 값만을 비교한다. ===비교식은 변수의 값과 타입을 비교한다. coercion은 변수의 타입을 강제로 변환한다고 이해할 수 있다. 좀 더 안정적인 조건식의 작성을 위해서는 값과 타입을 모두 비교하는 '==='비교식이 더 추천된다. Type Coercion if (1) { console.log("1 is true"); } if (0) { console.log("noting happen"); } JS뿐 아니라 꽤 많은 언어에서 변수의 타입을 암묵적으로 변환시켜 준다. 위 코드에서 1과 0은 number타입이지만 조건문에 들어갔을 때 암묵적으로 boolen타입으로 강제..

JS Type 2편 - 얕은 복사, 깊은 복사(shallow & deep clone) [내부링크]

//call by value //각자 값에 대한 저장공간을 가진다 var a = 5; var b = a; b++; console.log(a); console.log(b); 원시형 타입의 변수는 저장공간에 값이 저장된다. 따라서 b에 a를 할당했을 때 저장공간에 있는 값인 5가 할당된다. 5가 할당된 후 b의 값을 1 증가시켜도 a의 값에는 변동이 없다. //call by reference let obj1 = { name: "Kim", password: "123" }; let obj2 = obj1; //obj1의 주소가 들어간다. obj2.password = "easy"; console.log(obj1); console.log(obj2); 참조형 타입의 변수는 값 대신에 주소가 저장된다. 만약 obj1을 ..

JS Type 1편 - 자바스크립트 타입 종류(primitive, non-primitive) [내부링크]

JS 타입 종류 //number 5, 3, 6 //boolen true, false //string "hello" //undefined undefined //null null //symbol Symbol("just symbol") //object {} 자바스크립트의 타입 종류는 각각 아래와 같다. number: 숫자 boolen: 참, 거짓 string: 문자열 undefined: 아직 정해지지 않은 값 null: 비어있는 값(undefined과 다르게 비어있다고 정해져 있는 값) symbol: es6에서 추가된 변수타입, 유니크한 값을 가진다. symbol 설명글 object: 객체 타입 primitive, non-primitive (원시형, 참조형) //primitive typeof 1; typeof..

JS 동작원리 10편 - call, apply, bind [내부링크]

//call function a() { console.log("a"); } a.call(); //a a.apply(); //a a(); //a js의 function에는 call, apply, bind라는 내장 함수가 있다. 이 글에서는 이 세 함수의 특징과 사용법에 집중해서 다루도록 하겠다. 객체의 메서드 const wizard = { name: "Merlin", health: 70, heal(num1, num2) { return (this.health += num1 + num2); }, revival() { return (this.health = 100); }, }; 마법사 객체는 이름이 멀린, 체력은 70이다. 또 두 기술을 가지고 있는데 각각 heal과 revival이다. 그럼 마법사 스스로에게 ..

JS 동작원리 9편 - Scope(lexical & dynamic)와 this [내부링크]

요약 : JS는 선언된 위치에 따라 scope가 결정되는 lexical을 따른다. 하지만 JS의 this는 호출 시점에 따라 값이 결정되는 dynamic scope방식과 '비슷한' 동작을 한다. JS는 기본적으로 function scope를 가지며 새로 추가된 let,const변수선언을 통해 block scope를 추가로 가질 수 있다. 두 scope의 차이를 모른다면 이전 글에 작성해뒀다. function scope와 block scope가 scope의 범위에 대해 정의한다면 dynamic과 lexical은 정의된 scope의 범위가 어디에서 파생되는 지를 정의한다. dynamic - 어디에서 호출을 하느냐에 따라 scope가 달라진다. (옛, 일부 언어) lexical - 선언을 한 장소에 따라 sc..

JS 동작원리 8편 - 실행 컨텍스트(VE, scope chain, this) [내부링크]

실행 컨텍스트 실행 컨텍스트(Execution Context)는 JS 동작의 핵심원리로써 동작의 단위라고 볼 수 있다. NodeJS의 런타임 동작 방식에서 콜 스택에 쌓이는 것이 실행 컨텍스트 이다. 이 실행 컨텍스트는 객체의 형태이며 세 개의 속성 값을 가진다. Variable Object 실행 컨텍스트의 첫 번째 속성 VO는 변수 정보를 가리킨다. 위 코드가 런타임에서 실행된다면 anonymous(Global) => one => two 순서로 콜 스택에 담기게 된다. 각 세 개의 실행컨텍스트의 VO가 가르키는 객체에 담겨있는 것은 전역 컨텍스트 var isValid = false, function one(), function two() 함수 컨텍스트(one) var isValid = true 함수 컨..

JS 동작원리 7편 - V8 Optimization killer (arguments) [내부링크]

ES6 호환코드에서는 arguments 보다는 나머지 인자를 사용하세요 arguments와 ...args(나머지 인자)는 함수의 인자에 접근할 수 있다. arguments arguments는 함수의 인자로 전달받은 person1, person2를 배열의 형태로 전달받는다. 첫줄 결과에서 보듯이 arguments는 배열이 아닌 Arguments객체이다. 따라서 배열처럼 사용하고 싶다면 Array.from()을 사용해 변환이 필요하다. ...args 나머지인자는 arguments처럼 array변환이 필요없이 배열의 형태로 인자를 전달받는다. arguments와 ...args는 함수선언에서 명시된 인수의 갯수에 상관없이 받을 수 있다. arguments 명시된 인자는 두개지만 호출 시 네개의 인자를 넣어 호출..

JS 동작원리 6편 - 호이스팅 [내부링크]

선언 변수 선언과 두 가지 방식의 함수 호출을 하고 선언을 그 이후에 해봤다. 일단은 세 가지 케이스 모두 오류는 없었지만 선언형 함수 말고 변수와 함수 표현식의 one, say2는 undefined를 출력한다. 지금까지 위에서 아래로 읽어내려 오는 인터프리터 방식으로 JS를 해석한다고 알았다면 어째서 선언보다 호출이 먼저가 되어도 오류가 없는지 등에 대해 JS의 선언 방식에 대해 알아보자 변수 선언 위 코드의 세 번의 num콘솔 출력은 해당 시점의 num의 상태를 보여 줄 것이다. 선언을 하기 전에 호출할 때에는 undefined를 출력하고 그 이후엔 선언한 대로 값을 출력한다. 여기서 집중할 것은 처음의 undefined출력이다. 호이스팅이라 하는 JS의 변수 선언은 문서 전체를 읽기 전에 미리 예습..

JS 동작원리 5편 - 런타임 (Event Loop, Callback Queue, 비동기) [내부링크]

지금까지 JS가 V8엔진을 통해 어떻게 기계어로 번역되고 실행되는지 알아봤다. 하지만 JS가 브라우저에서 동작할 때는 다른 얘기가 된다. Node.js 위 사진은 노드 js의 전체 시스템 아키텍처이다. JS를 읽고 처리하는 V8엔진은 한 부분만을 차지하고 그 외에 더 넓은 환경이 있다고 일단 이해해보자 JS문서가 어떤 명령을 내릴지에 대해 적어뒀다면 V8엔진은 JS를 해석한다. 마지막으로 런타임은 JS를 V8이 해석한 내용을 토대로 브라우저를 실질적으로 동작시키는 환경이다. 실제로 node.js 설치 페이지에 가보면 확실하게 적어뒀다. 노드 js는 자바스크립트 런타임 환경이라고 순수 JS는 언어로써 입출력을 하거나 알고리즘 문제를 푸는 등의 행동은 가능하지만 비동기 처리 등의 브라우저 환경에서의 동작을 ..

JS 동작원리 4편 - 콜 스택 [내부링크]

메모리 힙에 이어서 이번엔 콜 스택에 대해 알아보도록 한다. 콜 스택은 이름에서 알 수 있듯이 스택 구조의 저장공간에서 코드를 호출한다. Call Stack 위와 같은 코드의 JS문서가 실행된다고 가정했을 때 콜 스택을 확인해보자 크롬 개발자 콘솔창에서 해당 코드를 실행시켜서 디버깅을 하면 스코프 상태 밑에 콜 스택을 볼 수 있다. 처음 스택에 들어가는 것은 anonymous, 전체 파일이며 main함수라고 보면 된다. 파일이 실행되고 calc함수를 호출하는 코드를 만난다. 콜 스택을 확인해보자 anonymous위에 calc가 쌓인 것을 볼 수 있다. 이후 실행상태는 calc함수 내의 코드로 이동했다. sum을 계산하고 리턴문으로 넘어갔더니 이번엔 sub함수 호출을 만나게 된다. 다음 행동이 이제는 예상..

JS 동작원리 3편 - 메모리 힙 (Memory Leak, Garbage Collector) [내부링크]

지금까지 JS가 어떻게 번역되어서 기계에게 전달되는지 알아봤다. 이번에는 코드를 읽는 과정에서 데이터를 메모하여 저장하는 공간에 대해 알아볼 것이다. 메모리 힙 힙 자료구조와 Call by value, Call by reference 개념에 대한 학습이 선행되길 추천 코드를 읽는 과정에서 변수 선언을 만나면 해당 데이터를 저장할 공간이 필요하게 된다. 여기서 number와 string변수는 Call by value human객체는 Call by reference 형식을 가진다. 메모리 힙에는 Call by reference형식의 데이터만이 저장된다. 힙과 스택의 자료구조와 변수 참조 형식에 대해 이해하고 있다면 왜 두 다른 저장공간을 사용해서 참조 변수만을 힙에 저장하는지 알 수 있을 것이다. 메모리 누..

JS 동작원리 2편 - 최적화 (인라인 캐싱, 히든 클래스) [내부링크]

Inline Caching 인라인 캐싱은 js컴파일 과정에서 한번 참조된 데이터에 대해서는 기억해서 여러 번 데이터를 중복 참조하지 않도록 하는 최적화 방식이다. 컴파일을 할 때 처음 find함수는 data에 접근하여 속성 a, b를 가져온다. 하지만 이후부터는 find(data)는 문자열 a=1 b=2로 캐시에 저장되어 다시 데이터에 접근하는 것을 줄여주는 최적화 방식이며 인라인 캐싱은 히든 클래스를 기반으로 둔다. Hidden Class 히든 클래스에 대해 더 정확히 알고싶다면 동적 타이핑과 동적 탐색 개념에 대한 학습을 추천한다. 만약 위와 같은 함수형 클래스인 Num이 있다고 했을 때 obj1과 obj2는 Num의 인스턴스 객체이다. 크롬 콘솔창에서 두 객체의 히든 클래스를 확인할 수 있다. (콘..

JS 동작원리 1편 - 자바스크립트 엔진, V8 [내부링크]

JS는 고급언어의 일종으로 기계가 이해하기 위한 '번역'과정을 거침으로써 사람과 기계가 소통할 수 있다. V8 - js 엔진 구글의 V8은 JS를 기계가 이해할 수 있는 기계어로 변환해주는 엔진이다. 위의 과정을 하나씩 이해해보도록 하겠다. Parser, AST JS문서가 들어오면 파싱 과정을 거쳐 구문을 분석하고 문법 체크를 한다. 파싱은 말 그대로 js문서를 분해한다고 이해하면 된다. 파싱된 js 문서는 AST(추상 구문 트리)로 변환된다. 직접 입력해서 테스트해보고 싶다면 위 단어를 클릭해서 트리구조를 확인할 수 있다. JIT Compiler - 인터프리터와 컴파일러를 한 번에 인터프리터는 한 줄씩 실행하여 순간 속도가 빠르고 메모리 사용량이 적다. ex) 파이썬 컴파일러는 통째로 기계어로 변환하여..

리액트 쓰는 이유 [내부링크]

요약 웹 페이지를 컴포넌트라는 단위로 조각낸다. 페이지 갱신이 필요할 때 바뀌는 컴포넌트들만 쏙쏙 골라서 갱신한다. 22년인 현재까지도 프론트엔드 생태계의 우량아, 쓰는 사람이 많다는 것 다른 이유도 더 많겠지만 리액트 찬양론자는 아니기 때문에 꼭 알아야 할 핵심 내용만을 적어봅니다. 페이스북은 리액트를 왜 만들었을까? 프론트엔드 개발 씬에 SPA, Single Page Application이 생겨난 후에 SPA계에선 Angular, React, Vue 삼대장이 탄생했다. 구글에서 만든 앵귤러는 사실 망해가는 추세, 1인 기업 에반 유가 만든 Vue는 오픈소스의 특징을 강하게 띄고 있으며, 페이스북에서 만든 React가 셋 중 가장 사용자를 많이 보유하고 있는 편이다. 위는 페이스북의 화면인데, 화면의 ..

[React] SetState [내부링크]

렌더링, 화면에 변화를 보이다 렌더링 이란 웹 페이지상에서 해당 페이지의 구성요소를 조립하여 사용자에게 보여주는 행동이다. p 태그안에 state.name변수를 나타내도록 하고 버튼을 클릭하면 온클릭 이벤트로 name변수를 new로 변경하도록 해본다. 예상대로라면 name변수가 old에서 new로 변경되니 Hi new의 문장으로 변경되어 표현될 것이다. 하지만 버튼을 아무리 눌러도 name변수는 new로 변경되지만 화면의 old는 변경되지 않는다. SPA를 위한 React의 렌더링은 임의의 상태가 변화할 때 Re-rendering을 하여 변동사항을 갱신하여 보여준다. 분명 클릭이벤트로 인해 name변수는 new로 변경이 되었는데 왜 리렌더링이 일어나지 않았을까 Re-rendering이 일어날 조건과 변수..

[JS] new 연산자 [내부링크]

위와 같이 객체를 생성할 때 new 를 쓰곤 한다. 여기서 new 연산자의 내부 동작에 대해 알아본다. new 사용 멤버 변수 2개와 그 수를 더해주는 메서드를 정의했다. 이제 정의한 Add에 1과2를 인자로 가져가는 add 객체를 생성한다. add객체에는 a에 1, b에 2가 들어가있으므로 plus메서드를 호출하면 3이 값으로 나온다. new 미사용 new 연산자를 사용하지 않고 newadd객체로 같은 결과를 보이도록 해본다. js 객체에는 proto속성이 있는데 그 속성을 Add의 prototype객체를 참조하도록 연결해준다. 이렇게 하면 newadd는 Add를 상속받게 된다. apply메서드는 this객체와 배열을 전달하는데, Add에 newadd객체에 인자 1,2를 전달하는 것과 같다. 따라서 n..

[CSS] Selector 종류 [내부링크]

태그 선택자 아이디, 클래스 선택자 속성 선택자 중첩 선택자 하위 선택자 형제 태그 선택자 가상 선택자 평상시 > 마우스가 올라갔을 시 > 클릭 시 UI 상태 선택자 구조 가상 클래스 선택자 부정 선택자 정합성 체크 선택자 가상 요소 선택자

[JS] 프로토타입 [내부링크]

현재는 클래스 또한 문법적으로 지원을 하지만 원래 JS는 Prototype을 기반으로 확장, 재사용성을 가지는 언어이다. oop, 상속, 확장, 오버라이딩.., 을 JS는 어떤 방식으로 풀어냈는지 알아보자 첫 번째 이야기 : 과일의 속성 (상속, 오버라이딩) 여기 과일을(이름은 apple인) 정의했다. fruit.name은?? apple이다. 사과의 색은 빨간색이기에 fruit에 color속성을 red로 추가해주었다. fruit.color는?? red다. 이쯤에서 fruit의 속성은 무엇이 있는지 궁금해서 hasOwnProperty메서드를 사용해 알아보았다. color속성은 true로 존재한다고 하고 shape속성은 false로 없다고 한다. 아직 만들지 않았으니깐 잠깐...그런데 hasOwnProper..

[JS] Symbol [내부링크]

number, undefined, string등의 변수 타입을 원시형 타입이라 한다. es6에서는 새로운 원시형 타입인 symbol타입이 추가되었다. 심볼은 객체의 속성으로 사용됨 심볼이 사용된 값은 유니크한 값을 가짐 심볼값은 선언 후 변경이 불가능함 선언과 출력 형태 testSb이란 변수를 심볼형으로 만들어주었다. 괄호 속 인자에는 심볼변수에 대한 설명만이 담긴다. 변수의 출력 형태는 심볼로 그대로 나온다. 심볼 사용이유 - 충돌방지 배열의 길이가 3인 배열의 length값에 10을 넣어준다면 배열의 길이가 10으로 변경이 된다. 그렇다면 배열에 length라는 이름의 속성을 넣어주면서도 내장된 length와 충돌이 일어나지 않으려면 어떻게 해야 될까 length라는 변수를 심볼형으로 정의하고 arr..

[JS] 중복없는 자료구조, Set [내부링크]

ES6부터 JS에 새로운 자료구조인 map과 set이 추가되었다. set은 일반적인 배열구조에서 중복값이 없는 집합구조라는 것이 가장 큰 특징이다. 배열(array)과 집합(set)의 차이 배열 배열은 3의 값을 가지는 인자가 두개 이상 있어도 모두 출력된다. 집합 집합은 3의 값을 가지는 인자가 여러개라면 중복이 제거되어서 1,2,3만 저장된다. (첫 인자로 보이는 size:3은 크기를 나타냄) Set생성 및 추가 - new, add 방법 1. 아무 인자도 주지 않고 정의된다. 후에 인자를 추가해줘야 함 방법 2. 정의하면셔 add를 사용해 인자를 추가하여 생성한 뒤 후에 인자를 추가했다. 또한 콘솔창을 보면 눈치챌 수 있듯이 set은 arr의 length대신 size를 사용해 크기를 표현한다. 방법 ..

[Flask] MVC패턴을 위한 BluePrint, 파이썬 파일끼리 import하기 [내부링크]

MVC 패턴 - Model, View, Control MVC : 소프트웨어 개발 방법 중 하나 Model : 데이터베이스 (백엔드 서버, 데이터를 다루는 부분) View : 인터페이스 (프론트엔드, 사용자의 눈에 보이는 웹페이지 등) Control : M과 V 사이에서 제어 담당 (RestAPI등) MVC의 목적 MVC에 따라 코드를 분류하여 관리를 쉽게 하는 것 (위의 폴더 구조처럼 모델에 맞게 분류함) 자주 변경할 수 있는 View부분등을 따로 빼서 유지보수를 쉽게 하겠다는 것이 목적 MVC의 단점 기본 취지와 어긋나게 유지보수 시 MVC 세 부분을 모두 조금씩 건드려야 하는 상황이 나옴 하나의 기능이 여러군데에 흩어져 있을 때, 코드의 가시성이 떨어질 수가 있음 import bluePrint라는 같..

[Flask] 플라스크에서 지원하는 데코레이터 [내부링크]

before_first_request : 웹 application 기동 이후 가장 처음에 들어오는 HTTP 요청에서만 실행 before_request : HTTP 요청이 들어올 때마다 실행 위 두개는 인자 전달 불가능 after_request : HTTP 요청 처리가 끝나고 브라우저에 응답하기 전에 실행 response 리턴 필요 처음 페이지(/)를 들어가면 셋 모두 실행된다. 라우팅 경로로 들어가면 hello가 출력되는 대신 before_first_request는 더이상 실행되지 않는다. 새로고침을 하면 같은 데코레이터가 다시 실행된다. 다시 / 경로로 돌아가자 route데코레이터는 실행되지 않으며 다른 두개는 실행된다.

[Flask] 파이썬 db연결, MongoDB, Pymongo [내부링크]

기본세팅 pymongo와 mongodb설치 db연결후 ismaster커맨드로 연결확인을 하거나 connection객체의 server_info를 통해 정보가 불러지는지 확인 Mongodb 사용 데이터삽입 생성한 객체에 insert_one을 사용하여 데이터를 삽입한다. 데이터조회 하나의 데이터 조회 메서드는 find_one이다. 두 개의 데이터를 추가로 생성하고 그 중 222의 id를 가진 데이터를 조회했다. 여러 데이터를 모두 불러오기 위해 find를 사용하여 all_data에 담아주고 for문을 통해 모든 데이터를 출력했다. 데이터삭제 delete_one은 id 222에 해당하는 하나의 데이터를 삭제해준다.(id222여러개가 있어도 하나만 삭제) 삭제 후 다시 모든 데이터를 출력해보니 111과 222의 ..

[Flask] 파이썬에서 db연결, PyMySQL [내부링크]

기본 세팅 PyMySQL설치 (설치 경로 유의) DB생성 (여기서 자세하게 다루진 않습니다) MySQL 설치 root user에 권한 부여(GRANT) 여기선 새로운 user인 blog생성한 상태(마찬가지로 권한 부여) CREATE로 DB생성 blog_db가 생성되었으면 같은 이름으로 생성할때 이미 존재한다고 메세지가 뜬다. show databases명령으로 존재하는 db를 확인할 수 있다. use blog_db 명령어로 아까 생성한 db를 사용하도록 한다. 해당 db에 create table 명령으로 테이블을 하나 생성해주며 db생성을 마친다. DB 연결 pip로 다운받았던 pymysql을 import하고 connect메소드에 파라미터값을 지정하고 MYSQL_CONN라는 이름의 connect 객체를 생..

[Flask] 에러페이지 처리, 에러 로그파일로 저장 [내부링크]

에러 페이지 처리 위와 같이 라우팅 경로 /home로 들어가면 해당 페이지가 나타난다. 만약 경로에 없는 URL이 입력된다면 not found 코드인 404에 해당하는 errorhandler를 실행시키도록 하여 에러페이지를 원하는 페이지로 만들어 준다. 로그 파일 생성 flask는 logging패키지를 지원한다. 로그파일 설정으로 저장할 파일 이름과 어떤 레벨의 오류부터 저장할지 설정한다. 실행하면 설정한 대로 error레벨의 로그들만 저장되어 파일에 저장된다. 보통 error단계부터 실행에 영향을 끼치는 레벨의 오류이다. Not Found 에러를 로그에 저장하기 app.debug가 True라는 것은 개발단계에서 디버그내용을 확인하겠다는 것이다. False라는 것은 실제 배포를 하겠다는 내용이다. 즉, ..

[Back-end] put, get, post, delete 방식별 RestAPI구현 [내부링크]

RestAPI [Back-end] flask로 Rest API 구현 REST (REpresentational State Transfer) Rest API는 REST기반 서비스 API 이다. HTTP는 서버/클라이언트 모델로써 서버와 컴퓨터가 서로 Response(요청)과 Request(응답)으로 통신을 한다. 여기서 통신을 할 때,.. developefeel.tistory.com 다른 도메인에서 데이터 가져오기 [Back-end] CORS (Cross Origin Resource Sharing) 백엔드 서버 - 파이썬 Flask 포트번호 8082에 라우팅 경로 test에서 데이터(success=True)를 response하도록 해뒀다. 옆의 200은 Not Found:404처럼 서버 상태를 나타내는 번호..

[Back-end] CORS (Cross Origin Resource Sharing) [내부링크]

백엔드 서버 - 파이썬 Flask 포트번호 8082에 라우팅 경로 test에서 데이터(success=True)를 response하도록 해뒀다. 옆의 200은 Not Found:404처럼 서버 상태를 나타내는 번호이며 200은 정상연결을 의미한다. 해당 8082포트의 /test페이지에는 전달한 데이터가 나타난다. 프론트엔드 서버 - html, Vue html문서에 Vue를 CDN방식으로 받아두고 app에 리터럴 형식으로 method를 정의해 8082포트의 test경로의 사이트를 axios를 이용해 get방식으로 데이터를 받아오도록 한다. 해당 app의 이름으로 된 div태그에 버튼을 넣고 클릭 시 받아온 데이터를 response데이터로써 콘솔창에 찍도록 해준다. Same Origin Policy 위처럼 백..

[JS] 자바스크립트에서 오버로딩, 오버라이딩, constructor, arguments [내부링크]

상속의 개념에 이어서 메소드 오버로딩과 오버라이딩에 대해 알아본다. [JS] 자바스크립트에서 상속 상속 여기 하나의 클래스가 있고 속성1개와 메서드1개를 가지고 있다. 또 하나의 클래스를 정의하는데 아무 내용도 없는 클래스로 만든다. 빈 클래스 MyChild에 new를 사용해 아까 만든 클래스 MyPare developefeel.tistory.com Constructor 상속 관계에 있는 두 클래스의 인스턴스를 각각 생성해본다. 생성한 인스턴스들의 constructor가 각각 어떤 클래스를 가르키는지 확인해본다. 첫번째 조건문은 실행되는 것으로 보아 par인스턴스의 constructor에는 부모클래스의 인스턴스가 담겨있는 것을 볼 수 있다. 하지만 자식인스턴스인 ch에는 Child가 담겨있지 않아서 두번..

[JS] 자바스크립트에서 상속 [내부링크]

상속 여기 하나의 클래스가 있고 속성1개와 메서드1개를 가지고 있다. 또 하나의 클래스를 정의하는데 아무 내용도 없는 클래스로 만든다. 빈 클래스 MyChild에 new를 사용해 아까 만든 클래스 MyParent를 상속받는다. 빈 클래스를 child의 이름으로 인스턴스 생성을 한 뒤 부모클래스의 메소드인 method1을 호출해본다. 빈 클래스의 인스턴스인 child가 상속이 되어서 부모클래스의 메소드를 호출할 수 있다. 상속 - 확장 CellPhone을 부모 클래스로 생성하고 DmbCellPhone클래스에 상속을 시킨다. 이번엔 자식클래스를 빈 클래스로 만들지 말고 프로퍼티와 메서드를 함께 생성한다. 상속받은 자식클래스의 인스턴스를 생성하고 부모클래스의 메서드와 자신의 메서드를 모두 호출해본다. 상속은 ..

[리눅스마스터] 리마1급 실기 기출, 준비 팁, 리눅스 환경설정 [내부링크]

[리눅스마스터] 리마 1급 필기 준비하기 (문제집, 기출) 2022년 기준으로 작성됨 시험 접수 KAIT 자격검정 리눅스마스터 졸업인증 경동대학교(정보보안학과), 공주대학교(컴퓨터공학부), 광안대학교(정보보호학과), 국제대학교(컴퓨터정보통신과), 동덕 developefeel.tistory.com 필기를 붙었다면 실기준비 전에 미리 환경설정을 준비해놓는다. 리눅스 환경 준비하기 가상머신 (VM 다운로드) https://www.virtualbox.org/wiki/Downloads 위 링크에서 자신의 OS에 맞는 가상머신을 다운받아준다. (그냥 다 yes눌러도 별 상관없음) OS 이미지 (ISO 다운로드) 리마 사이트의 자격안내 페이지에 하단을 보면 해당회차의 리눅스 버전이 나온다. 구글링 해서 해당 버전의 ..

[리눅스마스터] 리마 1급 필기 준비하기 (문제집, 기출) [내부링크]

2022년 기준으로 작성됨 시험 접수 KAIT 자격검정 리눅스마스터 졸업인증 경동대학교(정보보안학과), 공주대학교(컴퓨터공학부), 광안대학교(정보보호학과), 국제대학교(컴퓨터정보통신과), 동덕여자대학교(컴퓨터공학과), 동서울대학교(네트 www.ihd.or.kr 위 사이트에서 접수하며 시험 장소는 널널한 편 문제집 '노란책'으로 유명한 문제집을 사용했다. 다른 사람한태는 잘 맞을 지 모르겠지만 문제 위주로 자격증을 준비하는 나에겐 맞지 않는 부분이 많았다. 이론적 내용이 많고 사실상 시험에 나오는 모든 내용을 다 담고있다. 책에 담긴 문제 자체는 그렇게 많지 않지만 적중률도 높고 확실하게 다 이해했을 시 시험통과 자체는 문제없다. 리눅스를 조금 알거나 문제중심으로 공부하는 사람은 문제집없이 준비해도 무방함..

[정보처리기사] 정처기 실기 빠르게 합격하기 (팁, 시험준비, 기출, 문제집) [내부링크]

[정보처리기사] 정처기 필기 빠르게 합격하기 (팁, 시험준비, 기출, 문제집) 2022년 기준으로 작성됬습니다. 시험 접수 Q-net 자격의 모든것 www.q-net.or.kr 큐넷에서 해당 시험기간에 맞춰 접수한다. 정각에 바로 들어가지 않는이상 자리가 모자란 현상은 당연 10시, 14시에 새로 developefeel.tistory.com 시험 접수 및 문제집 접수와 문제집의 내용은 위의 필기시험 글에 포함된다. 필기는 시나공, 실기는 수제비로 준비했으며 교재는 둘 중 뭐든 상관없다고 생각 공부 방법 - 문제집 필기의 공부 방법과 공통되는 부분이 많다. 내용을 이해하지 않고 역시나 문제쪽으로 빠르게 넘어갈 것 단답형은 정해진 키워드를 외우는 쪽으로 공부 (단답형 문제는 문제와 답의 '단어'에 집중) 서..

[정보처리기사] 정처기 필기 빠르게 합격하기 (팁, 시험준비, 기출, 문제집) [내부링크]

2022년 기준으로 작성됬습니다. 시험 접수 Q-net 자격의 모든것 www.q-net.or.kr 큐넷에서 해당 시험기간에 맞춰 접수한다. 정각에 바로 들어가지 않는이상 자리가 모자란 현상은 당연 10시, 14시에 새로운 자리가 갱신 마지막 날까지도 널널하게 갱신되는 경우가 많으니 그나마 가까운 곳에 신청해두고 자리가 나면 장소변경가능 문제집 - 시나공 vs 수제비 필기는 시나공으로, 실기는 수제비로 준비해봤지만 둘다 딱히 큰 차이없이 준비하기 좋은책이었다. 준비할 시간도 모자란데 책 고를시간을 낭비하느니 아무거나 마음에 드는 것으로 미리 준비해둔다. 공부방법 - 문제집 전공자 기준으로 8일 걸렸다. (전공자는 프로그래밍 언어등 가장 비중높은 부분에서 시간절약가능) 시험 접수 후 책사고 정보모으고 방법고..

[JS] 클래스 프로퍼티와 메서드 [내부링크]

프로퍼티와 메서드 위와 같이 클래스에는 this로 가르키는 클래스내에 속하는 속성과 메소드가 존재할 수 있다. 클래스 내의 멤버들에 접근하기 위해서는 인스턴스를 생성해서 해당 메소드나 변수에 접근할 수 있다. 클래스 프로퍼티와 메서드 일반 프로퍼티와 다르게 클래스 프로퍼티는 클래스 명에 바로 프로퍼티를 추가하고 인스턴스 생성없이 접근할 수 있다. 인스턴스 생성이 없어도 해당 내용이 출력된다. 메소드 또한 마찬가지로 생성하고 리터럴 형태의 info를 리턴했을 때, info중 desc속성에 접근해본다. 이처럼 인스턴스 생성없이도 호출되는 것을 클래스프로퍼티와 메소드라 한다. Math.max등의 사용법을 생각해보면 인스턴스 생성없이 사용했던 것을 생각해보면 된다.

[JS] 함수형 설계와 클래스형 설계 [내부링크]

함수의 이름과 기능이 동일한 함수와 클래스를 설계하여 비교한다. 정의 클래스의 this는 자기자신을 가르키며 this.변수 는 자신의 클래스에 속하는 속성을 정의한다. 함수의 속성은 지역변수를 정의하여 사용한다. 또한 클래스의 첫 글자는 대문자로 적는다. 메소드 클래스의 메소드는 프로토타입 형태로 외부로 빼더라도 해당 메소드에 속하며 공간을 공유할 수 있다. 클래스 자기자신을 가르키는 this를 통해 클래스 내의 속성에 접근할 수 있다. 반면 함수는 자신에게 속하는 함수를 외부에 정의할 수 없어 함수 안에 중첩함수를 정의한다. 함수 내에 있으니 당연히 속성과 공간을 공유한다. 내부 접근 클래스 내의 모든것은 인스턴스 생성을 통해 접근이 가능하다. 함수내의 중첩함수는 함수 내에서 init()을 마지막에 호..

[jinja2] html에서 파이썬 코드 사용하기 [내부링크]

아래 글에 이어서 합니다. [Back-end] Html에서 get방식으로 파라미터 값 넘기기 URL로 파라미터를 넘기는 방식에 대해 선행이 필요하다면 아래로 [Back-end] get방식으로 파라미터 값 넘기기 선행으로 REST방식으로 데이터 전송하는 방법에 대해 [Back-end] flask로 Rest API 구현 REST (REpr developefeel.tistory.com 변수 사용 html에서 변수는 {{ }}중괄호 두개를 겹쳐서 사용한다. 라우팅경로에서 user변수를 받아 name1에 전달하고 name2에는 문자열을 넣어준다. 해당 변수자리에 전달된 값들이 나타난다. for문 사용 변수는 마찬가지로 중괄호 두개를 겹쳐서 사용하고 for문은 {% 를 사용해 정의하며 endfor를 사용해 반복문이..

[JS] this 가 가르키는 것 [내부링크]

this는 자기 자신을 가르킨다. 클래스에서 this 함수형 클래스에 this로 속성을 하나 생성하고 프로토타입으로 메소드를 정의하여 this.property1을 띄우도록 한다. 여기서 this는 자기자신, 즉 클래스인 MyClass를 가르키게 된다. MyClass의 인스턴스인 my의 method를 호출했을 때 어떤 값이 나오는지 확인한다. 클래스 내에서의 this는 클래스 자신을 가르킴을 알 수 있다. 함수에서 this 이번엔 함수에서 this를 사용해본다. 전역변수 data에 10을 넣고 중첩함수 inner에 this를 사용해 data를 20으로 생성하고 전역변수 data에 30을 넣어준다. 1번의 data는 30이 나왔다. 함수내에서 같은 이름의 변수를 불렀고 지역변수 var data가 존재하므로 ..

[JS] 프로토타입 클래스 [내부링크]

프로토타입 클래스의 정의는 함수형 클래스의 정의와 유사하다. [JS] 함수형 클래스 함수 선언 함수 선언을 위해서 function을 명시하고 사용할 함수 이름과 ()를 넣어주며 {}안에 내용을 넣는다. 여기서 this란 {}의 내용이 적힌 곳, 즉 Person의 주소가 들어가며 this.name은 Person의 name변 developefeel.tistory.com 프로토타입 클래스 정의 위의 글에서 사용했던 함수형 클래스의 정의다. 프로토타입의 정의는 여기서 메소드만 바깥으로 빼서 클래스의 이름과 메소드의 이름사이에 prototype을 적어준다. 인스턴스 두개를 생성하고 출력메소드를 사용해본다. 결과 또한 함수형 클래스와 같게 나온다. 함수형과 프로토타입의 차이점 함수형의 메소드는 인스턴스가 생성될 때..

[JS] 함수형 클래스 [내부링크]

함수 선언 함수 선언을 위해서 function을 명시하고 사용할 함수 이름과 ()를 넣어주며 {}안에 내용을 넣는다. 여기서 this란 {}의 내용이 적힌 곳, 즉 Person의 주소가 들어가며 this.name은 Person의 name변수를 뜻한다. 인스턴스 생성과 접근 선언된 함수형 클래스를 사용하기 위해서 인스턴스 이름인 person을 부르고싶은대로 적고 new를 사용하여 Person클래스를 가져온다. 앞으로 person이라는 이름의 인스턴스는 Person함수의 기능을 사용할 수 있다. 생성된 인스턴스의 age를 15로 변경했다. 여기서 기존의 Person의 age값인 10은 변하지 않는다. 인스턴스는 Person의 초기값을 가져올 뿐 인스턴스가 생성됬다면 해당 인스턴스는 Person을 복사해 온다..

[JS] 리터럴 클래스 [내부링크]

리터럴 변수는 값을 저장하고 이용한다. 그런데 이 변수는 여러개의 값 또한 저장할 수 있다. 중괄호로 묶고 각 속성을 , 로 구분지어 명시하면 개개의 속성들은 해당 개체가 가지는 멤버가 된다. 변수 뿐 아니라 함수까지 멤버로 넣을 수 있다. 이렇게 중괄호로 여러 속성과 함수를 묶어서 , 로 구분지어서 사용하는 방식을 리터럴이라고 한다. 리터럴 클래스 멤버 접근 리터럴 클래스 내의 멤버들에 접근하기 위해서는 해당 클래스의 이름과 닷 ( . ) 연산자로 클래스 내의 멤버를 적어서 접근한다. user클래스 내의 showInfo 멤버메소드를 호출했다. user의 age속성에 접근하기 위해서 user.age로 적어준다. 리터럴의 데이터포장 만약 한 사람의 인적사항을 일반 함수로 출력하고 싶다면 속성만큼의 인자를 ..

[자바스크립트] 이미지에 애니메이션 이징 효과 주기, easing [내부링크]

일반 애니메이션 - show( ), hide( ) show와 hide 메소드는 기본 제공되는 애니메이션 효과로 각각 대상을 나타내고 숨기는 기능을 한다. 6초동안 애니메이션이 일어나고 완료되었을 시 알림창이 나타나도록 했다. hide를 실행했을 시 사진이 6초간 감춰지며 알림창이 나타난다. show를 실행했을 시 사진이 다시 나타나며 알림창이 나타난다. jQuery easing - 애니메이션에 효과주기 jQuery easing의 재밌는 효과 - codeJS jQuery의 easing를 사용하면 시각적으로 한층 더 풍부한 재미를 제공할 수 있습니다. www.codejs.co.kr jQuery에서 애니메이션에 다양한 효과를 주고자 easing기능을 제공한다. jQuery Easing Plugin Please..

[자바스크립트] 스크롤 위치 구하기, 스크롤 맨 위로, 위치 이동 [내부링크]

스크롤 위치 구하기 - pageOffset 현재 창에 scroll이벤트가 일어났을 때 페이지의 전역위치를 구해주어 스크롤의 위치를 나타낸다. 스크롤의 위치에 따라 페이지의 전역위치를 나타낸다. 스크롤 위치 이동 - scrollTo( ) top버튼에 클릭 이벤트가 일어났을 시 scrollTo를 이용해 스크롤의 위치를 0으로 바꿔준다. 스크롤 위치 이동 - scrollBy( ) 정해진 위치로 이동시키는 scrollTo와 달리 By는 일정 거리만큼 이동시킨다. 스크롤의 위치가 100씩 이동한다.

[자바스크립트] 새 창 만들기, 창 크기 변경, 윈도우 창 이동, 위치출력 [내부링크]

윈도우 창 생성 버튼에 이벤트를 주어 open을 사용해 크기 500의 새 창을 만들도록 한다. 윈도우 창 크기 변경 - resizeTo( ) 이번에도 다른 버튼에 이벤트를 주어 만약 newWindow가 있다면 resizeTo를 통해 500이었던 크기를 300으로 변경하도록 한다. resizeTo함수는 새 창이 존재할 때만 사용가능하다. 윈도우 위치 이동 - moveTo( ) 생성된 newWindow창을 moveTo를 이용해 200의 위치로 이동시킨다. 창이 어느 위치에 있던 이동버튼을 누르면 200,200의 위치로 이동한다. 윈도우 위치 이동 - moveBy( ) 생성된 newWindow창을 moveBy를 사용해 200만큼 이동시킨다. moveBy는 해당 윈도우를 일정 위치만큼 이동하는 것을 볼 수 있다..

[자바스크립트] js로 웹 문서, 스크린, 브라우저의 크기 구하기 [내부링크]

의미 없는 p태그로 가득 체워진 웹 문서에서 크기를 구해보도록 한다. 웹 문서의 크기 - $(document).width( ), height( ) jQuery를 사용해 document를 불러온 뒤 width와 height를 사용한다. width는 화면의 크기에 따라 조절되는 반면 height는 문서 내의 내용에 따라 고정된 값을 보인다. 스크린의 크기 - screen.width, height 스크린이란 모니터의 화면의 크기를 뜻하고 이를 구하기 위해서 screen에 width와 height를 줬다. 제어판의 해상도의 값을 확인해보니 제대로 구해졌다. 유효 스크린의 크기 - availWidth, availHeight 유효 스크린이란 화면에서 작업표시줄을 제외한 크기를 뜻한다. 작업 표시줄의 40px만큼을 ..

[자바스크립트] 스크롤 위치, scrollLeft, scrollTop [내부링크]

스크롤의 위치를 확인할 버튼과 자동으로 스크롤을 이동할 버튼, 300,200의 크기의 컨테이너에 1000크기의 사진을 담았다. 스크롤의 위치 구하기 scrollLeft와 Top 메소드를 사용해 container노드의 현재 스크롤 위치를 리턴한다. 스크롤의 마지막 위치는 717, 321으로 나온다. 이는 스크롤 바의 앞 위치로 스크롤 바의 자체크기, 테두리두께, 컨테이너의 크기 등에 따라 나타난다. ex) (스크롤left위치 717) + (스크롤 창의 크기 300) - (스크롤바와 테두리의 크기 17) 스크롤 이동 시키기 다른 위치함수들과 마찬가지로 left나 top에 값을 넣어줌으로 위치를 이동시킬 수 있다. setInterval함수를 이용해 0.1초마다 오른쪽으로 5씩 이동시키며 스크롤의 위치가 끝에 ..

[React] 바인딩 구현 [내부링크]

input태그에 입력된 text를 상단의 태그에 그대로 나타내는 방식으로 바인딩을 구현해본다. 틀을 만들어준다. 제목 태그와 input내용이 바인딩 되어 들어갈 div태그를 만들어주고 구분선을 그어준다. input태그는 text타입에 입력된 내용을 this.state.msg를 통해 상태 중 메세지를 값으로 전달하고 handleChange라는 함수를 생성해 바인딩을 구현한다. 변경된 내용을 상태에 전달해줄 handleChange 메소드를 구현한다. setState를 이용해 상태값을 변경해주는데, state중 msg를 이벤트 객체가 타게팅된 곳 (input태그)의 값으로 변경해준다. 기본 상태값은 메세지입니다.라는 text로 설정해주고 handleChange에서 State에 접근해주기 위해 bind를 사용해..

[React] 이벤트 호출 방법 세가지 [내부링크]

무명 함수 호출 첫 번째 방법은 무명함수를 호출하는 방법이다. 버튼의 온클릭 이벤트에 function을 주고 내용을 적어넣는다. 첫 번째 버튼 클릭 시 무명함수인 function()의 내용대로 콘솔에 내용이 찍힌다. ES6 ES6의 문법을 이용해 함수를 호출한다. 간단한 내용일 때 사용하기 좋다. 두 번째 버튼 클릭시 => 옆의 내용이 실행된다. 함수 직접 호출 함수를 직접 정의해서 넣는 방법이다. 세 번째 버튼 클릭시 정의한 함수가 호출되어 사용된다. 이벤트 내용이 길 때 사용하기 좋다.

[자바스크립트] width, height, padding, margin, border를 포함한 크기 구하기 [내부링크]

하나의 태그에는 여러가지 영역이 있다. 어디서부터 어디까지를 크기의 범위로 가정하는지 각 영역을 포함담당하는 함수를 통해 알아본다. 기본 크기 - width( ), height( ) 제일 안쪽의 크기는 가로에 width, 세로에 height를 사용해서 구한다. 태그의 내용물의 크기만을 구해준다. 기본크기 + padding - innerWidth( ), innerHeight( ) padding을 포함한 크기는 inner를 붙여준다. 기본크기 + padding + border - outerWidth( ), outerHeight( ) 테두리의 크기까지 합한 크기는 outer를 붙여서 표현한다. 기본크기 + padding + border + margin - outerWidth(true), outerHeight(..

[React] 컴포넌트 라우팅에 추가 [내부링크]

라우팅 경로에 컴포넌트를 추가하기 위해 dotnet환경에서 프로젝트를 진행한다. ClientApp내의 Component폴더에 새 컴포넌트를 생성한다. 다음으로 App.js 파일로 이동해서 Route경로를 하나 새로 생성해준다. path의 경로로 라우트 될때 해당 컴포넌트를 호출하는 것이다. Contact를 엔터치면 import가 자동으로 된다. 아마 VSC에서 제공하는 기능인듯 하다. 라우팅을 추가했다면 이번엔 메뉴바를 하나 추가해준다. Component폴더의 NavMenu.js파일로 가서 NavItem을 하나 더 추가해준다. 메뉴를 하나 추가했다면 페이지에서 확인해본다. 마지막 메뉴로 하나가 추가된 것을 볼 수 있다. 해당 메뉴를 클릭하자 /contact경로로 라우팅 되고 아까 생성한 컴포넌트가 호출되..

[React] CSS 적용하기 [내부링크]

리액트의 파일구조와 컴포넌트를 생성하고 import하는 것을 알아봤다. 다음으로 스타일을 적용하는 것을 알아본다. [React] CRA 파일구조, 컴포넌트 import시키기 지금까지 dotnet환경에서 리액트를 사용하며 사용법을 알아봤다. [React] 컬렉션 형태의 데이터 출력 컴포넌트에 상태값을 주고 변경하는 것에 이어 다수의 데이터에 접근하는 것을 알아본다. [React developefeel.tistory.com 내부 스타일 적용 제목 부분을 담당하는 컴포넌트인 Title로 이동한다. Title컴포넌트의 제목을 출력하는 h1태그에 style로 내부 스타일을 준다. 제목 색이 스타일 대로 변경됬다. 내부 스타일을 따로 정의해서 적용하는 것도 가능하다. 외부 스타일 적용 외부 스타일 적용을 위해 he..

[React] CRA 파일구조, 컴포넌트 import시키기 [내부링크]

지금까지 dotnet환경에서 리액트를 사용하며 사용법을 알아봤다. [React] 컬렉션 형태의 데이터 출력 컴포넌트에 상태값을 주고 변경하는 것에 이어 다수의 데이터에 접근하는 것을 알아본다. [React] 컴포넌트에 상태값 주고 변경하기 컴포넌트의 조건문에 따라 내용을 다르게 표현하는 것에 대해 developefeel.tistory.com 여기선 CRA를 통해 프로젝트를 생성하고 react환경에서 진행한다. [React] 리액트 시작하기 Node.js 설치 Node.js Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 사이트에서 LTS를 클릭해 다운받아준다. 다운이 끝나면 cmd창에서 버전확인을 해..

[React] 컬렉션 형태의 데이터 출력 [내부링크]

컴포넌트에 상태값을 주고 변경하는 것에 이어 다수의 데이터에 접근하는 것을 알아본다. [React] 컴포넌트에 상태값 주고 변경하기 컴포넌트의 조건문에 따라 내용을 다르게 표현하는 것에 대해 알아봤었다, [React] 컴포넌트에 조건문 주기, if, 3항 연산 컴포넌트에 분해할당으로 속성을 전달하는 것을 알아보았다. [React] 분해 developefeel.tistory.com Booklist컴포넌트에는 두 개의 데이터를 불러오기 위해 BookCard컴포넌트가 두번 호출되었다. 실제로는 JSON형태의 수 많은 데이터를 다뤄야 하기 떄문에 일일히 컴포넌트와 속성을 적어주기는 힘들다. 컬렉션 데이터 네 개의 속성이 포함된 각 데이터를 세개를 나열하고 books에 저장한다. 다음으로 Booklist컴포넌트에..

[React] 컴포넌트에 상태값 주고 변경하기 [내부링크]

컴포넌트의 조건문에 따라 내용을 다르게 표현하는 것에 대해 알아봤었다, [React] 컴포넌트에 조건문 주기, if, 3항 연산 컴포넌트에 분해할당으로 속성을 전달하는 것을 알아보았다. [React] 분해할당, Destructuring Assignment 태그를 컴포넌트화 해서 분리하고 props를 통해 속성을 전달받는 것을 알아봤었다. [React] 컴포넌 developefeel.tistory.com 이번엔 컴포넌트에 상태를 주고 버튼을 클릭해 상태를 변경해본다. 상태값 주기 클래스형 컴포넌트 Booklist에 state를 통해 테마를 white로 줬다. 2개 이상의 상태를 줄 수도 있다. 클래스형은 render함수를 통해 반환을 해야한다. 현재 컴포넌트(this)의 state의 theme값이 whit..

[React] 컴포넌트에 조건문 주기, if, 3항 연산 [내부링크]

컴포넌트에 분해할당으로 속성을 전달하는 것을 알아보았다. [React] 분해할당, Destructuring Assignment 태그를 컴포넌트화 해서 분리하고 props를 통해 속성을 전달받는 것을 알아봤었다. [React] 컴포넌트 화, props를 이용해 컴포넌트에서 속성 전달 JSX표현식과 함수형 컴포넌트를 제작하여 표현하는 developefeel.tistory.com 이번엔 조건문을 통해 컴포넌트의 출력을 다르게 해보도록 한다. if AppOther컴포넌트 내의 Booklist컴포넌트에 속성값으로 ASC를 주었다. Booklist의 sortOrder속성이 ASC일 경우엔 위의 경우로 ASC값이 아닐 경우에는 아래의 경우로 출력되도록 해봤다. sortOrder값에 따라 BookCard의 위치가 다르..

[React] 분해할당, Destructuring Assignment [내부링크]

태그를 컴포넌트화 해서 분리하고 props를 통해 속성을 전달받는 것을 알아봤었다. [React] 컴포넌트 화, props를 이용해 컴포넌트에서 속성 전달 JSX표현식과 함수형 컴포넌트를 제작하여 표현하는 것을 알아봤다. [React] JSX 표현식, 함수형 컴포넌트 react에서 element를 쉽게 만들기 위해 JSX를 사용하고 Bootstrap을 이용해 스타일을 주는 것까지 developefeel.tistory.com 이번엔 전달받은 속성들을 다른 방식으로 전달하는 것을 알아본다. 분해 할당 props를 넘기는데 사용했던 컴포넌트에선 속성에 접근할 때 props.속성 식으로 전달했다. 분해 할당이란 props대신 어떤 속성을 받을지 명시해두고 좀 더 간단하게 전달받는 것이다. BookCard 컴포넌..

[자바스크립트] 노드의 위치 , position, offset의 차이점 [내부링크]

div태그를 세 개 중첩했다. 구조상으로는 parent1 > parent2 > child 이다. 부모 좌표 노드 - offsetParent( ) child 노드에 offsetParent를 적용하여 $parent변수에 저장하고 반환되는 노드의 id 속성을 콘솔창에 찍어봤다. child노드의 바로 상위는 parent2일텐데 콘솔에는 parent1으로 찍혔다. 이유는 css의 position때문이다. 따로 position을 정해주지 않아서 parent2노드는 위치계층도에서 제외된다. 노드의 지역 위치 구하기 - position( ) 5개의 물고기 이미지를 두고 해당 사진을 클릭하면 위치를 위에 표시해본다. fish클래스의 노드를 클릭했을 때 pos변수에 클릭된 노드의 position을 저장하고 str문자열을 ..

[React] 컴포넌트 화, props를 이용해 컴포넌트에서 속성 전달 [내부링크]

JSX표현식과 함수형 컴포넌트를 제작하여 표현하는 것을 알아봤다. [React] JSX 표현식, 함수형 컴포넌트 react에서 element를 쉽게 만들기 위해 JSX를 사용하고 Bootstrap을 이용해 스타일을 주는 것까지 해봤다. [React] JSX 이용해 중첩노드 생성, Bootstrap으로 스타일 주기 리액트에서 중첩노드를 만들고 간단 developefeel.tistory.com JSX를 통해 확실히 편하게 태그를 생성했지만 여전히 깔끔하지 못하다. 컴포넌트를 이용해 코드를 정리해보도록 한다. 컴포넌트 화 컴포넌트 부위를 모두 다른 컴포넌트로 옮겨준다. 내용을 옮겨줄 컴포넌트다. 이전에 JSX에서는 형제노드없이 꼭 하나의 태그로만 묶어줘야 한다고 했다. 따라서 이름 없는 태그로 형식상 묶어준다..

[React] JSX 표현식, 함수형 컴포넌트, 클래스형 컴포넌트 [내부링크]

react에서 element를 쉽게 만들기 위해 JSX를 사용하고 Bootstrap을 이용해 스타일을 주는 것까지 해봤다. [React] JSX 이용해 중첩노드 생성, Bootstrap으로 스타일 주기 리액트에서 중첩노드를 만들고 간단한 스타일을 줘봤다. [React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 html문서를 react에서 열고 태그 요소를 하나 만들어서 확인해봤다. [React] 순 developefeel.tistory.com 이번엔 JSX의 표현식을 이용해 원하는 태그에 내용을 나타내는 것을 해본다. JSX 표현식 원하는 문구를 입력하여 저장한다. 2개 이상의 속성을 묶어서 넣을 수도 있다. 저장한 표현식을 원하는 태그 안에 입력해준다. 각 컬럼에 저장된 내용대로 출력된..

[React] JSX 이용해 중첩노드 생성, Bootstrap으로 스타일 주기 [내부링크]

리액트에서 중첩노드를 만들고 간단한 스타일을 줘봤다. [React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 html문서를 react에서 열고 태그 요소를 하나 만들어서 확인해봤다. [React] 순수 html파일에서 react 사용하기 dotnet을 통해 react프로젝트를 열어봤다면 이번엔 react에서 html문서를 어떻게 여는지 알아 developefeel.tistory.com 보다시피 div 태그안에 태그를 중첩해 세개를 생성했는데, 태그 하나를 생성할 때마다 메소드를 호출하는 것은 번거로운 일이다. JSX - html을 JS로 변환 Babel · The compiler for next generation JavaScript The compiler for next generati..

[React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 [내부링크]

html문서를 react에서 열고 태그 요소를 하나 만들어서 확인해봤다. [React] 순수 html파일에서 react 사용하기 dotnet을 통해 react프로젝트를 열어봤다면 이번엔 react에서 html문서를 어떻게 여는지 알아본다. [React] 리액트 닷넷으로 시작하기 .NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for b.. developefeel.tistory.com 태그에 스타일 주기 createElement의 null로 남아있는 두 번째 인자가 스타일이 들어가는 자리다. 스타일 값을 저장해 두 번째 인자에 넣어줬다. 글자색이 파란색으로 바뀌는 것을 확인할 수 있다. 스타일을 두번째 자리에 직접 넣어 줄 수도 있다. 갈..

[React] 순수 html파일에서 react 사용하기 [내부링크]

dotnet을 통해 react프로젝트를 열어봤다면 이번엔 react에서 html문서를 어떻게 여는지 알아본다. [React] 리액트 닷넷으로 시작하기 .NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for building and running .NET apps on Linux, macOS, and Windows. Runtimes, SDKs, and developer packs for .NET Framework, .NET, and.. developefeel.tistory.com dotnet프로젝트에서 html문서 열기 dotnet run을 통해 react프로젝트를 실행해주니 7204포트를 타고 44416포트에서 react앱이 열리는 것을 ..

[Back-end] Html에서 get방식으로 파라미터 값 넘기기 [내부링크]

URL로 파라미터를 넘기는 방식에 대해 선행이 필요하다면 아래로 [Back-end] get방식으로 파라미터 값 넘기기 선행으로 REST방식으로 데이터 전송하는 방법에 대해 [Back-end] flask로 Rest API 구현 REST (REpresentational State Transfer) Rest API는 REST기반 서비스 API 이다. HTTP는 서버/클라이언트 모델로써 서버와.. developefeel.tistory.com HTML에서 form으로 파라미터 값 받기 앞서 글에서 get방식을 통해 파라미터값을 넘기는 방식을 알았다. 하지만 사람들이 사이트에 접속할 때 주소창에 파라미터를 직접 입력해서 이동하진 않는단 것도 알것이다. 실제 웹페이지에서 get방식으로 파라미터 값을 어떻게 받고 전달..

[자바스크립트] mouseover & mouseout, mouseenter & mouseleave, 마우스 이벤트의 종류와 차이점 [내부링크]

div 두개의 영역이 외부 내부로 있고 각각에 마우스 이벤트를 달아 차이점을 비교해본다. mouseover & out 마우스 이벤트 중 over와 out은 부모와 자식의 노드를 따로 분리된 영역으로 판단한다. 이벤트 정보가 담길 info에 이벤트 횟수와 해당 이벤트가 일어난 타겟의 위치를 표시한다. 바깥의 parent영역만 들어갔다 나왔을 시 over와 out이 출력된다. 이번엔 parent영역에서 child영역까지 들어갔다가 나왔다. 3번에서 parent 에 들어갔고 여기서 child로 들어갈 때 parent out이 뜨고 child over이 뜬다. 이말인 즉 child로 들어갈 때는 parent에서 나가는 것으로 판단되는 것이며 child는 parent하위 개체임에도 불구하고 독립된 영역으로 취급받..

[자바스크립트] 사용자 정의 이벤트, jQuery.Event [내부링크]

추가 버튼을 누르면 li태그가 추가되며 해당 내용이 output div태그에 기록되도록 해본다. li태그 추가 add 버튼을 클릭하면 newItem 객체를 생성하고 ul태그에 추가하는 이벤트를 생성했다. 사용자 정의 이벤트 정의 addItem이라는 이벤트를 생성하여 event변수에 담았다. 또한 위에서 생성한 $newItem의 정보들을 event에 담고 해당 객체를 트리거로 넘겨줬다. 트리거로 전달된 addItem이벤트는 ul태그에 prepend로 event내용을 출력한다. 추가 버튼을 누르면 li태그가 추가되면서 트리거를 통해 사용자가 정의한 addItem이벤트 또한 함께 실행된다. 사용자 정의 이벤트 정의2 data변수에 newItem의 속성을 담아 배열로 만들어 트리거로 전달할 수도 있다. 같은 효..

[자바스크립트] trigger, 다른 태그의 이벤트 발생시키기 [내부링크]

버튼 두개가 있고 버튼 B에 클릭했을 시 알림창을 띄우는 이벤트를 등록했다. 역시나 B를 클릭하면 버튼B의 알림창이 뜨는 이벤트가 실행된다. 이번엔 버튼 A에 이벤트를 걸어주는데 그 내용은 버튼B를 호출해 클릭에 트리거를 걸어준다. 그러자 버튼 A를 클릭했는데 버튼 B의 이벤트가 실행되는 것을 볼 수 있다. 버튼 A의 이벤트 자체가 버튼 B의 클릭 이벤트를 실행시키는 것이다. 이런 식으로 버튼 자체에 다른 태그의 이벤트를 걸어둔다면 해당 이벤트를 대신 실행시킬 수 있다. 까만 화면 속 숫자를 클릭해도, 버튼을 클릭해도 이벤트가 실행된다.

[자바스크립트] 버블링을 이용해 이벤트 등록하기 [내부링크]

우선 이벤트의 단계중 버블링의 개념에 대해 알아야한다. 이벤트의 마지막 단계인 버블링은 타게팅 이후 document로 돌아가는 과정인데 버블링을 활용해서 이벤트를 등록하는 방법을 알아본다. stopPropagation( ) - 버블링 중단 div안에 버튼 두개를 만들고 세 개의 노드에 클릭 시 콘솔을 띄워주고 bubbles값이 true가 나오는지 확인해 버블링이 발생하는지 알아보는 이벤트를 등록한다. 버블링 처리 버튼을 누르면 btn1과 panel에서 반응이 온다. 이는 btn1에서 클릭이벤트의 타게팅이 이뤄지고 다시 돌아가는 버블과정에서 panel을 지나치기 때문이다. 이번엔 버블링 중지 버튼을 눌렀고 #btn2에 등록된 이벤트내용중 stopPropagation메소드로 인해 버블링이 중단되어 panel..

[자바스크립트] 이벤트 한번만 실행, 기본 이벤트 해제, one, cancelable, preventDefault [내부링크]

one( ) - 한번만 실행되는 이벤트 등록 on()대신 one()을 사용하면 단 한번만 실행되는 이벤트를 등록할 수 있다. 버튼을 클릭하면 알림창이 뜨고 그 뒤로는 버튼을 눌러도 아무 효과가 나타나지 않는다. preventDefault( ) - 기본 이벤트 효과를 해제 a태그는 보통 링크를 걸기 위해 자주 사용되는 태그다. 이처럼 몇몇 태그는 기본적인 효과를 가지고 있는데 이러한 효과를 해제하고 다른 이벤트로 대체할 수 있다. a태그를 클릭했을 때 알림창을 뜨게 하고 콘솔에 cancelable을 이용해 해당 이벤트객체에 기본행동이 존재하는지 확인한다. 없다면 false가 뜬다. 만약 기본행동이 있다면 preventDefault메소드를 이용해 기본행동을 지워줄 수가 있다. 원래라면 a태그를 클릭하면 해당..

[Back-end] get방식으로 파라미터 값 넘기기 [내부링크]

선행으로 REST방식으로 데이터 전송하는 방법에 대해 [Back-end] flask로 Rest API 구현 REST (REpresentational State Transfer) Rest API는 REST기반 서비스 API 이다. HTTP는 서버/클라이언트 모델로써 서버와 컴퓨터가 서로 Response(요청)과 Request(응답)으로 통신을 한다. 여기서 통신을 할 때,.. developefeel.tistory.com url주소로 데이터를 전달하는 방법에 대해 참고한다. [Back-end] 라우팅 기법으로 데이터 전달, 주소창의 문자 화면으로 출력 선행으로 flask로 서버를 열어주는 내용이 필요하면 아래 링크로 [Back-end] Flask로 웹 서버 만들기, flask 시작하기 우선 플라스크를 사용하..

[자바스크립트] 이벤트 등록 해제, on, off, click, mouseenter, mouseleave [내부링크]

각 태그에 이벤트를 등록하고 해제해본다. 이벤트 등록 - on( ) 이벤트는 on()메소드를 이용해 등록한다. 모든 이벤트는 on을 통해 등록되고 어떤 태그에 어떤 이벤트를 등록할지 적어준다. btn아이디를 가진 버튼 태그에 click이벤트를 걸어주고 이벤트 내용을 function안에 적어준다. 버튼을 클릭했을 때 일반 이벤트 알림창이 나타난다. 두 번째처럼 단축형태로 이벤트 등록이 가능하다. on대신 이벤트 형식을 사용하는 방식인데 결국 on메소드를 통해 실행된다. 버튼을 클릭하면 두 알림창 모두 나타난다. 이벤트 다중등록 두 가지 이상의 이벤트를 한번에 걸어주는 것도 가능하다. div태그에 마우스가 들어오는 mouseenter와 마우스가 나가는 mouseleave이벤트 두개를 걸어주었다. div태그를..

[자바스크립트] 이벤트의 흐름, 캡처, 타겟, 버블 단계 알아보기, eventPhase, stopPropagation [내부링크]

DOM이란, HTML의 DOM 트리구조 DOM (Document Object Model) 말 그대로 문서 객체 모델인 DOM은 문서를 나타내기 위해 객체로 모델링한 것이다. html문서를 작성하다보면 , 등등의 태그를 볼 수 있는데, 이러한 태그들을 노드라 하고 해 developefeel.tistory.com 이벤트의 흐름을 알기 위해서 웹 문서의 DOM형식에 대해 먼저 알면 좋다. 웹 문서의 DOM트리구조에 따라 제일 상위의 document영억이 맨 바깥에 위치하고 그 아래로 body영역이 위치하며 안쪽으로 div영역들이 구성된 것을 확인 할 수 있다. eventPhase( ) - 이벤트의 진행 단계 이벤트는 총 세 단계로 이뤄지 있으며 eventPhase는 그 단계를 알려준다. eventPhase =..

[자바스크립트] 태그 속성 가져오기, 속성 변경하기, attr, data [내부링크]

태그를 정의할 때 태그에 여러 속성을 줄 수 있는데 jQuery로 이 속성을 가져와서 다루는 방법을 알아본다. attr( ) - 단일 속성 가져오기 콘솔창에 content클래스의 div태그안의 img태그의 src속성과 a태그의 href속성을 각각 가져온다. img태그의 이미지소스와 a태그의 링크소스가 각각 콘솔에 찍힌다. data( ) - 'data-' 로 시작하는 모든 속성값 가져오기 data는 태그의 속성 중 data-로 시작하는 모든 속성을 가져온다. 그 속성들 중 특정 속성인 data-name을 가져오려면 data-뒤의 이름을 지정해준다. attr로는 data-를 같이 붙여줘서 가져와야한다. data-name속성은 data('name') 아니면 attr(data-name)으로 가져올 수 있다. d..

[파이썬] input, split, map, type, 파이썬으로 코딩테스트 입력 값 받기 [내부링크]

코테를 풀면 처음에 입력값이 주어지는 경우가 대부분이다. 주어지는 입력값을 잘 가공하는 것도 문제를 푸는 과정 중 중요한 부분이다. 위 처럼 데이터가 주어졌을 때 파이썬으로 받는 기본적인 방법에 대해서 알아본다. input( ) - 입력 함수 input은 한 줄로 입력되는 모든 값을 해당 변수에 저장한다. 문장으로 입력되는 값도 a 변수에 입력되어 저장된다. 한 줄로 입력받는걸로 보아 입력값의 변수형은 문자열로 짐작이 가능하다. type( ) - 변수형 출력 함수 type 메소드는 변수형을 리턴한다. input으로 받는 모든 한줄의 입력값은 string형태로 받는다. 변수형( ) - 형변환 함수 ex) int( ), float( ), str( ) 변수형( ) 메소드는 파이썬의 형변환 함수로 위에선 int..

[자바스크립트] 클래스 추가 제거하기, addClass, removeClass, toggleClass [내부링크]

간단한 css가 적용된 li태그 다섯개가 있을 때 각 li태그에 클래스를 적용, 제거해본다. 클래스 추가 - addClass( ) menu 클래스를 가진 li태그를 클릭했을 때 클릭된 li 태그에 addClass를 통해 select클래스를 추가해준다. 알기 쉽도록 select클래스가 있는 li태그에 css를 적용시켜뒀다. 1,2번째 li 태그를 클릭하여 select클래스를 추가한다. select클래스의 css가 적용된 것을 확인한다. 한번에 여러개의 클래스도 추가가 가능하다. 1,3,5번째 li태그에 두 개의 클래스가 적용된 것을 확인할 수 있다. 클래스 제거 - removeClass( ) 클릭한 li태그가 select클래스를 가지고 있지 않다면 추가를 하고 select클래스를 가지고 있다면 select..

[자바스크립트] js, jQuery로 스타일,css 속성값 변경 [내부링크]

외부 css가 적용된 div와 li태그의 속성값을 변경해본다. js 로 스타일 속성 변경 js는 한번에 하나씩의 속성값만이 변경가능하다. 테두리와 여백값이 변경되었다. jQuery로 스타일 속성 변경 jQuery에서는 여러 속성값을 묶어서 한번에 변경가능하다. 글자크기와 테두리, 여백이 변경이 되었다. 버튼이 클릭되었을 때 fontSize에 1을 더하도록 해본다. 클릭 시마다 글씨의 크기가 증가되고 콘솔창에 fontsize값이 int값으로 나오도록 한다. 버튼을 열번 클릭하여 li태그 중 select클래스를 가진 li태그의 글자크기를 +10해주었다.

[자바스크립트] css스타일 속성 표기법, 단위 생략 [내부링크]

위와 같은 스타일이 적용된 div태그가 있다. js의 속성표기법 js에서는 속성을 표기할 때 카멜표기법을 사용한다. 카멜 표기법은 낙타의 등 처럼 두 단어가 이어져 있을 때 두 번째 이상의 단어부터는 첫 글자를 대문자로 표기한다. 원래의 26px 대신 12px이 적용됬다. jQuery의 속성표기법 jQuery에서는 카멜표기와 css표기 둘다 먹힌다. 각각의 표기 모두 글자크기를 변경한다. jQuery의 속성값 단위 생략 js에서는 속성값에 필히 단위를 적어줘야한다. 단위가 없으면 변경값이 적용되지 않는다. jQuery에서는 단위가 생략된다면 기본 단위가 디폴트로 적용된다. 글자크기로 8픽셀이 적용됬다.

[자바스크립트] js 스타일 접근, jQuery css 접근, 다중 접근, getComputedStyle, style, css [내부링크]

div태그에 내부 스타일로 파란색을, 외부 스타일로 테두리, 여백, 글자 크기 등을 주었다. js의 내부 스타일 접근 - .style.속성 js에서 style을 주면 해당 속성값을 가져올 수 있는데 div에 직접 주었던 인라인 속성인 색상만 가져올 수 있다. color색상만 나타날 뿐 나머지 속성은 빈칸으로 나온다. js의 외부 스타일 접근 - getComputedStyle js에서는 외부 스타일에 접근하기 위해선 해당 메소드를 통해 접근한다. style로 나오지 않던 border속성에 접근 가능하다. getComputerStyle은 외부 스타일 뿐 아니라 내부에도 물론 접근가능하다. jQuery의 스타일 접근 - css jQuery는 내부, 외부 따질 것 없이 css로 모두 접근 가능하다. 모든 속성값..

[자바스크립트] html, text 메소드의 차이, 노드 내용 변경하기 [내부링크]

버튼태그와 6개의 li태그가 있다. html( ) 과 text( )의 차이점 버튼을 클릭했을 시 menu아이디를 가진 ul태그에 각 메소드를 적용했을 시 리턴값을 콘솔에 나타내도록 한다. html 메소드의 경우 ul태그안에 존재하는 내용을 태그까지 합하여 출력한다. 여기서 리턴값은 DOM형태가 아닌 문자열임을 유의한다. text 메소드의 경우 ul태그안에 존재하는 내용 중 텍스트노드의 내용만을 출력한다. html( )을 이용해 노드 내용 변경하기 li태그를 클릭할 시 클릭된 해당 li태그를 item에 지정한다. 지정된 li태그에 html을 적용해 특정 링크가 걸린 a태그로 변경하고 인덱스 값을 이용해 메뉴의 내용을 적어준다. 메뉴4를 클릭하자 링크가 걸린 태그로 변경된다. 하지만 this가 li태그를 가..

[자바스크립트] 노드 삭제하기, remove, html, even, odd [내부링크]

6개의 li태그 중 하나 혹은 여러개의 노드를 삭제해본다. 클릭한 노드 삭제하기 menu 아이디를 가진 ul태그 아래의 li태그를 클릭했을 때 해당 노드를 삭제한다. 메뉴3을 클릭하면 해당 노드가 삭제된다. 모든 노드 삭제하기 - remove( ) 삭제 버튼을 누르면 ul태그의 모든 자식태그를 삭제한다. ul태그 안의 모든 li태그가 삭제된다. children으로 자식노드에 접근하는 대신 li태그를 직접 지정하여 삭제한다. li태그 수만큼 메소드를 호출하여 일일히 삭제해준다. 짝수 인덱스 노드 모두 삭제하기 - even li태그에 :even선택자를 주어 짝수 인덱스의 노드를 모두 삭제한다. 0,2,4인덱스 노드가 삭제된다. 홀수 인덱스 노드 모두 삭제하기 - odd li태그에 :odd선택자를 주어 홀수 ..

[자바스크립트] 노드 위치 변경하기, append, insertAfter, insertBefore [내부링크]

6개의 li태그가 있고 li태그를 클릭했을 때 원하는 위치로 이동하도록 해본다. 그 전에 이동에 사용되는 함수는 노드의 생성에 사용될 수 있다는 걸 알아둔다. [자바스크립트] 노드 생성하기, prepend, append, insertBefore, insertAfter, before, after, prependTo, appendTo 위와 같은 리스트형태에 버튼이나 li태그를 클릭하면 노드를 추가해본다. jQuery없이 JS로 노드 생성 메뉴가 6까지 생성되어 있으니 cnt변수의 초깃값을 6으로 지정하고 버튼이 클릭될 때마다 cnt값 developefeel.tistory.com append( ) - 마지막 위치로 이동 클릭된 li태그(this)를 menu아이디를 가진 태그의 제일 마지막 위치에 추가한다. 메..

[자바스크립트] 노드 생성하기, prepend, append, insertBefore, insertAfter, before, after, prependTo, appendTo [내부링크]

위와 같은 리스트형태에 버튼이나 li태그를 클릭하면 노드를 추가해본다. jQuery없이 JS로 노드 생성 메뉴가 6까지 생성되어 있으니 cnt변수의 초깃값을 6으로 지정하고 버튼이 클릭될 때마다 cnt값을 1씩 증가시킨다. createElement를 통해 li태그를 생성해주는 li createTextNode를 통해 li태그안에 텍스트 내용을 생성해주는 liText getElementById를 통해 menu아이디를 가진 ul태그를 지정해 노드를 생성해줄 위치를 지정 만들어진 텍스트 노드를 li태그안에 appendChild를 통해 자식 노드로 붙여준다. li태그를 menu, ul태그에 붙여주면서 노드를 생성한다. 버튼 클릭 시 ul태그안에 li태그가 새로 생성된다. prepend( ) - 제일 앞 위치에 노..

[React] 리액트 닷넷으로 시작하기 [내부링크]

.NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for building and running .NET apps on Linux, macOS, and Windows. Runtimes, SDKs, and developer packs for .NET Framework, .NET, and ASP.NET. dotnet.microsoft.com 위 링크에서 위를 클릭해 닷넷SDK를 설치해준다. 설치가 되었는지, 버전을 확인해 본다. dotnet new -l 를 통해 생성가능한 프로젝트의 리스트를 본다. 11번째 라인에 ASP.NET 코어를 통해 리액트를 만들어준다는 것을 확인한다. 프론트엔드단은 React.js를 백엔드단은 ASP.NET을 사용하여..

[자바스크립트] js태그 안에서 원하는 태그 찾기, filter, find [내부링크]

ul태그안에 li태그가 다섯 개 있다. filter( ) - 선택된 태그 중 원하는 걸 필터링 li태그를 지정하고 filter와 find를 적용시켜봤다. filter만 적용되고 find는 적용이 되지 않는다. filter는 선택된 태그 중에서 찾으므로 li태그 중 filter클래스를 가진 세 번째 태그가 선택됬다. li태그의 하위태그에는 find가 없을뿐더러 하위태그자체가 존재하지 않기에 find는 작동하지 않는다. find( ) - 선택된 태그에 속하는 모든 요소에서 찾음 이번엔 li태그가 아닌 ul태그를 지정하여 똑같이 filter와 find를 실행한다. 이번엔 filter가 먹히지 않고 find의 푸른배경 효과만 나타났다. ul태그중에는 filter클래스를 가진 태그가 없기 때문에 filter는 작..

[자바스크립트] DOM구조를 통한 태그 접근, Children, Contents, parent, prev, next, first, last [내부링크]

여러 태그가 존재하는 html문서에서 원하는 태그에 접근한다. children( ) - 선택한 태그의 자식 태그 제일 상위의 div태그인 samplePage에 children를 사용해 자식태그에 파란 테두리를 만들어준다. 또한 콘솔창에 자식이 몇인지도 출력해준다. 바로 아래 div태그 세개가 선택이 되고 갯수는 3이 나오는 것을 확인한다. contents( ) - 선택한 태그의 자식 태그 & 텍스트 태그 content는 children과 같이 자식 태그를 지정하며, 텍스트 태그까지 포함해서 찾아준다. 물론 태그속의 내용인 텍스트 노드에는 테두리가 생기지 않지만 콘솔의 내용은 텍스트 태그까지 추가된 7개가 나온다. aqua색의 테두리가 세개의 div영역에 생기고 콘솔엔 7이 찍히는 것을 확인한다. 매개변수..

[자바스크립트] js 지정태그 모두 접근하기, each [내부링크]

세 개의 버튼을 누르면 li태그에 각각 접근하는 작업을 해본다. each( )는 지정된 태그를 반복하여 접근하는 함수다. index 값 출력 태그 선택자로 li태그를 선택한 후 each메소드에 index를 받도록 한다. 그리고 index를 출력하도록 해줬다. 첫 번째 버튼을 누르면 each로 접근한 li태그들의 인덱스를 각각 구해준다. index, item값 출력 이번엔 index뿐 아니라 item까지 매개변수로 받아온 뒤 item의 textcontent를 받아 출력한다. 두 번째 버튼을 누르면 인덱스 값에 li태그안의 text값까지 같이 출력한다. css 변경하기 li태그들을 변수에 저장한 뒤 1번과 마찬가지로 index를 매개변수로 주었다. each는 반복문 처럼 태그들에 접근하여 각 index가 커..

[자바스크립트] n번째 태그요소 접근, eq, get [내부링크]

5개의 div요소를 각각 접근하는 방법을 알아본다. jQuery를 이용해 변수에 div태그를 배열로 저장한다. eq( ) - jQuery divList에는 div태그들이 배열로 저장되어있고 eq를 사용하면 해당 인덱스의 요소를 호출할 수 있다. 이때 eq는 jQuery객체를 리턴해주므로 jQuery문법을 사용해 다룬다. 인덱스 1의 div의 배경색이 파란색으로 변경됬다. get( ) - js element get메소드는 eq와 다르게 js의 순수 엘리먼트 요소 형식으로 넘어온다. 사용법은 비슷하지만 js의 문법을 통해 다뤄야한다. 인덱스 0의 div의 배경색이 하늘색으로 변경됬다. arr[ ] 메소드 없이 배열 자체로 취급하여 다룰 수 있다. 이때도 js의 element형식으로 넘어온다. 인덱스 4의 d..

[자바스크립트] js로 노드요소 생성 및 제거하기, 게시판 만들기 [내부링크]

실제 노드요소 접근은 jQuery등 다른 Lib을 사용해 접근하는 것이 편하다. 여기선 js기본문법을 통해서만 요소 접근 삭제 생성을 한다. 참가자의 이름을 적고 신청버튼을 누르면 명단에 이름이 작성이 되고, 옆에 x표시를 누르면 이름이 삭제가 되는 페이지를 작성하고자 한다. html코드는 위와 같다. 이름입력을 받는 input태그와 누르면 newRegister함수가 호출되도록 하는 버튼태그를 만들고 nameList라는 이름의 참가자 명단을 출력하는 div태그를 만들었다. 신청버튼 클릭시 이름입력 - createElement, querySelector, createTextNode, appendChild 버튼 클릭시 호출되는 newRegister함수다. newP는 createElement로 p태그를 만들어..

[React] 리액트 시작하기 [내부링크]

Node.js 설치 Node.js Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 사이트에서 LTS를 클릭해 다운받아준다. 다운이 끝나면 cmd창에서 버전확인을 해주고 리액트앱을 설치해준다. react-app 설치 설치시 tar버전경고가 떴고 확인해보니 동작하는덴 이상이 없다고 했다. 버전확인을 해 설치가 완료됨을 확인했다. react-app 테스트 테스트 할 경로에 cmd를 실행시켜본다. 해당 경로에 원하는 이름으로 프로젝트를 생성하면 몇분이 지나 프로젝트가 생성된다. 폴더에 프로젝트가 생성된 것을 확인가능하다. 해당 폴더에 들어가서 npm start로 실행시켜본다. 3000번 포트로 정상적으로 실..

DOM이란, HTML의 DOM 트리구조 [내부링크]

DOM (Document Object Model) 말 그대로 문서 객체 모델인 DOM은 문서를 나타내기 위해 객체로 모델링한 것이다. html문서를 작성하다보면 , 등등의 태그를 볼 수 있는데, 이러한 태그들을 노드라 하고 해당 노드들을 트리구조로 조합해서 Document문서를 이루는 방식으로 문서를 나타내는 것이다. 표준화된 틀로 문서를 만들도록 하고 그 내용을 체워나가는 방식으로 이해한다. DOM 트리구조 위와 같이 html문서가 있을 때, 웹페이지에 보여지는 것은 태그의 구조에 의해 조립되어 만들어진 문서다. 만들어진 웹문서는 보이기엔 일반 글이지만 각자 속하는 노드가 있고 트리구조로 이뤄져 있다. DOM 뷰어를 이용해 해당 코드를 넣어본다면 DOM의 트리구조를 확인할 수 있다. 상위엔 HTML태그..

[자바스크립트] js 배열 정렬, 오름차순 정렬, 내림차순 정렬, sort [내부링크]

문자형 배열 오름차순 정렬 string형 배열을 생성하고 join을 통해 문자열로 변환하여 출력한다. sort를 사용하여 문자열을 오름차순 정렬을 해주고 출력하여 원문이랑 비교한다. sort의 기본옵션은 오름차순이다. 문자형 배열 내림차순 정렬 sort는 기본으로 오름차순정렬이기 때문에 익명함수를 통해 내림차순으로 정렬하도록 해준다. 내림차순은 큰 것부터 작은 것 순으로 정렬하는 것이므로 배열의 앞 원소(a), 배열의 뒷 원소(b) 가 있을 때 뒷 원소가 작다면 -1,(FALSE)를 리턴하여 그대로 두고 뒷 원소가 크다면 1,(TRUE)를 리턴하여 정렬을 실행해 앞으로 보낸다. 숫자형 배열 오름차순 정렬 sort는 문자열을 위한 함수이므로 숫자형 배열에선 그냥 써선 문제가 생긴다. 숫자를 문자형으로 보기..

[자바스크립트] js 배열원소 추가, 삭제, push, pop, splish, shift, unshift [내부링크]

push - 배열의 끝에 추가 배열을 생성한 뒤 push를 통해 menu5를 추가했다. 그 후 menu배열을 join을 통해 문자열로 변환해 준 뒤 출력했다. push는 해당 원소를 배열의 맨 뒤에 추가한다. unshift - 배열의 앞에 추가 앞서 생성된 배열에 unshift를 통해 menu0을 추가했다. unshift는 해당 원소를 배열의 맨 앞에 추가한다. splish - 입력된 인덱스에 추가하며 삭제 splice를 통해 인덱스 2번자리에 해당 문자를 추가하며 그 뒤로 0개의 문자를 삭제했다. splice는 (해당 인덱스에서, 입력받은 수만큼의 원소를 삭제하고, 해당 원소를 삽입) 하는 문법을 가진다. 만약 두번째 인자를 3으로 준다면 2의 위치부터 3개의 원소가 삭제되며 해당 문자가 삽입될 것이다..

[자바스크립트] js 배열 출력, 배열과 문자열 서로변경, join, split [내부링크]

행렬 원소별 출력 크기가 5인 행렬을 생성했다. 반복문을 통해 인덱스를 배열의 크기만큼 반복증가하며 각 인덱스에 해당하는 배열원소를 출력한다. 인덱스 i가 증가할때마다 그에 해당하는 배열원소가 출력된다. join - 배열을 문자열로 변환 배열.join(구분자)를 지정해 str변수에 저장한 후 출력했다. join은 배열의 원소를 입력받은 구분자로 나누어 문자열로 변환한다. split - 문자열을 배열로 변환 문자열을 배열로 변환해 html문서에 메뉴들을 추가해보도록 한다. 메뉴태그를 지정하고 menuData라는 문자열을 생성해준다. split은 괄호안의 구분자를 기준으로 원소들을 배열에 저장한다. 이후 해당 배열에 li태그를 입혀 menu태그에 추가해줬다.

[자바스크립트] Date로 날짜, 연월일, 시간 불러오기 [내부링크]

date변수에 Date라이브러리를 불러왔다. 연월일, 요일, 시분초를 의미하는 변수를 각각 생성하고 그에 맞는 메소드를 불러온다. month와 day는 숫자값으로 리턴된다. 따라서 요일은 배열을 생성한 뒤 인덱스로 불러오도록 한다. 각 변수를 표시할 양식만 만들어 준 뒤, setInterval을 통해 0.001초마다 갱신하도록 한다. 전자시계처럼 시간을 표시해주는 웹페이지가 만들어 졌다.

[리눅스마스터] 리마1급 실기 대비용 리눅스 명령어 정리, 리눅스 네트워크 표기법 [내부링크]

다 외울필요없이 기출 위주로 준비하면서 참고하는 용도 네트워크 표기법 (괄호안의 설정파일은 한번만 작성했음) 127.132.1 sendmail(access) 127.132.1. apache(httpd.conf), samba(smb.conf). tcp_wrapper(hosts.allow/deny) 127.132.1.0 xinetd 127.132.1/24 dns(named.conf) 127.132.1.0/24 apache, nfs(exports), squid(squid.conf), iptables, dns, xinetd 127.132.1.0/255.255.255.0 apache, samba, tcp_wrapper, nfs, squid, iptables useradd 더보기 -p : 사용자 암호 추가 지정 -..

[자바스크립트] js 문자열 대체, 공백제거, replace, trim [내부링크]

replace replace함수는 인자를 두개 받는데, (바꿀 문자, 대체할 문자)이다. 위 넷째줄 코드는 str변수에 저장된 문자열의 x문자를 replaceStr변수에 저장된 문자로 교체하여 resultStr에 저장한다. x문자가 입력된 문자로 대체되어 출력된다. trim trim은 입력받은 문자열 앞뒤에 위치한 공백을 제거해준다. 원래 문자열과 결과를 콘솔창에 띄워본다. 앞 뒤의 공백이 제거된 것을 확인할 수 있다.

[자바스크립트] js문자열 길이, 해당인덱스문자출력, 해당문자위치출력, 문자열 잘라내기, string문자열편집함수, length, charAt, indexOf, slice, substr [내부링크]

length - 문자열의 길이 문자열을 입력받고 해당 변수에 .length를 붙이면 문자열의 길이가 리턴된다. tok이란 문자열을 입력하니 길이값으로는 3이 리턴됬다. charAt - 문자열 중 해당하는 인덱스의 문자 출력 인터벌 함수를 통해 인덱스를 계속 증가시켜가면서 문자를 하나씩 출력하는 함수이다. 각 문자는 ch변수에 저장되고 매 호출시마다 index값을 증가시켜주며 문자열의 길이를 넘어설 경우, 즉 모든 문자를 출력시 인터벌함수를 종료시켜준다. 각 인덱스 값에 해당하는 문자가 하나씩 출력된다. indexOf - 해당하는 문자의 위치 출력 str문자열 변수에 indexOf와 매개변수로 찾고싶은 문자를 넣으면 loc변수에 인덱스값, 즉 위치값이 저장된다. tst문자는 해당 문자열의 인덱스 4부터 존..

[자바스크립트] js최소, 최대, 올림, 버림 (Math.min, max, ceil, floor) [내부링크]

min, max, ceil, floor는 코어 라이브러리 Math의 하위함수이므로 사용시 Math.을 붙여준다. Min & Max 두 수를 입력하고 그 중 작은 수와 큰 수를 알림창에 나타낸다. min( )는 입력받은 숫자나 배열 중 가장 작은 값을 리턴하고, max( )는 입력받은 숫자나 배열 중 가장 큰 값을 리턴한다. Ceil & Floor 112 / 10은 11.2이다. 소수점아래를 올리거나 버려본다. ceil은 소수점 아래를 올리고, floor는 소수점 아래를 버린다.

[자바스크립트] js함수주기호출, setInterval, clearInterval, setTimeout [내부링크]

setInterval contents div태그를 가져오고 카운트변수를 생성해줬다. setInterval함수에 익명함수로 카운트를 증가시켜주며 div태그안에 증가된 값을 표시해준다. 뒤의 ,1000은 함수호출의 간격이다. 1000이 1초 100이 0.1초다. 일반함수로는 이렇게 생성이 가능하다. 매 초마다 박스안의 숫자가 증가한다. setInterval함수는 함수를 지정된 간격으로 계속해서 호출한다. clearInterval 위의 함수에서 timerID변수를 생성하고 setInterval을 지정해준다. stop버튼을 생성하고 버튼 클릭시 알림창과 clearInterval 이벤트를 넣어준다. 아까와 같이 숫자가 증가하다 버튼을 누르면 알림창과 함께 숫자가 멈추게 된다. clearInterval은 setIn..

[자바스크립트] 클로저 함수 [내부링크]

클로저함수는 함수가 끝나도 지역변수가 사라지지않고 계속 존재하는 것을 말한다. add함수의 cnt변수는 증가연산이 있지만 매번 호출때마다 0으로 초기화되기 때문에 계속해서 1값이 출력된다. cnt변수 값의 증가를 저장해서 사용하기 위해서 클로저함수를 사용한다. add함수를 createCounter함수로 감싸준다. 그리고 createCounter함수를 counter변수에 저장한다면 return값은 add()내부함수이기 때문에 counter변수에는 add함수의 리턴값인 cnt가 리턴되게 된다. 여기서 cnt변수는 외부함수인 createCounter함수의 지역변수이기 때문에 cnt변수는 초기화되지 않는데 이걸 클로져 현상이라 한다. 함수의 지역변수를 계속해서 사용하기 위해서 클로져 현상을 이용했다. 함수를 외..

[자바스크립트] js 콜백함수 [내부링크]

콜백함수란 함수를 매개변수로 받는 방식이다. 더하기 함수를 만들어봤다. 일반 함수라면 num1,2두 변수만 필요하겠지만 여기선 callback이란 매개변수를 하나 더 지정해줬다. 그리고 callback에 호출될 함수에 연산의 결과를 매개변수로 전달한다. 여기 세개의 다른 문장을 출력하는 출력함수들을 만들었다. 그리고 처음 생성했던 더하기 함수에 세번째 인자값으로 세개의 출력함수를 각각 넣었다. 더하기 앞의 문장이 각가 다른것을 확인할 수 있다. 콜백을 통해 연산함수 add_calc하나만 만들어 두고 출력함수들만 생성해준다면 여러 표현방식을 생성할 수 있기에 콜백함수는 코드의 수정과 유지보수등에 유리한 방식이다.

[자바스크립트] 익명함수, 일반함수, 객체방식함수, 익명함수의 확장 [내부링크]

익명함수 - function() 출력버튼을 누르면 문자열이 쌓이는 함수를 정의한다. html문서가 열리면 함수가 실행되도록 했다. $container변수에는 container아이디를 가진 div태그를 지정한다. 그리고 btnPrint아이디를 가진 버튼태그를 클릭할 시 함수가 실행되도록 했다. 버튼 클릭 시마다 container태그가 저장된 변수에 문자열을 append로 추가해준다. #btnPrint태그가 저장된 버튼을 click할 때마다 append가 실행되도록 하는 변수다. 이렇게 함수 이름이 없이 function으로만 정의되는 함수를 익명함수라 한다. 일반함수 - 함수이름() 일반함수는 익명함수와 다르게 함수 이름을 지정해준다. 위의 익명함수와 비슷하게 내용을 정의해준다. 정의된 hi일반함수를 버튼클..

[Back-end] flask로 Rest API 구현 [내부링크]

REST (REpresentational State Transfer) Rest API는 REST기반 서비스 API 이다. HTTP는 서버/클라이언트 모델로써 서버와 컴퓨터가 서로 Response(요청)과 Request(응답)으로 통신을 한다. 여기서 통신을 할 때, 방식 중의 하나가 REST이다. 자원의 표현에 의한 상태 전달 HTTP URI를 통해 자원을 명시, HTTP Method를 통해 자원에 대한 CRUD Operation 적용 REST는 HTTP가 통신을 할때 사용하는 방식 중 하나고, 페이지 주소랑 뭘 할 것인지를 적어서 그 페이지에 어떤 행동을 할 것인지를 담는 방식이라고 보면 된다. ex) http://페이지주소.com

[Back-end] 라우팅 기법으로 데이터 전달, 주소창의 문자 화면으로 출력 [내부링크]

선행으로 flask로 서버를 열어주는 내용이 필요하면 아래 링크로 [Back-end] Flask로 웹 서버 만들기, flask 시작하기 우선 플라스크를 사용하기 위해 'pip install flask'를 써서 다운받아준다. 다운 후에는 모듈 임포트를 한다. 여기서는 spyder를 사용했다. from flask import Flask는 'flask' 라는 도구모음가방에서 'Flask'를.. developefeel.tistory.com 서버를 열어준다. 127.0.0.1:8080/ 메인서버에서 main함수는 '메인화면'이라는 문자를 리턴하도록 한다. 리턴문이 그대로 출력되었다. 이번엔 route를 /으로 지정했다. 그리고 함수에는 그 변수를 인자로 받고 리턴하도록 해줬다. url뒤에 붙은 문자가 그대로 출력..

[자바스크립트] 전역변수, 지역변수 [내부링크]

전역변수 선언 전역변수는 전체에서 쓰이는 변수, 지역변수는 일정 지역에서만 쓰이는 변수 먼저 변수선언을 해준다. 출력을 한다면 name변수는 global이라고 출력된다. 지역변수 선언 이번엔 변수선언 아래에 함수를 하나 만들어주고 함수 안에 var name으로 변수를 또 선언해준 뒤 변수 내에서 출력을 해본다. 같은 name변수지만 일반 출력문과 함수호출로 인한 출력문의 결과가 다르다. 함수 내에서 선언된 변수를 지역변수라 하고 함수 내에서 변수를 호출한다면 전역변수가 아닌 지역변수가 사용된다. 전역변수와 지역변수 document.write(name) >> 전역변수, global func1( ) >> func1의 지역변수, local1 func2( ) >> func2의 지역변수, local2 func3(..

[자바스크립트] jQuery기초, js & jQuery 태그 선택자, 태그색 입히기 [내부링크]

위와 같은 html태그가 있을 때, jQuery와 js를 사용하여 menu2아이디를 가진 ul태그안의 li태그에 색을 입히고 비교해본다. JS 스크립트 태그안에 화면이 로드되었을때 함수가 호출되도록 해준다. menu2변수에 (document,문서)에서 (getElementById,아이디로 엘리먼트를 가져오는 방식)으로 (menu2,menu2라는 아이디를 가진 엘리먼트)를 저장한다. menu2태그에서 TagName을 이용해 li태그를 가져와서 liArrays변수에 저장한다. liArrays변수안에는 menu2아이디를 가지는 ul태그안에 하위 li태그들이 저장된다. for문을 사용하여 liArrays변수를 순회하며 배열로 저장된 각 li태그에 변수[i번째].style.color를 이용해 색상을 blue로 입..

[자바스크립트] jQuery 사용하기 [내부링크]

jQuery는 보편적으로 사용되는 라이브러리다. 두 가지 사용법이 있다. 우선 아래 링크로 들어간다. Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download jquery.com 다운로드 방식 링크로 들어가면 제일 위에 이런 링크가 있다. 위에 것이 압축, 아래가 비..

[자바스크립트] 반복문의 break, continue문 [내부링크]

반복문으로 숫자 출력 반복문으로 1부터 10까지 순회하도록 한다. 그리고 순회한 i 값을 모두 출력하도록 한다. 1부터 10까지가 출력된다. Continue i가 3의 배수일때는 continue문이 실행되도록 했다. 3의 배수가 빠져서 출력된다. continue를 만나면 반복문은 아래의 코드를 모두 건너뛰고 다음 순회를 실행한다. Break i가 3의 배수이면서 9라면 break문이 실행되도록 했다. 하지만 3의 배수일때 continue문을 먼저 만나므로 아래의 코드는 모두 실행되지 못할 것이다. 10이 출력되는 거로 보아 continue문의 아래 break문은 영원히 실행될 가망성이 없어보인다. 따라서 continue문을 아래로 옮겨준다면 건너뛰는것을 확인하기 전에 break문을 먼저 확인하므로 실행이..

[자바스크립트] while문 으로 숫자합 구하기 [내부링크]

num변수에 숫자를 입력받는다. while문을 생성하고 괄호 안의 조건식에 i가 num보다 작거나 같을때까지 반복하도록 작성한다. i는 1부터 계속 증가하면서 sum변수에 더해지고 각 반복시마다 sum과 i변수가 출력된다. 최종 합과 입력된 숫자를 출력한다.

[자바스크립트] for문, 배열크기, 배열, 구구단 출력 [내부링크]

배열생성 기본적인 배열 생성, 대괄호 안에 내용들을 입력하여 생성한다. 콤마로 구분되는 인자를 배열의 각 인자로 인식한다. 배열이름[인자]는 해당 배열의 '인자+1'번째 값을 가져온다. 배열은 0부터 시작이기 때문에 city[2]는 city배열의 3번째 인자를 가져온다. 배열크기 배열이름.length는 배열의 크기를 나타낸다. for문 js의 for문 문법은 c나 java의 문법과 비슷하다. for(시작점;조건식;실행식) {반복문 내용} i변수가 0부터 시작해서 매회 ++증가하고 배열의 길이인 city.length를 넘어서게 된다면 반복문은 종료가 된다. 반복문이 반복될때마다 city[i]값을 출력하여 증가되는 i값이 배열의 각 인자를 반복하여 출력하게 된다. 중첩반복문으로 구구단 출력 첫 번째 반복문으..

[자바스크립트] 입출력, 변수, 함수 [내부링크]

변수 변수는 모든 자료형 공통으로 var를 사용한다. name이라는 변수를 생성해줬다. 입력 prompt를 사용하여 입력을 받고 그 내용을 생성한 name변수에 저장한다. prompt괄호안의 내용은 위와같이 나온다. 출력 입력받은 내용을 출력하기 위해 document.write를 사용하여 태그를 입혀 문장을 출력하도록 했다. '입력받은이름'이라는 내용이 name변수안에 저장이 되고, 출력이 된다. 함수 함수의 생성은 function 함수이름() {함수내용}으로 생성한다. var currentYear로 변수를 만들어주고 birthYear변수는 입력을 받는다. prompt안의 내용 첫번째는 입력창 위의 설명에 들어가고, 두번째는 설명창 안에 들어간다. 나이를 계산하는 함수다. 태어난 년도를 입력창에 입력하면..

[VSC] VScode 한국어, 자동완성, 확장프로그램, 파이썬 사용 [내부링크]

확장 팩 다운받기 왼쪽 제일 아래 아이콘을 클릭해준다. 검색창이 나온다. 한국어 Korea 치면 나온다. RGB색상 RGB코드를 색상으로 보여주는 확장 VS테마 VSC에 여러가지 테마를 적용할 수 있다. 둘다 다운받았다. VS아이콘테마 보기 좋은 아이콘테마가 적용된다. 마찬가지로 둘다 다운받았다. 탭 구분 코드작성시 들여쓰기단위를 색별로 구분해준다. 자동완성 파이썬 ctrl + shift + p 를 통해 인터프린터 선택 파이썬 버전과 경로 확인 후, 사용하는 것 선택 경로는 cmd에서 확인가능

[자바스크립트] switch문 [내부링크]

본인의 직급을 숫자로 입력받게끔 한다. switch문에 rank변수를 받고 1번 케이스일 경우 case '1' : 이라고 작성하고 실행될 코드를 작성해준뒤 break문을 통해 switch문을 종료해준다. 다른 케이스도 모두 작성해주고, 모든 케이스에 속하지 않은 rank변수값이 들어올 경우 알림창을 통해 예외처리해준다. 차장일 경우 2를 입력한다면 해당하는 case의 코드가 실행되고 switch문이 종료된다.

[자바스크립트] if, else if, else, 조건문 [내부링크]

js의 if문 문법은 C나 자바등의 언어와 같다. value변수에 숫자를 입력받는다. prompt는 string으로 입력받으므로 parseInt를 사용해 int형으로 형변환해준다. if if문은 괄호안의 조건이 참일때 { }안의 내용을 실행한다. value변수를 2로 %나눴을때 ==0으로 딱 떨어진다면, 안의 내용인 알림창으로 짝수라는 문자를 띄워준다. else else문은 위의 if문이 거짓으로 실행되지 않는다면 그 이외의 모든 케이스에 모두 실행된다. 짝수가 아닌 25가 입력된다면 else문의 내용인 홀수가 출력되지만, 문자가 입력이 되더라도 홀수라고 출력이 된다. else if 홀수의 조건문 또한 else에서 if로 바꿔줬다. 두 if문이 둘다 실행이 되지 않았다. 이번엔 홀수를 입력하자 제대로 나..

[자바스크립트] 연산자, 알림창, 숫자형변환 [내부링크]

알림창 알림창은 alert를 쓴다. 안의 내용은 알림창에 표시될 내용이다. 연산자 두 변수에 값을 주고 원둘레를 구하는 식을 알림창 안에 넣었다. *로 인해 곱연산이 적용되어 원둘레가 구해져서 알림창에 표시된다. +=를 사용해 문자열을 누적합 시켜본다. list문자열 변수에 4행의 내용이 모두 누적합되어 html화면에 표시된다 형변환 input변수에 숫자를 입력받아본다. 입력창에 14를 입력해줬다. typeof를 사용해 input변수의 변수형이 무엇인지 알림창을 통해 나타낸다. input 변수의 변수형은 string이다. prompt는 무엇을 입력받던 string으로 받는다. string형인 input변수에 Number()를 이용해 int형으로 형변환 한 뒤 numType변수에 저장한다. 형변환한 num..

[Python] 중첩함수, First class Function, Closure, 데코레이터 [내부링크]

중첩함수 위 두줄에만 집중해보자면 out_func라는 함수를 정의하고 그 안에 in_func라는 내부 함수를 정의해줬다. 이게 중첩함수다. 함수안에 정의된 내부함수인 in_func는 전역변수 취급으로 out_func안에서만 작동하고 밖에서 사용하려고 하면 정의되지 않았다고 한다. First-class function 마지막 줄처럼 함수를 변수에 지정할 수 있는것이 First class 함수의 특징이다. 또 다른 특징으로는 함수의 인자에 다른 함수를 넣을 수 있고, 함수의 리턴값에 함수를 넣을 수 있다는 것이 있지만 그냥 함수를 객체로 보면 되고 파이썬의 모든 함수는 first class 함수라는 것을 알아둔다. Closure 클로져 개념은 first class함수와 크게 다른 개념이 아니다. 함수와 그 ..

[Back-end] Flask로 웹 서버 만들기, flask 시작하기 [내부링크]

우선 플라스크를 사용하기 위해 'pip install flask'를 써서 다운받아준다. 다운 후에는 모듈 임포트를 한다. 여기서는 spyder를 사용했다. from flask import Flask는 'flask' 라는 도구모음가방에서 'Flask'를 꺼내서 여기서 사용하겠다는 뜻이다. __name__ 다음으로 넘어가기 전에 '__name__'이라는 변수에 대해서 알아보고 가겠다. __name__변수를 출력해봤더니, __main__이 출력이 되었다. 이번엔 import한 Flask모듈의 __name__변수를 출력해봤더니 Flask가 나왔다. 한번 더 새로운 test모듈을 import한 후 test모듈의 __name__변수를 출력했더니 이번엔 test가 출력되었다. __name__변수에는 '모듈이름'이 저..

[Github] 깃허브 꾸미기, 깃 프로필, 백준 깃허브 연동 [내부링크]

깃을 이력서로 사용하고, 1일1커밋을 하며 매일 개발자극을 받기 위해 프로필을 만들었다. 프로필 생성 우선 프로필을 만들기 위해서는 '본인 이름'으로 된 레파지토리를 만들어주면 된다. 이미 만든 후라 경고문이 뜨지만 저렇게 본인 이름으로 저장소를 만들어주면 저 저장소의 리드미는 프로필로 사용되게 된다. 리드미 작성하듯 똑같이 하면 된다. 조회수 뱃지 조회수 체크해주는 뱃지는 아래 사이트에서 만들 수 있다. HITS Easy way to know how many visitors are viewing your Github, Website, Notion. hits.seeyoufarm.com url에 본인 깃허브 주소를 작성해주고 아래 옵션을 만들면 아래 마크다운에 링크가 만들어지는데 그걸 복사해서 리드미에 붙..

[Github] 깃허브 리드미, README.md 작성법, 깃 디렉토리 생성 [내부링크]

레파지토리에 프로젝트등이 올라가 있다면 아래에 설명문이 있는 것을 볼 수 있다. 오픈소스 저장소를 설명해주는 리드미의 작성은 중요하다. 생성하는 방법은 여러가지인데, 레파지토리 생성시에 'Add a README file'에 체크하거나 레파지토리 생성 후에 'Add a README'버튼을 클릭하거나 상단 Add file의 Create new file을 클릭해서 README.md파일을 생성해주면 된다. 만약 하위 디렉토리를 생성하고 안에 리드미를 만들어주고 싶다면, 파일 생성창에 디렉토리 이름 작성 후, '/'를 쳐주면 위와 같이 새로운 디렉토리 생성과 그 디렉토리에 리드미가 생성된다. 이제 리드미를 생성했으면 작성을 한다. 주로 사용하는 것들 위주로 정리했다. #은 제목이고 수가 많아질 수록 소제목에 가까..

[Github] 깃헙, Git, 깃 사용법, 레파지토리 생성 [내부링크]

포트폴리오 작성을 위해, 추후 개발자로써 개발 환경에 적응하기 위해 Git을 시작했다. Github는 사이트이고 여러 유저가 모여있는 광장이라고 보면 된다. 거기에 계정을 만들어 개인 저장소를 관리하고 협업이 이루어 진다. Git은 그 저장소를 관리하기 위해 사용하는 언어이다. GitHub: Where the world builds software GitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... g..