김종현의 개발자 일기 김종현의 개발자 일기

input 1 : 사용자가 입력한 글 다뤄보기 input 태그에는 여러 가지가 있다.(사실 자바스크립트랑 문법이 똑같음) - text, range, date, number 기타 등등 input태그에 내용 입력시 코드를 실행하려면?? 이런 식으로 쓸 수 있는데, onChange 는 input 태그 안에 사용자가 타이핑할 때마다 안에 코드가 실행된다.(onInput과 동일하다고 보면 됨) input태그에 입력한 값 가져오는 법은?? 여기서 e는 ?? >> "이벤트 객체"라고 한다. >> 지금 발생하는 이벤트에 관련한 여러 기능이 담겨있다. 응용하여, 이렇게 코드를 짠 후 직접 input 태그에 작성해 보면,, 검사창에 이렇게 나오는 모습이다. 여기서 e.target.value 는 이벤트 발생한 html태그에..

props js 문법 중 함수 안에서 만든 변수는 함수 안에서만 사용 가능한데, 현재 내가 실습하고 있는 코드에선 컴포넌트(부모 컴포넌트) 안에 컴포넌트(자식 컴포넌트)가 있는데 부모 컴포넌트의 state를 자식 컴포넌트로 전송이 가능하다. 이럴 때 쓰는 문법이 props이다. props 사용법(부모 컴포넌트에서 자식 컴포넌트로 state 전송하는 법) 1. {modal == true ? : null} 2. 자식 컴포넌트쪽에 props 파라미터 등록 후 props. 작명 사용 function Modal(props) { return ( {props.practice[0]} 날짜 상세내용 ); } practice는 배열이므로 뒤에 원하는 순서를 정해준 것이며, 배열이 아닌 경우 그냥 쓰면 되겠지? 부모에서 자..

map : 많은 div들을 반복문으로 줄이기 map 함수란? : 값과 인덱스를 인자로 받아 자동으로 for문을 돌려 값을 빼도록 해준다. map 사용법 예시 1. array자료 갯수만큼 함수안의 코드 실행을 해준다. 2. 함수의 파라미터는 array안에 있던 자료 임 3. retrun 이후에 어떠한 값을 넣으면 array로 담아준다. 그럼 아래와 같이 보이는 것을 map 함수를 이용해서 줄여볼 수 있다. 보통 for 반복문을 돌려서 사용하면 되지만 JSX 안에서 사용할 수 없기 때문에 사용을 하려면 이렇게 사용하면 가능하지만, 상황과 본인의 스타일에 맞게 사용하면 된다. 처음에 이렇게 해보았더니 결과물이 이렇게 나와버렸다. practice 변수 안에는['남자코트추천', '강남우동추천', '파이썬독학']..

버튼기능활용 & state 변경하는 법 클릭을 하였을 때 숫자가 올라가는 것을 예시를 통해 배워보려 한다. 리액트음식점 좋아요 {good} 태그를 클릭을 하였을 때 좋아요 오른쪽에 숫자가 올라가게 해보고 싶다. import { useState } from "react"; let [good, setGood] = useState(0); 위 조건을 구성하기 위해선 함수를 써야 하므로 function Good() { setGood(good + 1); } 이렇게 구성하여 젤 위에 코드?? 자리에 Good을 넣으면 클릭할 때마다 숫자가 올라가는 것을 볼 수 있다. 여기서 그냥 넘어가면 안 되는 부분이 있다. state는 state변경함수를 써서 state를 변경해야 한다! >> 아니면 html 재렌더링이 안된다! ..

React 란? : React는 사용자 인터페이스(UI)를 만들기 위해 사용되는 자바스크립트 라이브러리이다. 왜 사용할까?? : 핸드폰에서 사용하는 app처럼 부드럽게 동작하는 html 페이지를 만들기 위해! : 물론 javascript로만 만들 수 있지만, 코드가 너무 복잡해지고 길어진다. 장점 1. single page application 2. html 재사용 편리(html의 양이 많은 사이트 같은 경우 ) 3. 같은 문법으로 모바일 app 개발도 가능!(물론 react native로, 하지만 문법이 살짝만 달라서 react 문법만 잘 익혀두면 사용하기 좋다고 한다.) 개발환경 셋팅하기 1. node.js 설치 2. vscode 에디터 검색해서 설치(난 이미 사용 중) 프로젝트 생성 1. 작업용 폴..