JavaScript
[ReactJS] 상태관리 라이브러리 Redux / 설치와 적용법
React 를 다뤄보신 사람들은 Mobx 나 Redux 에 대한 이야기를 많이 들어보았을 것이다. 필자는 Mobx 보다 Redux를 더 많이 들어보았고, 이 때문에 레퍼런스가 더 많을것 이라는 생각에 Redux 를 다루기로 하였다. 많은 내용을 공부한것이 아니지만, 유용하게 사용중인 기능들만 이야기를 해보려고 한다. 이번에 작성하는 대부분의 내용은 아래 사이트에서 참고한 내용들이다. 공식문서가 정말 유용하다! https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org Redux 소개하기 공식 사이트에서는 " Redux는 자바스크립트 앱을 위한 예측..
[Nodejs] 로그인/회원가입 구현하기 (세션유지편)
2021.05.20 - [내가 공부하는것/JavaScript] - [NodeJS] 로그인/회원가입 구현하기 ( 회원가입편 ) 2021.05.20 - [내가 공부하는것/JavaScript] - [NodeJS] 로그인/회원가입 구현하기 (로그인편) >> 내용이 잘 보이지 않는다면 우측 하단의 달 모양을 클릭해주시기 바랍니다. { if(req.session.loginData){ res.send({loggedIn : true, loginData: req.session.loginData}) }else{ res.send({loggedIn : false}) } }) 이런 형식으로 작성이 된곳으로 get 요청을 해주시면 된다. 여기서 보면 session에 저장된 loginData 값이 있으면 loginData에 세션데..
알고리즘 스터디 - Stack
이번시간에는 Stack에 대해서 알아보도록 하겠다. STACK 우리가 흔히 게임을 하다보면 " 스택을 쌓아야 더 강해진다 " " 스택 쌓아야된다 " " 스택 쌓였다 " 라는 식의 대화를 한 적 있을것이다. 이 말에서 힌트를 얻고, 스택은 무언가를 쌓는다고 할 수 있다. 자, 그럼 스택이 무엇인지 대충 알았을테니 제대로 시작해보자. LIFO Last Input First Out 의 약자인 LIFO 이다. 스택 알고리즘은 나중에 들어온것을 먼저 빼주는 방식으로 동작을 한다. 이 것을 보았을 때 아래와같은 이미지로 동작이 된다. Function 이번 알고리즘에서는 아래와 같은 함수를 구현해 보겠다. push - 마지막 인덱스에 값을 추가한다 pop - 마지막 인덱스의 값을 삭제하고 반환한다. peek - 마지..
[NodeJS] 로그인/회원가입 구현하기 (로그인편)
2021.05.20 - [내가 공부하는것/JavaScript] - [NodeJS] 로그인/회원가입 구현하기 ( 회원가입편 ) >> 내용이 잘 보이지 않는다면 우측 하단의 달 모양을 클릭해주시기 바랍니다. { if(err) console.log(err) }) res.end() }) 이렇게 해주면 원하는 값을 가져올 수 있을것이다. 그런데 내가 위에서 없는 id 값을 가져오면 아무것도 출력이 되지 않는다고 했는데 이때는 id가 존재하지 않는것이니 이 조건을 추가해주겠다. router.js const db = require('../db/config') router.post('/login', (req,res,next) =>{ param = [req.body.id, req.body.pw] db.query('SEL..
[NodeJS] 로그인/회원가입 구현하기 ( 회원가입편 )
2021.05.20 - [내가 공부하는것/JavaScript] - [NodeJS] 로그인/회원가입 구현하기 (로그인편) >> 내용이 잘 보이지 않는다면 우측 하단의 달 모양을 클릭해주시기 바랍니다. { console.log(req.body) res.end() }) 이런식으로 작성을 해준다면 연동이 잘 될것이다. 만약, 여기서 오류가 난다면 mysql.createConnection() 부분에서 정보 입력에 문제가 생긴것이니 잘 확인해보도록. router.js 에서 이제 db에 값을 넣어줄것이다. 그 전에 sql 문을 어떻게 하는지 알아보자. SQL INSERT 문 입력받은 값을 db에 저장하기 위해서는 insert 문이 필요하다. 우선, 간단하게 db구성이 어떻게 되어있는지 알아보자. member Tabl..
[React] 라이브러리 없이 이미지 슬라이더 만들기
효율이 완전떨어질 수 있는 코드일 수 있습니다. 하지만, 기능적으로 문제는 없다 생각하여 작성한 글 입니다. 문제점 혹은 지적사항에 관한 댓글은 환영하겠습니다. 현재 포트폴리오 사이트를 만들던 중, 이미지 슬라이더를 라이브러리 없이 만들어보고 싶었습니다. 그러던 중 한가지 아이디어가 떠올라 이렇게 글을 작성하였습니다. 일단 완성품 내가 원하는 그림 현재 제작중인 포트폴리오 사이트의 일부분 입니다. 좌측 하단에 보면 Prev, Next 버튼이 있습니다. 이 버튼을 누르면 다음 슬라이더 혹은 이전 슬라이더가 보이는 기능을 구현하고 싶었습니다. 여러가지 스크롤에 관련된 함수는 많았습니다. ( scrollTo, scrollintoView, scrollTop, scrollLeft 등 ) 하지만, 스크롤에 관련된 ..
[Javascript / React / Node ] async+await 과 axios - 파일분리 와 코드경량화
useEffect(()=>{ const getApis = async () => { await axios.get([LINK]).then(res => setState(res)) } getApis(); }) 기존에 위와같은 형식으로 api 를 불러오고 있었습니다. 하지만, 페이지가 많아지고 컴포턴트가 많아지다보니 이 렇게 api를 호출하는 코드를 따로 분리해서 모아야겠다는 생각이 많이 들었습니다. 파일분리 getApis.js import axios from 'axios'; const getApiData = async () => { await axios.get([LINK]) .then(res=>{ return res }); } export { getApiData } pages.js useEffect(()=>{ ..
[Node.js] 콜백지옥 벗어나기 async / await
↓이전 글은 아래 링크를 통해 확인하실 수 있습니다↓ [Node.js] 콜백지옥 벗어나기 promise Nodejs의 비동기처리? Nodejs는 Non-Blocking 방식으로 서버에 요청을 보냇을 때 응답이 올때까지 기다려주지 않습니다. 요청을 보내고 바로 다른일을 하다가 응답이 오면 해당 값을 사용할 수 있게 되 webaura.tistory.com async & await async & await 은 가장 최근에 나온 비동기 처리 방식이며, 기존 방식인 Callback , Promise의 단점을 보안하고자 나온 방식입니다. async & await 어떤원리? 함수 명 앞에 async 라고 명시를 해 두면 해당 함수 안에는 await 이라는 키워드를 사용할 수 있습니다. 해당 키워드는 Promise 의..