차곡차곡 개발일지

1. clock.js const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime(){ const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); clockTitle.innerText = `${ hours < 10 ? `0${hours}` : hours }:${ minutes < 10 ? `0${minutes}` : minutes }:${ seconds < 10 ? `0${sec..

1. Event : 웹사이트에서 발생하는 모든 동작 이벤트 함수를 정의할 때마다 JavaScript는 event 객체를 자동적으로 함수에 주입 // 이벤트 발생 시 함수 호출 ​~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ window.addEventListner("eventName", "functionName"); // 창 전체에서 발생하는 모든 이벤트 감지 element.addEventListner("eventName", "functionName"); // 해당 요소에 발생하는 이벤트만 감지 ​~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~..

1. Console console.log(console) /* console{ ... log: ƒ log() ... } */ console도 여러 가지 함수를 가지고 있는 하나의 object log() 는 console 객체에 들어있는 하나의 function 2. Function : 특정한 작업을 수행하도록 작성된 별개의 코드 블럭 필요할 때마다 호출 가능 // function 생성 function sayHello(name, age){ console.log('Hello!', name, "You are", age, "years old."); } sayHello("Lora", 20); function upgradeSayHello(name, age){ // `(백틱)을 사용하면 문자열 안에 변수 삽입 가능 r..

1. 변수 // 변수 생성 및 초기화 let a = 221; let a = 69; // 에러 발생 - Identifier 'a' has already been declared a = b = "Hello World!!!"; var b = 34; var b = 452; b = false; // 상수(constant) 변수 생성 const c = 100; c = 4; // 에러 발생 - Assignment to constant variable. let d = c - 5; // 출력 함수 console.log(a, b, c, d); 한 expression이 끝나면 ;을 붙여 표시 let: 새로운 값 대입 가능 / 동일한 이름의 변수 재선언 불가 / 필요할 때만 사용 권장 O var: 새로운 값 대입 가능 / 동..

JavaScript 1. JacaScript : 웹페이지를 동적으로 제어하기 위한 객체 기반의 스크립트 언어 (스크립트 언어: 독립된 시스템에서 작동하도록 특별히 설계된 프로그래밍 언어) 브라우저에서 사용하는 유일한 언어 웹의 동작을 구현 가능 → 웹사이트를 interactive하게 만들 때 사용 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능 JavaScript는 CSS 및 HTML의 내용, 속성, 스타일을 다루는 것뿐 아니라 사용자와의 상호작용, 폼의 유효성 검증, 다양한 이벤트에 대한 스크립트 실행, 웹 브라우저 제어, 쿠키 등의 설정과 조회 등 많은 것을 할 수 있다. 장점 Fragmentation이 없음 브라우저에서 사용하는 유일..

DISQUS를 사용하기 위해 settings.py 에 django.contrib.sites 를 설치하고 데이터베이스 마이그레이션을 하는데 다음과 같은 에러가 났다. ModuleNotFoundError: No module named 'django.utils.six' 구글링 해보니 Django가 3.x. 버전으로 업데이트 하면서 django.utils.six 라는 모듈이 삭제되었기 때문에 발생하는 에러이고 간단하게 django.utils.six 모듈 대신 six 모듈을 사용하면 해결되는 에러라고 한다. 먼저 이 모듈을 사용하고 있는 파일을 찾아 클릭한다. 클릭하면 파일 상단에 문제가 되는 django.utils.six 을 사용하고 있는 것이 보인다. 원래 있던 코드를 주석처리하고 다음과 같이 수정한다. 참고..

INSERT INTO post_hashtag(post_id, hashtag_id) VALUES(18, 2) 위의 쿼리를 실행했을 때 다음과 같은 에러가 났다. Error Code: 1364. Field 'id' doesn't have a default value 이 에러의 의미는 문장 그대로 id 컬럼에 기본값이 없다는 뜻. INSERT 명령을 내릴 때는 모든 컬럼에 값을 넣어줘야 한다. 그러나 기본값이 있거나 Auto Incremental 속성을 체크한 컬럼은 INSERT 명령에서 값을 넣어주지 않아도 자동으로 값이 들어가기 때문에 생략이 가능하다. 그 외의 컬럼들은 값을 넣어줘야 한다. 즉, 나 같은 경우는 테이블을 만들 때, 로우 ID의 Auto Incremental 속성을 체크하지 않아 생긴 에러..

1. 데이터베이스 및 UI 설계하기 인스타그램 UI 구성 데이터베이스 테이블 설계 및 구현 2. 앱 만들기 instagram, accounts 앱 만들기 views.py 분리하기 3. 회원가입 페이지 비밀번호 암호화 함수 구현 - 해시 함수 4. 로그인 페이지 세션에 사용자 ID 저장하기 5. 로그아웃 뷰 6. 메인 페이지 6-1. 좋아요 뷰 / 좋아요 취소 뷰 6-2. 북마크 뷰 / 북마크 취소 뷰 6-3. 해시태그 띄우기 7. 포스트 리스트 페이지 7-1. 팔로우 뷰 / 언팔로우 뷰 7-2. 팔로잉 계정 리스트 모달 7-3. 컬렉션 탭 추가 8. 포스트 상세 페이지 9. 포스트 업로드 페이지 9-1. 해시태그 입력 10. 회원 정보 수정 페이지 11. 비밀번호 수정 페이지 12. 포스트 수정 페이지 ..