25G.story

React 함수 컴포넌트에서 useState와 useEffect 훅을 사용한 간단한 예시입니다. import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, [count]); return ( Count: {count} setCount(count + 1)}>Increase Count ); } export default Counter; 이 예시에서 useState 훅은 count라는 상태 변수와 그 값을 변경할 수 있는 setCount 함수를 제공합니다. useEffec..

React Hooks? class없이 state를 사용할 수 있는 새로운 기능입니다. React는 주로 Class Component를 사용하고 React Hooks는 Functional Component를 사용하기 때문에 먼저 그 부분 부분부터 비교를 해보자 Class Component Functional Component 더 많은 기능 제공 더 적은 기능 제공 긴 코드 짧은 코드 복잡한 코드 심플한 코드 더딘 성능 빠른 성능 리엑트 생명 주기 위와같은 생명주기를 함수형 컴포넌트에서는 사용을 하지 못했기 때문에 함수형 컴포는트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔습니다. 이 부분은 React 16.8 hooks 업데이트로 변경됐습니다. 해당 업데이트 이후에 함수형 컴포넌트에서도 생명주기를 사..

styled component : 서브 파트 라이브러리 (외부 라이브러리) react에서 주는 게 아니라 외부에서 가져오는 라이브러리이다 https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers..

nav바는 컴포넌트로 두면 편하기 때문에 nav바 컴포넌트를 만들어볼 것이다 구조화 할당 props안에 있는 post오브젝트를 선언해놓는 것이다. 그러면 {props.post.id}를 써줘야 하는데 위처럼 줄여줄 수 있다. 게시글 추가하기 컨포넌트는 디자인만 가지고 있는 것이지 배치까지 가지고 있으면 제사 용성이 떨어진다. 버튼을 컴포넌트화 했다. 이렇게 컨포넌트화를 잘하면 이 페이지가 아닌 다른 페이지에서도 이 컴포넌트를 사용할 수 있는 것이다. 컨포넌트를 동적으로 활용하는 방법 스타일 컴포넌트가 함수 안에 있다 그 이유는 이 컴포넌트를 동적으로 할당하는 경우에만 이렇게 함수 안에 스타일 컴포넌트를 배치하면 된다. "..."연산자 (전개 연산자) 꼭 공부할 것 데이터를 추가할 때 사용한다. 배열을 버리..

위와 삭제 버튼을 눌렀을 때 알고리즘은 3번을 삭제할 때 밑에 있는 4번을 3번 자리로 이동시켜주는 것이다. 이렇게 하면 자료가 10000개가 있다고 가정하면 99997개의 자료를 다시 한 칸씩 당겨야 한다. 이건 별로 좋은 알고리즘이 아니다. 컴퓨터에서 io다음으로 지연을 시키는 요소가 렌더링이다. 위 알고리즘처럼 하면 그림을 이동시켜야하는데 이게 렌더링 작업 중에 하나다. 그래서 리 엑트에서는 삭제할 때는 각 엘레맨트에 데이터를 이동시킨다. 위 경고창이 나온 이유도 item마다 key가 있어야 효율적으로 엘레멘트를 찾아서 작업을 해줄 수 있기 때문에 ket값을 넣어주라는 말이다. 삭제 버튼 구현 삭제버튼을 눌렀을 때 상태 변경을 하려면 PostItem에서 상태를 들고 있어야 하는데 App에서 들고 있..

자세한 설명은 저번 react포스팅을 참고할 것. 위 콘솔을 보면 데이터는 잘 바뀌지만 그림은 바뀌지 않는 것을 확인할 수 있다. 그럼 어디를 수정하면 그림도 같이 바뀔까? 바로 return이 다시 제 시작돼야 한다. 그러려면 결국 App이 다시 실행돼야 한다 하지만 app이 제 실행되면 num값이 초기화되기 때문에 그림은 초기 상태와 그대로가 된다. 그럼 결국 세 가지 조건이 생긴다. 1. 데이터를 변경해야 한다. 2. 앱(return)이 제 실행되야한다 3.num은 내부에서 지역변수로 관리하면 답이 안 나온다. 실행시키면 즉각적으로 바로 그림과 바뀐 데이터를 일치시켜준다. 주석이 핵심 내용이다

규칙 대문자로 시작하는 js파일은 디자인을 가진 컴포넌트 파일이라는 의미다. 지금 당장에 쓰지 않는 파일들을 삭제한다 임포트 문도 삭제해준다 파스칼 표기법 자바에서 클래스 만들 때 사용하는 표기법 저번에 다운받은 snipets 플러그인이 제공해주는 기능 https://medium.com/ Medium – Where good ideas find you. Medium is an open platform where readers find dynamic thinking, and where expert and undiscovered voices can share their writing on any topic. medium.com 위와 같은 플러그인이나 유용한 라이브러리를 위 커뮤니티를 잘 찾아보면 현시점의 최신..

자바스크립트를 브라우저 없이 실행하기 위해서 필요한 자바스크립트 런타임 환경 제공 프로그램인 node.js를 다운로드한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org IDE는 vscode를 사용합니다. 다운로드하여주세요 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud ..

docker hub에서 이미지를 다운받을때 생기는일 dockerhub -> (pull)->image->(run)-> container(run 명령어로 여러게가 생성가능하지만 완벽히 격리된 공간에 각각의 독립된 컨테이너가 생성된다.) 여기까지의 과정을 거쳐서 컨테이너고 컨테이너에서 작업을 하면서 수정을한 컨테이너에게 commit명령어를 사용하면 새로운 image가 만들어 지는 것이고 이 image를 docker hub에 push를 하게 되면 dockerhub에 올라가게 된다. 이미지 만들기 git이 설치된 우분투가 필요해서 우분투를 pull로 이미지를 다운받아서 run명령어로 컨테이너를 만들었다. 그리고 그 컨테이너에 git을 설치하여서 commit명령어로 새로운 이미지를 만들면된다.. 그럼 먼저 깃이 설..

version: "3.7" # 파일의 버전 services: ## 이 지시어안에는 만들고싶은 컨테이너들 명시 db: #컨테이너이름 image: mysql:5.7 # 해당 이미지를 사용해서 mysql설치 volumes:# -v 옵션 호스트와 컨테이너 연결 - ./db_data:/var/lib/mysql restart: always environment:# -e 옵션 환경변수세팅 MYSQL_ROOT_PASSWORD: 123456 MYSQL_DATABASE: wordpress MYSQL_USER: wordpress_user MYSQL_PASSWORD: 123456 app: depends_on: ## yml파일을 시작할때 선수과정 명시.. - db## db가 만들어졌을때 해당 app을 다운받라 라고 명시 ima..