본문 바로가기

Web8

[OAuth 2.0] OAuth 2.0에 대해 알아보자! 프로젝트 진행중에 소셜로그인 구현이 필요해서 이 기술에 대해 처음 접하게 되었다.그냥 무턱대고 사용하기보다, 얘가 무엇이고 왜 필요한지에 대해 공부해보고 사용해보고 싶었다. OAuth 2.0은 무엇인가?일단, 얘가 무엇인지 알아야 한다.OAuth 2.0의 공식문서 첫 문단에 소개가 나와있다.OAuth 2.0 is the industry-standard protocol for authorization. OAuth 2.0 focuses on client developer simplicity while providing specific authorization flows for web applications, desktop applications, mobile phones, and living ro.. 2022. 1. 4.

[VanillaJS] map과 forEach JS에서 array의 각 원소에 대해 같은 작업을 반복하고 싶을 때, for문 대신에 Array.prototype.map()이나 Array.prototype.forEach()를 사용할 수 있다. 두 함수의 차이는 무엇일까? MDN 공식문서를 참고해보자. map() : 배열 내의 모든 원소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 * 기존 배열의 원소들로 작업을 완료한 뒤 해당 결과물들을 모아 새로운 배열을 return해준다는 것을 알 수 있다. * 따라서 map의 용도를 제대로 살리려면 callback 함수 내에 return 구문이 있어야 한다. forEach() : 주어진 함수를 배열 요소 각각에 대해 실행 * forEach()는 배열을 변형하지 않는다. 그러나 callbac.. 2021. 10. 1.

[Postman] request속 cookie undefined error 해결 login api 에서 cookie를 설정해주고, 다른 api를 보낼 때 해당 cookie 값을 읽어서 활용하려고 했다. cookie를 설정하는 api가 성공적으로 response 되었음에도 cookie 탭에서 확인할 수 없었다. 그래서, cookie 설정이 안되었나 했는데 postman cookie관련 공식 문서를 보니까 아래 사진에서 Cookie를 클릭하라고 했다. 그래서 오! 쿠키가 설정이 되었구나 하고, 다른 api를 보냈는데 req.cookies가 undefined라서 error가 발생했다. [해결방안] 아래 사진에서 hidden 버튼을 누르면, 숨겨져있던 정보들이 등장한다. 여기 안에 Cookie가 들어가 있지 않았기 때문에 req.cookies가 undefined였던 것이다! postman에.. 2021. 8. 27.

[VanillaJS] 객체 정렬 어떻게 하지? (feat. 문자열) 배열을 정렬할 때는, Array.sort() 함수를 통해서 정렬을 할 수 있다. 객체를 정렬할 때는 어떻게 해야할까? 객체도 마찬가지로 sort()를 이용하는데, 내부에 compareFunction을 정의해주어야 한다. 예를들어, age필드를 가진 아래 객체 배열은 다음과 같이 정렬할 수 있다. let objs = [ {age: 13}, {age: 43}, {age: 9}, {age: 40} ]; objs.sort(function(a,b) { // 오름차순 return a.age - b.age; }); objs.sort(function(a,b) { // 내림차순 return b.age - a.age; }); C++과 같은 다른 언어에서는, compareFunction을 정의할 때, boolean형식으로 .. 2021. 8. 23.

[nodejs-react]Server-Client 통신 시 무한 호출 해결 구현하고 싶은 것 : client가 페이지에 접속했을 때, server로부터 데이터 받기 (initial data) 코드: server.js 일부 app.use('/api', (req, res)=> mdbConn.getToDoList() .then((rows) => { console.log("in server.js",rows); res.json({initialTodos:rows}); }) .catch((errMsg) => { console.log(errMsg); }) ); App.js 일부 (client) function App() { const [state, setState] = useState({ //username: null initalList: null }); useEffect(() => { fe.. 2021. 3. 1.

[Node.js] 서버 생성 참고한 링크 www.zerocho.com/category/NodeJS/post/57774a8eacbd2e9803de0195 과정 1 * 이전에, node.js가 설치되어 있어야 함. 1. 원하는 폴더에 server.js 파일 생성 2. 파일 안에 다음과 같이 작성 const http = require('http'); // 서버 만드는 모듈 불러오기 http.createServer((request, response) => { // 서버 생성 메소드 console.log('server start!'); }).listen(8080); 3. cmd 실행 4. server.js가 위치한 폴더로 이동 5. node server.js 명령어 입력 6. http://localhost:8080 접속 결과 1 server.. 2021. 1. 26.

[JavaScript] 개발 환경 구축 기존에 설치되어 있던 vs code를 이용하였다. html 실행은 chrome 브라우저를 이용하였다. 이 블로그를 참고하여 환경을 구축하였다. qzqz.tistory.com/422 [JavaScript] 개발 환경 설정 (Visual Studio Code 설치 / 디버깅 세팅) 자바 스크립트 에디터는 Visual Studio Code를 사용하겠습니다. 이 에디터가 요즘 급부상하고 있기에 사용을 해보려 합니다. https://code.visualstudio.com Visual Studio Code - Code Editing. Redefined Visual.. qzqz.tistory.com 구축하는 과정에서 html 자동완성이 되지 않아 아래 두개의 과정을 더 거쳤다. 'HTML Snippets' exten.. 2020. 12. 28.

[CSS] 개요 CSS? Cascading Style Sheets의 약자로, HTML에서 웹 페이지를 꾸미는 부분을 정의하는 스타일 시트 언어이며, 웹 페이지를 시각적으로 꾸밀 수 있게 해준다. HTML4부터 모든 서식 설정을 HTML 문서로부터 분리할 수 있게 되었다. 사용하는 이유? HTML을 이용해 웹 페이지를 만들 때, 각 세부 요소의 스타일을 일일이 따로 지정해주어야 하는데, 이렇게 하면 시간이 오래걸리는 것 뿐만 아니라, 추후 수정 및 유지보수도 번거롭다. 따라서 웹 페이지의 스타일을 별도의 파일로 분리하여 이용할 수 있게 해주어 편리하다. 사용법 CSS를 사용하는 방법은 3가지이며, 문법은 동일하게 적용된다. 1. HTML 태그의 style 속성 This is heading 2. HTML문서 내의 태그 태그.. 2020. 12. 17.

이전 1 다음

티스토리툴바