코딩 일지

개념 useEffect란, 페이지가 맨 처음에 랜더링 될 때, 또는 변수의 값이 변경될 때 실행되는 함수이다. 클릭할 때마다 1씩 증가하는 간단한 버튼을 만들어보자. 예제 코드 App.js import Count from './Commponents/Count.jsx'; const App = () => { return ( useEffect ); } export default App; Count.jsx import React,{useState,useEffect} from 'react' const Count = () =>{ const [count, setCount] = useState(0) useEffect(()=>{ console.log(count) }) useEffect(()=>{ console.log('..

목차 - 리액트 cli 다운로드 - hooks - 로그인 구현 - 삼항연산자 조건문 true일 때만 or false일때만 리액트 CLI 다운로드 터미널에서 npx create-react-app [디렉토리명] 를 입력한다.(오래 걸림) npx create-react-app [디렉토리명]로 다운로드 시, 기본적인 세팅은 다 되어있다. webpack, babel, react, react-dom 등등... 많은 기능들이 설치된다. 다 받아지면, cd [디렉토리명] npm run start Hooks 함수형 컴포넌트에서, 상태를 만들 수가 없고, 생명주기를 사용할 수 없다는 단점을 개선한 함수 모음이 바로 hooks이다.. 장점 : this 생산성 / 코드 가독성 재활용/ 커스텀 훅 로그인 구현하기 App.jsx..

목차 -웹팩이란? -entry -output -loaders -plugins -mode -웹팩 설치 및 사용법 웹팩이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 모듈 번들러는 다음과 같은 장점이 존재한다. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다(예를 들면 typescript). 물론, 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있으나, 웹팩에서는 ..

기본 세팅 코드

기본 설정 세팅 코드 구현 css body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .square { background: #fff; border: 1px solid #999; float: left; font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; margin-right: -1px; margin-top: -1px; padding:..

목차 - props - - 기본 세팅 props Props는 컴포넌트의 속성값이다. 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다. 예시 코드 html 엘리먼트

쿠키 https://bitkunst.tistory.com/entry/Nodejs-express-5-%EC%BF%A0%ED%82%A4cookie Node.js - express (5) 쿠키(cookie) 이번 포스팅에서는 쿠키(cookie)의 개념에 대해 알아보고자 한다. 쿠키란? 쿠키 구현 방식 쿠키 속성 쿠키(cookie)란 HTTP의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 bitkunst.tistory.com 오늘 로그인 페이지 만든 과정 아래의 순서대로 전개하겠다. 1. 메인 페이지에서 로그인버튼을 클릭하면, 아이디, 패스워드를 입력하는 로그인 페이지로 이동 2. 아이디, 패스워드를 입력하고 로그인 버튼을 눌러 제출을 하면, 1) "아이디" 님 환영..

send : 텍스트 자체로 응답을 준다.(돌려주는 행위) render : 파일을 가져다가 응답을 준다. 가장 먼저, npm install express nunjucks 해주는 것 잊지말기. 자바스크립트 코드 (HTML 코드는 자바스크립트 코드 끝나고 바로 작성하였다.) const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views',{ express:app, }) express 와 nunjucks를 외부파일에서 끌어와서 변수에 저장해준다. express 와 nunjucks를 세팅해준다. Node.js..

목차 - 구조분해 할당(비구조 할당) - 객체 리터럴 - require - 자바스크립트 구동원리 - 랜덤함수 - promise 구조분해 할당 let obj = { a:10, b:20, c:{ d:30, } } let {a,b,c} = obj //문법이 이럼. //let a, b, c = obj 하면 a:10 b:20 ... 이런식으로 출력됨 console.log(a, b, c) //변수 명을 변경하려면? let {b:result} = obj //이렇게하면 b가 사라집니다. 변수명은 result가 됨. 객체리터럴 let a =10 let b = 20 let c = 30 //이녀석들을 한번에 다 객체에 담으려면? let obj2 = { a, b, c, } // let obj2 = { // a:a, // b:..

목차 - setInterval - setTimeout - querySelectorAll - onClick - clearInterval - setInterval 매 초마다 같은 동작을 실행하고 싶을 때 사용한다. ex) 1초마다 1을 찍고싶다. 첫번째 인자 값은 콜백함수를 넣는다. 두번째 인자 값은 시간을 넣어주면 된다. 1000 = 1s setInterval(podo, 1000) function podo(){ console.log(1) } //1초마다 1이 출력됨 setTimeout 내가 실행하고 싶은 시간을 설정값에 따라 실행한다. setTimeout(podo, 1000) //1초 후에 딱한번 실행하겠다는 뜻이다 아래의 출력 결과는? console.log(4) console.log(3) setTimeo..