React 연습

const [keyword, setKeyword] = useState(""); const onChange = (event) => setKeyword/*4*/(event.target.value/*3*/);/*2*/ ... return( ) input을 만들고 event listener을 연결한다. onChange function이 작동할 때 argument로 event를 받는다. event를 발생시킨 input에서 value를 받는다. 받은 value를 'keyword' state에 넣는다. keyword를 가져와 input의 value로 사용한다.

• format_list_bulleted 코딩/React
• · 2023. 5. 23.
• textsms

GitHub의 markdown 파일에 이미지 넣기

markdown image input issue github에 넣고자하는 image를 push하고 image링크를 넣어야 적용된다. ?raw=true 를 적어야 제대로 적용된다.

• format_list_bulleted 코딩
• · 2023. 5. 23.
• textsms

useEffect()

useEffect() 코드를 한 번만 호출하는 함수 import{useEffect} from "react"; useEffect(한 번만 실행하고 싶은 코드, 배열);ex) const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log("I run all the time"); useEffect(() => { console.log("CALL THE API..."); }, []);결과(console) click할 때 마다 "I run all the time"은 실행되지만, "CALL THE API...."는 처음 한 번만 실행됨 useEffect(2) [배열]안에 적용하고자 하는 변수를..

• format_list_bulleted 코딩/React
• · 2023. 5. 23.
• textsms

React(1) - 설치

React App setup 리액트 프로젝트를 설치하는 것을 실습하였습니다. 설치 ~ 실행: VScode Node.js create-react-app npm start Node.js는 브라우저 밖에서 JS를 실행할 수 있게 해주는 JS 구동 환경 입니다. npm을 이용해 설치하거나 Node.js org에서 설치 가능합니다. node -v 설치된 node.js의 버전을 확인합니다. create react app React기반의 SPA를 만들 때 필요한 파일을 설치하는 명령 *SPA: 단일 페이지 애플리케이션 CRA를 설치하면 React코드의 수정과 동시에 웹 페이지의 모습이 바뀌어 개발하는 과정에서의 시간이 효율적으로 절약됩니다. 설치하고자 하는 폴더를 vscode에서 열고, terminal에서 입력 np..

• format_list_bulleted 코딩/React
• · 2023. 5. 23.
• textsms

[lv.0] Javascript 최빈값 구하기

예를 들어, array = [1,2,3,3,3,4]의 최빈값은 가장 많은 빈도의 3이어야 하고, array = [1,1,2,2]의 최빈값은 1, 2의 빈도수가 같으므로 출력값은 -1로 나와야 합니다. 1. 각 원소의 개수를 센다. ex) a의 개수 = 3, 최빈값 = a 2. 연속한 배열값이 같다면 수를 증가하고, 다르면 개수를 비교한다. 3. 앞서 셌던 숫자의 개수보다 지금의 개수가 많다면, 최빈값이 바뀐다. ex) b의 개수 = 4, 최빈값 = b 4. 개수가 같다면 최빈값은 -1이다. function solution(array) { const length = array.length; //array 길이 let mode; // 최빈값 let Subcount = 0; // 최빈값의 수 let count..

• format_list_bulleted 코딩/Javascript
• · 2023. 4. 20.
• textsms