본문 바로가기

분류 전체보기299

[T.I.L]DAY71 ------------------------------------------------------------ [T.I.L] ------------------------------------------------------------ 2022.04.07 - [프레임워크/Node.js] - [Node.js] Hello World & Common JS 2022.04.07 - [개발 개념/이론] - [개발 개념] Node.js 란, React를 사용해야하는 이유 2022.04.07 - [프로그래밍언어/JavaScript] - [Javascript] API & fetch 2022.04.07 - [프로그래밍언어/JavaScript] - [Javascript] anync & await 비동기처리를 동기처럼 [Java.. 2022. 4. 7.
[Node.js] Hello World & Common JS Node.js Hello World & Common JS Node.js는 자바스크립의 런타임으로 기존의 자바스크립트 언어를 그대로 사용하면 된다 Hello.js 출력 console.log("Hello Node.hs"); 자바스크립트를 실행할때 vscode를 사용하는데 vscode를 사용하면 다음 옵션을 활용하여 cmd창을 열수있다 그리고 실행환경을 설정할 수 있다 프로그램 실행법 GUI (Graphic User Interface 그래픽을 직접 클릭하여 실행시킴 CLI (Command Line Interface) 터미널에 명령어를 타이핑하여 실행시킴 index.js를 실행시키는 명령어 node index.js exports를 사용하여 모듈을 객체 단위로 내보낼 수 있음 const add = (a,b) =>.. 2022. 4. 7.
[개발 개념] Node.js 란, React를 사용해야하는 이유 Node.js 자바스크립트는 웹 브라우저 위에서만 사용해야한다는 한계를 가지고 있다 대표적인 브라우저인 Crome의 엔진은 v8엔진인데, 많은 개발자들이 자바스크립트의 우수성을 인정하여 다른곳에도 적용하고 싶은데 브라우저 위에서만 동작하는 한계를 가지고있었다 이 한계를 부수기 위해서 v8엔진을 사용하여 Node.js를 만들었는데 이로인해 브라우저가 아닌 어디서든지 자바스크립트를 사용할 수 있게 되었다 그래서 node.js는 자바스크립트의 라이브러리이고, 자바스크립트의 실행환경, Runtime이라고 불린다 이를 통해서 개인 컴퓨터에 자바스크립트를 다운로드하여 사용할 수 있게 되었는데 이것으로 웹 서버를 형성할 수 있게됨 웹 서버는 url로 요청을 받아서 여러 형태의 데이터를 던져줄 수 있게 됨 React를.. 2022. 4. 7.
[Javascript] API & fetch 자바스크립트는 비동기 처리를 통해 API를 받아 올 수 있다 API 응용 프로그램 프로그래밍 인터페이스 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다 주로 파일 제어, 창 체어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다 어려운 말을 정리하자면 클라이언트가 서버에 데이터를 요청, 응답하는 것을 API 호출이라고 하며, 다른 프로그램에 데이터를 받기 위해서 말을 거는 행위이다 서버는 내 PC가 아니고 다른 PC에서 받을 수도 있는데 이것을 받을때 Promiose 를 사용하여 비동기 통신을 하여 받을 수 있다 포장지 상태로 데이터 가져오기 let response = fetch('OPEN API 주소') .then(res.. 2022. 4. 7.
[Javascript] anync & await 비동기처리를 동기처럼 직관적인 비 동기 처리 코드 작성할 수 있음 anync function hello() { return "hello"; } async function helloAsync() { return "hello Async"; } console.log(hello()); console.log(helloAsync()); //hello //Promise {} //함수에 async를 붙이면 Promise를 반환하는 비동기 처리를 함 helloAsync().then(res) = { console.log(res); }); //hello Async //then을 사용하여 값을 가져올 수 있음 delay function delay (ms) { return new Promise((resolve) => { setTimeout(reso.. 2022. 4. 7.
[T.I.L]DAY70 ------------------------------------------------------------ [T.I.L] ------------------------------------------------------------ 2022.04.06 - [프로그래밍언어/JavaScript] - [Javascript] 비동기를 동기로 Promise 2022.04.06 - [프로그래밍언어/JavaScript] - [Javascript] 동기 & 비동기 2022.04.06 - [프로그래밍언어/JavaScript] - [Javascript] 비 구조화 할당 [Javascript] 비 구조화 할당 배열, 객체에서 원하는 값을 쏙쏙 빼오는 방법 비 구조화 할당 배열의 비구조 할당 let arr = ["one", .. 2022. 4. 6.
[Javascript] 비동기를 동기로 Promise 연속되는 비동기 함수에서 콜백 지옥이 펼쳐지게 된다 이것을 처리할 수 있는 방법은 Promise 객체이다 Promise 함수를 사용하면 콜백함수를 줄지어 사용하지 않아 콜백 지옥을 벗어날 수 있음 비동기 작업이 가질 수 있는 3가지 상태 Pending (대기상태) Fulfilled (성공) Rejected (실패) 상태 변경 Pending → Fulfilled ( resolve ) Pending → Rejected ( reject ) 기본적인콜백함수 function isPositive(number,resolve, reject) { setTimes(() => { if(typeof number === 'number') { //성공 -> resolve resolve(number >= 0? "양수" : "음수".. 2022. 4. 6.
[Javascript] 동기 & 비동기 자바 스크립트가 동작하는 원리 순서대로 실행하는 것과 그렇지 않는 것 들 만약 수행해야 할 작업 (함수) 3개와 작업 실행 (함수 호출) 순서를 지정했다고 갖정해보자 function taskA() { console.log("TASK A"); } function taskB() { console.log("TASK B"); } function taskC() { console.log("TASK C"); } //수행해야 할 작업(함수) 3개 taskA(); taskB(); taskC(); // 작업 실행 (함수 호출) 순서 동기적 처리방식 자바스크립트는 코드가 작성된 순서대로 작업을 처리함 이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다림 → 블로킹 방식 먼저 작성된 코드를 먼저 다 실행하고 나서 .. 2022. 4. 6.
[Javascript] 비 구조화 할당 배열, 객체에서 원하는 값을 쏙쏙 빼오는 방법 비 구조화 할당 배열의 비구조 할당 let arr = ["one", "two", "three"]; let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); --------------------------------------- let arr = ["one", "two", "three"]; let [one, two, three] = arr; console.log(one, two, three); // 대괄호에 있는 내용을 할당 받아서 사용 // 이것을 비 구조화 할당이라고 함 // 배열의 기본구조 비 구조화 할당 ------------------------------.. 2022. 4. 6.
[T.I.L]DAY69 ------------------------------------------------------------ [T.I.L] ------------------------------------------------------------ 2022.04.05 - [프로그래밍언어/JavaScript] - [Javascript] Spread 연산자 2022.04.05 - [프로그래밍언어/JavaScript] - [Javascript] 조건문 Upgrade 2022.04.05 - [프로그래밍언어/JavaScript] - [Javascript] 논리 연산자를 사용한 단락 회로 평가 [Javascript] 논리 연산자를 사용한 단락 회로 평가 논리 연산자의 종류 console.log(true && false); // a.. 2022. 4. 5.
[Javascript] Spread 연산자 배열과 객체를 한줄로 펼치는 방법 const cookie = { base : "cookie", madeIn : "korea" }; const chocochipCookie = { base : "cookie", madeIn : "korea", toping : "chochchip:" }; const blueberryCookie = { base : "cookie", madeIn : "korea", toping : "blueberry" }; const strawberryCookie = { base : "cookie", madeIn : "korea", toping : "strawberry" } //위와 같이 base와 madeIn은 겹치는 것을 알 수 있음 --------------------------------.. 2022. 4. 5.
[Javascript] 조건문 Upgrade 배열을 사용한 조건문 function isKoreaFood(food) { if (food === "불고기" || food === "비빔밥" || food === "떡볶이") { return true } return false; } const food1 = isKoreanFood("불고기"); const food2 = isKoreanFood("파스타"); console.log(food1); console.log(food2); //true, false --------------------------------------- //include 를 사용하여 간단하게 표현 function isKoreaFood(food) { if (["불고기", "떡볶이", "비빔밥"].includes(food) { return t.. 2022. 4. 5.
[Javascript] 논리 연산자를 사용한 단락 회로 평가 논리 연산자의 종류 console.log(true && false); // and console.log(true || false); // or console.log(!true); // not 단락회로 평가 console.log(false && true); // and 연산자는 2개 모두 true 이면 true를 반환 //false가 앞에 나온 시점에서 더 이상 평가 하지않음 // 이것을 단락회로 평가라고 함 console.log(true || false); // or 연산자는 1개만 true 이면 true를 반환 // true가 앞에 나온 시점에서 더 이상 평가 하지않음 const getName = {person} => { return person && person.name; } // 앞에 있는 pers.. 2022. 4. 5.
[T.I.L]DAY68 ------------------------------------------------------------ [T.I.L] ------------------------------------------------------------ 2022.04.04 - [프로그래밍언어/JavaScript] - [Javascript] 삼향연산자 2022.04.04 - [프로그래밍언어/JavaScript] - [Javascript] Truthy & Falsy [Javascript] Truthy & Falsy 참 같은 값, 거짓 같은 값 let a = ""; if(a) { console.log("TRUE"); }else { console.log("FALSE"); } // FALSE let b = "안녕하세요"; if(b) .. 2022. 4. 4.
[Javascript] 삼향연산자 다음과 같이 삼항연산자를 사용하면 간편하게 표현할 수 있음 let a = 3; if (a >= 0) { console.log("양수"); }else{ console.log("음수"); } //양수 ------------------------------------ let a = -3; a >= 0 ? console.log("양수") : console.log("음수"); //음수 let a = []; if (a.length ===0) { console.log("빈 배열"); }else { console.log("안 빈 배열"); } // 빈 배열 ------------------------------------ let a = []; a.lenght === 0 ? console.log("빈 배열") : con.. 2022. 4. 4.
[Javascript] Truthy & Falsy 참 같은 값, 거짓 같은 값 let a = ""; if(a) { console.log("TRUE"); }else { console.log("FALSE"); } // FALSE let b = "안녕하세요"; if(b) { console.log("TRUE"); }else { console.log("FALSE"); } // TRUE let b = undefined; if(b) { console.log("TRUE"); }else { console.log("FALSE"); } // FALSE let b = []; if(b) { console.log("TRUE"); }else { console.log("FALSE"); } // TRUE -> 자바 스크립트에서 본인의 기준에 따라 참 거짓을 구분해줌 -> 이렇듯 참이.. 2022. 4. 4.
[T.I.L]DAY67 ------------------------------------------------------------ [T.I.L] ------------------------------------------------------------ 2022.04.02 - [개발 개념/이론] - [개발개념] JWT와 AXIOS, SPRING SECURITY 기본개념 [개발개념] JWT와 AXIOS, SPRING SECURITY 기본개념 JWT 란? JWT는 JSON Web Token의 약자로 서버와 클라이언트 간 정보를 주고 받을 때 Http 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해서 인증 yikanghee2.tistory.com 오늘은 JWT 토큰을 .. 2022. 4. 2.
[개발개념] JWT와 AXIOS, SPRING SECURITY 기본개념 JWT 란? JWT는 JSON Web Token의 약자로 서버와 클라이언트 간 정보를 주고 받을 때 Http 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해서 인증하고(vs Session), HMAC 알고리즘을 사용하여 비밀키 또는 RSA를 이용한 Public Key/Private Key 쌍으로 서명할 수 있다 JWT 토큰 구성 JWT는 header, payload, signature로 나누어진다 Header는 토큰의 타입과 해시 암호화 알고리즘으로 구성되어 있고, Payload는 토큰에 담을 클레임 (payload에 담는 정보의 한조각, name / value 형태, registered, public, private 형태 ) 정보를 포함하고.. 2022. 4. 2.
[T.I.L]DAY66 ------------------------------------------------------------ [T.I.L] ------------------------------------------------------------ 2022.04.01 - [프로그래밍언어/JavaScript] - [Javascript] 자바스크립티 기본 (4) 2022.04.01 - [프로그래밍언어/JavaScript] - [Javascript] 자바스크립트 기본 (3) [Javascript] 자바스크립트 기본 (3) 조건문 어떤 연산에 따라서 참 거짓을 얻어냄 if 문 let a = 3; if(a >= 7){ console.log("7 이상입니다"); } else if(a >= 5){ console.log("5 이상입니.. 2022. 4. 1.
[Javascript] 자바스크립티 기본 (4) 함수표현식 함수선언식과 표현식 let hello = function() { console.log("안녕하세요"); } console.log(hello); -> 안녕하세요 -> 함수 선언식 const helloText = hello(); console.log(helloText); -> 안녕하세요 -> 함수 표현식 차이 console.log(helloB); -> 안녕하세요 -> **호이스팅** (hoisting)으로 함수선언식으로 만들어진 코드는 최상단으로 올라감 console.log(helloA); //출력 x let helloA = function() { return "안녕하세요"; } function helloB() { return "안녕하세요"; } 화살표함수 let helloA = () => "안녕.. 2022. 4. 1.
[Javascript] 자바스크립트 기본 (3) 조건문 어떤 연산에 따라서 참 거짓을 얻어냄 if 문 let a = 3; if(a >= 7){ console.log("7 이상입니다"); } else if(a >= 5){ console.log("5 이상입니다"); } else { console.log("5 미만입니다"); } //주어진 값이 3 //첫번째 if문 false //두번째 else if문 false //세번째 else문 true switch 문 let country = "ko"; switch(country) { case:"ko": console.log("한국"); break; case:"en": console.log("미국"); break; case:"jp": console.log("일본"); break; } //주어진 값이 ko //case.. 2022. 4. 1.

티스토리툴바