developefeel의 등록된 링크

키자드에 등록된 총 141개의 포스트를 확인하실 수 있습니다.

Tistory

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는 인자값을 그대로 리..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

JS FP 3편 - 선언형과 명령형(Imperative vs Declarative)

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

원문보기 내부링크
Tistory

JS FP 2편 - 참조 투명성과 멱등성(Idempotence)

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

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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 ..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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 순서로 상속을 받고 있는 것을 볼..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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메서드를..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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( ) ==..

원문보기 내부링크
Tistory

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의 인자에 ..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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(); 일반적인 함수의 호출 방식 우리가 보편적으로 사..

원문보기 내부링크
Tistory

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타입으로 강제..

원문보기 내부링크
Tistory

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 동적타입과 정적..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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이다. 그럼 마법사 스스로에게 ..

원문보기 내부링크
Tistory

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..

원문보기 내부링크
Tistory

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을 ..

원문보기 내부링크
Tistory

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 함수 컨..

원문보기 내부링크
Tistory

JS 동작원리 4편 - 콜 스택

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

원문보기 내부링크
Tistory

JS 동작원리 5편 - 런타임 (Event Loop, Callback Queue, 비동기)

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

원문보기 내부링크
Tistory

JS 동작원리 6편 - 호이스팅

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

원문보기 내부링크
Tistory

JS 동작원리 7편 - V8 Optimization killer (arguments)

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

원문보기 내부링크
Tistory

[React] SetState

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

원문보기 내부링크
Tistory

리액트 쓰는 이유

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

원문보기 내부링크
Tistory

JS 동작원리 1편 - 자바스크립트 엔진, V8

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

원문보기 내부링크
Tistory

JS 동작원리 2편 - 최적화 (인라인 캐싱, 히든 클래스)

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

원문보기 내부링크
Tistory

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형식의 데이터만이 저장된다. 힙과 스택의 자료구조와 변수 참조 형식에 대해 이해하고 있다면 왜 두 다른 저장공간을 사용해서 참조 변수만을 힙에 저장하는지 알 수 있을 것이다. 메모리 누..

원문보기 내부링크
Tistory

[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를 사용해 크기를 표현한다. 방법 ..

원문보기 내부링크
Tistory

[JS] Symbol

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

원문보기 내부링크
Tistory

[JS] 프로토타입

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

원문보기 내부링크
Tistory

[CSS] Selector 종류

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

원문보기 내부링크
Tistory

[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..

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

[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 객체를 생..

원문보기 내부링크
Tistory

[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의 ..

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

[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 위처럼 백..

원문보기 내부링크
Tistory

[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처럼 서버 상태를 나타내는 번호..

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

[JS] 함수형 설계와 클래스형 설계

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

원문보기 내부링크
Tistory

[JS] 클래스 프로퍼티와 메서드

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

[JS] 리터럴 클래스

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

원문보기 내부링크
Tistory

[JS] 함수형 클래스

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

원문보기 내부링크
Tistory

[JS] 프로토타입 클래스

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

원문보기 내부링크
Tistory

[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가 존재하므로 ..

원문보기 내부링크
Tistory

[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를 사용해 반복문이..

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

[자바스크립트] 이미지에 애니메이션 이징 효과 주기, 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..

원문보기 내부링크
Tistory

[React] CSS 적용하기

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

원문보기 내부링크
Tistory

[React] 컴포넌트 라우팅에 추가

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

원문보기 내부링크
Tistory

[자바스크립트] 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(..

원문보기 내부링크
Tistory

[React] 이벤트 호출 방법 세가지

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

원문보기 내부링크
Tistory

[React] 바인딩 구현

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

원문보기 내부링크
Tistory

[React] 분해할당, Destructuring Assignment

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

[React] 컬렉션 형태의 데이터 출력

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

원문보기 내부링크
Tistory

[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창에서 버전확인을 해..

원문보기 내부링크
Tistory

[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로 남아있는 두 번째 인자가 스타일이 들어가는 자리다. 스타일 값을 저장해 두 번째 인자에 넣어줬다. 글자색이 파란색으로 바뀌는 것을 확인할 수 있다. 스타일을 두번째 자리에 직접 넣어 줄 수도 있다. 갈..

원문보기 내부링크
Tistory

[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..

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

[자바스크립트] 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하위 개체임에도 불구하고 독립된 영역으로 취급받..

원문보기 내부링크
Tistory

[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방식으로 파라미터 값을 어떻게 받고 전달..

원문보기 내부링크
Tistory

[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앱이 열리는 것을 ..

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

[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 시작하기 우선 플라스크를 사용하..

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

[자바스크립트] 클래스 추가 제거하기, 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..

원문보기 내부링크
Tistory

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

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

원문보기 내부링크
Tistory

[자바스크립트] 태그 속성 가져오기, 속성 변경하기, 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..

원문보기 내부링크
Tistory

[자바스크립트] 노드 생성하기, 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( ) - 제일 앞 위치에 노..

원문보기 내부링크
Tistory

[자바스크립트] 노드 위치 변경하기, 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아이디를 가진 태그의 제일 마지막 위치에 추가한다. 메..

원문보기 내부링크
1 2