JavaScript
[Node.js] 콜백지옥 벗어나기 promise
Nodejs의 비동기처리? Nodejs는 Non-Blocking 방식으로 서버에 요청을 보냇을 때 응답이 올때까지 기다려주지 않습니다. 요청을 보내고 바로 다른일을 하다가 응답이 오면 해당 값을 사용할 수 있게 되는것이죠. 아래 비동기의 예시를 들어보겠습니다. 예시 console.log("1"); setTimeout(() => { console.log("timeout"); } , 100); console.log("2"); 위 코드처럼 setTimeout을 넣어서 예제코드를 작성해 보았습니다. 우리가 알고있는 방식대로면 1 timout 2 이렇게 출력이 되겠지만 1 2 timeout 이렇게 출력이 됩니다. 비동기처리의 대표적인 문제사례 이 비동기 처리의 문제점에대해 대표적 예시로는 Jquery의 ajax통..
[React.js] 부모에서 자식, 자식에서 부모 값 전달하는 방법 props, function
[ React 관련 글 List ] 2021/01/17 - [내가 공부하는것/JavaScript] - [React.js] 함수에서 사용하는Hooks State. useState 2021/01/17 - [내가 공부하는것/JavaScript] - [React.js] 리액트에서 화면전환 애니메이션 ( react-transition-group ) 부모에서 자식으로 값 전달하는 방법 props 란? - 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 수단. - 하위 컴포넌트에서 상위 컴포넌트가 전해준 값에 접근을 할 수 있게 해준다. - 단, 하위 컴포넌트에서 상위 컴포넌트로 값을 전달할 수는 없다. props 사용법 - 클래스형 컴포넌트와 함수형 컴포넌트 둘 다 똑같은 방식으로 진행하면 된다. :: 상위 컴포넌..
[React.js] 함수에서 사용하는Hooks State. useState
class에서 바로 사용하는 State class App extends React.Component { render() { return ( ); } } 위와같은 형식으로 Component 에서는 State 는 그냥 바로 사용하면 됩니다. class App extends React.Component { state = { number:0 } render() { return ( ); } } 이런식으로 추가해서 바로 사용을 하시면 됩니다. 함수에서 에서 사용하는 State, useState import React from 'react'; const Answer = (props) => { return ( ); }; export default Answer; 하지만 이런 함수형식에서 위에 class 에서 하던대로하면..
[React.js] 리액트에서 화면전환 애니메이션 ( react-transition-group )
리액트는 자바스크립트 프론트엔드 프레임워크로 정말 편리한(?) 프레임워크라고 생각합니다. 아직 저도 깊게 들여다보진 않았지만, 정말 편하다고 생각하여 자주 사용하고 있습니다. 아직 공부를 시작한지 얼마 되지 않아 모르는 것이 정말 많아 프로젝트를 진행하며 공부를 해야 할 것 같습니다. 리액트를 하다가 페이지를 넘겼을 때 애니메이션을 보여주고 싶었습니다. Fade in / Fade out 이 아닌 Slide 식으로 보여주고 싶었습니다. 이 방법을 적용하기 위하여 정말 많은 시도를 하였습니다. 먼저 react-transition-group 에 대하여 공부를 하였습니다. npm install --save react-transition-group 먼저, react-transition-group 를 설치합니다. ..
[Node.js] 메이플스토리 api 사용하기(2) - 크롤링, SoapApi
메이플스토리 SoapApi (2) 고객센터에서는 없다고 잡아떼더만 찾으니 나오더군요 먼저, soap api 를 사용하기 위해서 제공하는 xml코드를 분석하기로 하였습니다. 사진을 보면 위아래 두개가 있는거로 보입니다. 느낌상 위에가 값을 보낼 때 사용을 하는것이고, 아래가 데이터를 받아올 때 보여주는 값 인것으로 확인되니 위에것을 먼저 분석하였습니다. POST /soap/maplestory.asmx HTTP/1.1 Host: api.maplestory.nexon.com Content-Type: text/xml; charset=utf-8 Content-Length: length SOAPAction: "http://gnxsoap.nexon.com/soap/GetCharacterInfoByAccountID" ..
[Node.js] 메이플스토리 api 사용하기(1) - 크롤링, SoapApi
토이프로젝트를 하면서 오류사항이나 막혔던점이 해결된 부분 정리해서 올리려고 합니다. 게임중에서 메이플을 주로 하고 있었습니다. 그러다 문득, 메이플에 관련된 개인 토이프로젝트를 해보자 하여 메이플의 api에 대해 고객센터에 물어보았습니다. 네 역시 메이플스토리와 관련된 자료는 홈페이지 외 별도 제공하지 않는다해서... 생각한것이 바로 홈페이지 자체를 크롤링하는것 이었습니다. axios 와 cheerio 를 이용한 크롤링 axios 와 cheerio 를 이용하여 크롤링을 하기로 결심했습니다. async/await을 이용한 비동기 처리를 하기로 하였습니다. const getUserInfoData = async (callBackFunc) =>{ let ulList = []; const html = await ..
JavaScript 공부하기 06 (object) array - 2
Javascript 에는 Object라는것이 존재합니다. 이 Object를 이용하여 Json 파일을 만들 수 있습니다. let obj = {}; 이런식으로 선언하여 배열처럼 사용을할 수 있지만, 약간 차이점이 있습니다. //array let array = {1,2,3,4} //object let obj = {first : 1 , second : 2 , third : 3 , fourth : 4}; 이런식으로 약간의 차이가 있습니다. let obj = {/* [Object Name] : [Object Value], [Object Name] : [Object Value], [Object Name] : [Object Value] [Object Name] { //중첩가능 [Object Name] : [Object..
JavaScript 공부하기 05 (조건문, 연산자)
연산자 연산자는 조건문을 하기 위해 가장 중요하다고 생각되는 부분입니다. 아래의 표만 잘 숙지를 한다면 어느 언어를 하더라도 편하게 할 수 있습니다. 종류 연산자 예시 설명 증감연산 ++ ++i / i++ 전 / 후에 증가 후 적용한다. -- --i / i-- 전 / 후에 감소 후 적용한다. 대입연산 = i = 10 대입 연산자로 우측의 값을 좌측에 대입한다. += i += 2 우측의 값만큼 좌측 값을 증가 시킨다 -= i -= 2 우측의 값만큼 좌측 값을 감소 시킨다 등가연산 == i == 10 비교 연산자로 좌우측의 값이 같은지 비교한다 != i != 11 비교 연산자로 좌우측의 값이 다른지 비교한다 >= i >= 10 좌측이 우측보다 크거나 같은지 비교한다.