Psychogrammer

🌕 Front 검색 결과

해당 글 60건

프로토타입: 자바스크립트의 핵심 철학 (정리)

자바스크립트는 프로토타입 기반 OOP 언어다. 자바스크립트는 분류 위주 클래스 방식의 언어인 JAVA에서 객체를 바라보는 관점과 완전히 다르다. 특히 문맥(context)을 매우 강조하는 철학적 근거에서 만들어져 렉시컬 스코프에 의한 호이스팅과 실행 문맥에 의한 복잡한 this가 필연적으로 발생할 수밖에 없었다. 비트겐슈타인의 두 가지 이론 1. 의미사용이론: 단어의 의미는 ‘상황과 맥락에 의해서 결정된다'. 단어의 ‘진정한 본래의 의미'란 존재하지 않는다. 2. 가족유사성이론: 프로토타입 언어에서는 정의로 부터 분류하지 않는다. 가장 좋은 보기(prototype, exemplar)로부터 범주화된다. 의미사용이론 어휘적 범위(lexical scope): 의미사용이론에 따르면 단어의 의미는 그 어휘적인, ..

🌕 Front/🌱 Vanilla JS 2022. 1. 11. 23:34

불변값과 가변값을 나누는 기준은 뭘까?

0. 미리보는 결론 불변값과 가변값은 데이터 영역의 메모리를 변경할 수 있는가에 따라 나뉜다. 기본형 데이터 타입의 값을 변경할 때는 데이터 영역의 메모리를 변경하지 않고(불변성) 변수의 값만 재할당하는 반면, 참조형 데이터 타입의 값은 묶음을 가리키는 주솟값을 가지며 이 주소에 있는 값은 데이터 영역에 위치하여 객체 내부 변수들의 주솟값을 참조하고 있기 때문에, 프로퍼티 변경 시 데이터 영역의 메모리를 변경하여 값을 변경하는 것처럼 보인다.(가변성) 1. 변수에 값을 할당하는 과정 - 데이터 영역 메모리의 값을 직접 바꾸지 않는다. - 값을 재할당함으로써 데이터를 변경한다. 1) 바꾸고자 하는 값을 검색한다. 2-1) 값이 존재하면, 그 데이터의 주솟값을 할당한다 2-2) 값이 존재하지 않다면, 새로 ..

🌕 Front/🌱 Vanilla JS 2022. 1. 7. 21:37

모달 컴포넌트 transition 속성 이슈 - Vue 2.X와 Vue3.X

모달에 트랜지션 속성을 넣는 과정에서 Vue 버전차이로 인해 이슈가 발생했다. 1. 을 모달 컴포넌트 안에 선언하고 싶은데? custom header 위의 코드처럼 작성하면 modal의 애니메이션을 담당하는 이 모달 컴포넌트와 분리된다. 가독성이 매우 떨어진다. 2. Vue 2.x 공식문서 예시 hello Vue2.x 공식문서대로 모달안에 트랜지션이 들어간 코드를 설정해도 원하는 결과가 나오지 않았다. 그리고 Vue2.x 에서는 모달 컴포넌트를 쓰는 루트 컴포넌트에서 v-if 속성을 사용하여 트랜지션을 작동시켰다. 하지만 은 자식 요소들에 의해서 작동해야지, 자체가 토글링되면 안된다고 한다. 3. Vue 3.x migration strategy hello 이는 prop을 하위 컴포넌트에 전달하여 트랜지션..

🌕 Front/🥉 Vue.js 2021. 12. 25. 00:17

Vue.js 환경 구축 시 발생했던 오류(executionpolicy)

1. vue cli 설치 후 vue 명령어 접근 불가능 vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\User\user\AppData\Roaming\npm\vue.ps npm install -g @vue/cli vue create my-project vue-cli를 설치 후 vue를 접근할 수 없었다. 이는 PowerShell에서 악의적인 스크립트를 실행을 방지하기 위한 설정때문이다. PowerShell execution policies는 다음과 같이 분류한다. AllSigned: 모든 스크립트와 구성 파일에 신뢰할 수 있는 발행자의 서명이 존재할 경우 실행 가능하다. Bypass: 경고나 안내 없이 어떤 것도 실행 가능하다. Default: Windows 클라이언트는 Restricted,..

🌕 Front/🥉 Vue.js 2021. 12. 22. 21:41

[Markdown] 마크다운 내용 정리

Markdown Tutorial Markdown can be easily shared between computers, mobile phones, and people. It’s quickly becoming the writing standard for academics, scientists, writers, and many more. Websites like GitHub and reddit use Markdown to style their comments. 줄바꿈, 문단 구분 줄바꿈 , 라인의 마지막에 공백 두 칸 Enter 하나를 입력하면 줄바꿈이 되지 않는다. 문단 구분 : Enter 두 번 입력 h1 태그인 #에서도 자동으로 구분선이 생긴다. 구분선: ___, ---, 글꼴 서식 *이탤릭체*, _이..

🌕 Front/📑 Web Theory 2021. 12. 22. 16:21

[Emmet] 마크업 언어를 좀 더 빠르게 쓰자

Emmet 이란? HTML과 CSS의 작성의 시간을 단축 시켜주는 확장 기능 사용법: keyword 입력 후 tab키 입력 VScode Setting: "emmet.triggerExpansionOnTab": true Emmet 사용하기 1) HTML 문서 ! + tab 2) 자식노드 >를 사용하여, 자식 요소를 생성할 수 있다. div>ul>li + tab 3) 형제노드 +를 사용하여, 한 요소와 같은 단계에 위치한 요소를 생성할 수 있다. div>ul+ol+div + tab 4) 반복하기 *를 곱셈 연산자로 여러개의 요소를 생성할 수 있다. div>li*3 입력 후 Tab키 5) 그룹화 ()를 사용하여 괄호안에 있는 코드를 묶어 그룹화를 시켜, 요소간 레벨을 맞춘다. div>(header>ul>li*2..

🌕 Front/📑 Web Theory 2021. 12. 22. 16:17

virtual DOM 파헤치기

Virtual DOM 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생한다. 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만든다는 뜻이다. 이 이부분에서 Virtual DOM 이 빛을 발한다! 만약에 뷰에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해준다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것 이다. Virtual DOM 이 해결 하려고 하는건 무엇이냐? DOM fragment를 관리하는 과정을 수동으로 작업 할 필요 없이, 자동화하고 추상화하는것이다. 그 뿐만 아니라, 만약에 작업을 직접 한다면, 기존 ..

🌕 Front/⚛️ React JS 2021. 12. 9. 20:40

스크립트(script) 추가/제거하는 버튼 만들기

script를 실행하고 싶은 이름을 배열에 적으면, 버튼이 생성되며, 누르면 해당 js파일이 실행된다. index.html에서 script파일을 수동으로 일일이 바꿔야하는 수고를 덜었다. const fileList = ['class', 'promise'] const hasScript = (fileName) => { const currentScripts = document.head.getElementsByTagName('script') for(scriptElem of currentScripts){ if(scriptElem.src.includes(fileName)){ return true } } return false } const removeScript = (fileName) => { const curre..

🌕 Front/🌱 Vanilla JS 2021. 11. 22. 11:55

[Iterable VS Enumerable] 깔끔하게 정리하고 갑시다

한 방 정리 뜻함수뜻타입예시Iterable반복 가능한for (value of arr)순회하면서 값에 접근할 수 있는가 iterator 객체가 있는 데이터 타입Array, map, set,nodeList, StringEnumerable열거 가능한  for ( key in obj)객체의 key에 접근할 수 있는가객체 타입Object   예제로 살펴보자// 배열 예시let arr = ['Junha', 'Rany', 'Leo']arr.hobit = 'Prodo'// 객체 예시let obj = { firstKey: ['Nunu','Garen'], secondKey:['Yumi','Galio','Ryze'], thirdKey:['Minsu','heejung']}obj.fourthKey = 'Junha' ..

🌕 Front/🌱 Vanilla JS 2021. 11. 19. 12:07

arguments 객체: function안에 있는 너, 누가 선언했니?

arguments객체: 실행 컨텍스트 생성 시점에 만들어지다 arguments 객체는 실행 컨텍스트 생성 시점에 함께 만드는 정보 중 하나다. 지정한 매개변수의 개수와 무관하게 호출 시 인자가 모두 arguments 정보에 담긴다. 이러한 특성 덕에 함수의 자율성을 높이는 측면에서 자주 사용한다. arguments는 유사배열 객체이기 때문에 배열처럼 활용하기 위해선 별도의 처리가 필요하다. 또 함수 내부에서 매개변수의 값을 바꾸면 arguments의 값도 바뀌는데, 이는 전달된 인자를 모두 저장한 데이터라는 본래의 개념과 달라지게 된다. 이 때문에 ES6에서는 나머지 파라미터(rest parameter aka ...)가 등장하여 argumetns를 대체하고 있다. 1. 인자 개수와 무관하게, 유연하게 처..

🌕 Front/🌱 Vanilla JS 2021. 11. 18. 23:19

[Web APIs] 브라우저 API

API 개발자가 복잡한 기능을 쉽게 개발할 수 있도록 내부 코드에 신경 쓰지 않아도 복잡한 작업을 쉽게 기능을 가져다 쓸 수 있도록 돕는다. 1) Web APIs (or 브라우저 APIs) Web API는 WHATWG에서 표준을 관리하며 브라우저에서 동작하게끔 만들어진 API이다. 브라우저에 내장되어 있으며 브라우저를 이용해 복잡한 작업들을 쉽게 구현할 수 있도록 도와준다. 비디오 플레이를 시키거나 오디오 소리가 나도록 동작하는 것은 실제로는 백그라운드에서 C++언어와 같은 로우한 언어로 구현이 되어 있지만 사용자가 쉽게 자바스크립트로 사용할 수 있도록 처리가 되어있다. 2) 써드파티 API : 써드파티 API는 브라우저에 내장되어있는 API가 아닌, 외부에서 가져다 쓰는 API입니다. 트위터나 유튜브와..

🌕 Front/📑 Web Theory 2021. 11. 17. 12:05

[addEventListener] 콜백함수에게 인자를 주는 방법

EventTarget.addEventListener() target.addEventListener(type, listener[, options]); 소개 1. EventTarget의 메서드이다. 2. 주어진 이벤트 유형에, EventListener를 구현한 함수를 이벤트 처리기 목록에 추가해 작동한다. 3. EventTarget은 보통 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다. 매개변수 1) type - 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열. ex) 'click' 2) listener - 지정된 타입의 이벤트가 발생했을 때, callback함수가 작동한다. - 콜백함수의 첫 번째 인자는 '이..

🌕 Front/🌱 Vanilla JS 2021. 11. 17. 11:35

React [리렌더링 과정]

들어가기 전 리엑트가 인기있는 이유는 효율적인 렌더링 방식에 있다. ReactDOM은 엘리먼트를 랜더링할 때, 이전 엘리먼트와 비교하여 변경된 부분만 업데이트한다. render() render()함수는 내부 컴포넌트 재귀적 렌더링, 뷰의 정보를 담은 객체로 변환하여 반환을 한다. 랜더링 시작: 내부 컴포넌트를 시작으로 최상위 컴포넌트를 렌더링해간다. 마크업 생성: 최상위 컴포넌트 렌더링 작업이 끝나면, HTML 마크업을 만든다. DOM 주입, 표시: 해당 마크업을 실제 페이지의 DOM요소 안에 주입하여, 화면에 표시한다. 리 렌더링 https://felixgerschau.com/react-rerender-components/ When does React re-render components? React ..

🌕 Front/⚛️ React JS 2021. 9. 8. 12:26

[JSX]: JS와 JSX 확장자는 무엇이 다를까?

JSX: Javascript XML 1) Javascript에서 HTML을 사용할 수 있게 하는 리액트만의 문법(syntax)을 말한다. 2) html안에 변수를 넣으려면 { }로 감싼다. 3) html의 attribute를 다르게 쓴다. class대신 className, onclick대신 onClick 등 JSX는 react 파일의 확장자로써의 상징적인 의미를 갖는다. ECMAScript가 Javascript의 표준과 규격등 문법에 관해 사용할 때 쓰는 것처럼, JSX도 JS의 파일에 React 라이브러의 표준을 따른다는 의미로써 사용되는 확장자다. 다만, 둘을 구분지으면서 얻는 이익이 딱히 없고, JS파일에 JSX로 코드를 작성하면, CRA와 같은 툴체인에 의해 JS 코드로 변환해주기 때문에 실제로 ..

🌕 Front/⚛️ React JS 2021. 9. 7. 09:37

[React+Typescript] React.FC를 굳이 사용하지 않아도 되는 이유

1. 코드 가독성 const Greeting:FC = function({ name }) { return Hello {name} } function Greeting({ name }: GreetingProps) { return Hello {name} } 굳이 FC type을 명시해줘서 코드 가독성이 떨어진다. 2. FC always imply children export const Greeting:FC = ({ name }) => { // name is string! return Hello {name} }; // use it in the app const App = () => {"I can set this element but it doesn't do anything"} React.FC는 암묵적으로 chil..

🌕 Front/🎫 Typescript 2021. 9. 6. 17:05

[Typescript]: type, interface, generics 사용하기

1. type type PeopleType = { name: string age: number } type WindowStates = "open" | "closed" | "minimized"; type LockStates = "locked" | "unlocked"; type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9; type Dog = { name: string; tail?: { shakeTail?: () => string; }; hasMaster?: boolean; }; function sayHi(dog: Dog): string { return dog.tail?.shakeTail?.(); } Type의 property를 optional하게 지정할 수 있다. 2..

🌕 Front/🎫 Typescript 2021. 9. 6. 16:09

Typescript 생성자, public, private

[생성자] 1. 모든 class는 constructor를 가짐 2. constructor는 class로부터 객체를 생성할 때 호출되며 객체의 초기화를 담당 클래스안에 컨스트럭터를 만들고 오브젝트를 생성할 때는 파라메터로 넣기만 하면 되는 장점이 있음 이거 자바랑 똑같은데 [access modifiers 접근제한자] 클라스 속 멤버 변수(프로퍼티)와 메소드에 적용될 수 있는 키워드 클라스 외부로부터의 접근을 통제 public: class선언할 때 디폴트임 private: 클라스내에서만 접근 가능 protcted: 클라스내부, 상속받은 자식 클라스에서 접근 가능 클래스내 프로퍼티에서도 접근제한자를 사용할 수 있음 private fullname: string 하면 1) 외부클래스에서 읽기/수정 불가능 2) 그..

🌕 Front/🎫 Typescript 2021. 9. 6. 16:06

Typescript: 중급(Type Aliases/Type Guard)

https://www.typescriptlang.org/docs/handbook/advanced-types.html Type Aliases type StrOrNum = number | string; 타입가드 typeof operator와 조건문을 사용해서 숫자타입 변수에 숫자|스트링 값을 넣을 때 오류를 방지 if(typeof price ==='string') { itemPrice = 0 } else { itemprice = price } 코드검증을 수행하는 것을 타입가드라고함

🌕 Front/🎫 Typescript 2021. 9. 6. 16:04

[Typescript] 추가 제공 타입 (tuple, enum, any, void, never)

TypeScript 에서는 기본형 자료형, 참조형 자료형외에도 추가로 타입을 제공한다. 1. tuple 길이와 각 요소의 타입이 정해진 배열을 저장하는 타입 let arr:[string, number] = ["Hi",6]; arr[1].concat("!"); //Error, 'number'does not have'concat’ //정의하지않은 index 호출 시 오류 arr[3]="hello"; //Error, Property '3'does not exist on type'[string,number] 2. enum 특정 값들의 집합을 저장하는 타입 enumerable, 즉 열거 가능한 데이터 타입을 말한다. 데이터에 순서가 있는데, 그 순서에 맞게 값을 주고 싶을 때 사용한다. 순서는 상수로 매기며, 1..

🌕 Front/🎫 Typescript 2021. 9. 6. 11:32

[styled-components] 타입스크립트에서 사용하기

테마 정의 //styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { colors: { '--color-gray': string; '--color-gray800': string; '--color-gray700': string; }; } } //theme.ts import { DefaultTheme } from 'styled-components'; export const theme: DefaultTheme = { colors: { '--color-gray': 'rgba(58,58,58,1)', '--color-gray800': 'rgba(58,58,58,0.8)', '..

🌕 Front/⚛️ React JS 2021. 9. 2. 17:20