25G.story

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 ..

Webpack? 웹팩은 오픈소스 자바스크립트 모듈 번들러로써 여러개로 나누어져있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리입니다. 장점 1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 2. 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉬워진다. Babel? 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 js문법을 구형브라우저에서도 작동할 수 있도록 변환시켜주는 라이브러리 입니다. 리엑트 설치 예전엔 위 웹팩과 바벨을 설치해서 맞춰주었어야했지만 이제 명령어 한줄이면 알아서 다 설치해준다. npx create-react-app {폴더이름}

DOM? DOM은 Document Object Model의 약자로, 웹 페이지의 구조화된 표현을 제공하고 이를 조작할 수 있는 인터페이스를 제공하는 프로그래밍 인터페이스입니다. 웹 브라우저는 HTML, XHTML 또는 XML 문서를 파싱하여 이를 트리 형태로 변환하는데, 이를 DOM 트리라고 합니다. DOM은 웹 페이지의 요소(element)들을 객체로 표현합니다. 각 요소는 문서의 계층 구조에서 노드(node)로 표현되며, 노드는 텍스트, 이미지, 링크, 버튼 등과 같은 요소를 나타냅니다. 이러한 노드들은 상위 요소인 부모(parent)와 하위 요소인 자식(children)을 가질 수 있습니다. JavaScript와 같은 프로그래밍 언어를 사용하여 DOM에 접근하고 조작할 수 있습니다. DOM을 통해 ..