바닐라코딩 부트캠프 (12) 썸네일형 리스트형 Single Page Applications, Server side rendered applications Single Page Applications SPA 클라이언트 사이드 렌더링 사용 단일 페이지 응용 프로그램 1개의 페이지만 있는 어플리케이션 하나의 HTML에서 UI 변경 최초 한번 페이지 전체를 로딩 =>이 후 부터는 데이터만 변경하여 사용 페이지 이동시 서버로부터 완전한 새로운 페이지 불러오지 않고 현재 페이지를 동적으로 다시 작성 HTML, JS, CSS 하나의 페이지로 불러옴 => 사용자의 동작에 응답 사용자 측면 전체 페이지 새로고침 => 과도한 네트워크 트래픽을 유도 JSON, XML 서버 요청, 응답 장점 손쉬운 운영 배포 사용자 친화적( 빠른 반응성, 화면전환 에니메이션 등 ) //처음 받은 데이터를 사용 서버 요청이 적음( REST API를 통한 데이터 송수신 ) .. CORS CORS 도메인, 포트가 다른 서버의 자원 요청하는것 동일 출처 정책 SOP => 보안 목적으로 차단 웹페이지 스크립트는 그 페이지의 같은 서버에 있는 주소로만 ajax 요청 가능 대규모 웹 생김에 따라 외부 호출 상황 많아짐 =>CORS 탄생 서버에서 외부 요청 허용시 AJAX 요청 가능 해결책 1 같은 도메인 이동 2 CORS 활성화 3 프록시 우회해서 => 서버대 서버로 가져옴 예외) img, 비디오 스크립트 상관 X 스크립트 => JSONP // 요즘 안씀 client side에서 해결법 테스트, 개발단계 쉽게 => 웹 브라우저 실행옵션, 플러그인 설치 cors 구현 X , 서버 ajax요청 ,서버 컨트롤 불가능 => JSONP Ajax 요청 해야하는 다른 도메인 서버를 클라이언트와.. 정렬 알고리즘 피드백 정렬 알고리즘 피드백 문자열은 상수로 관리 함수 선언문에는 세미콜론 X 동사로 시작하는 변수명 => 함수 class명 통일하기 => https://www.w3schools.com/js/js_conventions.asp 비슷한 성격 상수 object로 묶어서 사용 헬퍼 함수 ? 비교 연산자 사용시 =>비교대상 왼쪽 비교기준값 오른쪽 필요한 주석의 경우 주석 레이블 컨벤션 // TODO: something to do // FIXME: something have to fix let, const 구분하여 사용 변수명 구체적으로 짓기 ( l, r 등 과도한 축약어 사용 지양) input 받는 부분을 개선 // 에러처리 , 2자리수 이상 숫자 입력 등등 createElement 변수명 div, divElemen.. 인터넷 브라우저에 주소 입력시 일어나는 일 1. 사용자가 주소창에 URL 주소 입력 웹 브라우저가 URL 해석 2. DNS 조회 URL 주소중 도메인네임 부분을 DNS 서버에서 검색 => 도메인 네임 해당 IP 주소 반환 - Domain Name Server : 도메인 이름을 호스트 네트워크 주소 바꾸거나, 변환해줌 3 웹 서버에 HTTP 요청 메시지 생성 받은 IP => HTTP 프로토콜 사용 => HTTP 요청 메시지 생성 TCP 프로토콜 사용 => 인터넷 거침 =>해당 IP 주소의 컴퓨터로 전송 HTTP : HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 TCP : 네트워크의 정보 전달을 통제하는 프로토콜 4. HTTP 응답 메시지를 생성 웹 서버에서 URL 정보 해당하는 데이터 검색 => HTTP 응답 메시지를 생성 TC.. async 과제 리뷰 bool 변수명 맨 앞에 is나 has 붙여주기 https://dev.to/michi/tips-on-naming-boolean-variables-cleaner-code-35ig 변수명 어떤 역할, 어떤 형태의 값이 들어있는지 ( 복수,단수) 예측 가능하도록 지어주기 !bool값들 true로 해주기 개발공부시 참고사항 개발공부시 참고사항 과제는 빠르게보다 꼼꼼하게 기독성 책 읽듯이=> 사람이 사용하니 들여쓰기 가능한 자제 // if, else 남용X 테스트코드 하나하나 꼼꼼하게 보기 알고리즘 => 경우의수 , 로직을 세우는 연습 코드워즈, 프로그래머스 //코드워즈 영어문제 추천 알고리즘문제 화목 후순위 => 주말 과제리뷰 =>효율 따지기 X => 지금은 성공 집중 //추후에 효율도 생각 잠 줄이기, 일주일 100시간 투자 js 연습문제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function myFunction () { console.log("거북"); } myFunction.prototype.hello = "HIHI"; var a = myFunction(); // undefined // myFunction 호출의 실행 식에 console.log가 찍히는것이지 // 함수의 실행결과는 undefined console.log(a.hello); // error 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function myFunction () { console.log("거북"); return { hello: "파이리" }; } myFunction.prototype.hello = "HIHI"; va.. async) memoize 메모 memoize 메모 기능, 비동기 값 기억 함수리턴 변수에 함수를 받고 인자가 누적 인자 중복 => 저장소에 있는 값 리턴 새 변수에 함수 발전된 함수?? 인자 함수 개량 리턴 함수 연산한적 있는지,없는지 비교 인자 , 콜백 함수 마지막에 인자 들어온인자 => 결과 객체 만들기 객체에 인자가 있느냐 연산 => 저장 답은 콜백한테 2개 인자가 저장소에 값이 있냐 ?? 비동기 완료후 => 비동기함수 마지막으로 인자가 저장소객체에 저장후 콜백 --------------------- 비동기 함수의 결과를 캐시합니다 함수 결과를 저장할 해시를 작성할 때 , 해시에서 콜백을 생략하고 선택적 해시 함수를 사용 가능 비동기함수 실패시 결과 반환 X 후속 호출 => 랩핑된 함수 해시함수 지정 X => 1번째 인자가 해시.. 이전 1 2 다음