티스토리

개발 꿈나무

검색하기

블로그 홈

개발 꿈나무

nspark.tistory.com/m

스터디 정리 할려고 만든 블로그

구독자: 1

방명록 방문하기

주요 글 목록

Codestate 프로젝트 회고 프로젝트 소개 Right Now 기간 : 2021-12-27 ~ 2022-01-21 사용자의 현재 위치를 기반으로 주변의 같은 관심사의 다른 사용자들과 자동으로 모임을 매칭 시켜 주는 위치기반 서비스 배포 | 깃허브 | 프로젝트 소개 왜 이 프로젝트 주제를 선택했나? 요즘 같은 모두 바쁜 시대에 특정인들과 약속을 잡기 쉽지 않고, 또 같은 취미를 가진 사람들을 찾기에는 더욱 쉽지 않습니다. 이러한 불편함을 해결하기 위해 시간을 절약하며 내 주변에 있는 나와 취미가 맞는 사람들과 빠르게 모임을 만들 수 있는 프로그램을 개발하면 어떨까 해서 이러한 프로젝트를 시작하게 되었습니다. Right Now 만의 특징은? rightnow 는 소모임 참가 시 다른 소모임 플랫폼들과는 다르게 유명 게임 '리그오브 레전드'.. 공감수 0 댓글수 0 2022. 2. 3.
[Javascript] 프라미스 체이닝(Promise Chaining) 프라미스 체이닝 순차적으로 처리해야 하는 비동기 작업이 여러개 있을 시 아래와 같이 프라미스 체이닝을 사용하여 작업을 할 수 있음 let myPromise = new Promise((resolve,reject) => { setTimeout(() => resolve(20),500); // 1 }); myPromise .then(res => { // 2 console.log(res); return res+res; }) .then(res => { // 3 console.log(res); return res+res; }) .then(res => { //4 console.log(res); }) 결과 then 핸들러를 사용하면 프라미스를 반환하기 때문에 체인처럼 계속해서 .then 을 사용하며 원하는 순서대로 비동.. 공감수 0 댓글수 0 2021. 10. 26.
[Javascript] 프라미스(Promise) 프라미스(Promise)란? 프라미스란 자바스크립트에서 비동기 처리에 사용되는 객체로써 콜백을 조금 더 효율적이고 깔끔하게 처리하기 위해 사용됨. 프라미스를 사용하면 비동기 처리되는 코드를 마치 동기적으로 처리될 수 있게 할 수 있음. 프라미스는 아래와 같이 사용할 수 있음 let myPromise = new Promise(fucntion(resolve,reject){ if(success){ resolve(someData); someData = 11; //이 코드는 무시됨 }else{ reject(error); } }) Promise에 넘겨준 콜백함수는 executor(실행자) 라고 하며 new Promise 가 생성될 때 자동으로 실행됨. resolve는 성공했을때 아래 value를 결과와 함께 호출하.. 공감수 0 댓글수 0 2021. 10. 22.
[Javascript] 콜백 콜백함수 콜백함수란 어떤 고차함수에 해당 함수를 인자로 넘겨주어 사용되는 함수를 말함 어떤 코드가 비동기적으로 실행될 때 콜백함수를 유용하게 사용할 수 있음 인자로 넘겨받은 스크립트를 html문서에 추가시켜주는 함수가 있다고 가정 function load(src){ let script = document.createElement("script"); script.src = src; document.head.append(script); } //함수를 실행 load("scripts/scriptOne.js"); 위와같이 load라는 함수를 실행하면 비동기적으로 동작함 load로 불러온 "scripts/scriptOne.js" 에 myFunc(){} 라는 함수가 있다고 가정 function load(src){ l.. 공감수 0 댓글수 0 2021. 10. 21.
[Javascript] Javascript 내장 클래스 확장 내장 클래스의 확장 map, array같은 자바스크립트 내장 클래스들도 확장하여 사용할 수 있음 class MyArray extends Array{ getConstructor(){ return this.constructor; } } let myArr = new MyArray(10,11,12,13); console.log(myArr); console.log(myArr.getConstructor() === MyArray) console.log(myArr.getConstructor() === Array) 결과 Array를 확장한 MyArray클래스의 생성자는 Array가 아니라 MyArray 인 것을 알 수 있음 공감수 0 댓글수 0 2021. 10. 18.
[Javascript] private, protected 내부, 외부 인터페이스 객체지향 프로그래밍을 할 시에는 외부인터페이스와 내부인터페이스를 구분하는것이 필요함 내부인터페이스는 외부에서 접근이 불가능해야하고 오로지 외부인터페이스를 통해서만 외부에서 접근해야 함 내부 인터페이스(internal interface) : 동일한 클래스 내의 다른 메서드에선 접근할 수 있지만, 클래스 밖에선 접근할 수 없는 프로퍼티와 메서드 외부 인터페이스(external interface) : 클래스 밖에서도 접근 가능한 프로퍼티와 메서드 자바스크립트에서는 아래와 같은 2가지 타입의 객체필드가 있음 public : 어디에서든지 접근이 가능하고 외부 인터페이스를 구성하는데 사용됨 접근 필드를 명시하지 않을시 디폴트 private : 클래스 내부에서만 사용 가능하고 내부 인터페이스를.. 공감수 0 댓글수 0 2021. 10. 14.
[Javascript] static 메서드와 프로퍼티 정적(static) 메서드 prototype 이 아닌 클래스 함수 자체에 메서드를 설정한 것을 static 메서드 라고 함 class MyClass{ static staticMethod(){} method(){} } console.dir(MyClass); 결과 위의 MyClass 의 구조를 보면 static 키워드를 사용한 staticMethod는 MyClass에 바로 설정되어 있고 사용하지 않는 method 는 prototype 내부에 설정되어 있는것을 볼 수 있음 정적(static) 메서드의 사용 정적 메서드는 클래스 함수에 직접 할당되어 있으므로 new 를 이용하여 객체를 생성하지 않아도 실행 될 수 있음 //정적 메서드를 이용하여 객체를 생성 class Person{ constructor(name.. 공감수 0 댓글수 0 2021. 10. 5.
[Javascript] 클래스 상속 클래스 상속을 위한 'extends' 클래스 선언 시 클래스명 옆에 extends '부모 클래스명' 을 이용하여 부모 클래스를 상속받을 수 있음 클래스를 상속받으면 부모 클래스의 메서드를 사용할 수 있음 class Parent { method(){ console.log("Im a parent class"); } } class Child extends Parent {} let MyObj = new Child(); //Child에는 method라는 메서드가 존재하지 않지만 부모로부터 상속을 받았으므로 사용 가능 MyObj.method(); 결과 extends 를 통해 Child.prototype.[[Prototype]] 을 Parent.prototype 로 설정하므로 Child.prototype 에서 메서드.. 공감수 0 댓글수 0 2021. 10. 1.
[Javascript] 클래스 클래스와 기본문법 클래스(class)란 자바와 같은 객체지향 프로그래밍 언어에서 현실의 개체를 표현하기 위해 사용되는데, 자바스크립트에서도 ES6 부터 class가 도입되었음 클래스는 다음과 같이 생성하고 사용할 수 있음 class Person { constructor(){} method{} ... } let me = new Person(); constructor는 Person 객체를 new 를 사용하여 생성할 때 자동으로 실행되므로 객체를 초기화 할 때 사용됨 Person객체 초기화 시 name 추가 class Person { constructor(name){ //new로 객체 생성 시 name을 인자로 받아 this.name 을 name으로 초기화 this.name = name; } getName().. 공감수 0 댓글수 0 2021. 9. 30.
[React] 컴포넌트와 props 함수 컴포넌트 / 클래스 컴포넌트 리액트의 컴포넌트는 자바 스크립트의 함수와 클래스로 작성할 수 있음 함수 컴포넌트 let Main = function(){ return ( Welcome!! ) } 클래스 컴포넌트 class Main extends React.Component { render() { return ( Hello, {this.props.name} ) } } render에 있는 부분이 컴포넌트로 생성됨 사용자 정의 컴포넌트 컴포넌트 생성 시, 이미 정의해 놓은 컴포넌트를 가져와 사용할 수 있음 let SubComponent = function(){ return Welcome!!; } let MainComponent = function(){ return ( //위에서 생성한 컴포넌트를 사용 ) .. 공감수 0 댓글수 0 2021. 9. 30.
[Javascript] 프로토타입 메서드 프로토 타입 메서드 객체에 상속을 추가해주는 __proto__ 는 예전 방식이므로 사용을 지양하는 것이 좋음 __proto__ 대신 아래의 프로퍼타입 메서드를 사용하여 상속받을 객체를 추가 Object.create(obj, [descriptors]) : [[Prototype]]이 obj를 참조하는 새로운 빈 객체를 만듬. 이때 프로퍼티 설명자를 추가로 넘길 수 있음. Object.getPrototypeOf(obj) : obj의 [[Prototype]]을 반환합니다. Object.setPrototypeOf(obj, proto) : obj의 [[Prototype]]이 proto가 되도록 설정합니다. let parentsObj = { a:1 } //parentsObj를 상속받는 createObj를 생성 let.. 공감수 0 댓글수 0 2021. 9. 30.
[Javascript] 함수의 prototype 함수의 prototype 프로퍼티 함수를 new 연산자를 통해 생성하면 객체가 생성됨 함수를 객체로 생성 전 함수.prototype = obj 로 생성될 객체의 [[prototype]]를 설정할 수 있음 function myFunc(a,b){ this.a = a; this.b = b; } let obj = { c:3, d:4 } //Function.prototype를 이용하여 obj를 참조시킴 myFunc.prototype = obj //new 연산자를 이용하여 함수를 객체로 생성 let myFuncObj = new myFunc(1,2); for(let key in myFuncObj) console.log(`${key} : ${myFuncObj[key]}`); myFunc에 obj가 참조된 것을 볼 수 .. 공감수 0 댓글수 0 2021. 9. 29.
[Javascript] 프로토타입 상속 [[prototype]] 자바스크립트에서 객체는 [[prototype]] 라는 숨겨저있는 프로퍼티를 가지고 있음 [[prototype]] 의 값은 null 또는 다른 객체의 참조가 되는데, 이 참조가 되는 대상을 '프로토타입(prototype)' 라고 함 자바스크립트에서는 객체가 프로퍼티를 읽으려고 할때 존재하지 않으면 [[prototype]]에서 참조하고 있는 객체에서 프로퍼티를 자동으로 찾음. 이러한 동작 방식을 '프로토타입 상속' 이라고 함 [[prototype]] 를 통해 다른 객체를 참조하려면 [[prototype]]의 getter, setter 인 __proto__ 를 통해 참조할 수 있음 let person = { name:'park', age:25 } let co_worker = { pos.. 공감수 0 댓글수 0 2021. 9. 29.
[Javascript] 프로퍼티 getter/setter 데이터 프로퍼티와 접근자 프로퍼티 프로퍼티의 종류는 데이터 프로퍼티(data property)와 접근자 프로퍼티(accessor property)로 나뉨 지금까지 사용했던 모든 프로퍼티는 데이터프로퍼티이고 접근자 프로퍼티는 본질이 함수인데, 값을 얻고(get) 설정(set) 할 수 있음 외부에서 접근자 프로퍼티를 볼때는 함수가 아닌 일반적인 프로퍼티로 보임 getter와 setter 접근자 프로퍼티는 getter와 setter로 나눌 수 있음 객체의 리터럴 안에서 get, set으로 표현되고 객체를 호출할때는 getter가, 객체에 값을 할당할때는 setter가 자동으로 실행됨 let obj = { firstName:'ns', lastName:'park', get myName(){ return this... 공감수 0 댓글수 0 2021. 9. 28.
[Javascript] 프로퍼티 플래그와 설명자 프로퍼티 플래그 객체의 프로퍼티는 값과 함께 플래그(flag)라고 하는 특별한 속성을 3가지 가지고 있음 3가지 플래그 writable : 이 속성이 true이면 값을 수정할 수 있고, false이면 수정이 불가능함 enumerable : 이 속성이 true이면 반복문을 사용하여 나열할 수 있음 configurable : 이 속성이 true이면 해당 프로퍼티를 삭제하거나 플래그 수정이 가능함 일반적인 방식으로 객체 생성시 위 3가지 플래그의 기본값은 true로 설정되고 플래그를 수정할 수 있음 Object 의 getOwnPropertyDescriptor 메서드를 사용하면 해당 프로퍼티의 정보를 얻을 수 있음 getOwnPropertyDescriptor의 문법 let descriptor = Object.g.. 공감수 0 댓글수 0 2021. 9. 27.
[React] 엘리먼트 렌더링 Dom에 엘리먼트 렌더링 시키기 react 엘리먼트를 html에 랜더링 시키기 위해 ReactDOM.render() 를 사용할 수 있음 사용 문법은 아래와 같음 ReactDOM.render(reactEl, dom) reactEl : 추가한 리액트 엘리먼트 dom : 추가될 리액트 엘리먼트의 부모 html문서에 "container"라는 아이디를 가진 div태그가 있다고 가정 아래와 같이 "container"에 리액트 엘리먼트를 추가 const App = () => { return ( 안녕하세요!! ); } ReactDOM.render(,document.querySelector("#container")); JSX문법을 이용하여 App 엘리먼트를 #container 에 랜더링 시킴 참조: https://ko... 공감수 0 댓글수 0 2021. 9. 27.
[Javascript] 함수 바인딩 함수 바인딩 setTimeout과 같은 메서드를 이용하여 객체 메서드를 실행시킬 때 아래와 같이 this 의 컨텍스트를 잃어버림 let obj = { name:'park', printName(){ console.log('name: '+ this.name); } } setTimeout(obj.printName,1000); 이러한 이유는 setTimeout 에 obj에서 분리된 printName이라는 함수가 전달되기 때문임 setTimeout을 이용해 함수를 호출할 때 함수의 this는 window가 할당되므로 위의 호출한 함수의 this는 obj가 아니라 window가 되므로 this.name 프로퍼티의 값이 할당되지 않았음 래퍼 이러한 문제를 해결하기 위한 방안으로 첫번째는 래퍼함수를 사용 let obj.. 공감수 0 댓글수 0 2021. 9. 27.
[Javascript] 데코레이터, 포워딩과 call/apply 데코레이터를 이용하여 캐싱 기능 추가 데코레이터란 함수의 인수로 받은 함수의 행동을 변경시켜 주는것을 의미함 아래 코드는 데코레이터 함수를 이용하여 특정 함수에 캐싱 기능을 추가 function myFunc(num){ console.log(`${num}을 호출함`); return num * num; } // num을 호출받아서 num * num 의 결과를 리턴해주는 함수 function decoFunc(func){ // 함수의 cache를 생성해주는 데코레이터 let cache = new Map(); //캐시를 저장할 맵 생성 return function(num){ if(cache.has(num)){ //인수로 받은 num 키가 있을경우 return cache.get(num); //캐시에서 값을 불러옴 .. 공감수 0 댓글수 0 2021. 9. 27.
[Javascript] setTimeout과 setInterval 호출 스케줄링 일정시간이 지난 후 원하는 함수의 호출을 예약하는 것을 호출 스케줄링(scheduling a call) 이라고 함. setTimeout과 setInterval을 이용하여 호출 스케줄링을 실행할 수 있지만 두 함수는 아래와 같은 차이가 있음. setTimeout: 일정시간이 지난 후 함수를 한번 호출함 setInterval: 일정시간 간격을 두어 함수를 지속적으로 호출함 setTimeout setTimeout은 아래와 같이 사용할 수 있음 setTimeout( func[ , dely, arg1, arg2 ... ] ) func: 전달할 함수 delay: 실행 전 대기시간. miliseconds 단위 (기본값은 0) arg: 함수에 전달할 인자 setTimeout으로 몇초후 실행되었는지 콘솔에.. 공감수 0 댓글수 0 2021. 9. 24.
[Javascript] 재귀와 스택 재귀 재귀란, 함수 내에서 어떤 함수를 호출해야하는데 호출 해야하는 함수가 자기 자신일 경우 재귀라고 말함 아래는 제곱근을 구하는 함수를 반복문과 재귀를 이용해서 생성 반복문을 이용한 a를 n번 곱하는 제곱근을 생성 function my_pow(a,n){ let res = 1; for(let i = 0; i 1) return 2 * my_pow(a,n-1); } console.log(my.. 공감수 0 댓글수 0 2021. 9. 16.
[React] React프로젝트 생성 React 프로젝트 생성 1. 먼저 터미널에서 cd 명령어를 통해 프로젝트를 생성한 적당한 폴더로 이동 2. 터미널에 npx create-react-app [프로젝트명(폴더명)] 입력하여 react 프로젝트 생성(먼저 npm --version 명령어로 npm이 설치되어 있는지 확인) 3. vscode에서 해당폴더를 열어 프로젝트 파일들을 확인 공감수 0 댓글수 0 2021. 9. 15.
[React] React와 JSX React란? React는 화면에 보여지는 사용자 인터페이스를 구축하기 위한 선언적, 효율적인 Javascript 라이브러리 '컴포넌트' 라고 불리는 독립적인 코드의 파편이 복잡한 UI를 구성하는데 도움을 줄 수 있음. React의 3가지 특징 React의 3가지 특징: 선언형, 컴포넌트 기반, 확장성 선언형(Declarative) react는 페이지를 보여주기 위해 html/css/javascript 를 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향 컴포넌트 기반(component-based) react는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 함 컴포넌트로 분리 시 서로 독립적이고 재사용이 가능해서 기능 자체에 집.. 공감수 0 댓글수 0 2021. 9. 15.
[Javascript] 전역객체 전역객체 자바스크립트의 전역객체를 사용하면 어디서나 사용이 가능한 변수나 함수를 생성할 수 있음 전역객체는 브라우저 환경에서는 window, nodeJS환경에서는 global 이라고 설정되어 있음 전역객체 프로퍼티의 접근은 아래와 같음 //my_val이라는 전역 변수 설정 window.my_val = "hellow world!"; //my_func라는 전역 함수를 생성 후 전역객체인 my_val 사용 window.my_func = () =>{ console.log(window.my_val); } //전역함수 호출 window.my_func(); var 로 선언한 변수는 전역 객체에 포함됨 var var_val = "it is varValue"; //var 변수는 전역객체에 포함되기 때문에 전역객체에 접근.. 공감수 0 댓글수 0 2021. 9. 10.
[Javascript] new Function 문법 new Function new Function 함수의 인자, 함수의 실행을 문자열로 주어서 함수를 생성하는 문법임 new Function([arg1, arg2 ...,],funcBody) 형태로 생성 가능 ( [] 안은 생략가능) // num1 과 num2를 인자로 받아서 두 값을 합한 값을 리턴해 주는 함수를 생성 let new_func = new Function('num1','num2','return num1 + num2'); console.log(new_func(10,11)); //콘솔창에 "it is new function" 이라는 문자열을 출력하는 함수를 생성 let new_func2 = new Function('console.log("it is new function")'); new_func2.. 공감수 0 댓글수 0 2021. 9. 9.
[Javascript] JSON JSON.stringify JSON.stringify : 객체 -> JSON JSON.parse : JSON -> 객체 JSON이란 키와 값 쌍으로 되어있는 데이터 객체를 전달하기 위한 문자 기반의 표준 포맷임. 네트워크를 통해 객체를 전송할 때 객체를 JSON형태의 문자열로 바꿔주어야 함. JSON.stringify 메서드는 객체를 JSON 형태로 바꿀 수 있음 let my_info = { firstName:'namsu', lastName:'park', address:'ansan', age:27, friends:['kim','lee','hong'] } let my_JSON = JSON.stringify(my_info); console.log(my_JSON); console.log(typeof my_JS.. 공감수 0 댓글수 0 2021. 9. 8.
[Javascript] 날짜(Date) Date 객체 Date 객체는 날짜를 저장하고 날짜 관련 메서드를 지원해 줌 Date 객체 생성 new Date()를 이용하여 Date 객체 생성 // 현재시간이 저장된 날짜 객체를 생성 let now_date = new Date(); console.log(now_date); new Date(milisecond) 형태로 1970 년 1월 1일 0시 0분 0초를 기준으로 milisecond 를 추가한 시간을 생성(하지만 한국 표준시로 출력되므로 9시로 생성됨) // 1970년 1월 1일 0시 0분 0초의 날짜 생성(한국 표준시 기준이므로 9시로 출력) let first = new Date(0); // 1970년 1월 1일 에 2일을 추가한 1970년 1월 3일 날짜 생성 let second = new Da.. 공감수 0 댓글수 0 2021. 9. 6.
[Javascript] 이터러블(iterable) iterable 객체 iterable 이란 반복가능한 이란 뜻으로 이터러블 객체는 배열을 일반화 한 객체임. 이터러블 객체는 for .. of 문을 사용할 수 있음 배열이 대표적인 이터러블 객체이지만 다른 내장객체도 배열처럼 반복 가능( ex)문자열 ) 배열이 아닌 일반 객체도 Symbol.iterator을 사용하면 for .. of 문 사용이 가능함 Symbol.iterable 사용하여 객체를 iterable 객체로 변환 for of 문 사용시에는 아래와 같은 과정이 발생 for .. of 문이 실행되면 먼저 Symbol.iterator을 호출(없을 시 오류, Symbol.iterator은 반드시 next()메서드가 있는 이터러블 객체를 반환해야 함) for .. of 문은 반환된 이터러블 객체만을 대.. 공감수 0 댓글수 0 2021. 9. 5.
[Javascript] 구조 분해 할당 구조 분해 할당이란? 구조 분해 할당이란 객체나 배열의 타입을 변수로 분해해 주는 것으로, 함수에 매개변수로 객체를 전달할 때 객체 또는 배열에 저장된 데이터를 일부만 전달해야 할 때 유용하게 쓰일 수 있음. 또한 함수에 전달해야 하는 매개변수가 너무 많을때도 사용될 수 있음 배열의 분해 배열은 아래와 같이 분해할 수 있음 let my_arr = ['a','b','c','d']; let [ a , b ] = my_arr; console.log(`${a} , ${b}`); 배열의 0, 1번 인덱스의 데이터인 'a' 와 'b' 가 각각 변수 a, b에 할당된 것을 볼 수 있음 쉼표를 이용하여 인덱스를 건너 뛸 수 있음 let my_arr = ['a','b','c','d']; let [ a , , b ] = .. 공감수 0 댓글수 0 2021. 9. 2.
[Git] Git사용법 및 원격 저장소 연동과 기본적인 명령어 Git 과 Github Git이란 프로그램 등의 소스 코드 관리를 위한 분산 버전 관리 시스템으로 버전관리 시스템은 프로젝트를 협업을 통해 개발시 버전별로 관리할 수 있는 시스템을 의미함 깃 공식 사이트 Git - Book git-scm.com Github 는 프로젝트의 버전관리와 협업을 위한 코드 호스팅 플랫폼으로, 로컬 저장소인 git을 통해 원격으로 프로젝트를 협업할 수 있는 플랫폼 이다 깃허브 공식 사이트 GitHub: Where the world builds software GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, m.. 공감수 0 댓글수 0 2021. 9. 2.
[Javascript] Map과 Set Map 맵(Map) 은 키가 있는 데이터를 저장하는 점에서 객체와 비슷하지만 맵의 키에는 객체와는 다르게 다양한 자료형을 사용할 수 있음 맵의 주요 메서드 new Map() – 맵을 생성 map.set(key, value) – key를 이용해 value를 저장 map.get(key) – key에 해당하는 값을 반환key가 존재하지 않으면 undefined를 반환 map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환 map.delete(key) – key에 해당하는 값을 삭제 map.clear() – 맵 안의 모든 요소를 제거 map.size – 요소의 개수를 반환 //map의 선언 let map1 = new Map(); //맵에 값 할당(다양한 자료형 사용) map1... 공감수 0 댓글수 0 2021. 9. 1.

문의안내

티스토리
로그인
고객센터

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