[nomad coder] 리액트 기초 2 import React from 'react'; import ReactDOM from 'react-dom/client'; import reportWebVitals from './reportWebVitals'; function Btn({text, big}){ return {text} ; } function App(){ return( ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render() reportWebVitals(); 컴포넌트를 재사용 하는 방법에 대해 알아보았다. 컴포넌트의 매개변수를 설정하고, 컴포넌트를 사용하면서 인수로 text="value" 를 넘겨주면, 해당 인수를 사용할 수 있다. function.. 2022. 11. 24. [nomad coder] 리액트 기초 1 total click : 0 click me! function Counter(){ const [count, setCount] = React.useState(0) const onClick = () => { setCount((current) => current + 1) } return( Total click : {count} Click me! ) } Vanilla JS를 통해 코드를 구성한 코드와, 리액트를 이용해 구성한 코드를 통해 리액트의 강점을 알아보는 시간을 가졌다. 리액트 코드는 생략된 부분이 많지만(렌더링하는 부분이 생략돼있다), useState와 같은 훅이나 라이브러리의 특성상 편리한 기능이 많았다. 코드를 작성하는 방식에서, JSX 형식으로 코드를 작성하여 JS안에서 마치 HTML을 작성하는 .. 2022. 11. 22. [Express] 로그아웃 구현 (express-session 를 통한 세션작업 연습2) 이전 포스팅과 이어진다. 로그아웃을 구현하기 위한 코드이며, 이에 대해 더 공부할 계획이다. app.post("/logout", (req, res) => { req.session.destroy(function(){ req.session; }); res.redirect('/login'); }); 참고한 블로그 node.js 세션 삭제하기 이 글은 node.js 프레임워크인 express를 사용하고 있습니다.기본적인 세션 개념을 설명하자면 세션은 웹에... blog.naver.com [Node.js] 익스프레스 - 세션 처리하기 (로그인, 로그아웃 구현) 세션 처리하기 세션은 쿠키와 달리 서버 쪽에 상태 정보를 저장한다. 세션의 대표적인 예는 로그인 했을 때 저장되는 세션을 들 수 있다. 로그인하면 세션이 .. 2022. 10. 26. [Web] express 로그인 및 로그아웃 구현 2 (연습) 최근에는 이런식으로 JavaScript 코드를 짜진 않는다고 한다 ^_^... 하지만 개념을 익히려고 코드를 작성하게 되었다. 이전 글과 이어지는 코드이다. 화면이 로드되면, 아래 코드가 실행되면서 _authCheck 에 의해 전송되는 응답 중 'code' 를 확인하여 200인 경우 회원 목록을 표현하고 아닐 시에는 로그인을 해달라고 요청한다. function init(){ } let xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { const serverRes = JSON.parse(xhttp.response); console.log(serverRes.code) if(server.. 2022. 10. 26. [Web] express 로그인 구현 front 작업부분 [Express] 로그인 구현 (express-session 를 통한 세션과 쿠키작업 연습) const express = require("express"); const cors = require("cors"); const mysql = require("mysql"); const { query } = require("express"); const session = require('express-session'); // npm install exp.. deepaal.tistory.com 위 코드에 해당되는 프론트 코드를 서술하는 글입니다. 아이디 : 비밀번호 : 회원가입 페이지입니다. 아이디 : 이름 : 비밀번호 : 비밀번호 확인 : 그냥 시각화만을 위한 코드라 멋은 없다.. 코드이다. 2022. 10. 23. [Express] 로그인 구현 (express-session 를 통한 세션작업 연습) const express = require("express"); const cors = require("cors"); const mysql = require("mysql"); const { query } = require("express"); const session = require('express-session'); // npm install express-session으로 설치해줌. const app = express(); const port = 3000; express-session 을 사용하기 위해 npm install express-session 명령어를 통해 설치해주었다. app.use(cors( { "origin" : "http://localhost:8081", credentials : t.. 2022. 10. 23. 이전 1 2 3 4 5 ··· 12 다음
