Enjoy Programming

금일 챌린지는 화면크기에 따라 배경화면이 변하는 자바스크립트 작성이다... 우선 쿼리셀렉터로 바디를 잡아주고~ 그리고 화면상 hello라는 텍스트를 뿌려주기 위해 h2 element를 만들어 주고 바디의 자식으로 지정~ 그리고 텍스트 집어넣고 글자색은 흰색으로~ 그리고 변할 색상들을 전역변수로 설정해 놓고~ 함수를 만들었다~ 함수 스코프 안에서 지역변수 currentWidth에 window.innerWidth (outerWidth)를 써서 실시간 창크기를 담아준다 그 담은 조건문을 이용해 구간별 색상만 지정해주고 init함수에서 resize이벤트를 실행해줫다. 어렵지 않은 챌린지 였지만.... 중간 else if가 먹지 않는 것이다... ㅠㅠ 한참을 찾아보고 고민햇는데.. 색상을 purple을 줘야하는데..

기존 자바스크립트에서 함수 선언 방식은 function leeS(arg) { blabla~~~} 라는 형식으로 사용해왔다. 이함수는 변수로 선언해도 되고~ 함수명 없이도 선언이 된다. (오브젝트 안이라던지 여러 곳에서) 자 애로우 펑션은 뭘까 > 그냥 => 이거 추가된거다. 잠시 배열과 함수를 보자 배열을 하나 선언해주고~ hearts변수에 map함수를 써서 names의 각 배열 원소마다 아이콘을 더해줬다. map()함수의 역할은 배열에서 각각의 아이템마다 함수를 호출하는 일을 한다. foreach와 비슷한 역할이다. 다시 설명하자면 names에 모든 요소에 function을 각각 적용시켜주고 적용된 값들로 다시 배열을 만들어 hearts변수에 담아 줬다. 다시 풀어 쓰자면 이렇게 풀어 쓸수 있다. 적용..

기존 자바스크립트는 var를 사용해 왔다 es6가 업데이트 되기 전까지는 하지만 var는 변경이 가능했기에 문제점이 있었다. 무조건 문제라는건 아니다. 하지만 이미 내가 선언한 변수에 차후 변수명을 헷갈려 업데이트를 해버린다던가 협업중 다른 누군가가 가져다가 변경해버리면 코드가 꼬여버린다 이런 문제를 해결하기 위해 let & const가 등장했다. 아이러니하게도 자바나 C에는 static, const가 이미 있었다.,,, 생각해보면 python도 상수처리를 위해서는 복잡하다;; ,,, 아무튼 let은 변경가능 const는 상수처리 .. 그런데 const object의 경우 object의 value 변경이 가능하긴 하다고 한다. 이는 따로 변경되지 않게 설정을 해야하는데 차후에 배워보자.. 그리고 문득 든..

오늘 노마드 코더 vanilla js챌린지는 마우스 이벤트에 관한 내용이다 내용인 즉슨 마우스 오버시 그리고 마우스 이탈시 마우스 우클릭시 그리고 화면크기 변경시 이벤트를 주는 javascript 코드를 짜보았다 요롷게 인데 이렇게 짜보았다. 설명하자면 event handler를 supereventHandler 객체에 모두 담아주고 addEventListener를 통해 각 함수를 콜백하고 마우스 이벤트 처리를 해주었다. innerHTML속성을 이용하여 텍스틀 변경해주고 style을 각각 변경 해줬다. 그리 기본적인 코드인데... 문제를 제대로 인지하지 못해서인지 해멨다.... 마우스 우클릭시 브라우저 상에 우클릭하면 이벤트를 실행하는 거였는데 아무리 해도 안되는 거다.. 내 맥북이 문제인가;;; 싶었는데..

이번엔 join화면을 바꾸자 . 회원가입을 하면 자동으로 로그인을 하고 홈화면으로 이동하게 한다. 먼저 userController.js로 가보자 현재는 회원가입 페이지만 뿌려줄 컨트롤러만 있다. 회원가입을 하고 이메일, 비밀번호 등등을 보내줄 post할 컨트롤러가 필요하다. 기존 join을 getJoin으로 바꿔주고 postJoin컨트롤러를 하나더 만들어주자. 서밋이 이루어지면 바디파서를 통해 이름 이메일 비밀번호 정보등을 받아오고 비밀번호와 비밀번호 확인이 제대로 체크가 안되었다면 badrequest code를 뿌려주고 다시 조인 페이지로 돌아가고 만약 제대로 정보가 입력되었다면 홈화면으로 redirect해준다. 여기서 더 구현해야 할 일은 user정보를 database에 등록하고 유저를 로그인 시키는..

자주 사용되는 코드를 반복해서 작업하는 것을 피하기 위해 views폴더에 mixins 폴더를 생성하고 템플릿을 만들어준다. mixin() 함수 pug의 함수로서 반복되는 html 또는 어떤 코드덩어리를 함수 형태로 만들 수 있도로 기능을 제공한다 사용법은 mixin 함수명()이렇게 쓰고 아래 코드를 쓰고서 사용할때는 + 함수명을 써주면 된다. pugjs.org/language/mixins.html Mixins – Pug Mixins Mixins allow you to create reusable blocks of Pug. //- Declaration mixin list ul li foo li bar li baz //- Use +list +list foo bar baz foo bar baz Mixins a..