이제 리덕스 툴킷의 GET을 혼자 구현해 보았는데, 리덕스만 하다가 리덕스 툴킷이랑 thunk까지 같이 하면서 솔직히 더 헷갈린 거 같은데 그래도 어찌저찌 GET을 완료해 보았다. 솔직히 하면서도 이게 왜 돼?? 이런 생각도 했고, 컴퓨터는 하나하나 떠먹여 줘야 되는구나 싶은 생각에 정말 애기 같다는 생각을 했다.

서버리스는 애플리케이션을 빌드하고, 백엔드 디자인하는 방법을 바꾸고 있다. 그래서 서버 + 리스 = 서버가 없다고 생각하는데 그건 불가능 즉, 백엔드인데 서버를 직접 관리하지 않는 경우를 뜻한다. 어떻게 서버리스가 탄생했을까? 옛날에는 직접 서버를 사야 했다. 거실에 콘센트 꼽고 사용하는 그런 느낌? 즉, 서버의 하드웨어, 소프트웨어 둘 다 관리했다는 것이다. 정전되면 서버 다운됨...또, 사람들 많이 들어오면 메모리 충분하지 않아서 겁나 뛰어가서 메모리 사 와야 했다. 그런데 이때 아마존이 등장하면서 EC2라는 것을 선보이면서 거실에 콘센트 꼽아서 사용하는 대신 아마존에 돈을 지불하면 아마존이 사용하는 최신식 서버를 빌려서 사용할 수 있게 된다. 덕분에 정전이나 메모리 사러 뛰어나가지 않아도 되게 되면..

Virtual DOM 왜 리액트에서 이걸 쓸까? DOM이란? HTML과 상호작용하는 API를 말한다. ID, 노드와 트리 형태로 나타내는 게 DOM이다.( 말 그대로 트리처럼 보인다고 트리구조임) HTML은 DOM이 아니다. 브라우저의 작동과정 1) DOM Tree 생성 - 브라우저가 HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱 해서 노드 트리 생성 2) Render Tree 생성 - 스타일(CSS 등) 속성 참조하여 DOM 트리에 따라 새로운 트리, 렌더 트리를 만듭니다. 3) Layout(reflow) - 좌표가 주어진다. 4) Painting - 랜더링된 값에 색을 입힌다. 각 노드를 거쳐 paint 메서드 호출 문제가 되는 상황? 복잡해지는 구조입니다. DOM에 변화생기면, 렌더 트리..

2022.10.7 P3 이큐브랩 세션을 들었다. 이큐브랩은 현재 쓰레기통 관련 사업을 하고 있는 회사이고, 클린 큐브가 대표적인 상품이었다. 클린 큐브는 우리가 지나가면서 보이는 쓰레기통에 쓰레기를 얹고 가지 누르고 가는 일은 없으니까 4~500kg의 힘으로 일정 수준의 쓰레기가 찬다면 자동으로 눌러주는 시스템을 활용했고, 이 동작이 태양광을 통해 이뤄지는 점이 정말 환경을 생각하는 게 느껴졌다. 세션을 진행해주신분은 현재 8년째 재직 중인데 회사에 대한 사랑이 엄청 넘쳐 보였다. 자신의 회사 제품을 애기라고 부르고 달래준다고 말씀하셨는데, 사실 그 부분에서 정말 좋은 회사라는 게 느껴졌다. 내가 생각하는 좋은 직원이 회사에 대한 애착이 있는 곳이라고 생각했는데 정확히 그 부분에 대해서 말씀하시니까 저말..

class 문법은 간단하게 말하면 변수, 함수 많이 보관하는 통이다. 필수적으로 들어가야 할 내용은 constructor, super, render가 들어간다. class Modal2 extends React.Component{ constructor(){ super() } render(){ return( 안녕 ) } } class에서 컴포넌트 만들려면 this.state =() 이런 형식으로 컴포넌트를 만들 수 있다. class Modal2 extends React.Component { constructor(props) { super(props); this.state = { name: "kim", age: 20, }; } 중괄호 {} 넣으면 변수랑 state를 넣을 수 있다. render() { retu..

오늘도 덩어리로 코드를 들고와서 미안하다 (미래의 나에게) 줄여서 보여줄 수 있을까 했는데 설명하다 보니까 하나하나가 다 필요하다 제웬장 글작성 시도 3번째 이번엔 성공한다 ㅂㄷㅂㄷ... /*eslint-disable*/ import "./App.css"; import { useState } from "react"; function App() { let [글제목, 글제목변경] = useState([ "남자 코트 추천", "강남 우동 맛집", "파이썬 독학", ]); let [따봉, 따봉변경] = useState([0, 0, 0]); let [modal, setModal] = useState(false); let [title, setTitle] = useState(0); let [입력값, 입력값변경] = ..

필요 없는 부분은 최대한 다 지웠는데 기초부터 이해하려고 하다 보니까 코드가 상당히 길죠? 자~이제 map 함수에서 어.떻.게 아래 사진처럼 이모티콘을 누르면 좋아요를 따로 추가할 수 있는지 알아보도록 하죠 코드를 보자면 저희는 useState에서 [따봉, 따봉 변경], [글 제목, 글 제목 변경]으로 초깃값과 변경 값을 만들어 주었습니다. function App() { let post = "강남 우동 맛집"; let [글제목, 글제목변경] = useState([ "남자 코트 추천", "강남 우동 맛집", "파이썬 독학", ]); let [따봉, 따봉변경] = useState([0, 0, 0]); return ( {글제목.map(function (a, i) { return ( { setModal(true..

Java script를 하면서 이문제는 정말 꼭 집고 넘어가야 하는거 같다. 정말 기본중에 기본이라서 같이 꼭 집고 넘어가도록 하자 1. 기본 타입 (Primitive Type) 기본 데이터 타입은 정수, 실수, 문자, 논리 리터럴을 직접 저장하는 타입을 말한다.\ 정수 타입 : byte, char, short, int, long 실수 타입 : float, double 논리 타입 : boolean 2. 참조 타입(Reference Type) 참조 타입이란 객체의 번지를 참조하는 타입이다. 배열, 열거, 클래스, 인터페이스 타입을 말한다. 기본 타입과 참조 타입의 차이는 저장되는 값이 무엇인가의 차이다. 기본 타입은 실제 값을 변수에 저장한다. 참조 타입은 배열, 열거, 클래스, 인터페이스를 이용해서 선언..

state 변경함수 동작원리 state 변경함수를 쓸 때 기존state === 신규state 이렇게 먼저 검사해봅니다. array/object 동작원리 1. 자바스크립트는 array/object 자료를 하나 만들면 예를 들어서 let arr = [1,2,3] 이렇게 만들면 [1,2,3] 자료는 램이라는 가상공간에 몰래 저장이 되고 let arr 변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨있습니다. array, object 자료 다룰 때는 원본 데이터를 직접 조작하는 것 보다는 기존값은 보존해주는 식으로 코드짜는게 좋은관습입니다. (왜냐면 원본 막 바꿔버렸을 때 갑자기 원본이 필요해질 수도 있기 때문입니다 : ) 정리 리액트에서 array/object state를 수정하고 싶으면 독립적인 카피본을 ..

Todo list 만드는 게 기초라니 참.. 당황스럽고 어이없죠? 저도 그래요 이해 하는데 시간이 굉장히 걸리네요 :( 이제 제가 이해한걸 여러분에게 말씀드려볼게요 일단 전체 코드는 이것이고 밑에 설명 넣어두겠습니다. import React, { useState } from "react"; function TodoList() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { retur..