듀의 자료저장소

글자 수 계산기 프로그램을 간단하게 직접 만들어보았다. (코드라이언 javascript 강의를 수강한 내역입니다.) ※ 입문자들에게 적절한 수준의 프로젝트! 출처 DOM Document Object Model → 화면(문서)을 구성하는 코드에 접근하여, 원하는대로 조작 가능하다. 자바스크립트는 dom으로, 웹 화면을 구성하는 모든 것들에게 접근이 가능하다. ex) dom으로 접근해서 글씨를 바꾸거나, 새로운 태그를 추가하거나 class를 추가하는 등의 조작이 가능하다. 글자수 계산기도 하나씩 단계를 생각해보면, 쉽게 만들 수 있다. 어떤 과정과 절차가 필요한지 1. textarea 안의 값 가져오기 document.getElementById('id').value document: dom의 진입점 역할 g..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2022. 1. 26. 13:55

로또 번호 생성 알고리즘 코드를 javascript로 작성해보았다. 전체 로직: 1~45개의 공 중, 랜덤으로 6개의 숫자를 뽑는다. #1. 공 1개부터 뽑기 Math.random(); Math.random()*45; Math.random()*45 + 1; 0 이상 ~ 45 미만 실수에 +1씩 더해준다. 그러면 1이상 ~ 46미만 실수 중에 랜덤으로 하나를 뽑을 수 있게 된다. parseInt(); 실수(float)를 정수(int)로 변환 → 소수점을 버린다. 45개의 공들 중, 공 하나를 뽑는 로직 ※ 공 6개를 뽑기 위해서, 위와 같은 변수를 6개 만드는 것은 비효율적!! #2. 공 6개 뽑기 - 배열, push 배열(array) 자료구조 - 하나의 변수 안에 여러 개의 값들을 담을 수 있다. → i..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2022. 1. 24. 14:36

※ 해당 글은 개인 회고록에 가깝습니다. 이걸 보시고 투자하지 마시고, 그냥 편하게 읽어주세요. 개인의 회고와 투자 공부 계획에 관한 글입니다. 회고 2021년 가을에 엠투엔이라는 종목을 들어갔다. 신라젠의 거래 재개 여부와, 해당 회사에 관해서 많은 조사를 했다. 주로 정치적으로 엮인 관계가 어떤 것일지, 현재 하고 있는 임상시험이 어떤 것이 있는지 프로젝트 면에서 분석을 했다. 차트 쪽은 고려하지 않았다. [실패한 이유] 기심위 발표일 운세가 좋지 않다고 생각은 했는데 ... 결국 오늘 쩜하한가를 맞았다. (1월 19일) 그리고 내일도 맞을 것 같다. 매도잔량에 대략 380만주라는 시체들이 쌓였고, 하한가가 하루종일 풀리지 않았다. 개인적으로 실패한 이유를 적어보자면 다음과 같다. 1. 유/무상증자 ..

경제적 독립/stock 2022. 1. 24. 09:47

※ 해당 글은 모던자바스크립트튜토리얼을 정리한 것입니다. fetch - javascript로 서버에 네트워크 요청을 보낸 후, 응답(정보)을 받아오는 기능 AJAX: 비동기적으로 추가되는 정보를 가져올 수 있다. fetch는 AJAX중의 하나. 요청(Request) - 주문 제출 - user 정보 읽어오기 - 서버의 최근 업데이트 정보 받아오기 특징: 새로 고침을 하지 않고, 네트워크 요청을 할 수 있다. 기본 형식 let promise = fetch(url, [options]) * url : API 서버 주소 * options : 매개변수, method 혹은 header를 지정 가능하다. options : 매개변수, method 혹은 header를 지정 가능하다. ※ options에 GET, POST등..

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

*생활코딩 강의를 필기했습니다. 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