Build the Needs

프로토콜 : 양측이 상호작용하는 방식에 관한 규칙 정의(매우 정확하게 명시된다) 많은 프로토콜 중 두 가지의 핵심 프로토콜이 있는데 IP는 인터넷 프로토콜(Internet Protocol)로 개별 패킷의 형식을 지정하고 패킷을 전송하는 방법을 정의 TCP는 전송 제어 프로토콜(Transmission Control Protocol)로 IP 패킷을 데이터 스트림으로 결합하고 서비스에 연결하는 방법을 정의 -> 이 두 프로토콜이 IP + TCP가 되어 TCP/IP라고 한다. 게이트웨이 = IP패킷을 라우팅하게 되지만 각 물리적 네트워크에 IP 패킷을 전달하기 위한 고유한 형식 존재 각 게이트웨이는 패킷이 들어오고 나갈때 네트워크 형식과 IP 형식 간 변환을 수행. IP 레벨 위에는 TCP가 안정적인 통신을 제..

1970 - 어셈블러, 컴파일러, 텍스트 편집기 같은 프로그래머 도구와 운영체제까지 작성할 목적으로 사용할 언어들이 만들어짐 이중에 가장 성공한 언어 -> C언어(데니스 리치에 의해 벨 연구소에서 개발[1973]) C언어 자체는 변경된 부분이 많지 않아 오늘날의 C프로그램은 30~40년 전 코드와 비슷합니다. #include int main() { int num, sum; sum = 0; while (scanf("%d", &num) != EOF && num != 0) sum = sum + num printf("%d\n", sum); return 0; } 1980년대쯤에는 규모가 매우 큰 프로그램의 복잡성은 C언어만으로 풀기에는 역부족이었기에 새로 설계된 언어들이 생겨났으면 그 중 가장 유명한 것은 C++..

우선 styled components, router, redux, 다른 hook 등 다양한 방법을 연결시켜보면서 state과 props가 왜 중요한지 다시금 깨달은 순간인것을 알 수 있었습니다. 특히 props와 state만으로는 부모 컴포넌트가 state를 props로 자식 컴포넌트한테 물려주는 형식인데 너무 많은 자식 컴포넌트가 생긴경우 초기 부모 컴포넌트한테 내려받을려면 무수히 많은 다른 자식컴포넌트를 거쳐야 하기에 생긴 redux(필요한 state 저장소) 그리고 router를 통해 다른 상세 페이지를 넘어 갈 수 있는 부분과 리렌더링이 일어나는 경우가 부모 state가 변경되어 props가 변경되는 경우나, 자식 컴포넌트가 변하는 경우나, 강제 업데이트 등 다양한 요소로 리렌더링이 일어날 수 있..

//처음 App.js import React from "react"; import { useDispatch, useSelector } from "react-redux"; //사용할 Action Creator import를 해서 사용 import { minusOne, plusOne } from "./redux/modules/counter"; const App = () => { const dispatch = useDispatch(); const number = useSelector((state) => state.counter.number); console.log(number); return ( {number} { dispatch(plusOne()); //{type: "PLUS_ONE"} 대신 이렇게 사용 }..

🎁캐시의 의미 👉 자주 쓰는 데이터를 원래 저장된 곳보다 속도가 더 빠른 임시 저장소(캐시)에 저장해서, 데이터를 빠르게 읽어올 수 있게끔 하는 것이 캐시 크게 두가지 경우 ex1) CPU 코어와 메모리 사이의 병목 현상 완화(프로세서에서의 캐시) ex2) 웹 브라우저 캐시 파일은, 하드디스크와 웹페이지 사이의 병목 현상을 완화(메모리, 디스크, 웹서버에서의 캐시) 📌병목현상(bottleneck) 👉 즉 담을 수 있는 데이터의 양은 적으나 한꺼번에 많은 양의 데이터가 유입 됨으로써 컴퓨터가 느려지는 현상 프로세서에서의 캐시란 CPU와 메인메모리의 처리속도에서 크게 효과가 나는데 매번 일반적으로 처리하면 속도가 현저히 느리기 때문에 오버헤드가 커지게 되고 자주 쓰는 데이터를 메인메모리보다 더 빠른 캐시 메..

버킷리스트 1. 가장 먼저 뷰를 만들고 (텍스트를 입력하는 input), 입력한거를 추가하기 위한 버튼(이거 먼저 만들기) 2. Ref를 가지고서 이 input을 가지고 오는거 3. input에서 "text"를 가져와야 하는데 추가하기 버튼 눌렀을 때 가지고 와야함 4. App.js에 App 컴포넌트 State에 그 텍스트를 추가하면 됨 목표는 이렇게 하나씩 리스트가 붙게 만드는것이며 style.css를 사용하지 않고 css 스타일링은 모두 styled-components를 활용한다. //App.js import React from "react"; import BucketList from "./BucketList"; //import "./style.css"; import styled from "style..

원래 getElementbyId로 데이터를 가져오고 카드에 하나씩 넣을때 appendChild해서 넣었었다 => 근데 이 두개는 진짜 가상DOM이 아닌 진짜 DOM을 건드렸었던 것이니다 클래스형 컴포넌트는 app.js에서 다 만들어줬었다. //App.js constructor(props) { super(props); //부모클래스에 있는걸 가져오기(React.Component) //내상태값(내 컴포넌트가 갖고 있는 데이터), App이라는 클래스형 컴포넌트는 //지금 State라는 데이터를 나를 이 App이라는 클래스안에다가 넣어놓기 this.state = { list: ["영화관가기", "매일 책 읽기", "수영 배우기"], }; //Ref를 어디에 넣어줄지 정해주는것은 이부분(React.createRe..

일단은 함수형 컴포넌트에서 관리하는거니까 -> 새 컴포넌트 만들기 Nemo.js 폴더를 src밑에 만들고 //함수형 컴포넌트 기본양식 import React from "react"; //화살표 const Nemo = (props) => { return null; } export default Nemo 그리고 App.js에서 import React from "react"; //이부분이 import해오는 부분 import Nemo from "./Nemo.js"; class App extends React.Component { constructor(props) { super(props); this.state = { //이 숫자를 가지고 배열을 만들고 배열을 만든 후 배열만큼 map돌려주면됨 count: 3, ..

state 관리 단방향 데이터 흐름? 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야함 why 단방향? 부모컴포넌트의 state가 업데이트가 되면서 자식 컴포넌트도 리렌더링이 일어남 생성-> 수정->삭제 수정이 되는경우가 4가지였는데 -> 컴포넌트자체 state가 바뀔때 -> 내 props가 바뀌는 경우 -> 부모가 리렌더링 되는 경우(부모의 무언가가 바뀌는경우) -> 강제 업데이트 부모의 state가 있다면 그것을 자식한테 그대로 넘겨준다라고 생각할때 자식한테는 그것이 props임 여기까지 생각할때 부모의 state가 변함 -> 그럼 부모는 리렌더링이됨 부모가 리렌더링되었으니까 혹은 props가 바뀌었으니까 자식이 다시 렌더링되는건 여기에서 작업이 끝남 자식이 부모한테 데이터를 주는 상황에 만약 자..

JS로 실현한 부분을 React로 실행시켜보았다 //app.css #title { color: blue; text-decoration: underline; } .wrap { display: flex; align-items: center; } .todo-card { border: 1px solid gray; padding: 2em; margin: 1em; border-radius: 5px; } button { width: 100px; } button:hover { background-color: orange; } //app.js import React from "react"; import logo from "./logo.svg"; //폴더는 소문자로 시작하는 카멜케이스, 컴포넌트를 만드는 파일은 대문자로 ..