듀의 자료저장소

*생활코딩 강의를 필기했습니다. Ajax 웹페이지 정보를 부분적으로 변경하는 기술 ex) 검색어 자동완성 기능 - 모든 예상 검색어를 다운로드 (x) → 브라우저와 웹서버가 ajax로 실시간 통신하고 있다. (검색어 한 글자씩 입력할 때마다 통신이 이루어짐) 왜 필요한가? 페이지 전체를 reload하면, 사용자 관심도 ↓ 모든 페이지를 다 전송해야하므로 데이터 지출 ↑ 처음 주목받은 계기 2004년, 구글이 지메일 서비스에서 본격적으로 Ajax를 활용! → desktop applcation처럼 페이지의 reload없이 받은 정보함의 정보를 보였다. → Asynchronous JavaScript and XML라는 이름도 이때 처음으로 생겼다. 웹에 대한 고정관념의 변화 * Ajax는 reload 없이, 웹..

IT 공부/백엔드(Back-end) 2022. 1. 21. 10:13

*아래 글을 번역했습니다 How To Use the JavaScript Fetch API to Get Data | DigitalOcean In this tutorial, you will create both GET and POST requests using the Fetch API. www.digitalocean.com 소개 XMLHttpRequest를 API를 요청하는데 쓰던 시절이 있었습니다. Promise를 포함하지도 않고, 바닐라 자바스크립트 코드를 사용하지도 않았었죠. 제이쿼리를 쓰면서, 우리는 더 클린한 jQuery.ajax()구문을 사용할 수 있게 되었습니다. 이제 자바스크립트는 자체적으로 API 요청을 하기위한 방법이 생겼습니다. Fetch API는 Promise로 서버 요청을 할 수 있는..

IT 공부/백엔드(Back-end) 2022. 1. 17. 13:11

자바스크립트는 객체 지향(Object-Oriented Programming) 언어지만, 다른 언어들과 조금 다르다. C++, JAVA : class 기반 언어 Javascript : prototype 기반 언어 객체(Object): 일종의 데이터 타입이다. "어떤 것"이라고도 할 수 있다. 여러 속성을 하나의 객체에 담아서, key와 value값을 저장할 수 있다. 축구선수 박지성을 하나의 객체로 잡았을 때, 다음과 같은 정보를 구분해볼 수 있다. 속성(Property): 이름, 나이, 키.. 객체의 메소드(Method): 대상의 동작 - 객체(Object)를 코드로 표현해본 방법 객체의 또 다른 말은 인스턴스(instance) 클래스(class)는 일종의 붕어빵 틀로, 클래스를 쓰면 객체(Object)..

IT 공부/백엔드(Back-end) 2022. 1. 14. 10:17

웹브라우저? 웹애플리케이션 웹브라우저 "위에서 돌아가는 웹사이트" ( 웹사이트 = 웹페이지 = 웹애플리케이션 ) 웹브라우저도 여러 기능을 가진다. (제목표시, 목록을 표시, 링크를 표시하는 기능) html언어의 문법에 따라, 웹애플리케이션에 필요한 기능들을 호출한다. (웹 애플리케이션의 제작원리) 웹브라우저에서 html로 필요한 기능을 호출하듯이, Node.js도 javascript를 이용해서, node.js runtime 기능중 필요한 것들을 호출한다. → node js application을 만들어내는 과정 브라우저가 서버 통신을 받는 방법 1. 웹 브라우저에 주소(url)을 입력해서, 사용자가 요청을 한다. 2. 웹서버는 요청에 따른 정보를 찾아서 응답해준다. Apache, nginx같은 서버와 관..

IT 공부/백엔드(Back-end) 2022. 1. 13. 16:22

node.js를 하려면 결국 자바스크립트를 잘해야 한다. 기본 문법을 정리하려는데, 정립이 잘 안된 부분만 기록해보기로 했다. *사진, 자료 출처: 구름 EDU 강의 할당 연산자 「+=, -=, *=, /=」 연산과 동시에 값을 변수에 할당 a += 1 ▶ a = a+1 조건 연산자 「(조건)? A:B」 조건이 참일 때 앞에 있는 A 수행, 거짓이면 뒤에 있는 B를 수행 → a가 실제로 b보다 큰 게 맞으므로, 앞에 있는 문장을 출력 javascrip의 데이터 타입 사실 자바스크립트는 자료형 개념이 없다. 다른 언어와 달리 int a, 이런 식으로 변수 선언할 때 자료형을 쓰지 않는다. (자바스크립트 기본 문법들 중에 다른 언어와 달리 혼란을 주는 것들이 종종 있다.) 변수 자체에 입력되는 값에 의해, ..

IT 공부/백엔드(Back-end) 2022. 1. 12. 15:22

티스토리에서 키워드 분석을 하려면, "구글 키워드 플래너" 기능을 활용해볼 수 있다. 광고주뿐만아니라, 블로거들한테도 매우 유용한 기능! 키워드를 잘 선정해야, 조회수나 애드센스 수익이 높아지므로 사용하면 좋다. 1. 구글 애즈에 접속해서 가입 2. 시작하기 버튼 click 3. 초대장을 받고 싶은지, 안 받고 싶은지 선택해서 제출 4. "키워드 플래너 살펴보기" 버튼 클릭 ※ 구글 애즈에서 키워드 플래너가 뜨지 않을 경우 해당 화면에서 "보고서" 버튼 click 여기서 키워드 분석을 위한 카테고리로 진입할 수 있다. 5. "새 키워드 찾기" 버튼 click 여기서 검색에 노출되기 원하는 단어를 입력할 수 있다. 한번에 여러 개의 단어도 입력 가능하다. 6. 실적 거두기 버튼 click 구글 키워드 플래..

IT 공부/마케팅(Marketing), 블로그(Blog) 2022. 1. 11. 15:11

Node.js의 특징 1. 싱글 스레드 2. 비동기 방식 3. 자바스크립트 기반 → 프론트엔드 뿐만 아니라, 백엔드 또한 자바스크립트로 작성한다. AJAX (Asynchronous JavaScript and XML) 최근 웹 애플리케이션들이 AJAX를 사용해서 동적인 웹을 만들고 있다. ex) 구글의 여러 서비스, 트위터, 페이스북, 네이버, 다음.. → AJAX 도입 이후, 자바스크립트의 사용성이 높아졌다. 웹 애플리케이션과 프레임워크 하이브리드 모바일 애플리케이션 개발을 위해 React Native, Ionic, PhoneGap과 같은 프레임워크들이 생겨났다. 1. 모바일 지원 자바스크립트로 모바일 애플리케이션 코드를 작성하면, 위의 framework들이 iOS와 Android에서 동시에 동작할 수 ..

IT 공부/백엔드(Back-end) 2022. 1. 10. 14:50

수업시간에 블로그 웹사이트 만들기를 했다. 이번 프로젝트 난이도는 5점 만점 중에 3점. 감귤마켓 구현이 4점이라면, 어려운 수준은 아니라고 하셨다. * 이번 포스팅 code들과는 상관없지만! 블로그 API라면, 아래 튜토리얼도 괜찮다고 말씀해주셨다. (node, react까지 사용, 로그인 기능도 구현한다) https://youtu.be/OML9f6LXUUs 1. 초기세팅하기 // npm init --yes // npm i nunjucks express cors helmet morgan // npm i nodemon --save-dev // -> nodemon app 으로 실행 가능 ① app.js 파일 생성, 터미널 명령어 아래 사진(경로) 참고해서, 명령어를 입력한다. cd 011_blog_api ..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2022. 1. 7. 11:00