개발 일기

로그인 기능 구현 완료. 모달 페이지에 로그인/회원가입 구현 완료 -회원 가입 기능 (ID/PW 검사, 중복 체크) -회원 정보 암호화/몽고 DB 저장 -로그인 시 토큰 갖고 타 페이지 이동 기능하게 구현. -로그인 상태 시 -> 메인 화면 / 아닐 시 -> 로그인 화면으로 유도. 2차 프로젝트 진행 사항 -2차 목적은 현 서비스를 확장 가능한 서비스로 변경 설계하는 것이다. 이미지 파일도 s3에 올릴 것이고, 코드의 DB화, Mongo DB에서 RDB 로 변경할 예정이다. 더불어 배포에 AWS를 많이 써야 하기 때문에, 주말동안 이에 대한 지식을 쌓아야 한다. -RDB 로 바꾸는 것은 알고리즘 설계 시 데이터베이스 간의 통신이 필요하기 때문이다. -부트스트랩으로 진행했떤 코드를 Bulma로 수정했다. ..

로그인 기능 구현 시작 오늘은 로그인 기능 구현을 해보았다. 우리 팀은 역할을 나누기 전에, 하루 정도 시간을 잡고 주요 기능을 구현 후 발표하기로 했다. 각자 하는 일만 하다보면, 전체 흐름을 이해하기 힘들기도 하고, 짧은 시간 내에라도 배운 것을 적용하는 게 필요하기 때문이다. 다른 팀원들이 워낙 잘하기 때문에 압박감이 들지만, 동시에 그래서 많이 배우고 집중할 수 있어서 감사하다. 로그인에는 인증 등 접해본 적 없는 개념이 많이 들어가서, 심화반 강의 중 로그인이 제일 어려웠다. 그래도 필수 기능이니 지금 탄탄하게 배워두면, 분명 도움이 될 것이다. 낯선 메서드도 많아서, 날잡고 배운 것을 정리해봐야겠다. 기능을 페이지에 구현하는 것까지는 잘 따라했는데, 모달 화면에 넣는 게 좀 까다로웠다. 우선은..

처음 코딩에 입문 하게 된 건, 생활코딩의 웹 어플리케이션 강의였다. 당시 첫 직장생활을 시작하고, IT 산업으로 옮기고 싶어서 일이 끝나면 까페로 가서 이 강의를 들었다. 컴퓨팅적 사고가 전혀 없다보니, 내 마음처럼 페이지가 안떠서, 몇 시간씩 막혀 있을 땐 울기도 했던 기억이 난다. 그럼에도 이 강의를 들은 게 참 좋은 경험이었는데, 이유는 이고잉님이 정말 입문자의 마음을 잘 헤아려주시고, 마음의 장벽을 허물 수 있도록 계속 다독여주셨기 때문인 것 같다. 하루동안 이 강의를 들었는데, 구현 테스트를 망치고 코딩에 대해 조금 두려운 마음이 생긴 내게 에너지를 불어넣어주는 것 같았다. 진짜 멋있다. 사담이 너무 길었는데, 아래에 수업 내용을 간단히 요약해보았다. 사실 제대로 된 입문강의라고 하기에는 굉장..

# 이번 팀프로젝트를 하면서, 팀원들에 비해서 프로그래밍 실력이 부족함을 절실히 느꼈다. (1) 언어에 대한 지식이 부족했고 (특히 자바스크립트) (2) 배운 것을 응용하는 능력이 준비되지 않았고, (3) 내가 기여하지 못하는 상황이 답답해서, 공부할 때도 집중하기가 어려웠다. 회사에 입사해서 적응 하는 것보다, 지난 2주가 훨씬 도전적으로 느껴졌다. 컴퓨팅적 사고를 이제 갖춰나가고 있기 때문에, 준비가 안된 상태에서 오는 압도감에 스트레스를 많이 받았다. 주말이 되어서야 한숨 돌리고, 조용히 코드를 파보았다. 당시에는 팀원분들이 짜놓은 코드를 이해도 못하는 나 자신에 대한 자괴감이 들었는데, 자바스크립트 강의를 듣고, 클래스와 객체에 대해 공부를 하고 나니 코드가 모두 읽혔다. 나는 3일 전의 나보다 ..

#오류 해결 - expression statement is not assignment or call html ajax 가 실행이 안되서 console.log 에 찍어보니 아래와 같은 에러 메시지가 떴다. jquery-3.2.1.slim.min.js:2 jQuery.Deferred exception: $.ajax is not a function TypeError: $.ajax is not a function at showCategory (http://localhost:8080/recommendation:32:15) at HTMLDocument. (http://localhost:8080/recommendation:28:9) at j (https://code.jquery.com/jquery-3.2.1.slim..

The four Fs를 (참고링크) 참고하였다. (1) FACTS : 이번 일주일 동안 한 일 -구현테스트 과제를 다시 풀어보았다. 구현 테스트는 자바스크립트, HTML, CSS 를 활용한 주식 추천 사이트다. 자바스크립트 초보여서, 낯선 문법들도 많았다. (웹개발 심화 수업을 듣는게 훨씬 도움이 되었다) -웹 개발 심화 과정을 들었다 (멀티 페이지 구현 / ajax 대신 진자 템플릿 언어 사용/ 예외처리 ) -스파르타의 온라인 강의는 매우 유익하다. 하지만 언어에 대해서는 가르치기보다, 언어를 사용해서 실제 페이지를 어떻게 구현하는데 초점을 둔다. 자바스크립트가 처음인 내게는 기초가 부족하다는 생각이 들어서, 책을 샀다. 오늘 책을 읽어보니, 데이터 타입 객체의 가변성 부분부터 이해에 시간이 꽤 걸려서..

오늘은 Jinja 템플릿 엔진을 활용해서 서버사이드 렌더링 하는 법을 배웠다. 서버 사이드 렌더링이 뭐고, 왜 서버에서 렌더링을 해서 내보내야할까? 클라이언트 사이드 렌더링은 말 그대로 클라이언트 측에서 모든 것을 처리하는 방식이다. 서버에서 제공하는 HTML 은 거의 빈 화면에 가깝고, 서버로부터 Javascript 를 다운 받아와서 채워넣게 된다. 이 자바스크립트에 앱 로직, 어플리케이션 구동에 필요한 프레임워크 등도 들어있어서 사이즈가 크다. 즉 소요 시간이 많이 걸린다. 이를 기반으로 동적 HTML 을 생성하고 -> 사용자에게 어플리케이션을 보여주게 된다. 그렇기 때문에 단점으로는 1) 화면 로딩에 시간이 오래 걸린다 2) SEO 퀄리티가 좋지 않다. (검색 엔진에서는 HTML 을 분석하는데, H..

오늘은 멀티 페이지 구현하기 (웹 개발 심화학습) / 주식 추천 사이트 (구현 테스트 과제) 코드를 뜯어보았다. 공부하면서 찾아본 자료들을 정리해둔다. Document.getElementById() DOM 트리에서 특정 DOM 객체를 찾아내고 싶을 때, ID 속성값을 가지고 찾을 수 있는 메서드. 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용하다 출처: Const 를 쓰는 이유 Let 은 값을 재할당할 수 있지만 Const 는 재할당할 때 error 가 난다. 그러니, Const 상수는 변하지 않는 값일 때 정의해준다. 콘솔에서 let 과 const 의 차이를 살펴보자. let..