분류 전체보기 (37) 썸네일형 리스트형 [JavaScript] Bind가 뭐죠? Bind란 무엇일까? 모든 함수의 메소드로 context를 수정하게 해주는 것이다. bind는 함수처럼 호출 가능한 "특수객체"를 반환한다. 이 객체를 호출하면 this가 원하는 형태로 고정된 함수가 반환된다!! let user = { firstName: "John" }; function func() { alert(this.firstName); } let funcUser = func.bind(user); funcUser(); // John 이렇게 바인딩을 시켜주면 func내부의 this는 user를 가리키게 된다!! 신기하다.. let user = { firstName: "John", say(phrase) { alert(`${phrase}, ${this.firstName}!`); } }; let say .. [Javascript] fetch()로 API 요청 보내기 fetch란? 클라이언트에서 직접 API를 호출해주는것 (브라우저에서 직접 비동기 http통신을 하는것을 Ajax라고 불렸었다.) 브라우저에 내장된 함수로 예전에는 requrest,axios,jQuery같은 라이브러리를 사용해 API를 호출했다. 즉, 프론트엔드에서 백엔드에 요청할때 쓰인다! fetch사용법 fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 첫번째 인자로 URL을 두번쨰 인자로 옵션을 객체로 받는다. Promise객체를 리턴하기 때문에 비동기적으로 실행된다. GET요청 fetch("localhost:3000/api/u.. REST API(그런 REST API로 괜찮은가?) 오늘날 대부분 "REST API"라고 불리는 것들은 REST하지 않다!! 그럼 REST가 뭔데? 컴퓨터 시스템와 인터넷 사이에 상호 운용성을 제공하는 방법 => 즉, 서로 독립적으로 발전이 가능한 형태를 말한다. REST를 만든 로이필딩은 "웹을 망가뜨리지 않고 http기능을 추가하고 싶다"라는 생각으로 만들었다고 한다. 그러면 REST를 지키려면 어떻게 해야돼? Client-Server Stateless Cache Uniform Interface Layered System Code-on-Demand (optional) 를 만족 해야한다. => http만 잘 따라도 1,2,3,5는 지킬 수 있다. => 6은 서버에서 코드를 클라이언트로 보내 실행할 수 있어야 한다. 자바스크립트를 의미하고 필수는 아니다... 이벤트 버블링, 캡쳐, 위임 이벤트 버블링 이벤트가 발생했을때 상위 컴포넌트로 이벤트가 전달되는 특징 div->div->div->body 이런식으로 이벤트가 상위로 전달된다. document.querySelector('parent').addEventListener('click', (e)=>{ console.log(e.target.className); }); document.querySelector('child').addEventListener('click', (e)=>{ console.log(e.target.className); }); child 를 클릭하면 child, parent순서대로 콘솔에 찍힌다. 브라우저에 의해 화면에 이벤트가 발생했을때 최상위요소까지 이벤트를 전파시키기 때문이다. *각 태그마다 이벤트가 등록 되어 있어 .. 3. [장고(Django)_맛집 공유 사이트] CRUD 구성 두개의 CRUD구성이 필요하다. 1. 카테고리에 대한 CRUD 2. 맛집에 대한 CRUD(다음페이지) 1. 카테고리에 대한 CRUD 카테고리에 대한 모델 정의 - 하나의 맛집이 하나의 카테고리에 속하는 방법으로 모델 구성 예정(맛집에 대한 CRUD에서 구성예정) - 따라서 카테고리에 대한 모델은 요소로 "카테고리 이름" 만 필요하다. 카테고리 모델 생성 데이터베이스 설정 작업 python manage.py makemigrations python manage.py migrate 추가 버튼을 누르면 동작하도록 만드는 로직 구성 url패턴 추가 views.py수정(url에 맞는 함수 생성) Create_category함수에서 읽어온 카테고리 데이터를 index페이지에 뿌림 모든 Category객체를 읽어오고 .. 2. [장고(Django)_맛집 공유 사이트] URL 및 템플릿 설정 1. template/shareRes 폴더 생성 및 html 파일 추가 + 수정 : categoryCreate.html파일도 추가해준다. 2. 메인 화면의 url설정 3. 이메일 전송 app 3.1 url 설정 - sendEmail/urls.py 파일 생성 한 뒤 3.2 views.py 수정 - sendEmail/views.py 수정 일단은 화면에 단순 출력 나중에 이메일 보내는 세부적인 로직 구성 예정 4. ShareRes App 4.1 url 설정 shareRes/urls.py 파일 추가 및 작성 4.2 views.py 수정 shareRes/vies.py 파일 수정 5. 실행결과 python manage.py runserver 결과화면 - 메인화면 (index.html) - 맛집 추가화면(restau.. 1. [장고(Django)_맛집 공유 사이트] 프로젝트 및 app 구성 1. 깃허브 repository 만들기 2. repository clone받기 3. 장고 프로젝트 만들기 4. app 구성(두개의 app 추가) - python manage.py startapp 만들려는앱이름 5. 만들어진 app을 장고프로젝트(setting.py)에 추가 6. .gitignore추가 7. 깃허브에 업로드 결과 5. [장고(Django)_To-Do-List] 목록 숨기기 기능 구현(데이터베이스 삭제X) 완료 버튼을 눌렀을때 데이터베이스에서 삭제하지 말고 화면에서만 안보이게 만들어보자. 1. 데이터베이스에 isDone변수 추가하기 숨김처리를 위한 데이터 속성을 추가해준다. 디폴트 값은 false. 2. 수정사항 데이터베이스에 반영(migration) 업데이트 된 데이터베이스를 반영시켜준다. 3. url 추가 새로운 함수를 사용하기 위해 url을 추가해준다. 4. doneTodo함수 생성 deleteTodo와 비슷하지만 숨김처리 역할을 하는 함수를 생성한다. 데이터베이스에 새로 생성된 속성에 값을 넣어주고 저장해준다. 5. HTML 파일 수정 기본값(False)가 아니면 완료버튼이 눌린 상태이므로 form을 생성하지 않는다. 어떤 url을 보낼건지 수정해줘야 한다. 6. 결과 - 데이터베이스를 통해 확인 .. 이전 1 2 3 4 5 다음
