Enjoy Programming

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

자 오늘 css master challenge 두번째 과제이다... 이제 막 그리드를 배웠다.. 과제물을 보고서 음 감이 오다가도 안왔다. 과제물은... 이 포스터를 clone하는 것이다~ 일단 html 코드부터 보자 일단 큰 그리드박스를 만드려고 하나의 grid-content를 만들고 그 안에 header, content, aside, footer를 만들었다. 그리고 그안에 텍스트들은 span태그를 이용했다 이제 css를 보자. 우선 큰 그리드 박스를 만들어줘야 된다. 포스터상에 가운데 박스를 보니 3분할로 나누면 되고 row도 3분할이면 될 거같다. 사이즈는 실측이랑 좀 다르긴 한데 column은 3개로 200px씩 나누었고 row는 사이즈 오차는 있지만 일단 비슷하게 세개로 나누었다. 그리고 각 박..

노마드 코더 챌린지 2번째 css-master 코스다 현재 코코아 클론 챌린지는 끝냈고 css-master코스와 vanilla javascript 코스 두개를 병행한다 그리고 유튜브 클론코딩과 es6강의도 함께 병행 하고있다.~ 시간이 부족하다 ㅋㅋ 어제 첫 레이아웃 챌린지는 이 포스터를 클론했다. flex-box를 이용해서 하는 건데 우선 내가 짠 html코드는 이렇다. 총 세개의 섹션으로 구분하고 헤더부분에 heading tag 두개 그리고 보더라인 아래 리스트 형태의 텍스트가 있는데 이것은 ul과 span으로 구분하고 ul에 li를 다 때려박았다. 마지막 섹션은 서클들이 들어가는데 아무래도 배운내용이 flex-wrap을 이용하는 것 같으니 하나의 박스에 다담았다 위 ul도 마찬가지다. 이제 css를..

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

자 grid-template을 배워봤다. 분할이 잘되고 전체적인 html을 다루기가 쉬워진다. 그런데~ grid-template-area 프로퍼티를 사용하지 않고도 똑같이 가능하다 기초적인 걸로~ row와 column의 개념만 제대로 알고 있고 줄의 갯수만 셀수 있으면된다. 바로 grid-column(row)-start(end) 만 잘 이용해도~~ 자 이전 template-area관련 속성은 다 지워주고 보자 자 높이 너비 모두 100px인 4x4의 그리드만 만들어줬다. 아까 언급한 row와 column을 잘보고 줄 갯수만 잘보자 이경우엔 갭을 줬기에 줄갯수가 많지만 잘생각해보면 원래 가로세로 1~5번까지 줄이있다.~ 박스가 네개니까. 이상태에서 첫번째 박스에 grid-column-start: 1; gr..

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