휴지통.. (44) 썸네일형 리스트형 Docker - 네트워크 - 네트워크 도커가 없다면 해당 도메인을 통해 웹서버에 접근한 후 웹서버는 /user/local/apache2/htdocs에서 index.html 파일을 찾습니다. 후에 해당 파일은 웹 브라우저를 통해 보여주게 됩니다. 도커를 이용한다면 웹서버가 컨테이너에 설치됩니다. 컨테이너가 설치된 OS 를 Docker 호스트라고 말합니다. 컨테이너와 호스트 모두 독립적인 실행환경이기 때문에 독립적인 포트와 파일시스템을 가지고 있습니다. 그렇기 때문에 docker를 실행할때는 포트를 두번 입력을 해줘야 합니다. 80 : 80 ( 호스트 : 컨테이너 ) 이를 포트 포워딩이라 합니다. - 생성 위의 사진은 httpd 이미지를 이용하여 Host 포트는 8080 이미지 포트는 웹서버인 80포트로 ws2 의 컨테이너를 생성한.. Docker - 이미지 pull , run - Docker images 다운로드 도커는 많은 images를 지원하는데 https://hub.docker.com/ 해당 링크에서 다운로드 할 수 있다. 해당 강의에서는 아파치 웹 서버인 httpd를 우선적으로 다운로드하기 때문에 httpd를 다운로드 하였다. 다운로드는 docker pull httpd 명령어로 다운로드 가능하다. - 컨테이너 생성 도커 컨테이너 생성은 docker run --name ws2 httpd 를 통해 생성할 수 있다. 해당 명령어의 의미는 httpd 이미지를 이용하여 ws2의 이름을 가진 컨테이너를 생성한다는 의미이다. 이러한 다양한 커맨드 라인은 https://docs.docker.com/engine/reference/commandline/cli/ 링크에서 확인 할 수 있다.. Docker -도커와 설치 졸업작품 관련해서 3가지의 클라이언트에서 작업을 하였다. 1. 개인 노트북 2. 집 데스크탑 3. 학교 컴퓨터 이렇게 작업환경을 바꿀때마다 새로운 설정을 따로 해줘야 했기 때문에 많은 어려움이 있었고, 서버 관련한 환경 설정에도 어려움이 많았다. 이러한 어려움을 담당 교수님에게 설명하였고, 도커에 대해서 알려주셨다. 해당 글은 생활 코딩 도커 강의를 통해 작성할 것이다. 생활 코딩 도커 강의 : https://www.youtube.com/playlist?list=PLuHgQVnccGMDeMJsGq2O-55Ymtx0IdKWf - Docker 도커는 리눅스 환경의 컨테이너를 토대로 제작한 서비스를 배포하는데 유용하게 해주는 서비스이다. 도커는 리눅스 환경에서 돌아가기 때문에 나와 같은 윈도우 사용자들에게는 .. React - 기초 ( 단어장2 API , Hooks, REST_API) - API 지금까지는 data.json에 있는 더미 데이터 파일을 import 해서 사용하였지만 이제는 해당 json 객체를 node js에서 지원하는 json-server 모듈을 이용하여 사용하기로 했다. json-server json-server --watch ./src/db/data.json 명령어를 이용하여 3001번 포트에 API로 받을 객체를 띄어준다. 이후 해당 주소창을 검색하면 위와 같이 객체들을 확인할 수 있다. 이렇게 받아온 객체들은 단어들을 표시하는 경우, DAY를 표시하는 경우 등 많은 경우에 사용되기 때문에 React Hooks를 이용하여 작성을 할 것이다. - React Hooks useFetch라는 hooks을 만들어주고, 원하는 컴포넌트에 import useFetch from.. React - 기초 ( 단어장1 더미 데이터,이벤트 ) 앞에서 배운 기초를 토대로 유튜브 채널 코딩앙마의 단어장 만들기 프로젝트를 중심으로 단어장 프로젝트를 만들어보았다.(물론 영상을 보면서) - App.js React에서 초기화면을 보여주는 부모 컨테이너 App.js이다. React는 SPA(Single Page Application) 이용하여 다양한 페이지를 바꾸어 주기 때문에 react-router-dom을 이용하여 페이지를 핸들링 한다. BrowserRouter를 이용하여 컴포넌트를 바꾸어주고 Header와 같이 계속해서 같은 화면이 나오는 부분은 Switch 밖으로 화면이 계속해서 바뀌는 부분은 Switch로 바꾸어준다. - Header.js 헤더 부분이다. 단어를 추가하는 버튼과 Day를 추가하는 두개의 버튼으로 이루어져 있고, 토익 영단어 고급을.. React - 기초 ( Props) - Props 위 사진과 같이 부모 컨테이너에서 age 변수를 설정해 준 후 자식 컨터이너에서 매개변수를 통해 props를 받아준다. console.log를 활용해서 props를 확인해 보았다. age를 10, 20, 30 으로 설정한 3개의 State 컴포넌트를 선언했기 때문에 3가지의 결과가 나오는 것을 확인할 수 있다. 부모컨테이너를 통해 받은 props를 useState를 통해 해당 컴포넌트 변수로 설정해줍니다. props.age를 설정 한 후에 삼항 연산자를 이용하여 19세 초과면 성인 이하면 미성년자임을 표기합니다. 해당 사진과 같이 결과가 나오는 것을 확인할 수 있습니다. JSX 부분의 age를 위에 선언해준 age를 setAge를 이용하여 {age}로 선언 후 setAge(age+1)로 선.. React - 기초 ( useState ) - ChangeName() JSX 부분에 name변수를 출력하는 h2 태그와 클릭 시 Mike와 Jane으로 이름을 변경해주는 함수를 만들어 주었다. 하지만 버튼 클릭시 이름이 바뀌지 않고, console.log를 통해 이름을 확인해 보면 변수가 계속해서 바뀌는 것을 확인할 수 있다. 이러한 경우를 해결하기 위해서 바닐라 JS에서는 document.getElementById("name").innerText = name; 구문을 통해 위 처럼 JSX의 이름 값이 바뀌는 것을 확인할 수 있다. 이러한 구문 없이 상태값을 자유자재로 바꾸기 위해서 React에서는 Hooks 를 제공한다. Hooks 란 컴포넌트를 함수형으로 작성하여 상태값을 컨트롤 할 수 있는 기능이다. - UseState useState의 기.. React - 기초 ( 이벤트 핸들링 ) - React 이벤트 핸들링 리엑트는 이벤트를 핸들링 하기 위해 함수를 사용한다. 이벤트를 발생시키기 위해서 2개의 버튼과 한개의 Input박스를 만들었다. showName함수는 클릭 이벤트 발생 시 console.log를 통해 이름을 보여주는 함수이고, showAge는 showName과 같이 나이를 보여주는 함수이다. showName은 매개변수 없이 직접 이름을 입력하였고, showAge는 매개변수를 통해 console.log를 진행했다. 이벤트 발생 시 개발자 도구를 통해서 이벤트 발생 여부를 확인할 수 있다. - e.target 다음은 Input박스를 통한 이벤트 핸들링이다. input박스를 통해 입력을 한 값은 이벤트 객체인 e를 통해서 e.target.value로 값을 확인 할 수 있다. (해당.. 이전 1 2 3 4 5 6 다음
