기록 :-)

nodejs : backend에서 서버에 대한 개발을 하는 도구 nodejs는 chrome의 자바스크립트 엔진 v8을 사용한다. 오늘은 nodejs로 랜덤으로 강아지 사진이 출력되는 예제를 만들어볼것이다. npm init Nodejs 프로젝트를 실행할때 package.json을 생성 해준다. npm init -y npm init만 입력하면 기본 양식을 직접 정해줘야하는데 -y라는 속성을 사용하면 default값으로 설정된 packge.json을 만들겠다라는 의미다. npm init보다 조금 더 편하고 한번에 packge.json을 만드는거라고 생각하면 된다. 이 예제를 위해서는 express, ejs, request 템플릿이 필요하기때문에 설치해주겠다. npm install express ejs requ..

회사에서 이틀동안 html,css , javascript 교육을 받은 후, 회원가입 폼을 구현하는 실습시간을 가졌다. 오후에는 코드 리뷰 시간을 가졌는데 리뷰를 할줄 알았으면 조금 더 성의있게 열심히 했을텐데 ... 조금은 아쉬웠다 다음부터는 작은거라도 꼼꼼히 코드 작성하기 ...!! 코드 리뷰를 한다길래 처음에는 떨렸지만 막상 해보니까 재미있고 더 열심히 공부해서 다른 사람들의 코드를 다 이해하고 싶어졌다 ...!!! 화이팅 /* 1. 정규식을 이용해서 이메일 유효성 검사 기능구현하기 */ document.getElementById('email').addEventListener('blur', function(event) { const value = this.value, elParent = this.pa..

focus 이벤트는 요소가 포커스를 받을때 blur 이벤트는 포커스를 잃을 때 발생한다. javascript.info에 설명이 잘 되어있어서 참고해서 적었다 input.onblur = function(){ if(!input.value.includes('@')) { input.classList.add('invalid'); error.innerHTML = "올바른 이메일 주소를 입력하세요." } }; input.onfocus = function() { if (this.classList.contains('invalid')) { // 사용자가 새로운 값을 입력하려고 하므로 에러 메시지를 지움 this.classList.remove('invalid'); error.innerHTML = ""; } }; blur 핸..

6/6 ~ 6/20까지 했던 노마드 코더 바닐라 js 챌린지가 드디어 막을 내렸다. 그동안 냈던 퀴즈, 과제를 검토해서 최종적으로 오늘 수료 여부 메일이 왔는데 다행히 무사히 수료를 하였다 !! 결석은 한번도 안했지만 몇번 제출한 코드가 답지랑 달라서 조금 걱정했었는데 ,, 휴 괜한 걱정이었다. 느낀점✨ 확실히 아직까지의 나는 스스로 하는것보다는 과제나 퀴즈처럼 문제가 있을때의 학습 효과가 좋다는 점이다..!! 그리고 짧은 시간에 자바스크립트에 흥미를 붙이고싶다면 이 챌린지를 적극 추천한다. 매일매일 정해진 과제를 했다는 쾌감과 마지막에 웹사이트라는 결과물이 나오기때문에 더욱 좋다 챌린지를 하며 노력한 점 ✨ 마지막에 css를 통해서 각자의 스타일을 입히기때문에 다 달라보이지만 사실 js만 놓고 봤을때는..

6.1 저번 시간에는 명언을 랜덤으로 배치했다면 이번에는 배경이미지를 랜덤 배치해볼거다. 개념이 조금 겹치니 참고하실 분은 참고하세요 !! 2022.06.16 - [웹 개발/javascript] - 바닐라 js 2주 챌린지 6.0강 정리 ✨

6.0강은 명언파트다 ! 홈페이지를 새로고침할때마다 다양한 명언들이 랜덤으로 뜨는 걸 구현해볼거다. 우선 html에 명언과 작가의 이름을 넣게끔 , 태그를 생성해준다. const quotes = [ { quotes: "이 세상에 위대한 사람은 없다. 단지 평범한 사람들이 일어나 맞서는 위대한 도전들이 있을 뿐이다.", author:"윌리엄 프레데릭 홀시", }, { quotes:"해보지 않고는 당신이 무엇을 해낼 수 있는지 알 수 없다.", author: "프랭클린 아담", }, { quotes:"위대한 업적은 대개 커다란 위험을 감수한 결과이다", author:"헤로도토스", }, ]; // 명언 준비 실제로는 명언을 한 10개 정도 준비했는데 다 적기에는 많아서 세개만 적어줬다 ! const quot..

5.0 setInterval과 setTimeout 에 대해서 본격적으로 배운다. const clock = document.querySelector("#clock"); function sayHello(){ console.log("Hello"); } setInterval(sayHello, 1000); // 1초마다 sayHello가 반복 setInterval : 원하는 코드를 바로 실행하지 않고 지정한 시간마다 반복적으로 실행하는 함수 시간은 밀리초 (ms) 단위를 사용한다. const clock = document.querySelector("#clock"); function sayHello(){ console.log("Hello"); } setTimeout(sayHello, 1000); // 1초마다 sa..

if문과 length를 사용하여 글자수를 제한둘 수 있다. --> 근데 html에 이미 기능이 있으니 그 기능을 이용하자 input, button은 form태그로 감싸야한다 ! 하지만 버튼을 누르거나 enter를 치면 자동으로 submi되는게 기본동작이기때문에 그걸 막기 위해서는 preventDefault()를 사용하면 된다 ! function onLoginSubmit(e){ e.preventDefault(); } //기본동작을 막아서 submit을 지연시킴 쓰는 법은 간단하다 ! 함수 첫줄에 적고 그 다음줄에 변수를 저장하거나 보관하는 코드를 적으면 된다 백택 (``) h1.innerText = `Hello ${username}`; h2.innerText = "Hello" + username; 백택을 ..

3.0 document console에 document를 입력하면 작성한 html을 확인할 수 있다. document는 쉽게 설정하자면 브라우저에 존재하는 object ! 콘솔에 document.body 입력시 body 호출 가능 --> js를 통해서 html, css에 접근가능하다. 3.1 - 3.2 document라는 함수 중에는 getElementById라는 함수가 존재하는데 이 함수는 html에서 id를 통해서 element를 찾아주는 함수다. 이 element를 찾으면 id, className, innetText등 의 값들을 변경하거나 가져올 수 있다. getElementById : html에서 id를 통해서 element를 찾아주는 함수 getElementByClassName : classNa..

6월 6일부터 시작한 바닐라js 2주 챌린지 ! 더 원활한 공부를 위해 기록 시작 :) function : 함수 계속 반복해서 사용할 수 있는 코드 조각이라 생각하면 이해하기 쉽다. function 함수명 (argument){ 실행코드 } argument(인수)는 소괄호안에 위치하며 함수를 호출할 때 전달되는 값이다. const player = { age: 20, sayHello: function(myName){ console.log("Hello " + myName); } }; player.sayHello("seYeon"); //Hello seyeon argument는 myName이고 seYeon을 넣어줬다 결과는 Hello seYeon object안에 function을 넣어서 가벼운 계산기도 만들 수 ..