[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. [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. [JavaScript] Promise (Custom적인 접근) function job1(){ return new Promise(function(resolve, reject){ setTimeout(function(){ reject('job1 failed!'); }, 2000); }); } function job2() { return new Promise(function (resolve, reject) { setTimeout(function () { resolve('job2 resolved!'); }, 2000); }); } job1 함수는 new Promise 함수의 결과를 return한다. 새로운 Promise를 선언할 때, 성공했을 때의 결과와 실패했을 때의 함수가 가져올 매개변수가 필요하므로 선언해준다.(resolve, reject) 비동기를 적절하게 설명하기 .. 2022. 10. 14. [JavaScript] async & await 사용 비동기적 처리에 callback함수가 애용되면서 콜백 지옥에 빠지게들 된다. 동기적 코드 서술방식으로 비동기적 처리를 할 수 있도록 async, await가 사용된다. 노트에 필기하는 만큼 글로 표현하고 싶은데, 시간을 좀 더 들여서 연구해봐야겠다. 2022. 10. 14. [JavaScript] Promise(then, catch) 2022. 10. 14. 이전 1 2 3 다음
