본문 바로가기
반응형

자바스크립트

반응형
[자기계발]/유튜브로 코딩배우기 2021. 8. 23. 코딩 초보 반응형 웹사이트 만들기 피드백 드림코딩엘리 채널에서 반응형 웹사이트 만들기 실습을 해보았다. 따라 쓰는 것은 누구나 다 할 수 있으므로 여기서 제안하는 것은 먼저 결과물을 '스스로' 만들어보라는 것이다. 그래서 한 번 해보았다. 1차 시도: 30분 but 매우 허접함 이후 영상을 한 번 시청하여 아이콘, 폰트를 로드하는 사이트와 전체적인 윤곽을 배웠다. 2차 시도: 총 2시간이 걸렸고, 비슷하게 만들었으나 JavaScript 쪽으로 까지 미치지는 못하였다. 이후 영상을 시청하여 HTML과 JS를 연결시키는 방법과 여러 디테일에 관해 배웠다. 밑에 정리를 하였고, 이 지식을 바탕으로 3차 시도를 해볼 것이다. 3차 시도: 총 2시간 반이 걸렸고, HTML과 CSS에서 2가지 상황에서 막혔었다. 또한 CSS에서 :hover 를 a에다가 ..
[자기계발]/유튜브로 코딩배우기 2021. 8. 6. [드림코딩 엘리] 자바스크립트 배열 개념 & APIs 정리 토끼와 당근 같은 비슷한 타입의 Object들을 묶어 놓는 것을 바로 자료구조라고 한다. 보통 다른 언어에서는 이런 자료구조에 동일한 tpye의 object만 담을 수 있다. 하지만 자바스크립트는 dynamically typed language로 type이 동적으로 정의가 된다. 즉, 한 바구니 안에 다양한 종류의 data들을 담을 수 있다. 그러나 이런식으로 프로그래밍 하는 것은 좋지 않다. 나중에는 자료 구조와 알고리즘을 꼭 공부해야하는데, 새로운 데이터를 얼마나 효율적으로 검색 / 삽입 / 정렬 / 삭제할 수 있는지 이런 효율성을 같이 공부하면 매우 도움이 될 것이다. 나중에 어떤 문제를 해결 하느냐에 따라서 많은 자료 구조들 중에 어떤 자료구조를 선택하는지, 그 선택할 때 '검색 삽입 삭제 정렬'..
[자기계발]/유튜브로 코딩배우기 2021. 8. 5. [드림코딩 엘리] 자바스크립트 Object를 만드는 방법, key 사용법, 이번 편에서는 자바스크립트 Object를 알아볼 것이다. 오브젝트란 자바스크립트의 데이터 타입 중 하나이며 관련 데이터 및 기능의 모음이다. Javascript의 거의 모든 객체는 Object의 사례이다. const name ='ellie'; const age = 4; print(name, age); function print(name, age) { console.log(name); console.log(age); } primitive 타입은 변수 하나당 값 하나를 담을 수 있고, 이름과 나이를 각각 parameter로 전달해줘야 한다. 만약에 위에처럼 코드를 작성하면 관리하기도 힘들고, logical 하게 골고루 생각할 수 없기 때문에 좋지 않다. 그래서 objet를 쓰는 것이다. 1. Literals..
[자기계발]/유튜브로 코딩배우기 2021. 8. 3. [드림코딩 엘리] class와 object의 차이점, 객체지향 언어 클래스 정리 이번 편의 핵심은 사물과 물체들을 class로 정리할 수 있는 눈을 기르는 능력을 갖는 것이다. 강의가 끝나고 어떻게 저것들을 class로 만들 수 있을지 생각해보라. 또한 쇼핑몰 만들 때 or 수강신청 프로그램을 만들 때 어떻게 class로 잘 정리할 수 있을까를 생각해보자. Class 와 Object class를 이용해서 상속과 다양성이 일어날 수 있는데 이런 모든 것들이 가능한 것이 바로 객체지향 언어이다. e.g.) 캡슐화, 상속, 다양성 등 person 이라는 class 안에는 name과 age 라는 속성이 있고, speak() 말하는 function이 들어있다. class 안에는 이름과 나이 같은 속성(field)가 들어있고, 말하는 행동(method)가 들어있다. class는 조금 더 연관이..
[자기계발]/유튜브로 코딩배우기 2021. 8. 1. [드림코딩 엘리] 자바스크립트 Function Expression이란? 저번 글에서는 Function declaration을 알아보았다. 이번에는 Function Expression에 대해 알아보자 1. Function Expression / First-class function // functions are treated like any other variable // can be assigned as a value to variable // can be passed as an argument to other functions // can be reteurend by another function // 1. Function Expression // a function declaration can be called ealier than it is defiend. (hoist..
[자기계발]/유튜브로 코딩배우기 2021. 7. 30. [드림코딩 엘리] function 사용법 코딩 return이란? 자바스크립트의 꽃이라고도 불리는 functions와 objects를 2강에 거쳐서 배워볼 것이다. 여기서는 한번 끝까지 신청한 다음에 노트를 작성하면 될 것이다. 참고로 parameter는 매개 변수이다. 각각의 프로그램 안에서도 각각 저마다의 기능을 수행하는 함수들이 있다. API(Application Programming Interface)를 쓸 때, 이 함수의 이름을 보고 이 함수의 역할을 생각할 수 있다. input oupput, function의 이름 Subprogram 이라고 불리며 여러번 재 사용이 가능하다. 한 가지의 TASK 값을 계산하기 위해 쓰인다. 1. Function declaration 사용법: function 키워드를 이용하고, 이름을 지정한 다음, ( ) 안에 paramete..
[자기계발]/유튜브로 코딩배우기 2021. 7. 25. [드림코딩 엘리] 자바스크립트 연산, 반복문. 헷갈리는 ++i, i++ 이해 / 짝수, 홀수 구하는 방법 이번편에서는 기본 문법인 자바스크립트 연산과 반복문을 배운다. 예전에 생활코딩으로 공부했을 때 봤던 내용들이여서 복습겸 봤는데 제일 큰 수확 2가지가 있었다. 드디어 ++i 와 i++ 의 차이점을 알게되었다는 점(앞에 ++가 붙으면 먼저 변수에 할당되어서 들어가는 것이고 / 뒤에 붙으면 그대로 들어가서 계산이 된 다음에 ++가 되는 것. for 문에서 보통 i++를 쓴다). 짝수와 홀수를 구하려면 4 % 2 == 0 (나누고 나머지의 값이 0이냐 == 0이냐 짝수이냐 묻는것 / !==를 쓴다면 홀수이냐 묻는 것이다) 이런식으로 구할 수 있다는 점. 드림코딩 엘리는 마지막 퀴즈를 통해 직접 연습하게 한다는 점에서 좋은 강의 인 것 같다. 1. String concatenation // 1. String c..
[자기계발]/유튜브로 코딩배우기 2021. 7. 23. [드림코딩 엘리] 자바스크립트 최신 ES6강의! 데이터타입, var 보다는 let을 쓰기, hoisting이란? 타입스크립트란? 코딩 유료강의를 찾다가 드림코딩이 괜찮다고 해서 강의를 신청하였다. HTML, CSS, JavaScript를 생활코딩에서 배웠으므로 유료강의중 이 3가지를 모두 활용하는 브라우저 101를 선택하였다. 가격은 $100불로 117,000원 정도이다. 하지만 진도를 나가자마자 콱 막히게 되었다. 까먹은 부분이 매우 많았으며 또 사용하는 코드도 달랐다. 다시 강의를 자바스크립트 강의를 듣자니 또 너무 시간이 걸리지 않나 하고 생각했지만 드림코딩 엘리님의 강의를 듣고 나니 겸손해졌다. 생활코딩도 물론 좋지만 강의가 너무 오래돼서 인지 엘리님과의 코드와는 많이 달랐다. 그래서 2배속으로 한번 훑어보자는 마음을 접고 다시 차근차근 배워나가기로 했다. 매일 1강씩 출발! 프로그래밍 언어에서 가장 중요한것은 입력 / 연..

티스토리툴바