스파르타57 [ 스파르타 / Web ] 웹개발 종합반 5주차_#1 AWS에 EC2 설정하기 먼저 아래의 링크를 통해 AWS에 회원가입 및 로그인을 해준다. https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2 ap-northeast-2.console.aws.amazon.com 1. 로그인 후 왼쪽에 인스턴스 클릭! 2. 인스턴스 시작 클릭 3. ubuntu 석택, Ubuntu Server 22.04 선택, 64비트(x86) 선택, 마지막에 인스턴스 시작 클릭 키 페어 생성 기본으로 설정되어있는 거 그대로 키 패어 생성을 누른다. 인스턴스를 만들고 조금 기다리면 인스턴스 상태가 아래와 같이 실행 중으로 변한다. 이때 인스턴스 중지는 컴퓨터를 끈 것이다. 인스턴스 종료는 컴퓨터를 반납.. 2023. 1. 3. [ 스파르타 / Web ] 웹개발 종합반 4주차_#1 과제 mongoDB를 사용해서 펜명록 만들기 입력받은 데이터 DB에 저장 - html 파일 nickname과 comment에 입력되는 데이터를 가져왔다. function save_comment() { let nickname = $('#name').val(); let comment = $('#comment').val(); $.ajax({ type: 'POST', url: '/homework', data: {'nickname_give': nickname,'comment_give':comment}, success: function (response) { alert(response['msg']) window.location.reload() } }) } 입력받은 데이터 DB에 저장 - py 파일 DB와 연결시켜주.. 2023. 1. 2. [ 스파르타 / Web ] 웹개발 종합반 3주차_#2 주제 requests와 beautifulsoup를 활용해서 네이버 영화 페이지에 있는 영화 제목들 크롤링해오기 크롤링할 웹사이트 링크 랭킹 : 네이버 영화 영화, 영화인, 예매, 박스오피스 랭킹 정보 제공 movie.naver.com 크롤링 크롤링을 하기 위해서는 2가지를 해야 한다. 1. requests로 링크에 요청을 해서 html을 가져와야 한다. requests는 일종의 Ajax 역학을 한다. 일단 requests를 사용하기 위해서는 설치를 해주어야 한다. 2. beautifulsoup을 사용하여 가져온 데이터 안에서 영화 제목들을 가져온다. 제목을 쉽게 찾게 해주는 라이브러리 requests 설치 1. Pycharm을 눌러 설정을 들어간다. 2. 프로젝트에 Python 인터프리터를 누른다. 3... 2022. 12. 31. [ WIL ] 내일배움캠프 8주차 어려웠던 점 날짜 클릭 시 오른쪽에 있는 shopping list에 날짜 업데이트 하기 주로 코드들이 선택권 4가지가 있다면 선택된 버튼의 내용과 같으면 그것을 레더링 되게 했는데 나는 날짜를 클릭하면 업데이트가 되게 해야 했다. useState와 setState를 나름 이해했다고 생각했는데 완벽히 이해한 게 아니었던 것 같다. useState에 같은 것을 레더링 해도 되는지부터 잘 몰랐다. 하지만 가능했다. 해결 방법 1. 처음에 useState에서 를 설정을 해주었다. 2. 날짜가 클릭되었을 때 ShoppingListTag라는 함수에 '오늘날짜'를 넘겨주었다. 3. ShoppingListTag함수에서 '오늘날짜' 구조를 수정해 준 뒤에 return으로 해주었다. Facts Firebase연결 시 버전.. 2022. 12. 25. [ WIL ] 내일배움캠프 7주차 Facts 리액트 강의 수강. 알로리즘 스터디에서 함께 매일 알고리즘 문제 풀기. 주말에는 평일에 풀었던 문제 다시 복습했다. 개인 과제인 Todo list redux와 styled components를 사용하여 만들기. 스파르타 리액트 강의 수강. Feelings 리액트로 만든 Todo list를 redux를 사용하여 다시 만들어야 했다. 이때 styled-components도 함께 사용했다. 아직은 프로젝트가 작지만 redux를 사용하니 확실히 다른 컴포넌트들을 사용하기가 쉬워졌다. 처음이라 생각보다 완성하는데 오래 걸렸지만 덕분에 리덕스를 제대로 배우는 한 주가 되었다. Findings styled-components를 사용하여 태그에 붙는 className이 없어서 코드가 조금 더 깔끔하고 간결한.. 2022. 12. 19. [ 스파르타 / TIL ] 내일배움캠프 #35 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 Todo list 리덕스로 만들기 오늘의 배움 react-router-dom의 Link를 styled-components로 꾸미기 아래의 코드처럼 styled(Link)`` 를 해주면 Link의 모든 속성을 inherit 하면서 새로운 속성을 더해줄 수 있다. style.js import styled from "styled-components"; import { Link } from "react-router-dom"; export const DetailsButton = styled(Link)` text-decoration: none; color: blue; font-size: 14px; &:hover { color: black; } `; TodoItem... 2022. 12. 16. [ 스파르타 / TIL ] 내일배움캠프 #34 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 오늘의 배움 soup란? 인접한 요소들을 로 감싸게 되는데, 불필요한 div요소가 중첩되어 soup이 발생한다. soup에 빠지지 않기 위한 방법 아래와 같이 는 빈 wrapper 컴포넌트다. HTML 테그가 DOM에 렌더링 되지 않으면서 코드가 실행된다. return ( Hello World! This works👍 }; 만약 아래와 같이 Import Fragment를 했다면 React를 붙이지 않아도 태그만으로도 사용이 가능해진다. import {Fragment} from 'react'; return ( Hello World! This works👍 }; 아래와 같이 사용할 수도 있지만 버전에 따라 사용할 수 없을 수도 있다. 하지만 위의 는 모든 버전에.. 2022. 12. 15. [ 스파르타 / TIL ] 내일배움캠프 #33 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 오늘의 배움 JSX 제한 사항 요소가 1개여야 한다. 2,3,4개의 인접한 요소들이면 안된다. 예제 아래의 코드는 에러가 난다. return ( Hello World! This does not work👎 }; 아래의 코드는 정상적으로 실행이 된다. return ( Hello World! This works👍 }; 위의 이유는 자바스크립트 또한 둘 이상을 반환할 수가 없다. return ( React.createElement('h1', {}, 'Hellow World!'); React.createElement('p', {}, 'This does not work👎'); ); 2022. 12. 15. [ 스파르타 / TIL ] 내일배움캠프 #32 오늘 한 것 알고리즘 문제 풀기 Redux 강의 보기 Todo list 코드 리뷰 받기 오늘 깨달은 것 최원장 튜터님께 저번에 리액트로 만든 Todo list 코드 리뷰를 부탁드렸는데 리뷰받기를 정말 잘한 것 같다. 덕분에 아래와 같은 사항들을 새롭게 알게 되었다! 리액트에서 .js 파일은 .jsx로 쓰자. index.js 파일만 제외하고 나머지 App.js와 내가 만든 js파일들은 모두 .jsx로 써주자. index.js를 변경하지 않는 이유는 이 파일은 자바스크립트 코드이므로 js로 유지되어야 한다. 버튼에는 cursor: pointer;을 설정해주자. 사용자들에게 버튼이라는 것을 인지하게 클릭이 가능하다는 것을 인지하게 하기 위해서는 항상 설정해주도록 하자. 입력창의 값이 둘 중에 하나라도 비어있다.. 2022. 12. 13. 이전 1 2 3 4 ··· 7 다음 728x90
