하얀성의 개발 메타인지

데이터 구조 예시.(이 중에서 필요한 데이터만 불러들여오면 된다.) { "coord": { "lon": 126.9778, "lat": 37.5683 }, "weather": [ { "id": 800, "main": "Clear", "description": "clear sky", "icon": "01d" } ], "base": "stations", "main": { "temp": 269.34, "feels_like": 264.09, "temp_min": 268.84, "temp_max": 270.81, "pressure": 1030, "humidity": 33 }, "visibility": 10000, "wind": { "speed": 4.12, "deg": 330 }, "clouds": { "all":..

react 상품 등록 폼 만들기 onClick, onChange, e.target.value/name 이나 함수 관련 내용을 내것으로 만들기 위해서 간단히 제작. useRef() 사용해서 input 태그상태 조절해보기 1. useRef() 생성해서 변수에 저장 2. ref={변수}를 원하는 배열에 집어넣어서 제어 -> 자꾸 넣는걸 까먹는다. 두 경우 모두, useRef는 렌더링 사이에도 값이 유지되는 "상자"처럼 작동합니다. 그러나 대부분의 사용 사례에서는 DOM 요소를 참조하기 위해 null로 초기화하는 것이 일반적입니다. useRef는 리렌더링을 발생시키지 않으며, .current 속성을 통해 현재 참조된 값을 얻을 수 있습니다. const 상품코드Input = useRef(null); const 상..

>git for-each-ref --sort=-committerdate refs/heads/ 527b32b86c2942ec672a7ed9b2a275e531d2c commit refs/heads/diaryEdit a33f0ee0bc724b365690c79a84589c7343caf commit refs/heads/diaryDelete 9cd0013b64a01ea7729f1834c6b927a8af095 commit refs/heads/diaryDataInsert fba998e364828d71a8608b1bb6ebeb4ed38d5 commit refs/heads/useRef 80a65a62a64e20b624aad76d4a75928e25f1e5a commit refs/heads/diary 80a65a62a64eb..

const tabs = ( // 출력x {Object.values(TabType).map((tabType) => { return {TabLabel[tabType]} })} ); 왜 윗처럼 쓰면 출력이 안되고 아래처럼 적어야 되는걸까? const tabs = ( // 출력 o {Object.values(TabType).map((tabType) => { return {TabLabel[tabType]} })} ); 이 코드에서 문제는 return 문 다음에 오는 태그가 같은 줄에 있지 않다는 것입니다. JavaScript는 세미콜론을 자동으로 삽입하는 'Automatic Semicolon Insertion' 규칙을 따릅니다. 이 규칙에 따라, JavaScript 엔진은 return 문 다음에 새로운 줄이 시작..

import store from "./js/Store.js"; class App extends React.Component { constructor() { super(); this.state = { searchKeyword: "", searchResult: [], submitted: false, }; } handleSubmit(event) { event.preventDefault(); this.search(this.state.searchKeyword); } search(searchKeyword) { const searchResult = store.search(searchKeyword); this.setState({ searchResult, submitted: true, }); } handleReset()..

handleReset() { // this.setState({searchKeyword: "" }) this.setState(() => { return { searchKeyword: ""} }, ()=> { console.log("TODO: handleReset", this.state.searchKeyword); }) } setState()는 비동기로 동작한다. 이런 방식으로 this.setState를 사용하면, 상태 업데이트가 완료된 후 특정 작업을 수행할 수 있다. 이는 React에서 상태 업데이트가 비동기적으로 이루어지기 때문에 유용하다. 상태 업데이트가 즉시 반영되지 않을 수 있으므로, 업데이트가 완료된 이후에 특정 로직을 실행해야 할 때 콜백 함수를 사용한다. handleReset() { this..

useState 사용이유 리액트는 mvc 패턴처럼 직접 연결 후 값을 수정하는게 아니라, react의 메소드인 useState()를 사용해서 값을 수정하도록 해줘야 함(상태 갱신) handleChangeInput(event) { // this.state.searchKeyword = event.target.value; // this.forceUpdate() this.setState({ searchKeyword: event.target.value, }) } 리액트에서 input을 제대로 다루려면 브라우져 상태 관리를 리액트 안으로 가져와야 하는데 이 때 사용할 수 있는 것이 리액트 컴포넌트. 클래스로 제공하는 리액트 컴포넌트는 상태 관리를 위한 내부 변수 state를 가짐. 이 값을 input의 value로..

html에 정의한 객체 데이터 간단히 출력해보고 변경해서 출력해보기 코드 실행 const state = { _data: "Hello world", } const render = () => document.body.innerHTML = `${state.data}` Object.defineProperty(state, "data", { get() { console.log('get') return state._data }, set(value) { console.log('set') state._data = value render(); } }) render(); 이 코드에서 state._data와 state.data는 다음과 같은 역할을 합니다: state._data: 이것은 실제 값을 저장하는 내부 변수입니다. ..

index.html에서 검색 키워드 단어에 따른 데이터(사진, 글)을 출력할 공간생성. model storeage(데이터 저장 객체), main, Store 등 main.js에 아래와 같이 검색 결과를 나타낼 생성자 생성. searchResultView: new SearchResultView(), view: 받아온 데이터를 출력하는 생성자. export default class SearchResultView extends View { constructor() { super(qs('#search-result-view')) this.template = new Template(); } show (data = []) { this.element.innerHTML = data.length > 0 ? this.tem..

form의 새로고침을 막아서 값이 지워지는 것 막기 bindEvents() { on(this.inputElement, "keyup", () => this.handleKeyup()); on(this.element, "submit", event => this.handleSubmit(event)) } handleSubmit(event){ event.preventDefault(); console.log(tag, 'handleSubmit') } form이 제출될 때 event.preventDefault();를 사용하지 않으면, 폼의 기본 동작인 페이지 새로고침이 발생합니다. 이 때문에 다음과 같은 일이 발생합니다: 페이지 새로고침: 폼 제출은 기본적으로 페이지를 새로고침하거나 다른 페이지로 이동시킵니다. 이 과정..