프론트 엔드/javascript

Promise result값 사용하기

비동기 데이터를 다루기 위해 항상 비동기 함수 내부에서 함수를 호출해 값을 계산하거나 저장했습니다. useEffect(() => { console.log("Works!before"); setTimeout(function () { console.log("Works!"); axios .get("http://localhost:4000/data") .then(async function (response) { // response setdata(response.data); console.log(response.data); //데이터 전송 성공시 }) .catch(function (error) { // 오류발생시 실행 }) .then(function (response) { // 항상 실행 }); //컴포넌트가 리랜..

[Javascript]Json

⚡JSON Java Script Object Notion의 줄임말로, 데이터 교환을 위해 만들어진 객체 형태의 포멧 입니다. 데이터를 어떻게 활용하는지는 프로그래머들의 중요한 역량 중 하나입니다. 개발자라면 어떤 언어에서든 데이터 구조와 실제 데이터를 다른 언어 및 플랫폼에서 해석 가능한 형식으로 전송할 수 있어야 합니다. json은 이를 가능케 하는 데이터 교환 포맷입니다. json은 몇 안 되는 인간이 읽을 수 있는 문서로 이뤄져 있기 때문에 개발자 사이에서 자주 사용됩니다. 📌JSON 데이터 유형 String {"name" : "samsamgo"} Num { "num1" : 1 "num2" : 2, "num3" : 3, "num4" : 4 } Boolean {"trueORfalse" : "true"..

[JavaScript]재귀

❓재귀 함수(Recursion Function)란? 자기 자신을 다시 호출해 작업을 수행하는 방식이다. 아래의 코드를 보면 리턴 문을 사용해 rezero함수가 끝나기 전에 다시 함수를 호출해 주고 있다. function rezero(){ console.log('무한반복중') return rezero() } 특정 분기까지 자기 자신을 계속해서 호출하는데, 주로 반복문을 구현할 때 사용한다. 이러한 제귀 함수의 가장 큰 사용 예제는 바로 팩토리얼이다. (수학 시간에 배웠던 5!라는 문자를 생각해 봅시다....) function factorial(num) { if (num === 1) { return 1; } //num이 1이 되었을때 함수 끝내기 return num * factorial(num-1); //n..

[JavaScript]비동기 (Asynchoronous)

❓비동기란(Asynchoronous)? 위에 있는 귀여운 고양이를 채색하는 방법은 다음과 같습니다.👇 /방법 1 고양이 1을 그린다. 고양이 1을 색칠한다. 고양이 2를 그린다. 고양이 2를 색칠한다. /방법 2 고양이 1을 그린다. 고양이 2를 그린다. 고양이 1을 색칠한다. 고양이 2를 색칠한다. 👉고양이를 하나씩 그린 다음 채색하고 다음 것을 그리는 방법은 여러모로 많은 시간이 걸립니다. 그렇다면 고양이 그리는 행위를 한 번에 몰아서 먼저 다 그린 다음 두 마리를 한 번에 채색하는 방식을 어떨까요 아무래도 시간이 덜 걸리게 될 겁니다. 👉프로그램상에서 방법 2와 같은 순서를 비동기적 진행 방식이라 칭하고 있습니다. (방법 1은 동기적인 진행방식입니다) 다음은 동기적인 방법과 비동기적인 방법에 따른 ..

[JavaScript] class의 상속

❓상속(inheritance) 이란? class Grub { // TODO.. constructor() { this.age = 0; this.color = "pink"; this.food = "jelly"; } } Grub이란 class를 생성해 보겠습니다. class Bee // TODO.. constructor() { this.job = "Keep on growing"; } } 추가로 아래에 Bee라는 class를 생성하였습니다. class Bee에는 age, color, food의 속성 값을 넣고 싶다면 어떻게 해야 할까요❓ class grub에 있는 age.color, food의 속성 값을 불러온다면 더 편하겠지요? 바로 이 개념이 상속입니다. 만약 위의 코드의 경우 상속을 사용하게 된다면 속성의..

[JavaScript]Prototype & Prototype chain

❓What Is Prototype? 사람은 유전자를 통해서 자신들의 유전 정보를 자식들에게 넘겨줄 수 있다. 👉javascript에서 유전자 역할을 하는 것은 prototype이다. 모든 객체는 prototype object를 가지고 있고 이를 통해 부모 객체의 정보를 가져올 수 있다. 👇아래 코드예시를 보고 이해해보자! function neko(){ this.color = 'black'; this.gender = 'male'; } neko.prototype.name = 'chco' const Neko = new neko(); // Neko = { color:'black', gender:'male'} // Neko.name = 'chco' /*이렇게 생성된 오브젝트는 name을 직접 가지지는 않지만*/ ..

[JavaScript]절차지향vs객체지향

📌절차적 언어 일어나는 사건과 순서에 따라 분석을 진행하는 방식의 언어 즉 실행 순서 즉 절차가 더 중점이 되는 언어이다. 📌객체지향 언어 절차 지향이 사건의 흐름 단계라면 객체 지향은 데이터의 단위를 중심으로 분석하는 방식의 언어 즉 객체들의 종류와 속성들이 더 중점이 되는 언어이다. 객체지향 프로그래밍을 통해 데이터의 접근 데이터의 처리 과정에 대한 모형을 만들어 내는 방식을 통해 데이터와 기능이 별개로 취급되지 않고, 한 번에 묶여서 처리할 수 있게 되었습니다. 자바스크립트는 엄밀히 말해 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성할 수 있습니다. 🦍절차 지향 vs 🦧객체 지향 두 언어로 짜인 예제를 보고 비교해 보자 //절차적 프로그래밍 function constructor() { let..

[JavaScript]클래스와 인스턴스

__객체 지향 프로그래밍(OOP, Object-oriented programming) 프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지를 정의하여 객체들 간의 상호작용을 통해 프로그램을 만드는 것을 말한다. 여기서 객체는 클래스라는 틀에서 생겨난 인스턴스들로 클래스와 인스턴스의 개념과 관계를 잘 이해한다면 객체지향적인 프로그램을 잘 짤 수 있다. __클래스와 인스턴스 개념 게임 케릭터에 아바타를 커스텀하여 새로운 아바타를 만들어 낼 때 이때 사용되는 기본 아바타를 'class'라고 부르며 그 아바타를 바탕으로 만들어진 아바타를 '인스턴스' 객체라고 부른다. 생성자 함수(Constructor) = 거푸집 인스턴스 = 거푸집으로 찍어낸 칼 __사용법 ES6문법으로 인스턴스 생성 /*기존..