Enjoy Programming

자바스크립트 챌린지 3번째 이번 과제는 디데이를 출력하는 내용이다 기준은 크리스마스 이브를 기준으로 d-day계산 하기~ 우선 필요한건 크리스마스 날짜와 오늘 날짜. 자바스크립트에서 날짜를 구하는 함수는 Date(); 자바스크립트에서 date 객체를 생성하는 방법은 new연산자를 사용하는 것이 유일하다. 아래와 같이 크리스마스와 오늘날짜를 구한다 그리고 크리스마스와 오늘 날짜를 빼고 차이를 구한다 그리고 Math.floor를 이용하야 소수점 이하를 버리고 각 초 분 시간 날짜를 구해준다. 그리고 구해진 시 분 초를 다시 한번 초분은 60으로 나눈 나머지 값을 시간은 24로 나눈 나머지 값을 변수에 담아주고 삼항 연산자를 이용해 각 숫자가 10이하 일때는 앞에 0을 붙여주고 아니면 그냥 그대로 출력하도록 ..

이번엔 login과 user profile페이지를 다뤄보자. 역시 userController에 가서 get과 post방식의 두가지 컨트롤러를 만들어준다. 하나는 get 방식으로 로그인 페이지를 띄워줄 getLogin컨트롤러와 post방식으로 로그인이 이루어지면 홈화면으로 redirect해주는 컨트롤러 이렇게 만들어주고 로그인이 이루어지면 화면에 뿌려질 헤더 템플릿을 수정해주자. ul태그 하나 만들어주고 사진과 같이 작성했다. isAuthenticated는 요청이 인증 되었는지 확인하는 속성이다. user변수는 아직 데이터가 없기에 설정이 되진않았다. 이제 middleware에 가서 user정보를 객채로 만들어 주자 전역으로 설정할 user정보를 true로 설정하고 id: 1이라는 객체를 넣어줬다. 우선 ..

금일 챌린지는 화면크기에 따라 배경화면이 변하는 자바스크립트 작성이다... 우선 쿼리셀렉터로 바디를 잡아주고~ 그리고 화면상 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을 각각 변경 해줬다. 그리 기본적인 코드인데... 문제를 제대로 인지하지 못해서인지 해멨다.... 마우스 우클릭시 브라우저 상에 우클릭하면 이벤트를 실행하는 거였는데 아무리 해도 안되는 거다.. 내 맥북이 문제인가;;; 싶었는데..