항해99 [항해99] 4/10 WIL (5) 다섯번째 Keyword Axios Axios란? - Axios는 node.js와 브라우저를 위한 Promise기반 HTTP클라이언트이다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 쉽게 말해 벡엔드와 프론트엔드가 통신을 쉽게 하기 위해 ajax와 더불어 사용한다. 사용방법 axios 객체는 아래와 ... ReactWIL항해99스파르타코딩클럽React 항해 사전 준비기간 5주차 강의 정리 2) 프로젝트 생성 (디렉토리에 templates, static 폴더와 app.py) 버킷리스트 – POST 연습 (기록하기) 버킷리스트 – GET 연습 (보여주기) 5) AWS 인스턴스 중지 = 컴퓨터 끄기 / 인스턴스 종료 = 컴퓨터 반납 6) 따라서 새로 만들려면 인스턴스 종료 후 새로 만들기 7) Git bash 키고 아래 명령어 입력 9) ubuntu 뒤의 IP는 구입한 인스턴스의 ... 항해995주차7기사전준비강의5주차 220418 Intersection Observer 타겟 요소와 타겟의 부모 혹은 상위 요소의 뷰포트가 교차되는 부분을 비동기적으로 관찰하는 API 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공 infinite scrolling 과 placeholder가 Lazy Loadi... React항해99React 화성 땅 공동구매(토이프로젝트) *토이 프로젝트로 프론트 부분인 HTML과 서버 Flask가 통신할 수 있도록 API를 구축해본다. 이 전에 포스팅했던 내용과 동일하게 새 프로젝트 생성 후, 설정을 해준다. Flask의 규칙에 맞게 설정을 하면 되는데 이렇게 설치를 하고 인터프리터에서 flask, pymongo, dnspython을 설치한다. *API 만들고 사용하기 - 이름, 주소, 평수 저장하기 (Create -> PO... 토이프로젝트TIL항해99get방식post방식APIFlask스파르타코딩API 무비피디아 만들기 API와 크롤링 프로젝트 세팅하기 flask, pymongo, dnspython, requests, bs4 패키지 설치 templates안에 index.html static app.py ! 새프로젝트 시 위 환경설정은 필수! 크롤링할 때는 requests 와 bs4 패키지를 설치해야한다! og:image / og:title / og:description 을 크롤링 할 목적으로 크롤링을 사용! 크롤링 기본 코... 크롤링TIL항해99get방식post방식API스파르타코딩API Flask 시작하기 -서버만들기 Flask 패키지 설치! 파일 > 설정 > 인터프리터 Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에, ㄴstatic 폴더 (이미지, css파일을 넣어둡니다) ㄴtemplates 폴더 (html파일을 넣어둡니다) ㄴapp.py 파일 이렇게 세 개를 만들어두고 시작해야한다. 이제 각 폴더의 역할이 있다. templates 폴더의 역할은 HTML 파일을 담아두고, 불러오는 역할을 한다. ... TILFlask스파르타코딩항해99Flask 220415 useMemo 성능 최적화를 위하여 연산된 값을 재사용하는 기능을 가진 함수 react 생태계에서 렌더링 최적화를 위해 사용되는 Hook 메모이제이션이란 ❓ 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 리액트의 메모이제이션에는 특징이 있다 바로 이전의 값만 메모이제이션 한다는 것 메모이... React항해99TILReact WIL. 6th week 6주차 미니프로젝트 주차는 협업이 어떻게 이뤄지는지 알 수 있는 주차였다. 전 주차까지는 파이어베이스를 이용하여 웹사이트를 만들었지만 이번에는 백엔드에서 만든 서버와 프론트에서 만든 클라이언트 페이지가 상호작용하는 사이트를 만들었습니다. 이 formdata로 가져오는게 문제가 있어서 삽질을 하다가 결국 이미지 뿐만 아니라 모든 데이터를 formdata로 묶어서 가져올 수 있다는 것을 발견하여... 항해99WILWIL 220318 React DOM 'Document Object Model' 의 줄임말 HTML 문서의 요소들에 쉽게 접근하기 위해 계층으로 표현된 인터페이스 HTML 단위 (요소) 하나하나를 객체로 생각하는 모델 텍스트도 객체이고, 버튼도, 태그와 같은 element들도 객체가 될 수 있다. 위 코드에서 div는 h3, p, btn태그를 포함하고 있다 여기서 div 태그는 하위 요소들의 부모 요소라고 하고 div에 속해 있... React항해99TILReact [TIL] d+11 오늘 CS스터디는 내가 발표할 차례라 열심히 준비를 했는데, 갑자기 4챕터부터 난데없이 과학시간이 돼버려서 당황스러웠다 ㅋㅋㅋ 간만에 학교 다닐 때 생각나서 재밌었음... 오늘 풀지 못한 문제 점수 count를 올릴 때 왜 조건문에서 인덱스를 길이로 나눈 나머지 값을 구하는 건가 했는데, 아주 간단한 이유였다. 배열 내의 인덱스를 돌고 있을 땐 괜찮지만, 배열에 존재하는 인덱스를 넘어섰을 때... 항해99hh99알고리즘hh99 [D+98] 항해99 11일차(1) 오늘은 알고리즘 테스트 날! #1번 #2번 JavaScript 답안 포맷... 항해99JavaScriptTILJavaScript [D+98] 항해99 11일차 (2) _매서드정리 한주간 진행 된 알고리즘주차가 마무리됐다. 그제 모의고사에서 리플잇으로 문제푸는 법을 약간 헤맸어서 자신감이 떨어진 상태였는데 (그냥 콘솔만 밑에다 더 찍어주면 되는데 안쓰니까 그 쉬운것도 몰랐음) 오늘 봤던 시험 끝나자마자 잘보든 못보든 몸이 바로 늘어진다.😭 (후일담_알고리즘 테스트에 우리반 전원이 통과했다는 소식!! 멋져!🎊🎉🎊🎉) 오늘은 지난 일주일 간 알고리즘을 풀면서 30문제 정도... 항해99JavaScriptTILJavaScript [TIL] d+12 이런 식으로 원본 배열을 망가트리지 않으면서, 원하는 방식으로 배열의 각 요소를 변환할 수 있는 함수. 원본 배열을 훼손하지 않는다. 원본 배열에 다른 배열을 더해주는 함수. 원본 배열을 훼손하지 않는다. 1. NVM 설치 (node.js 버전 관리 툴) - 버전 확인 : nvm --version - node.js 설치 : nvm install [설치할 버전 넘버] - 노드 버전 확인 : n... 항해99리액트hh99TILReactReact 220318 React JSX 공식 문서에는 문자열도 아니고 태그도 아니며 자바스크립트를 확장한 문법이라고 한다 이해하기 쉽게 설명하면 HTML을 품은 JS === JSX! 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트의 문법으로 변환된다 바벨은 JSX를 React.createElement( ) 호출로 컴파일한다 리액트에서는 JSX 문법을 사용하여 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다... React항해99TILReact WIL | 항해99 2주차 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있습니다. 실제 세상에서 사물의 개념을 프로그램에서 객체라고 볼 수 있습니다. 그리고 그 사람은 이름 혹은 나이, 주민등록번호 등의 정보를 갖고 있고, 걷거나 뛸 수 있습니다. 그리고 객체는 이름, 나이 혹은 주민등록번호와 같이 상태(state)를 갖고 있으며, 걷거나 뛰는 행위(behavior)를 할 수 있습니다. 사람 뿐만 아니라 자동... WIL항해99WIL 220320 React 바인딩 리액트에서의 바인딩을 알기 전에 자바스크립트에서의 this와 바인딩을 알고 있어야 한다 Javascript this 자바스크립트에서 객체 안 메서드에서 this는 그 메서드가 포함된 object를 의미 여기서 this는 A를 의미하며, A의 prop인 Hello를 받아 출력한다. 그러나 밑의 예제처럼 A.sayHello를 B에 할당하고 이를 출력해보면 undefined가 출력된다 이유는 th... React항해99TILReact 220322 리액트 Router 리액트는 SPA (Single Page Application) 방식으로, 새로운 페이지를 로드하지 않고 하나의 페이지 않에서 필요한 데이터만 가져온다 MPA (Multi Page Application) 는 여러개의 페이지를 사용하며, 새로운 페이지를 로드하는 방식이다 사용자가 회원가입 버튼을 누르면, 새로운 회원가입 html로 이동하는 방식 SPA 방식은 하나의 html 페이지 안에서 사용자... React항해99TILReact 220323 문자열 내 마음대로 정렬하기 나는 못 푼, 다른 팀원의 해설 빈 배열 2개를 만든다 반복문을 이용해서 각 문자열의 n번째 글자를 strings[i]의 맨 앞에 붙여주고, 빈 배열 중 하나인 strings2에 넣는다 채운 배열을 sort 함수를 사용해서 정렬한다 반복문으로 strings2의 요소들의 맨 앞글자를 지워주고 빈 배열인 answer에 넣고 반환한다 다른 사람의 풀이... 프로그래머스항해99TILTIL 항해99 개발일지 - 미니 프로젝트(2) ✅ "IntroDog" 은 애견인들의 의견을 교류할 수 있는 사이트입니다. ✅ 반려견을 키우면서 생기는 질문, 일상 등 사소한 것까지 다른 이들과 함께 교류할 수 있습니다! 레이아웃 구성 + 메인 페이지 + 검색 기능 구현 COMMUNITY 페이지 + 글 작성/삭제 + 댓글 작성/삭제 기능 구현 전반적인 백엔드 작업 로그인 + 회원가입 기능 구현 1. 토큰 인증 구현 3. 댓글 등록, 삭제 ... 미니 프로젝트항해99미니 프로젝트 [TIL] d+18 export export default 한 파일 내에 하나의 개체만 있다면 그냥 export default로 내보내면 되지만, 여러 객체가 있는 경우 export를 사용하여 원하는 객체를 골라 내보낼 수 있는 것 같다. (export { name1, name2, name3 }; 같은 식으로...) export default는 객체명을 임의로 설정할 수도 있다구 한다. 버튼 라우팅 histor... React항해99hh99React
[항해99] 4/10 WIL (5) 다섯번째 Keyword Axios Axios란? - Axios는 node.js와 브라우저를 위한 Promise기반 HTTP클라이언트이다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 쉽게 말해 벡엔드와 프론트엔드가 통신을 쉽게 하기 위해 ajax와 더불어 사용한다. 사용방법 axios 객체는 아래와 ... ReactWIL항해99스파르타코딩클럽React 항해 사전 준비기간 5주차 강의 정리 2) 프로젝트 생성 (디렉토리에 templates, static 폴더와 app.py) 버킷리스트 – POST 연습 (기록하기) 버킷리스트 – GET 연습 (보여주기) 5) AWS 인스턴스 중지 = 컴퓨터 끄기 / 인스턴스 종료 = 컴퓨터 반납 6) 따라서 새로 만들려면 인스턴스 종료 후 새로 만들기 7) Git bash 키고 아래 명령어 입력 9) ubuntu 뒤의 IP는 구입한 인스턴스의 ... 항해995주차7기사전준비강의5주차 220418 Intersection Observer 타겟 요소와 타겟의 부모 혹은 상위 요소의 뷰포트가 교차되는 부분을 비동기적으로 관찰하는 API 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공 infinite scrolling 과 placeholder가 Lazy Loadi... React항해99React 화성 땅 공동구매(토이프로젝트) *토이 프로젝트로 프론트 부분인 HTML과 서버 Flask가 통신할 수 있도록 API를 구축해본다. 이 전에 포스팅했던 내용과 동일하게 새 프로젝트 생성 후, 설정을 해준다. Flask의 규칙에 맞게 설정을 하면 되는데 이렇게 설치를 하고 인터프리터에서 flask, pymongo, dnspython을 설치한다. *API 만들고 사용하기 - 이름, 주소, 평수 저장하기 (Create -> PO... 토이프로젝트TIL항해99get방식post방식APIFlask스파르타코딩API 무비피디아 만들기 API와 크롤링 프로젝트 세팅하기 flask, pymongo, dnspython, requests, bs4 패키지 설치 templates안에 index.html static app.py ! 새프로젝트 시 위 환경설정은 필수! 크롤링할 때는 requests 와 bs4 패키지를 설치해야한다! og:image / og:title / og:description 을 크롤링 할 목적으로 크롤링을 사용! 크롤링 기본 코... 크롤링TIL항해99get방식post방식API스파르타코딩API Flask 시작하기 -서버만들기 Flask 패키지 설치! 파일 > 설정 > 인터프리터 Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에, ㄴstatic 폴더 (이미지, css파일을 넣어둡니다) ㄴtemplates 폴더 (html파일을 넣어둡니다) ㄴapp.py 파일 이렇게 세 개를 만들어두고 시작해야한다. 이제 각 폴더의 역할이 있다. templates 폴더의 역할은 HTML 파일을 담아두고, 불러오는 역할을 한다. ... TILFlask스파르타코딩항해99Flask 220415 useMemo 성능 최적화를 위하여 연산된 값을 재사용하는 기능을 가진 함수 react 생태계에서 렌더링 최적화를 위해 사용되는 Hook 메모이제이션이란 ❓ 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 리액트의 메모이제이션에는 특징이 있다 바로 이전의 값만 메모이제이션 한다는 것 메모이... React항해99TILReact WIL. 6th week 6주차 미니프로젝트 주차는 협업이 어떻게 이뤄지는지 알 수 있는 주차였다. 전 주차까지는 파이어베이스를 이용하여 웹사이트를 만들었지만 이번에는 백엔드에서 만든 서버와 프론트에서 만든 클라이언트 페이지가 상호작용하는 사이트를 만들었습니다. 이 formdata로 가져오는게 문제가 있어서 삽질을 하다가 결국 이미지 뿐만 아니라 모든 데이터를 formdata로 묶어서 가져올 수 있다는 것을 발견하여... 항해99WILWIL 220318 React DOM 'Document Object Model' 의 줄임말 HTML 문서의 요소들에 쉽게 접근하기 위해 계층으로 표현된 인터페이스 HTML 단위 (요소) 하나하나를 객체로 생각하는 모델 텍스트도 객체이고, 버튼도, 태그와 같은 element들도 객체가 될 수 있다. 위 코드에서 div는 h3, p, btn태그를 포함하고 있다 여기서 div 태그는 하위 요소들의 부모 요소라고 하고 div에 속해 있... React항해99TILReact [TIL] d+11 오늘 CS스터디는 내가 발표할 차례라 열심히 준비를 했는데, 갑자기 4챕터부터 난데없이 과학시간이 돼버려서 당황스러웠다 ㅋㅋㅋ 간만에 학교 다닐 때 생각나서 재밌었음... 오늘 풀지 못한 문제 점수 count를 올릴 때 왜 조건문에서 인덱스를 길이로 나눈 나머지 값을 구하는 건가 했는데, 아주 간단한 이유였다. 배열 내의 인덱스를 돌고 있을 땐 괜찮지만, 배열에 존재하는 인덱스를 넘어섰을 때... 항해99hh99알고리즘hh99 [D+98] 항해99 11일차(1) 오늘은 알고리즘 테스트 날! #1번 #2번 JavaScript 답안 포맷... 항해99JavaScriptTILJavaScript [D+98] 항해99 11일차 (2) _매서드정리 한주간 진행 된 알고리즘주차가 마무리됐다. 그제 모의고사에서 리플잇으로 문제푸는 법을 약간 헤맸어서 자신감이 떨어진 상태였는데 (그냥 콘솔만 밑에다 더 찍어주면 되는데 안쓰니까 그 쉬운것도 몰랐음) 오늘 봤던 시험 끝나자마자 잘보든 못보든 몸이 바로 늘어진다.😭 (후일담_알고리즘 테스트에 우리반 전원이 통과했다는 소식!! 멋져!🎊🎉🎊🎉) 오늘은 지난 일주일 간 알고리즘을 풀면서 30문제 정도... 항해99JavaScriptTILJavaScript [TIL] d+12 이런 식으로 원본 배열을 망가트리지 않으면서, 원하는 방식으로 배열의 각 요소를 변환할 수 있는 함수. 원본 배열을 훼손하지 않는다. 원본 배열에 다른 배열을 더해주는 함수. 원본 배열을 훼손하지 않는다. 1. NVM 설치 (node.js 버전 관리 툴) - 버전 확인 : nvm --version - node.js 설치 : nvm install [설치할 버전 넘버] - 노드 버전 확인 : n... 항해99리액트hh99TILReactReact 220318 React JSX 공식 문서에는 문자열도 아니고 태그도 아니며 자바스크립트를 확장한 문법이라고 한다 이해하기 쉽게 설명하면 HTML을 품은 JS === JSX! 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트의 문법으로 변환된다 바벨은 JSX를 React.createElement( ) 호출로 컴파일한다 리액트에서는 JSX 문법을 사용하여 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다... React항해99TILReact WIL | 항해99 2주차 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있습니다. 실제 세상에서 사물의 개념을 프로그램에서 객체라고 볼 수 있습니다. 그리고 그 사람은 이름 혹은 나이, 주민등록번호 등의 정보를 갖고 있고, 걷거나 뛸 수 있습니다. 그리고 객체는 이름, 나이 혹은 주민등록번호와 같이 상태(state)를 갖고 있으며, 걷거나 뛰는 행위(behavior)를 할 수 있습니다. 사람 뿐만 아니라 자동... WIL항해99WIL 220320 React 바인딩 리액트에서의 바인딩을 알기 전에 자바스크립트에서의 this와 바인딩을 알고 있어야 한다 Javascript this 자바스크립트에서 객체 안 메서드에서 this는 그 메서드가 포함된 object를 의미 여기서 this는 A를 의미하며, A의 prop인 Hello를 받아 출력한다. 그러나 밑의 예제처럼 A.sayHello를 B에 할당하고 이를 출력해보면 undefined가 출력된다 이유는 th... React항해99TILReact 220322 리액트 Router 리액트는 SPA (Single Page Application) 방식으로, 새로운 페이지를 로드하지 않고 하나의 페이지 않에서 필요한 데이터만 가져온다 MPA (Multi Page Application) 는 여러개의 페이지를 사용하며, 새로운 페이지를 로드하는 방식이다 사용자가 회원가입 버튼을 누르면, 새로운 회원가입 html로 이동하는 방식 SPA 방식은 하나의 html 페이지 안에서 사용자... React항해99TILReact 220323 문자열 내 마음대로 정렬하기 나는 못 푼, 다른 팀원의 해설 빈 배열 2개를 만든다 반복문을 이용해서 각 문자열의 n번째 글자를 strings[i]의 맨 앞에 붙여주고, 빈 배열 중 하나인 strings2에 넣는다 채운 배열을 sort 함수를 사용해서 정렬한다 반복문으로 strings2의 요소들의 맨 앞글자를 지워주고 빈 배열인 answer에 넣고 반환한다 다른 사람의 풀이... 프로그래머스항해99TILTIL 항해99 개발일지 - 미니 프로젝트(2) ✅ "IntroDog" 은 애견인들의 의견을 교류할 수 있는 사이트입니다. ✅ 반려견을 키우면서 생기는 질문, 일상 등 사소한 것까지 다른 이들과 함께 교류할 수 있습니다! 레이아웃 구성 + 메인 페이지 + 검색 기능 구현 COMMUNITY 페이지 + 글 작성/삭제 + 댓글 작성/삭제 기능 구현 전반적인 백엔드 작업 로그인 + 회원가입 기능 구현 1. 토큰 인증 구현 3. 댓글 등록, 삭제 ... 미니 프로젝트항해99미니 프로젝트 [TIL] d+18 export export default 한 파일 내에 하나의 개체만 있다면 그냥 export default로 내보내면 되지만, 여러 객체가 있는 경우 export를 사용하여 원하는 객체를 골라 내보낼 수 있는 것 같다. (export { name1, name2, name3 }; 같은 식으로...) export default는 객체명을 임의로 설정할 수도 있다구 한다. 버튼 라우팅 histor... React항해99hh99React