본문 바로가기

전체 글364

Node JS란? 일단 html과 javascript가 무엇인지 알아보자. html 란? 웹페이지를 만들기 위한 언어이다 워드와 비슷하게 글 쓰고 그림넣는 언어 정적인 페이지만 가능하다 Javascript 란? HTML페이지에 종속된 언어이며 HTML을 조작하는 언어이다. 연산을 위해 만든 언어가 아니다. 자바스크립트는 누가 동작시키는 것일까? 브라우저가 동작시킨다. 각각 자바스크립트 동작시키는 브라우저 엔진들이 있다. 크롬: V8 인터넷익스플로어: Chakra 모질라: SpiderMonkey Node.js 의 시작 여기서 크롬의 V8 엔진을 따로 떼서 출시하게 되는데 이 것이 Node.js이다. 이로서 자바스크립트가 브라우저에서 벗어나 컴퓨터 하드웨어와 직접 소통하게 되었다. 내 컴퓨터에 있는 파일 시스템이나 네트워킹 .. 2021. 9. 22.
백엔드란? 프론트엔드란? 웹사이트 디자인 사용자와 인터렉트하는 언어 html,css, Bootstrap, Javascript, JQuery 백엔드란? 데이터베이스, 비지니스 로직, 서버 등 과 인터렉트하는 언어 java, c++, c#, python, NodeJS, Ruby 등등 풀스택 개발자는 프론트엔드와 백엔드 모두를 할 줄하는 개발자이다. 서버: html, css, js 파일 올라가는 곳 데이터베이스: 로그인, 패스워드등 정보 저장 2021. 9. 21.
유닉스 커멘드 라인(Unix Command Line) 강의 끝 매트리스나 다른 영화에서 천재 해커들이 검은 화면에 글자만 끝없이 나오는 장면들을 본 적이 있다. 천재들인 그들만이 이해하고 그들만의 세계인 줄 알았던 터미널 다루는 법을 배웠다. 강의에서 기초만 다룬 거긴 하지만 생각보다 단순하고 간단해서 놀랐다. 엄청난 천재적 능력이 필요한 건 아니었다. 계속 쓰다보면 CLI로 쓰는 것이 더 편해질 것같기도 하다. 그러려면 연습이 필요하겠지만. 이제 백엔드로 들어간다. NodeJS 를 배우는데 강의 시간이 짧다. NodeJS 기초는 38분밖에 되지 않는다. 빨리 끝내버려야징 2021. 9. 21.
커널, 쉘 | bash shell 이란? 커널, 쉘 이란? 커널과 쉘에 대해 알아보자. OS(operating system)이 피스타치오라고 하면, 진짜 먹을 수 있는 알맹이는 Kernel(커널)이다. 커널이란? 하드웨어와 소통하는 실제 프로그램이다. OS(operating system)의 핵심이다 쉘이란? 사람이 커널, 더 나아가 컴퓨터 하드웨어와 소통하기 위해 쓰는 장치를 말한다. 유저 인터페이스라고 한다. 인터페이스란? 명사) 두 시스템, 두 주제등이 만나고 소통하는 포인트 동사) 다른 시스템, 다른 사람등과 소통하다 컴퓨팅 용어로서는 명사) 유저가 컴퓨터와 소통할 수 있게 해주는 프로그램이나 장치 ex) a graphical user interface 동사) 인터페이스를 통해 다른 장치나 다른 컴퓨터에 연결하다 쉘의 종류 쉘은 2가지 종.. 2021. 9. 16.
맥에서 깃Git 설치하기 | xcrun: error 발생시 대처| git 버전 확인 / 에러 발생시 맥에는 git이 기본 설치되어 있다. 현재 컴퓨터에 있는 git의 버젼이 무엇인지 terminal에 물어본다 하지만 맥북인 경우 에러가 발생할 수 있다. 이런 경우 xcode command Line developer tool을 깔아줘야한다. xcode-select --install https://apple.stackexchange.com/questions/254380/why-am-i-getting-an-invalid-active-developer-path-when-attempting-to-use-git-a xcode 설치후 터미널에 git --version을 치면 지금 현재 버전이 나온다. git 설치하기 git이 설치되어 있지 않으면 Homebrew를 통해 git을 설.. 2021. 9. 16.
터미널 기본 명령어 터미널 여는 법 command + space 누르면 spotlight search가 나오고 거기서 terminal을 친다. 그러면 터미널이 열린다. ~ (tilde) 표시는 현재 root directory(user)에 있다는 의미이다. 터미널 명령어 directory pwd: print work directory 현재 있는 directory 알려줌 뭔가 지우기 전에는 지금 어디있는지 확인하고 지우기 ls: list 현재 디렉토리 안에 있는 파일 목록을 보여준다. 현재 user directory 안에 있어서 그 안에 있는 내용이 나옴 cd: change directory 특정 폴더 이동 root directory--> Pictures --> Screenshots 까지 이동해보기 1) 하나씩 적어주며 이동 .. 2021. 9. 16.
제이쿼리 끝 하지만 사이먼게임 만들기 어려워. 2021년 9월 11일 제이쿼리를 끝냈다. 그리고선 제이쿼리, 자바스크립트를 이용해서 다음 단계인 사이먼 게임 만들기를 시도하였다. 8단계 정도에서부터 코드가 이해 가지 않는다. 선생님이 이 게임 만드는 법을 설명을 강의로 만들지 않았다. 글로 설명만 되어있다. 하지만 읽어도 잘 이해가 되지 않는다. 처음부터 다시 코드를 차분히 봐야할 것같다. 시간이 필요할 것이다. 일단 진도를 그 다음 단계인 The Unix Command Line으로 먼저 나가고 나중에 앞부분들을 복습하고서 다시 도전해야할 것같다. 여기 캐나다는 여름이 끝나가니 코로나가 다시 심해지고 있다. 부디 별 탈없길 바란다. 2021년 9월 13일 터미널 다루는 것으로 갈려고 했으나 맥북에 하이퍼 터미널 다운 받는 것부터 막혀서 한 참 걸린다.. 2021. 9. 11.
jQuery] 사이먼 게임 만들기 The Simon Game 먼저 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 기계가 선택해 준 컬러를 클릭해야한다. 또 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 첫번째 컬러와 방금 선택된 컬러, 두 개를 순서대로 클릭해야한다. 또 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 첫번째, 두번째 컬러와 방금 선택된 컬러, 세 개를 순서대로 클릭해야한다. 계속 이렇게 진행되고 사용자가 기계에서 나온 순서와 다른 컬러를 선택하면 게임이 끝난다. 자바스크립트, 제이쿼리 이용해서 코드 짜기 기계에서 랜덤 컬러 선택하기 ✔️ 색이 들어가는 array를 하나만든다 -> buttonColours ✔️ 0~3 랜덤 숫자를 뽑아서 randomNumber에 담는다. ✔️ 나온 숫자로 buttonColours array에서 해당 컬러 뽑아낸 후 .. 2021. 9. 8.
jQuery] 애니메이션 효과 hide( ), show( ), toggle( ) hide( ): 숨기기 기능 h1 클릭시 h1 숨김 show( ): 숨은 글자 다시 보이게 하기 toggle( ): 접었다 폈다하기 접었다 폈다 토글하기 버튼 눌렀을 때 h1이 생겼다 사라졌다하기 fadeOut( ), fadeIn( ), fadeToggle( ) fadeOut() : 천천히 사라짐 fadeIn(): 천천히 나타남 fadeToggle( ): fade in, fade out 됨 slideUp( ), slideDown( ), slideToggle( ) slideUp( ): 아래에서 위로 접힘 slideDown( ): 위에서 아래로 펴짐 slideToggle( ): 위 아래로 접었다 펴졌다함 animate( { css내용 } ) 숫자 벨류를 갖는.. 2021. 9. 7.
jQuery] elements 추가, 삭제하기 다음과 같은 웹사이트가 있다. elements 추가하기 before( ) h1 앞에 버튼 element를 추가하고 싶다면 before( ) 메소드를 사용한다. 버튼이 생성되었다. after( ) h1 뒤에 버튼 element를 추가하고 싶다면 after( ) 메소드를 사용한다. 버튼이 생성되었다. prepend( ) h1 안 text 앞에 버튼이 생긴다 append( ) h1 안 text 뒤에 버튼이 생긴다 elements 제거하기 2021. 9. 7.
jQuery] eventListener 추가하기 / on( ) / loop 하는 법 자바스크립트에서의 eventListener 어떻게 써줄까? 타겟.eventListener("이벤트","함수") 자바스크립트에서 h1 클릭시 글자색을 바꾸고 싶다면 아래처럼 코드를 작성해야 했다. 하지만 제이쿼리에서는 eventListener를 써주지도 않는다. 타겟 뒤에 바로 어떤 event할 지 써주고 나서, 함수를 바로 써주면 된다. 자바스크립트에서 eventListener + for loop 조합을 제이쿼리에서는 어떻게 할까? eventListener + for loop 조합이었을 때 button 5개에 eventlistener가 적용될려면 querySelectorAll("button")[i]를 for loop으로 돌려서 하나씩 적용되도록 하였었다. 하지만 jquery에서는 선택된 모든 아이템에 c.. 2021. 9. 5.
jQuery] attributes 변경하기 HTML가 이렇게 세팅되어있을 때 빨간 박스가 attributes이다. jQuery로 attribute 보는 법 이미지 태그 안 scr attribute보기 drum.png라고 나옴 a 태그 안에 있는 attribute보기 클래스 보기 class도 attribute이다. jQuery로 attribute 세팅 하는법 href를 구글에서 네이버로 변경해보기 attr() 메소드의 첫 번째 인풋은 뭘 바꿀지 두 번째 인풋은 뭘로 바꿀지를 적으면 된다. 클래스 추가/ 삭제는 .addClass("") .removeClass("")로 한다. 2021. 9. 3.
jQuery] 텍스트 변경하기 텍스트 변경 text 메소드를 사용한다. 1) hi로 된 텍스트를 bye로 바꾸기 2) 버튼 안 텍스트 변경 텍스트 포함 다른 태그 추가 변경 html 메소드를 사용한다. 2021. 9. 3.
jQuery] elements 선택, css 효과주기, 클라스 추가 삭제 element 선택하기 1 element 하나 선택할 때 2. element 2개 이상 선택할 때 이 것을 제이쿼리로 간편하게 이렇게 한다. 제이쿼리에서 css 스타일 주기 ✔️ css에 인풋 하나인 경우 해당 property의 value를 알려줌 ✔️ css에 인풋이 두개인 경우 첫 번째는 property, 두 번째는 value로 값이 세팅이 됨 $("h1").css("color", "green"); ✔️ 하지만 스타일 변경은 CSS에서 하기 자바스크립트(제이쿼리)에서 css 벨류를 넣어주는 것은 코드가 지저분해 보인다. css 관련 입력 사항은 css에 저장하고 클래스를 만들어서 자바스크립트(제이쿼리)에서는 클래스를 추가 했다 제거했다 하는 것이 좋다. ✔️ 클래스 2개 동시에 만들고 제거하기 ✔️ .. 2021. 9. 3.
파일 minifier 줄바꿈, 띄어쓰기 모두 없애고 텍스트만으로 줄인다. 그러면 저장했을 시 byte 용량이 줄어든다. 자바스크립트, css 파일 미니파이해서 유저의 브라우저에서 로드 될 때 로드 시간이 적게 걸린다. before after 2021. 9. 3.
JQuery 소개, 시작 JQuery (제이퀘어리) 수 천가지의 자바스크립트 가운데 가장 인기 많은 라이브러리이다. Jquery를 만든 John Resig은 너무 긴 자바스크립트 코드를 간단하게 바꾼 사람이다. document.querySelector("h1") = jQuery("h1") = $("h1") 내가 만드는 웹사이트에 jQuery 연결하는 법 1. 모든 jQuery 파일을 다운 받거나 2. 부트스트랩에서 했던 것처럼 jQuery CDN을 연결해준다. 가장 많이 사용되는 google CDN을 쓰도록 하자. 인기많은 구글 CDN을 사용하는 이유는 유저가 내 웹사이트 들어오기 전에 다른 웹사이트에서 구글 jQuery CDN를 연결해 놓았다면 유저의 브라우저에 이미 cashed 되고 저장되어 있다. 내 웹사이트에서 다시 제이.. 2021. 9. 2.
콘솔 단축키 코드 줄바꿔 쓰기 Shift+return / Shift + Enter 콘솔 화면 지우기 Command + K / Control + K 저장된 변수들 모두 지우기 Command + L / Control + L 2021. 9. 1.
자바스크립트 강의 끝. 첫 째 유치원 입학 첫 째 아이가 유치원에 들어갔다. 9월 1일 부터 주 2회 8:30~3시까지 수업을 받는다. 어제는 본격적으로 풀타임 수업 시작하기 전 한 반의 학생들을 나눠서 선생님과 반 친구 5명 정도와 먼저 안면 트는 시간을 가졌다. 집에서 한국어만 쓰기에 영어를 못하는데 씩씩하게 들어가는 아이가 대견했다. 우리만 이민자 가족인 것 같다 한 엄마가 먼저 상냥하게 인사해 주었다. 아이가 잘 적응할 수 있을까? 많은 걱정이 앞서기도 하다. 친구과 다름을 인지할 때 상처 받지 않을까? 영어로 말을 못하는데 친구들과 어울리지 못하면 어쩌지? 수업은 따라 갈 수 있을까? 알파벳과 숫자 20까지는 읽을 수 있는데.. 이 정도면 괜찮을까? 너무 걱정만 앞서는건가? 학교 통지문을 받았다. 학기의 시작이라 아이의 학교 모습을 볼 .. 2021. 9. 1.
JS] 애니메이션 효과 | setTimeout( ) | 버튼 클릭시 효과 버튼을 눌렀을 때 효과를 주려고 한다. CSS 일단 css에 클래스명 하나 정해서 효과를 설정해준다. JavaScript 버튼 클릭시 효과를 주기 위해 함수를 하나 만들었다. 파라미터를 currentKey로 이름 지을 것이고, 이 currentKey는 무슨 키를 눌렀는지를 나타내는 것이다. 무슨 키를 눌렀는지는 위에 있는 함수에서 내용을 받아올 것이다. 1번 buttonAnimation(buttonInnerHTML) 위에 있는 함수는 마우스 클릭시 실행되는 함수인데 이 함수가 실행될 때 buttonAnimation()함수도 같이 실행하게 하였다. 파라미터로 buttonInnerHTML를 받으면 buttonAnimation(currentKey)로 들어가서 실행된다. 2번 buttonAnimation(eve.. 2021. 8. 31.
JS] switch statement | switch, case, break, default switch statement variable의 value에 따라 다른 트랙으로 가는 것 각 버튼에 다른 소리가 나게 하려면 switch statement가 필요하다. if statement를 쓸 수도 있지만 그럼 if, else를 너무 많이 써야하니 switch를 쓴다. 참고) 7개의 드럼 html 코드 switch bare bones 7. 각 버튼의 innerHTML을 뽑아서 buttonInnerHTML에 담았다. 각 letter를 뽑아서 buttonInnerHTML에 담는 것이다. 8. switch (expression) switch on 할 variable을 넣는다. switch(buttonInnerHTML) : 각 letter를 담은 variable에 스위치 온할 것이다. 9,10,11 case.. 2021. 8. 29.
JS] 오브젝트란? / Constructor function 게임에서 호텔을 운영하게 되었다. 직원을 뽑아야 한다. 우선 벨보이를 뽑았다. 벨보이 한 명이 왔다 이름은 Jack이다. 나이는 23세이다. 워크퍼밋이 있다. 언어는 영어, 프랑스어를 한다. 이 벨보이에 관한 정보를 입력해야 한다면 다음과 같이 적을 수 있을 것이다. var bellBoy1Name = "Jack"; var bellBoyAge = 19; var bellBoy1Has WorkPermit = true; var bellBoy1Languages = "French","English"; 호텔이 잘되서 벨보이 2명을 더 뽑았다. 직원 정보를 하나 하나 적어주었다. var bellBoy1Name = "Alex"; var bellBoyAge = 22; var bellBoy1Has WorkPermit = t.. 2021. 8. 28.
자바스크립트 고급 과정 공부중 8/27일 금Advanced Javascript와 DOM Manipulation을 듣고 있다. 진도는 잘 나가지 않고 있다.화면 보고 있으면 딴 생각이 나고, 졸립기만 하다. 이럴 때는 보통 드라마 한 편 보고서 현실을 벗어난 후 새 느낌으로 다시 공부를 시작하기도 하지만 지금은 그렇게 놀아도 되나하는 생각에 딱히 공부도 안되고, 놀지도 못하는 상태가 되었다. 2021. 8. 28.
JS] this 여기 드럼 버튼들이 있다. 드럼 버튼 하나를 눌렀을 때 eventlistener가 불러지고 거기에 연결된 함수가 호출되어 소리가 난다. 아래의 경우 드럼 버튼은 여러 개지만, 한 가지 소리에만 연결되어 있는 코드이다. 그럼, 각 드럼 버튼에 각각 다른 소리가 나게 할 수 없을까? 이 때 필요한 것이 this 이다. 이 때 this는 각 버튼의 아이덴티티이다. this를 좀 더 살펴보자 this가 콘솔에 나오게 중간에 있던 코드를 console.log(this); 로 바꿔보았다. 그러면 내가 누른 버튼의 내용이 콘솔에 나온다. 각 버튼의 텍스트만 콘솔에 나오게 하기 this는 클릭한 버튼이라 target이 된다. this 다음에 원하는 내용을 덧붙여준다. 버튼 클릭하면 글자가 흰색으로 바뀌게 하기 그럼 다.. 2021. 8. 27.
JS] 오디오 함수 자주 쓰는 문형 태그 안에서 일어나는 일 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio What this line of code will do behind the scenes is it will actually construct an HTMLAudioElement. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement This HTMLMediaElement that we create has a whole bunch of properties and methods. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaEleme.. 2021. 8. 27.
JS] debugger; 알아보기 크롬 개발자 툴에서 좋은 기능을 가지고 있다. 함수 단계별로 어떤 일이 벌어지는지 알 수있다. 콘솔에서 debugger;를 쓰고 shift + enter를 눌러서 다음 줄로 내리고 함수를 불러본다. 그럼 source 창으로 넘어가서 아래와 같은 내용이 나온다. 새 창 열리면서 자세히 설명 f = function calculater함수 바디에 놓고 또 아래화살표 누른다. 새창이 열리면서 바디 안에는 무슨 일이 일어나는지 설명이 되고 있다. 2021. 8. 26.
JS] 계산기 / higher Order Functions and Passing Functions as Arguments 이 전에 .addEventListener( ) 에서 함수를 인풋으로 사용하는 것을 보았다. 여기서 .addEventListener( ) 같이 다른 함수를 인풋으로 받는 함수를 higher order function이라고 한다. 아래는 클릭이 됐을 때 뭘할 지를 나타내는 코드이다. 여기서 주의 할 점은 인풋으로 들어갔을 때의 함수는 괄호( )를 사용하지 않는다는 것이다. handleClick안에 파라미터가 없다면 괄호를 쓰지 않는다. document.querySelector(".drum").addEventListener("click", handleClick ); ⭕️ document.querySelector(".drum").addEventListener("click", handleClick( )); ❌ 여.. 2021. 8. 26.
JS] anonymous function 익명 함수 anonymous 어나'너머스 function 일반 함수 사용시 함수를 따로 만들고 이름을 불러 실행 시킨다 document.querySelector(".drum").addEventListener("click", handleClick); function handleClick() { alert("I got clicked!"); } 익명 함수 사용시 익명 함수는 함수인데 이름이 없다. 그냥 function() 자체를 써준다. 함수를 따로 떼서 안만들고 실행까지 한 큐에 해결한다. function(){alert("I got clicked!")} 위에 있는 일반 함수 코드를 더 간단하게 이렇게 만들 수 있다. 2021. 8. 25.
JS] .addEventListener( ) .addEventListener( ); .addEvenListener( ) 메소드 자세히 보려면 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener method: action 표현 input 1 : event type 마우스 클릭등 어떤 액션을 취할 때일지를 적어준다 https://developer.mozilla.org/en-US/docs/Web/Events input 2: 보통 js 함수 마우스 클릭 같은 이벤트가 벌어졌을 때 뭘 할지를 적어준다. 2-1 함수를 만들고 이름을 넣기 이벤트리슨너 메소드의 파라미터에서 자바 스크립트 함수를 넣을 때 주의 할 점은 ( ) 를 넣지 않는다는 것이다. document.quer.. 2021. 8. 25.
JS] 드럼 킷 만들기 클릭하거나 해당 키보드 치면 드럼 소리나오게 하기 이미지, 사운드, html, css 는 강의 자료에서 가져옴 html, css는 기본 세팅해주심. 맨아래에 있음. 자바스크립트 편집 각 드럼 클릭시 반응하기 1. 클래스 drum에 해당하는 아이템 중에 querySelector로 첫번째 것만 클릭시 alert가 뜨게 해본다. querySelector를 button 태그보다는 클래스, Id로 하는 것이 좋다. 나중에 다른 곳에 button 태그가 생성되어서 엉뚱한 곳에 선택될 수가 있다. 2. 함수를 따로 만들지 않고 anonymous function으로 코드를 간단하게 해준다. 3. 첫번째 것만이 아닌 7개 전부 클릭시 alert가 뜨게 해본다. loop을 이용하면 편하다. for loop으로 drum 클.. 2021. 8. 25.
JS] 주사위게임 player 1, player 2가 서로 주사위 던져서 숫자 많은 쪽이 이겼다고 멘트 적어주기 index.js 파일을 만들고, html body 맨 마지막에 script를 붙여준다. js에서 랜덤 넘버를 만들어 담는다. 코드가 잘 적었나 확인해보려면 콘솔에서 테스트 해볼 수 있다. 랜덤 숫자가 나왔을 때 이미지 파일명에서 선택되어야 한다. 그 때 그 때 변경해야하므로 html의 기본 틀을 건드리지 않고 js에서 코딩을 한다. 랜덤으로 숫자가 나오면 이미지 소스에 들어가서 랜덤 이미지가 선택된다 이제 image sourrce attributes를 변경해야 한다. 이미지태그 모두를 불러온 후 첫 번째 이미지 태그 소스 변경하기 attributes 셋팅하기 ("변경하고 싶은 attributes 이름", 뭘로 .. 2021. 8. 23.

티스토리툴바