하얀성의 개발 메타인지

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();를 사용하지 않으면, 폼의 기본 동작인 페이지 새로고침이 발생합니다. 이 때문에 다음과 같은 일이 발생합니다: 페이지 새로고침: 폼 제출은 기본적으로 페이지를 새로고침하거나 다른 페이지로 이동시킵니다. 이 과정..

class View { constructor(element) { // ... 부모 클래스 생성자의 코드 } } class SearchFormView extends View { constructor() { super(qs("#search-form-view")); // View 클래스의 생성자 호출 // ... 자식 클래스 생성자의 추가 코드 } } super는 상속받은 부모 클래스의 생성자를 호출한다. 그것을 통해 자식에서 부른 요소를 부모를 통해 가공해서 저장한 뒤, 부모에서 정의한 변수나 함수를 사용할 수 있도록 해준다. export default class View { constructor(element) { console.log(tag, "constructor"); if (!element) thro..

다 깔리면 npm start를 이용해 (터미널에 안내됨) 시작하면 끝 종료할 때는 ctrl + c를 누르면 된다! 늘 시작과 종료는 이런 방식으로 진행하면 된다. 태그안에 {변수명}을 통해 변수를 태그안에서 사용가능하다. import를 통해 받아오고, export를 통해 정보를 내보낸다. 이런식으로 태그를 감싸는게 가능하다.

property(속성)의 복수형 component의 속성을 의미 → component에 전달할 정보를 담고 있는 자바스크립트 객체를 뜻한다. 또한, ⭐Read-Only라는 중요한 특징을 갖는다. 즉, element 생성 도중에 값이 바뀔 수 없다. 붕어빵을 굽는 중간에 속재료를 바꿀 수 없다는 것을 떠올리면 된다! 따라서 값을 변경하기 위해선 아예 새로운 element를 생성해야 한다. props의 기본적인 사용법은 다음과 같다. (price에서와 같이 문자열이 아닌 정수, 변수, 다른 컴포넌트 등이 들어갈 때에는 중괄호를 사용해야 한다.) function Product(props) { return ( ) } // props 객체 { name: '노트', desc: '노트입니다', price = 1000..