라쿤의 끄적끄적

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. JavaScript with Nomadcoder JavaScript project nomadcoder에서 진행하는 이 강의의 프로젝트는 클론 코딩이다. 클론 대상은 momentum 이라는 Todolist 페이지 이다. 특징은 가운데 시계가 있고, 배경이 변하고, todolist기능, 날씨 정보기능이 있다. 현재 해당 강의는 모두 들어서 프로젝트는 끝냈으나 추가적인 기능 및 CSS를 추가하여 마무리 하였다. 완료한 project와 해당 사이트 비교해 보기 momentum 사이트 (클론하고자한 크롬 앱) 내가 구현한 크롬앱 기존에 완..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. JavaScript with Nomadcoder JavaScript project nomadcoder에서 진행하는 이 강의의 프로젝트는 클론 코딩이다. 클론 대상은 momentum 이라는 Todolist 페이지 이다. 특징은 가운데 시계가 있고, 배경이 변하고, todolist기능, 날씨 정보기능이 있다. 실시간 날씨 가져오기(weather.js) 현재의 경도 위도를 가져와서 경도위도의 좌표를 통해서 날씨open API를 이용해서 현재 위치의 날씨 정보를 불러와서 나타낼 것이다. 초기화 함수 (init) Coords는 좌표 뜻을 ..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. 해당 강의는 무료임 JavaScript with Nomadcoder JavaScript project nomadcoder에서 진행하는 이 강의의 프로젝트는 클론 코딩이다. 클론 대상은 momentum 이라는 Todolist 페이지 이다. 특징은 가운데 시계가 있고, 배경이 변하고, todolist기능, 날씨 정보기능이 있다. JavaScript 파일 셋팅 보통 웹사이트 처럼, html, css, js로 구성된다. 기능들은 js 한파일에 모으지 않고 기능별로 나누어 구성하여 html 연결한다. 기능 : 사용자 이름 입력시 인사(gr..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. JavaScript with Nomadcoder JavaScript basic why js ES Variable let var const를 활용 변수명은 calmel case(소문자로 시작해서 스페이스 필요하면 대문자를 섞어 씀) 변수 작동 과정 : 생성(Create) -> 초기화(Initialize) -> 사용(Use) a = 12인 경우 a는 변수 생성, = 12는 초기화 과정, 사용은 필요할때 a를 호출하여 활용 Comment (// or /* ) Data Type String text use with "" Boolean t..

JavaScript08 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의가 엄청 잘되 있으니 강의를 찾아보자!) 드림코딩by엘리 - JavaScript JavaScript async, await API 동기 vs 비동기 동기 사용시 백엔드에서 가져올때 시간이 걸리고 기다려야해서 다음 코드를 진행 못해 사용자는 버벅거림(중간 로딩)을 볼 수 밖에 없음 비동기를 사용해서 요청만 해놓고 기다리지 않고 다른 코드를 진행시켜 완료후에 요청한 결과를 전달함 // 동기 사용 // raccon 표시까지 10초 function fetchUser() { // do network request in 10 sec... return &#3..

JavaScript08 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의가 엄청 잘되 있으니 강의를 찾아보자!) 드림코딩by엘리 - JavaScript JavaScript Callback 비동기 처리의 시작 콜백 이해하기 동기(sync)와 비동기(async) Synchronous(동기) : 코드 블럭이 쓰여진 순으로 즉시실행하는 것 javaScript는 동기적인데, 호이스팅 이후에 코드블럭을 순서대로 실행한다. (JavaScript is synchronous., Execute the code block in oder after hoisting.) hoisting(호이스팅): var, function declarati..

JavaScript07 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의가 엄청 잘되 있으니 강의를 찾아보자!) 드림코딩by엘리 - JavaScript 드림코딩 Array_quiz (강의 듣고서 확인) 일단, 강의 들으면서 놓친 Array API 위치를 확인함 가독성 좋게 메소드를 연달아 쓸수 있는 법을 확인함(리얼 꿀팁) 'use strict'; // Q1. make a string out of an array console.log(' Q1. make a string out of an array') { const fruits = ['apple', 'banana&#3..

JavaScript06 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의를 꼭보길 바란다 너무 잘되어 있다.) 드림코딩by엘리 - JavaScript ES Symbol String method (수정 21/02/16 해당 string method는 symbol인 경우의 method였다.오해 하지 말길! string method 는 다음 글에서 다시 알아볼 예정) interface String { /** * Matches a string or an object that supports being matched against, and returns an array * containing the results of tha..

JavaScript05 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의를 꼭보길 바란다 너무 잘되어 있다.) 드림코딩by엘리 - JavaScript Object (dict in python) one of the JavaScript's data types. a collection of related data and/or functionality Nearly all objects in JavaScript are instances of Object 오브젝트가 없으면 일일이 변수들을 선언해 주어야 하고 코드의 중복이 많아짐 정리가 어려워 찾기가 어려움 (접근하기도 불편해짐) 즉, 자료의 검색, 정렬, 삭제, 추가가..

JavaScript04 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의를 꼭보길 바란다 너무 잘되어 있다.) 드림코딩by엘리 - JavaScript Class vs Object Class는 연관된 데이터를 묶어 정리하는 container 역할 Class는 fields와 methods가 종합적으로 묶여 있음 data class : data인 fields만 들어 있는 Class incapsulation : class 안에서 내부적으로 보여지는 변수, 밖에서 보일수 있는 변수로 나누는 것 inheritance 객체로 잘 정의해서 만들수 있어야 한다. // person 이라는 클래스 class person{ name; /..

JavaScript03 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의를 꼭보길 바란다 너무 잘되어 있다.) 드림코딩by엘리 - JavaScript JavaScript functions 각각 프로그램들은 고유한 기능들이 있고 그 프로그램 안에서도 각각의 기능들을 수행하는 function들이 존재함. JavaScript도 java처럼 pure한 Object 언어가 아님 (프로토타입 베이스의 가짜 object 언어) function 을 sub-program이라고 하기도 함! input을 받아서 output으로 return 하는 것이 function임 언어내 내장 함수 또는 API(Application Programmi..

JavaScript02 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다. (강의를 꼭보길 바란다 너무 잘되어 있다.) 드림코딩by엘리 - JavaScript JavaScript 지난시간 variable vs object primitive variable은 값 자체가 메모리에 할당됨 object 는 const를 통해 오브젝트를 할당하면 실제로는 reference를 먼저 가르켜 메모리에 reference가 할당되고 reference가 다른 값들을 가르킴 JavaScript operator 1. String concatenation (문자 연쇄) str + str = strstr 신기한 것 string num('12&#..

JavaScript01 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 들었다.(강의를 꼭보길 바란다 너무 잘되어 있다.) 드림코딩by엘리 - JavaScript 물론, documents 를 보는 것도 좋지만 먼저 강의를 보고 documents를 보려고 한다. 정말 강의를 풀어내는 방식이 깔끔하고 의문점 갖게 해주고 잘 설명해 주신다~ 생활코딩님 처럼 너무 잘하신다~ JavaScript의 역사와 미래 Netscapte 회사 Mosaic web Browser(Marc Andreessen) -> Netscape사의 Netscape Navigator 브라우저(1994) "정적인 웹사이트" -> "동적인 웹사이트"에 대한 갈망 Script 언어 추가..

Django 게시판 기능 보완 글 목록에서 제목 눌러서 글 보기 창 들어가기 (연결) table요소의 열 태그인 tr태그에 onclick으로 연결해 주었고 추가적으로 포인터가 있으면 좋을 것 같아서 role="button"을 통해서 마우스를 올리면 손가락 표시가 나타나게 하였다. {% raw %} {% extends "base.html" %} {% block contents %} # 제목 아이디 일시 {% for board in boards %} {{ board.id }} {{ board.title }} {{ board.writer }} {{ board.registered_dttm }} {% endfor %} {% if boards.has_previous %} 이전으로 {% else %} 이전으로 {% ..

Django 게시판 게시판 예외처리 예외 처리 함수 try : 에러나 날수도 있는 함수 부분 except : 에러가 나는 경우 실행 코드 except 모델.에러명:을 통해서 특정 에러에 대해 조건을 줄수 있다. 에러명은 django에서 사이트 돌릴때 해당 사이트의 에러창을 참고 함수 탈출 및 실행 명령문 break , continue : 반복문에서 탈출이나 실행 return : 함수에서 탈출 pass : 함수 및 반복문 모두 실행 예외 상황 존재하지 않는 아이디로 로그인 하는 경우 없는 글의 pk로 글 자세히 보기를 하는 경우 로그인 없이 글을 쓰는 경우 페이징 기능 게시글이 어느 정도 이상 생기는 경우 페이지를 생성해서 넘길수 있게 하는 기능 html 만들기 목록 하단에 네비게이터를 이용하여 페이징 버..

Django 게시판 만들기 게시판 리스트 화면 만들기 기본 html 화면 구성만들고 연결 base.html 가져오기 base.html {% raw %} {% block contents %} {% endblock %} {% endraw %} board_list.html 테이블 요소의 태그 테이블 요소 설명 사이트 : 테이블 태그 : 행 태그 (보통 모두 행 태그로 묶음) : 헤더 셀 태그 : 셀 태그 기본적인 틀만 만들어 둔 상태 {% raw %} {% extends "base.html" %} {% block contents %} # 제목 아이디 일시 1 테스트 제목 테스트 아이디 2021-02-04 21:11:00 글쓰기 {% endblock %} {% endraw %} 테스트를 위한 간단한 views ..