티스토리

황토리

검색하기

블로그 홈

황토리

jimoona0131.tistory.com/m

입문자의 허접한 개발 메모장

구독자: 0

방명록 방문하기

주요 글 목록

회원기능 라이브러리(passport, passport-local, express-session) 💡 라이브러리 설치npm install express-session passport passport-local passport인증 처리 미들웨어(사용자 확인) ➡️ 사용자 로그인, 로그아웃 등 인증 기능을 구현할 때 사용인증처리 흐름 전체를 총괄하는 메인 라이브러리로그인 요청을 받은 후 전략(로그인 방법), 세션(정보 저장 방식), 사용자 처리까지 전반을 통제어떤 전략을 쓸지(strategy), 성공 시 어떤 정보를 세션에 저장할지(serializeUser), 다음 요청에서 어떻게 그 정보를 꺼낼지(deserializeUser)passport-localpassport의 로컬 로그인 전략(ID/비번 기반) ➡️ 자체 로그인 시스템(ID, 비번) 쓸 때 사용아이디/비번 방식 회원인증 쓸 때 쓰는 라이브러리.. 공감수 0 댓글수 0 2025. 5. 2.
게시판 회원 기능, session 방식과 token 방식(JWT) 출처 강의: 코딩애플 - Node.js, MongoDB로 빠르게 웹서비스 만들기 💡회원 기능 동작 방식1. 로그인 시2. 서버에 GET/POST 요청 시 💡입장권이란?: 유저 정보가 써있는 간단한 문자자료- 로그인 완료 시 서버가 "이 사람은 누구고 언제 로그인했습니다"라는 입장권을 만들어 유저에게 보냄- 유저가 직접 제시하는 게 아니라 브라우저의 쿠키 저장소를 통해 입장권을 제시하게 함 (크롬 개발자도구 -> Application 탭의 Cookie)- 쿠키 저장소에 저장해놓은 쿠키는 서버로 GET/POST 요청시 자동으로 함께 전송됨. - 그래서 서버는 유저의 브라우저의 쿠키라는 공간에 입장권을 강제로 저장시켜둠. (서버의 권한) 💡입장권 만드는 방식1. session 방식 로그인- 유저가 .. 공감수 0 댓글수 0 2025. 3. 28.
Ajax와 Fetch 💡Ajax 란?- 자바스크립트에서 웹 페이지를 부분적으로 바꾸는 라이브러리.- 웹페이지를 새로고침해서 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있기 때문에 '비동기 기법'이라고 할 수 있다. Ajax는 왜 비동기 기법인가?비동기(Asynchronous)란 어떤 작업이 끝날 때까지 기다리지 않고 다음 작업을 실행하는 방식. 즉, 요청을 보낸 후 서버의 응답을 기다리는 동안 웹페이지가 멈추지 않고 다른 작업을 계속할 수 있음.-> 부분적으로 변경하려는 요청을 한 후, 응답이 올 때까지 웹페이지를 조작할 수 있음console.log("1. 요청 보내기");fetch("https://jsonplaceholder.typicode.com/todos/1") .then(response => respon.. 공감수 1 댓글수 1 2025. 3. 22.
라이브러리와 프레임워크의 차이 https://kg-dlife.tistory.com/78 [ 감귤'S 기초 상식 01] 코딩에서 " 라이브러리 " 란 무엇일까??개발 공부를 하다보면 주변 개발자들로부터 꼭 라이브러리 정독하는 습관을 가지라는 말을 많이 듣습니다. 어렴풋이 라이브러리의 의미는 알지만 남들에게 설명하라고 하면 할 수 없는 수준의kg-dlife.tistory.comhttps://curryyou.tistory.com/363 [개발 용어] 라이브러리 vs. 프레임워크 개념과 차이# 라이브러리(Library)란? 현실세계에서의 라이브러리(도서관)란 필요할 때마다 꺼내볼 수 있는 책(지식)들이 모여있는 곳이다. 프로그래밍에서의 라이브러리란 필요한 기능들이 모여있는 코드의curryyou.tistory.comhttps://www.mir.. 공감수 0 댓글수 0 2025. 3. 22.
비동기와 타이머 - 동기(synchronous): 앞선 작업이 완전히 끝난 후에 다음 작업이 실행되는 것- 비동기(asynchronous): 앞선 작업이 끝나지 않았는데도 다음 작업이 실행되는 것 (작성한 코드 순서와 다르게 실행되는 코드)예) 타이머 함수 타이머 함수: 지정한 시간(밀리초) 뒤에 지정한 직업을 수행1) setTimeout() 함수 : 지정된 시간 뒤에 코드가 실행되도록 함 형식:setTimeout(함수, 밀리초); 사용 예시:setTimeout(() => { console.log('2초 후에 실행됩니다.');}, 2000);##결과## - 첫 번째 인수에 넣는 함수를 외부에서 가져오기const callback = () => { console.log('2초 후에 실행됩니다.');} #"선언", 실행Xs.. 공감수 0 댓글수 0 2025. 1. 21.
반복문 사용하기 - 숫자야구 0. 화면 만들기 확인 1. 숫자 4개 무작위로 뽑기- 무작위 숫자를 중복되지 않게 뽑으려면: 배열 or 객체 사용- 배열: 단순한 값의 나열일 때 사용 / 객체: 값에 이름이 붙을 때 사용(숫자야구의 경우에는 단순한 숫자의 나열이므로 배열 사용) 1-1. numbers라는 빈 배열 만들고 그 안에 1부터 9까지의 숫자 넣기-> 언젠가 긴 배열을 만들 걸 대비해서 '반복문'으로 배열을 생성하는 연습※ 반복문에서 조건식에 반복 범위를 작성하는 방법(4)0부터 9미만으로 적기0부터 8이하로 적기1부터 10미만으로 적기1부터 9이하로 적기const numbers = []; for (let n = 1; n 1-2. numbers 배열에 1~9.. 공감수 7 댓글수 2 2025. 1. 19.
함수 사용하기 - 계산기 const onClickNumber = (event) => { if (operator) { numTwo += event.target.textContent; } else { numOne += event.target.textContent; } $result.value += event.target.textContent; };0. 계산기 화면 만들기 7 8 9 + 4 5 6 - 1 2 3 / C 0 = x 1. 버튼에 이벤트 리스너 추가하기- 각 버튼을 클릭했을 때 이벤트가 발생할 수 있도록 🔢 숫자 버튼 클릭-> operator 변수에 값이 저장되어 있느냐 아니냐에.. 공감수 0 댓글수 0 2025. 1. 13.
DOM 객체 다루기 - 끝말잇기 0. 순서도 그리기 (프로그래밍 사고력 기르기)모든 프로그램을 만들 땐 순서도를 먼저 작성해야 함! 1) 프로그램은 항상 '고정된 절차'로 돌아가야 함 (모든 예시가 성립할 수 있도록)- 절차 수, 내용이 항상 같아야 함 -> '몇'이나 '어떤' 같은 불특정 수식어 사용- '예'는 절차를 다 만들고 검증할 때 사용2) 모든 가능성 고려 : 틀렸을 경우까지3) 처음부터 완벽할 필요는 없다! 시행착오를 겪으며 보완하기 1. 화면 만들고 참가자 수 입력받기프로그램은 크게 두 가지, '화면이 있는 프로그램'과 '화면이 없는 프로그램'으로 나눌 수 있음 - 화면 있는 경우화면 그리는 과정도 순서도에 포함해야 함웹브라우저에서 돌아가는 프로그램은 HTML, CSS, 자바스크립트라는 세가지 언어 사용HTML: 화면 요.. 공감수 1 댓글수 1 2025. 1. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.