프로젝트 (7) 썸네일형 리스트형 도커에 올린 리액트 웹서버 외부에서 접근하기 타임라인 정리 0. 이전에 만들었던 docker-compose.yaml 의 docker 호스트 포트 변경 - 실제 사용할 호스트 포트로 변경 -> 저의 경우 58080을 사용 1. 노트북 포트포워딩 - 아래 참고자료 1, 2 확인 2, 노트북의 내부 IP 고정 - 나중에 변경 되면 귀찮아지니깐! - search keyword : skb 공유기 내부 ip 고정 - skb의 경우 [ 공유기 관리자 페이자 -> 고급설정 -> 네트워크 -> 네트워크 설정 -> 예약 IP ] 를 통해 설정 - mac 확인 : > getmac /v - ip 확인 : > ipconfig 3. docker 윈도우 방화벽 인바운드 규칙 정의 - 그냥 전체 58080 포트에 대해 인바운드 규칙을 적용할까 하다가 도커만 열리도록 진행 - .. 도커에서 리액트 앱 실행시켜보기 타임라인 정리 1. node js 다운로드 - LTS로 다운하자,,, 최신 버전은 정보도 없고 오류도 많은 걸? 2. yarn 다운로드 - yarn 버전을 확인 하려는 데 yarn을 못찾는다고 나옴. [ yarn.psl 파일을 로드 할 수 없습니다 ] - 사용하는 터미널의 권한을 Remotesigned 으로 변경 - 내 권한 확인 : Get-ExecutionPolicy - 권한 세팅 : Set-ExecutionPolicy Remotesigned 3. 리액트 프로젝트 설치 및 실행 시켜보기 npx create-react-app frontend cd frontend yarn start 4. Dockerfile 생성 - 위치 : frontend 바로 아래 - 도커에 올릴 이미지를 만들어주기 위한 파일 5. d.. 윈도우 10에 wsl2를 이용한 도커 설치 타임라인 정리 1. windows terminal 설치 - 나중에 좀 편리해 보고자 windows terminal을 설치, 굳이 할 필요 없는 듯? 2. wsl2 설치 - 저는 윈도우 pro를 사용해서 hyper-v를 사용해도 되지만, wsl2를 사용하는게 더 안정정이라는 이야기를 듣고 wsl2를 활용하기로 마음 먹었습니다. 3. docker 설치 - docker for window 설치 - 중간에 자동 재실행 1회, 수동 재실행 1회 수행 - 초기 세팅하는데 좀 오래 걸림 + 에러 난것 처럼 보이는데 좀 기다려보기 - not connect to hub 라는 오류가 나오는데 정상 작동함 - 기본 세팅 확인 - terminal에서 docker 버전 확인 수행 참고 : 윈도우 Docker 설치 완벽 가이드(.. 타임라인 정리 - 남는 윈도우 노트북으로 개인 서버 만들기 최종목표 : 남는 윈도우 노트북을 활용하여 리액트 웹서버로 만든 사이트 올려보기. - 백엔드는 spring boot 예정 - 젠킨스를 활용한 CI/CD 구축 ( 개발은 데스크탑, 서버는 노트북 ) [ 환경 ] 노트북 : lg 그램, 윈도우 10 pro, 와이파이 환경(추후 wol를 위한 랜 연결 예정), intel - i7 7gen 1. 노트북 초기화 ( 윈도우 기본 기능 사용 ) 2. iis, ftp 설치 3. wsl2, 도커 설치 4. 도커에서 리액트 사용해보기 5. 도커에 올린 리액트 사이트 외부 접속 시키기 6. wol을 통해 노트북(서버) 전원을 제어하고자 했지만, 랜선 연결이 너무너무 귀찮은 관계로 스마트 콘센트 + AC기능을 활용. * 주의 사항: 초심자를 위한 상세한 설명이라기보다는 이런 .. 인터렉티브 웹 - BBC 사이트 따라해보기3 드디어 마지막 강의. 이 짧은 강의 듣고 완성하는데 거진 한달 반이 걸렸네요. 게을러서 ㅠ 이전 글은 아래를 참고 해주세요. 인터렉티브 웹 - BBC 사이트 따라해보기2 좀 오랜시간이 지난 후 돌아온 긴 두번째 BBC 사이트 따라해보기 글입니다. 텀이 길어요... 이전글은 아래를 참고해주세요. 인터랙티브 웹 - BBC 사이트 따라해보기1 진짜 진짜 오랜만에 회사외 일 nevertheless-intheworld.tistory.com 주요 내용 : 애니메이션 효과 1. data-action -> data-action으로 할당된 함수를 실행시키라는 의미 무료 강의고 쉽게 접근 하기 위해 별다른 기술을 사용하지 않고 html에 바로 값을 할당해 준 것으로 생각 된다. 2. 새를 날게 하는 애니메이션 방식 con.. 인터렉티브 웹 - BBC 사이트 따라해보기2 좀 오랜시간이 지난 후 돌아온 긴 두번째 BBC 사이트 따라해보기 글입니다. 텀이 길어요... 이전글은 아래를 참고해주세요. 인터랙티브 웹 - BBC 사이트 따라해보기1 진짜 진짜 오랜만에 회사외 일로 개발을 시도해봅니다. 작년에 마음에 품었던 ArtBook이라는 주제로 개발을 시도해 보고 하는데, 아는 것이 너무 없더라고요... 맨날 C와 리눅스, sql, 서버만 개발 nevertheless-intheworld.tistory.com BBC 사이트 따라해보기2 강의 링크도 아래 둘게요~! 열심히 따라하는 중. 1. Element에 data(속성)을 추가하는 방식은 두가지 - setAttribute - ex : Elems[i].setAttribute( 'data-index', i) - dataset - E.. 인터렉티브 웹 - BBC 사이트 따라해보기1 진짜 진짜 오랜만에 회사외 일로 개발을 시도해봅니다. 작년에 마음에 품었던 ArtBook이라는 주제로 개발을 시도해 보고 하는데, 아는 것이 너무 없더라고요... 맨날 C와 리눅스, sql, 서버만 개발 하고 있으니 웹 개발에 대한 모든 것을 잊었답니다. 고로 기초부터 다시! 창조의 어머니는 모방! 이라는 마음으로 따라해볼 강의를 찾아보았어요. 그렇게 고른 것이 1분코딩님 강의 입니다. 1분코딩님의 BBC 인터렉티브 페이지 따라하기 가볍게 따라하기 좋은 강의입니다. 1,2편으로 비교적 짧고, 1분코딩님이 소스 코드를 공유해주신 덕이지요. - 1편 리뷰 1. 오랜만에 css를 다루니 아주 어색하다. position들 부터 어색. 2. 이번에 다룬 position은 총 3가지 sticky : 한번 해당 위치.. 이전 1 다음
