성장을 위한 기록

이벤트 핸들러(ft.addEventListener) html요소에 이벤트 함수 연결하기 버튼 //html에 직접 작성 document.querySelector('#btn').click = fn; // 요소.이벤트 = 함수 document.querySelector('#btn').addEventListener('click',fn); // 이벤트 리스너 사용 여기서 JS에서 선언할 때는 '()'를 제외해야 한다 만일 작성하게 되면"= fn()" 함수에 return값을 할당한다는 의미로 받아드릴 수 있고, fu()이 실행되게 된다. 즉, 이벤트 핸들러에 기능을 잃게 된다. function fn(event){ console.dir(event); } 위에서 사용한 fn함수를 정의할 때 인수로 event를 받을 수 ..

웹 스토리지 웹 스토리지는 브라우저 상에 데이터를 저장할 수 있는 기술이다. 개발을 시작하면 DB서버나 Cloud 플랫폼에 데이터를 저정하는 경우가 많은데, 브라우저에 저장할 필요가 있나? 개인적인 생각으로 무족건 필요하다고는 볼 수 없는데, 개발 시작단계에서 가볍게 테스트하기 좋다고 생각하고있다. 그리고 모든 데이터(사소한 것까지)를 DB에 저장하는 것은 낭비라고 생각해 웹 스토리지에 저장하는 경우가 있다고 한다. 소실 될 수 있으니 중요하지 않은, 없어져도 되는 데이터만 저장하자 웹 스토리지는 2가지로 나뉠 수 있다. 로컬 스토리지 세션 스토리지 두 기술의 차이는 간단하게 저장 기간(?) 이다. 세션 스토리지의 경우 세션마다 저장을 한다고 볼 수 있다. 그래서 여러 창을 띄우면 우리는 각 페이지 마다..

1주차 Week I Learn 항해 99 시작한지 7일이 지났다. 12일 까지는 미니 프로젝트를 만들어봤고 13일부터 19일까지는 알고리즘을 풀예정이다. 미니 프로젝트 이번 프로젝트에서 필수적으로 API와 JWT토큰을 이용해야 했다. 지금도 정확한 개념은 잘 모르니 이 기회에 약간 정리를 해보려고한다. JWT토큰 지극히 개인적인 생각입니다. 내가 본 JWT의 가장 큰 장점은 JWT토큰을 브라우저에 저장한다는 것이다.(별도 서버의 저장 없이) 기존 토큰 인증방식이나 session의 경우 별도의 저장소에 정보를 저장했고, 클라이언트에서 요청을 보내면 서버에서는 받은 요청을 별도의 저장소에서 검증하고 권한이 확인되면 클라이언트에 전달하는 과정을 거친다. 이런 부분에서 JWT 토큰의 장점이 있다. 우선 다른 저..

map 배열.map((요소, 인덱스, 배열)=>{return값}); map함수는 배열을 순회하면서 함수(위에선 화살표 함수 사용)에 return값을 새로운 배열에 저장한다. let arr = [1,2,3]; let result = arr.map((item)=>{ return item*2 }) result;//[2,4,6] arr; // [1,2,3] 여기서 기존 배열인 arr는 수정되지 않고 새로운 배열을 만들어 낸다. 또한 함수식에 return값을 사용하기 때문에, 조건문이나 반목문 등을 사용해서 자유로운 값을 도출 할 수 있다. 마땅한 예제가 생각이 안나 기본식에 2번째 인자인 인덱스와 3번째 인자인 배열은 사용하지 않았는데, map을 호출한 배열 즉 위 예제에서 arr가 된다. 따라서 해당 배열을 ..

JQuery HTML 요소를 조작하는, 편리한 JS를 미리 작성해둔 것 ! 사용하는 방법 구글 Jquery 홈페이지에서 CDN 가져와 복사하기 태그에 위 코드를 추가하면 구글 Jquery에서 가져다 쓴다는 의미다. ( 다른 사람이 만들어 놓은 코드를 사용하는 것이기 때문에 필요) 우선 JS에서 html코드를 가져오는 방법은 크게 2가지가 있다. getElement와 querySelector이다. document.getElementById() // id값으로 가져오기 1개 document.getElementsByClassName() // class 값으로 가져오기 nodelist document.getElementsByTagName() // 태크 이름으로 가져오기 가져오기 nodelist document...

Python 파이썬은 매우 직관적인 언어이다. 그리고 요즘 인기많은 언어이다. (인기도는 1위지만 사용자 수는 1위는 아니다) 인기 많은 이유는 쉽고 빠르게 개발이 가능하다는 점에있다. 그리고 활용성이 넓다. 웹도 만들 수 있고 크롤링 db등 다양한 곳에서 활용이 가능하고 간단한 게임도 만들 수 있다. 몇몇 대기업도 python을 기반으로 운영한다. 다만 문서 전체를 기계어로 변경하는게 아닌 한 줄씩 진행하다보니 처리속도가 느리다. 그러기 때문에 3D 고사양 게임에서는 적합하지 않다. 파이썬은 js와 동일하게 변수, 자료형, 함수, 조건문, 반복문 등이 있다. 변수 js와 다르게 python은 변수를 선언하는 방식이 없다. js는 var, let, const라는 선언 방식이 있었지만, python에 경우..

본 내용은 항해99 & 스파르타코딩클럽에 강의 내용이 포함되어 있습니다. 문제 시 바로 삭제하겠습니다. 4주차 내용에서 약간 심화된 연습을 한 번더 하고 지금까지 작성한 팬미팅 웹페이지를 AWS에서 구입한 도매인에 올리는 작업을 해봤다. 5주차 목차 버킷리스트 Flask를 이용해 API를 만드는 학습을 이어 5주차에도 한 번더 연습을 했다. 연습을 진행 할 수록 기능적으로 심화되갔다. 화성땅 공동구매에서는 client에서 서버로 이름, 주소, 평수를 전달하고 db에 저장 서버에서 client로 db에 저장된 이름, 주소, 평수를 가져옴 두 가지 기능이 핵심으로 사용했고 스파르피디아(영화 카드)에서는 client에서 서버로 url(url을 이용하여 크롤링을 했다), 별점, 코멘트 그리고 크롤링을 이용한 영..

본 내용은 항해99 & 스파르타코딩클럽에 강의 내용이 포함되어 있습니다. 문제 시 바로 삭제하겠습니다. 이번 주차에서는 Flask를 이용하여 서버를 개설하고 3주차에 학습한 mongodb와 크롤링을 이용한 웹페이지를 제작했다. 4주차 목차 Flask 프레임워크 서버를 구동하기 위해 쓰는 프레임워크로 편한 코드 모음이다. 이게 없다면 서버 만드는게 보통일이 아니였을 것 같다. 재밌는 비유가 있었는데 Flask가 없다면 '태양초를 빻아서 고추장을 만드는 격'이라는 말이 자꾸 생각났다. 직접 만든다면 더 좋은 이점은 있을 수 있겠지만, 그 힘듬을 감당하면서까지 직접 만들 일은 없을 것 같다. Flask를 사용하기 전에 static, templates 폴더를 만들고 app.py 파일은 만든다. static은 C..

본 내용은 항해99 & 스파르타코딩클럽에 강의 내용이 포함되어 있습니다. 문제 시 바로 삭제하겠습니다. 이번 주차에서는 파이썬과 mongodb에 대해 학습했다. 파이썬을 이용하여 크롤링를 학습하고 mongodb와 파이썬을 이용해 서버에 데이터를 저장, 수정, 삭제, 가져오기 등을 학습한다.(파이썬의 pymongo 패키지를 이용하여 mongodb관리) 3주차 목차 3주차 부터는 내가 학습해보지 못한 언어와 개념을 학습한다. 매번 html, css, js만을 학습하면서 어떻게 데이터를 가져오고 각기 다른 페이지에 정보를 서로 교환할 수 있는지 (admin 페이지에서 송출하면 client 페이지가 어떻게 받는지) 서버에 정보를 어떻게 활용할 수 있는지에 대해 항상 궁금증을 가지고있었고 어렴풋 어떤 과정을 거쳐..