분류 전체보기

저번 포스팅에서는 새로운 component를 생성했었는데, App과 Header 컴포넌트 사이에는 아무런 연관도 없이 각자가 독자적인 코드였는데, 동적인 페이지를 만들기 위해서는 서로간 데이터를 주고 받을 수 있어야 합니다. 그것을 할 수 있게 도와주는 것이 props입니다. props는 상위 컴포넌트에서 하위 컴포넌트로 값을 보내고 싶은 경우 사용이됩니다. 즉, 저번 component 생성하기에서 만들었던 App컴포넌트로부터 Header 컴포넌트로 값을 보내고 싶은 경우 App.js import React from 'react'; import Header from './components/Header'; import logo from './logo.svg'; import './App.css'; func..

일단 React의 전체적인 흐름을 파악하기 위해서, index.html, index.js, app.js 파일을 살펴보겠습니다. index.html index.html이 실제로 브라우저에 보여지는 화면인데, 파일안에는 아무 컨텐츠도 존재하지 않습니다. 그런데도, react의 로고나 링크같은 것이 보였던 이유는 태그 때문입니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root'..

React 프로젝트를 생성하는 것에는 여러가지 방법이 있는데, 이번에 해볼 것은 create-react-app을 이용해서 생성하는 방법입니다. node.js 설치 create-react-app 설치 react 새 프로젝트 생성 여기서 create-react-app이란 React프로젝트를 설치하고 실행하는데 필요한 패키지라고 생각하면 된다. npm은 nodeJs package manager로써 nodeJs로 만들어진 여러 프로그램들을 쉽게 검색, 설치, 업데이트, 삭제등을 CLI명령어로 쉽게 가능하도록 도와준다. node.js를 설치하는 이유는 node.js에 npm이 포함되어 있기 때문에 npm을 설치하기 위한 과정입니다. create-react-app 설치 npm install -g create-rea..

블로그나, 여러 목록을 불러오는 페이지에서 한꺼번에 모든 목록을 불러오면 네트워크적으로 UI적으로 좋지 않기 때문에 이것을 해결하기 위해서 페이징으로 표시하거나, 더보기를 클릭했을 때 일정의 목록을 불러오는 기능으로 해결할 수 있는데, 이번에 codeigniter 프로젝트를 하면서 더보기로 목록을 불러오는 것으로 구현을 했다. 스크립트 let meeting_post_num = ; //맨처음 post의 개수를 가져와서 offset을 정해줌 let btn = document.getElementById('more_meeting'); //더보기 버튼 btn.addEventListener('click', ()=> { this.getMorePost(); }); function getMorePost() { let d..

Dockerfile을 이용해서 Nginx 컨태이너를 실행해보려 합니다. 그리고, 기본 index.html을 변경하는 작업도 자동으로 실행할 수 있도록 변경해보겠습니다. 새로운 디렉토리 생성 # mkdir nginx # cd nginx index.html Dockerfile을 이용해서 Nginx 컨테이너 실행하기 Dockerfile FROM nginx COPY . /usr/share/nginx/html FROM nginx : nginx이미지 기반으로 실행 COPY . /usr/share/nginx/html : 현재 디렉토리 위치에 있는 파일을 /usr/share/nginx/html 폴더에 복사 nginx서버는 디폴트값으로 /usr/share/nginx/html 위치에 있는 index.html 파일을 보여주..

git status를 해보면, untracked content 메세지가 나오고 git add . 를 해도 아무런 변화가 없습니다. 하위폴더(frontend)를 확인해보면 .git 폴더가 생성되어 있을 가능성이 있습니다. 이 .git 폴더를 삭제하고, cache를 삭제합니다. git rm -rf --cached 그 다음 stage에 추가해보면 git add 이번에는 정상적으로 동작을 하는 것이 확인됩니다. 결론 원인은 처음에 설명했듯이 동일한 디렉토리 혹은 하위 디렉토리 안에 또 다른 .git파일이 존재해 있기 때문입니다. 그래서, 하위 디렉토리에 있던 .git 폴더를 삭제하고 폴더에 대한 cache 정보를 삭제하면 정상적으로 동작하게 됩니다.