자바라 잡혀라 자바스크립트

액션과 계산, 데이터는 어디에나 적용할 수 있습니다. 장보기 과정 액션 냉장고 확인하기 액션 운전해서 상점으로 가기 액션 필요한 것 구입하기 액션 운전해서 집으로 오기 각 과정들이 액션인 이유 -냉장고 확인하기 : 냉장고를 확인하는 시점에 따라 냉장고에 있는 제품이 다르다. -운전해서 상점으로 가기 : 두 번 운전해서 상점에 가면 연료가 두 배로 든다. -필요한 것 구입하기 : 누군가 브로콜리를 구입하면 브로콜리가 다 떨어질 수도 있기 때문에 구입하는 시점이 중요하다. -운전해서 집으로 오기 : 이미 집에 있다면 상점에 있는 것이 아니기 때문에 상점에서 집으로 올 수 없습니다. 언제 하는지가 중요한 단계입니다. 각 액션들을 데이터와 계산으로 나눠보자 ex) 냉장고 확인하기 데이터 현재 재고 데이터 필요한..

계층형 설계 함수형 프로그래머는 유지보수를 잘 하기 위해 계층형 설계를 사용합니다. 각 계층은 코드의 변경 가능성에 따라 나눕니다. 각 계층은 그 아래에 있는 계층을 기반으로 만들어 집니다. 그래서 각 계층에 있는 코드는 더 안정적인 기반 위에 작성할 수 있습니다. 이런 구조로 소프트웨어를 만들면 코드를 쉽게 변경할 수 있습니다. 가장 위에 있는 코드는 의존성이 거의 없기 때문에 쉽게 바꿀 수 있습니다. 아래에 있는 코드들은 위에 있는 코드보다 의존성이 많아 바꾸기 어렵지만 자주 바뀌지 않습니다. 함수형 프로그래머는 이 아키텍처 패턴이 계층을 만들기 때문에 계층형 설계(stratfied design)이라고 부릅니다. 계층형 설계는 일반적으로 비즈니스 규칙, 도메인 규칙, 기술 스택 계층으로 나눕니다. 계..

(학문적 정의) 함수형 프로그래밍이란(functional programming FP) 1. 수학 함수를 사용하고 부수 효과side effect를 피하는 것이 특징인 프로그래밍 패러다임 2. 부수 효과 없이 순수 함수pure function만 사용하는 프로그래밍 스타일 - 부수효과 : 함수가 리턴값 이외에 하는 모든 일을 말한다. 부수효과는 함수를 부를 때마다 발생하기 때문에 문제가 될수 있다. ex) 메일 보내기, 전역 상태 수정하기 - 순수함수 (=수학함수) : 인자에만 의존하고 부수 효과가 없는 함수 인자에만 의존한다는 말은 같은 인자를 넣으면 항상 같은 결과를 돌려준다는 말이다. 실용적 측면에서 (학문적)함수형 프로그래밍 정의의 문제점 1. 부수 효과는 필요하다. - 부수 효과는 소프트웨어를 실행하..

App.js import React, { Component } from "react"; import './App.css' import Header from "./Header"; import Cardlist from './Cardlist' class App extends Component{ state = { serverData : [], flag : true, filteredData: [], enterSignal : true } // 검색하기 searchItem = (keyWord) => { // 검색어를 내려줘야한다 // e.preventDefault() const { serverData, filteredData } = this.state this.setState( prevState => ({ filte..

// 사이드바 만들기 App.js import './App.css' import React, { Component } from "react"; import Sidebar from "./Sidebar"; import Button from './components/Button'; const menus = [ // 메뉴데이터 { icon: '♜', title: 'HOME' }, { icon: '♞', title: 'ABOUT' }, { icon: '☻', title: 'SETTING' }, { icon: '♜', title: 'HOME' }, { icon: '♞', title: 'ABOUT' }, { icon: '☻', title: 'SETTING' } ] class App extends Component{ ..

// 동물 이미지 뷰어 만들기 import './App.css' import React, { Component } from "react"; import images from "./imageData"; import Button from "./components/Button"; class App extends Component{ state={ index : 0 } decreaseIndex = () =>{ const nextIndex = this.state.index - 1 this.setState({ index: (nextIndex < 0) ? images.length -1 : nextIndex}) // index 값이 0보다 작으면, 이미지 배열의 마지 막 사진을 선택한다(images.length - 1)..

// 영단어 삭제하기 App.js import './App.css' import React, { Component } from "react"; import Words from "./components/dummyData"; // import 뒤의 이름은 파일명과 달라도 된다. import Word from "./Word"; class App extends Component{ state={ words : Words } handleRemove = ( id, e ) => { const word = e.target.previousSibling.innerText // previousSibling : 이전 형제 요소 console.log(e.target, word) console.log(id) alert(`해당 단어..

내가 처음에 작성한 코드 sortItem = () => { this.setState({ flag : !this.state.flag, serverData : this.state.serverData.sort((a,b)=> {return this.state.flag ? a.price-b.price : b.price-a.price} ) }) } GPT가 알려준 잘못된 점 주어진 코드에서 this.state.serverData.sort() 메서드를 호출하면, 원본 배열인 this.state.serverData를 직접 변경하는 것입니다. 그리고 이 변경된 배열을 다시 setState 메서드로 설정하여 상태를 업데이트합니다. 그러나 React에서는 상태(state)를 업데이트할 때 직접 원본 데이터를 수정하는 것은 ..