패스트캠퍼스
-
[패스트캠퍼스] 웹 개발 강의(OpenGraph,파이썬 패키지 관리)패스트캠퍼스/웹개발 2023. 4. 28. 01:09
국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다. OpenGraph(Og태그) html meta태그로 웹사이트 정보를 제공하는 것이다. 검색엔진최적화[SEO(Search Engine Optimization)]를 위해 해야 한다. (검색엔진이 수집해갈 수 있는 코드로 사이트가 잘 나올 수 있도록 하는 것) SNS 공유할 때 meta 태그로 사용한 image와 description이 함께 공유된다. 변경사항이 생기면 AWS 인스턴스에 접속해서 다시 재시작해줘야 한다 먼저 실행 중인 프로그램 확인 ps -ef 위와 같이 하면 모든 프로그램이 나와서 보기 어렵다. 아래와 같이 입력해서 일치하는 프로그램 리스트로 확인한다. ps -ef | grap python3 프로그램 종료(띄어..
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(Redux)패스트캠퍼스/React&Redux 2023. 4. 25. 14:42
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. Redux 리덕스는 상태 관리 라이브러리이다. State를 Store에 넣어놓고 사용할 수 있다. REDUCER 상태 변경사항을 결정하고 업데이트된 상태를 반환하는 함수이다. 인수로 조치를 취하고, store 내부의 상태를 업데이트 합니다. Store 클래스가 아니고 Methods가 있는 객체 저장소이다. 애플리케이션의 전체 상태 트리를 보유한다, 내부 상태를 변경하는 방법은 상태에 대한 Action을 전달하는 것이다. Props와 State의 구별 Props Properties의 줄임말 컴포넌트상 서로 통신하는 방법 상위 구성 요소에서 아래쪽으로 흐른다(부모 -> 자식) 자식이 가지고 있는 props를 변경하려면 부모 ..
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(React 앱 성능 개선)패스트캠퍼스/React&Redux 2023. 4. 25. 01:16
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. 리액트 확장 프로그램 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 28ce1c171 on 3/22/2023. chrome.google.com Profiler 성능 측정을 위한 테스트 위에서 설치한 확장프로그램에서 Profiler 기능을 확인해 보기 위해 앱을 만들어 본다. 데이터가 많아야 확인이 가능하기 ..
-
[패스트캠퍼스] 웹 개발 강의(AWS 배포)패스트캠퍼스/웹개발 2023. 4. 23. 18:34
국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다. AWS 서버 준비 배포를 위해 클라우드 혹은 서버환경을 구성하는데, 여기서는 AWS EC2를 가지고 서버 구성을 한다. AWS > 컴퓨팅 > EC2 > 상단 오른쪽에 리전도 꼭 서울로 체크 인스턴스 = 컴퓨터 인스턴스 시작은 컴퓨터를 하나 만드는 것이다. 여기다 운영체제를 설치, 성능 선택 등 할 수 있다. 키페어(접속을 위한 키) 생성 키를 잃어버리면 접속할 수 없으니 잘 관리해야 한다. 웹사이트 제공용이니 SSH, HTTP, HTTPS 트래픽 허용 모두 체크한다. 퍼블릭 IPv4 주소가 서버의 IP이다. 코드 수정 기존에 python으로 작업한 코드에서 host와 port를 수정해줘야 한다. # 다른 주소로도 접속할 수..
-
[패스트캠퍼스] 웹 개발 강의(Flask)패스트캠퍼스/웹개발 2023. 4. 22. 15:32
국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다. 파이썬으로 웹개발을 시작할 수 있는 프레임워크는 Flask 또는 장고(Django)가 있다. 그중에 Flask(Micro Framework)를 사용해 본다. 가볍고 빠르고 쉽게 접근 가능하다. 라우팅을 직관적으로 쉽게 할 수 있다. data를 html 코드에 렌더링 하는데 유용하다. 아래에서 설명하는 대로 연습해 본다. https://flask-docs-kr.readthedocs.io/ko/latest/quickstart.html 빠르게 시작하기 — Flask 0.11-dev documentation 웹 어플리케이션에 있어서 클라이언트에서 서버로 보내는 데이타를 처리하는 것은 중요한 일이다. Flask에서 이 정보는 글로벌..
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(React 동작 기록과 배포)패스트캠퍼스/React&Redux 2023. 4. 21. 23:45
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. Tic Tac Toe 앱 만들기 동작에 대한 기록 저장하기 이전에 만들던 Tic Tac Toe(https://rosylee.tistory.com/20) 앱을 이어서 진행한다. 이번에는 보드에 스퀘어를 누를 때마다 X나 O가 표시되는데, 이것을 저장하여 기록으로 남기는 기능을 추가한다. 핵심은 스퀘어를 누를 때 배열의 복사본(slice())을 만들어서 동작에 대한 기록 저장이 가능하다는 것이다. History Strate는 Board 컴포넌트와, Square 컴포넌트 둘 다 필요하기 때문에, 최상위 단계인 App에 만들어준다. 기존 Board.js에 만들었던 state를 App.js에 옮겼다. 과거의 이동 표시하기 move..
-
[패스트캠퍼스] 프론트엔드 강의 학습일지(React 함수형 컴포넌트)패스트캠퍼스/React&Redux 2023. 4. 21. 11:46
국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. React Hooks 리액트 생명주기가 있다. 시작 할 때(Mounting) 시작하고 난 이후(Updating) 컴포넌트가 더 이상 사용하지 않을 때(Unmounting) 이러한 중요한 생명주기를 함수형 컴포넌트에선 사용하지 못해서, 클래스 컴포넌트로 사용해 왔다. 하지만 React Hooks가 업데이트되어서 함수형 컴포넌트에서도 생명주기를 사용할 수 있게 되었다. 함수형 컴포넌트의 장점 useEffect를 사용해서 Hooks(여러 가지의 생명주기를 간결하게 사용)를 사용할 수 있다. state 업데이트는 const [getter, setter(state를 정하는 함수)] = useState("") 이런 식으로 하고, g..
-
[패스트캠퍼스] 웹 개발 강의(MongoDB)패스트캠퍼스/웹개발 2023. 4. 20. 23:23
국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다. MongoDB 설치하기 https://www.mongodb.com/ MongoDB: The Developer Data Platform Get your ideas to market faster with a developer data platform built on the leading modern database. MongoDB makes working with data easy. www.mongodb.com mac은 brew를 이용하여 설치한다. brew tab mongodb/brew brew install mongodb-community@4.4 그런데 설치하는데 아래와 같이 오류가 났다. Error: An exceptio..