들어가기 앞서서 알아두어야 할 메소드 prev() 메소드 - 이전에 위치한 형제 요소 선택 next()메소드- 선택한 요소의 바로 다음에 위치해 있는 형제 요소를 선택 하는 것입니다.! 자 ~ 이제 보기 싫지만 봐야하는 코드를 볼까요? 어쩔 수 없이 코드를 봐야지만 이해할 수 있답니다~~ Cleanup frncion 은 사실 많이 쓰는건 아니지만, 그래도 알면 좋아요 ㅎ Cleanup frncion을 보고 싶으신 분은 구분선 아래로 스크롤을 내리시고 아래 코드 설명 듣고 싶으신 분은 차근차근 내려가시면 되겠습니다. import { func } from "prop-types"; import { useState, useEffect } from "react"; function Hello() { function..

냅다 코드블럭이 있으니 당황했겠지? 내가 봐도 그렇다 ㅎ 일단 앞의 useState의 글과 이어진다. 분과 시간 이 둘이 교차되면서 값이 나오길 원했고 위에 코드결과가 교차되면서 나오는 결과이다. const [flipped, setFlipped] = React.useState(false); const onChange = (event) => { setAmount(event.target.value); }; const onFlip = () => { reset(); setFlipped((current) => !current); }; 먼저 위에부터 설명하자면 우리는 버튼을 하나 더 만들었는데 그 버튼은 flip버튼이다. 누르면 분과 시간 중에 원하는 곳에서 입력할 수 있도록 flip을 만들었는데, useState..

기존 값에서 새로운 값을 가져오는 것에는 두 가지 방법이 있다. 1. setCounterr(counter +1); 2.setCounter((current) => current + 1); 1번 같은 경우에는 초기값을 콕 집어서 +1 씩 증가시켜 주었지만 초기값에 오류가 있을 경우에는 좋지 않으므로 초기값을 가져오는 경우에는 2번 current함수를 불러와서 많이 쓴다. 1. 이 코드를 작성하면서 배운점은 일단 React에서는 for, class는 javascript에서 이미 선점한 용어이기 때문에 사용하지 못하고 대신 for = htmlFor class = className 이렇게 사용한다. 2. input 값 안에 value를 주고 onChange라는 이벤트를 실행시키면 현재 실행(작성) 중인 내용물이 ..

InputSample.js import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } export default InputSample; input 에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input 이 값이 비워지도록 구현을 해보겠습니다. 이번에도, useState 를 사용합니다. 이번에는 input 의 onChange 라는 이벤트를 사용하는데..

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데요, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 이번에는 useState 라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나입니다. Counter 에서 버튼이 클릭되는 이벤트가 발생 했을 때, 특정 함수가 호출되도록 설정을 해보겠습니다. Counter.js import React from 'react'; function Counter() { const onIncrease = () => { console.log('+1') } const onDecrease = () => { console.log('-1'); } return ( 0 +1 -1 ..

props 값 설정을 생략하면 ={true} 컴포넌트의 props 값을 설정하게 될 때 만약 props 이름만 작성하고 값 설정을 생략한다면, 이를 true 로 설정한 것으로 간주합니다. 예를 들자면, App.js import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ); } export default App; 이렇게 isSpecial 이름만 넣어주면 isSpecial={true} 와 동일한 의미입니다. Hello.js import React from 'react'; function Hello({ color, name, isSpecial }) { retu..

자바스크립트는 언어이고, ES는 규격, 표준 죽 스펙이다. js는 10일이라는 정말 짧은 기간에 만들어진 언어이기 때문에 설계상의 미스가 있을 수 밖에 없다. 그렇기에 지속적으로 버전이 업그래이드 되면서 기능이 늘어 ES5,6 등이 생겨나게 되었다. 다음과 같이 살표 보자! ES5 (2009) ES4는 너무 급변하는 내용이 있었던지 거절되고, 바로 ES5가 나왔다. 배열 배열 배열과 관련해서 새로운 메소드들이 많이 생겼는데 대표적으로 forEach, map, filter, reduce, some, every와 같은 순환 메소드들이 생겼다. 이 메소드들은 개발자가 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여주는 효과가 있다. 객체 일단 눈에 띄는 점은 객체의 프로퍼티에 대한 설정을 할 수 있다는 것..

사실 함수 선언문과 함수 표현식은 실행하는 방식과 동장하는 방식도 동일해서 차이를 잘 느끼지 못합니다. 그럼 그 차이가 뭔지 살펴 보시죠 함수 선언문 어디서든 호출할 수 있습니다. 기본적으로 자바스크립트는 위에서 아래로 차례대로 한줄 씩 읽으면서 실행합니다. 이렇게 순차적으로 실행되고 즉시 반환하는 프로그래밍 언어를 인터프린터 언어라고 합니다. 그런데 이 코드는 실행이 됩니다. 왜 일까요? 이것은 자바 스크립트 내부 알고리즘 때문인데요 자바스크립트는 실행전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해 둡니다. 그래서 우리가 보는 범위(ex. function 함수 안)와 다르게 사용가능한 범위가 굉장히 커지는데요 이것을 호이스팅(hoisting)이라고 합니다. 함수 표현식 코드에 도달하면 생성..

JWT JWT는 . 을 구분자로 헤더(Header).내용(payload).서명(signature)의 문자열 조합니다. Header 에는 JWT 에서 사용할 타입과 해시 알고리즘의 종류가 담긴다. Payload 는 서버에서 첨부한 사용자 권한 정보와 데이터가 담긴다. 토큰에서 사용할 정보의 조각들인 Claim 이 담겨있다. (실제 JWT 를 통해서 알 수 있는 데이터) 즉, 서버와 클라이언트가 주고받는 시스템에서 실제로 사용될 정보에 대한 내용을 담고 있는 섹션이다. ※ Claim : key-value 형식으로 이루어진 한 쌍의 정보 Signature 에는 Header, Payload 를 Base64 URL-safe Encode 를 한 이후 Header 에 명시된 해시함수를 적용하고, 개인키(Private..

※서비스를 만들다 보면 같거나 비슷한 동작들이 생기기 마련이죠? 팝업, 결재 등 이런 것들은 저장해서 재활용하는게 좋겠죠~ 함수는 이걸 가능하게 해주는데요 저희는 주로 console, alert, confirm을 씁니다! 그럼 다음 그림을 볼까요? 이 함수는 함수명 뒤에 괄호를 붙혀서 호출할 수 있습니다. 매개변수가 필요하다면 괄호 안에 넣어줍니다. ※ 함수의 매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다. 또한, 함수의 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 변수를 가리킵니다. 이렇게 들으면 이해되지 않을 수 있으니 매개변수가 있는 함수의 예를 들어 보자면 function sayHello(name){ con..