본문 바로가기

프론트엔드 개발4

[스터디 로그] 4주차: 프론트&백엔드 개발 1차 스터디도 이제 마무리 단계이다.더이상 TODO 리스트라고 부를 수 없는 Application이 되긴 했지만 기능은 완성(?)이 되었다.추가 기능: 페이지네이션, 댓글 기능, jwt 인증(로그아웃 가능), 구글 로그인, 비밀번호 찾기 백엔드 쪽에도 많은 변경이 있었으나 엘리스 교육 과정의 코드를 그대로 적용한 부분이 많아서오히려 프론트 쪽에 시간을 더 투자하였다.엘리스 쪽 코드가 SSR(서버사이드렌더링) 방식의 PUG로 되어 있었고내 프로젝트 코드는 CSR(클라이언트사이드렌터링) 방식 EJS로 되어 있어서 내 쪽으로 맞추면서 전체적으로 프론트 쪽은 다시 수정하게 되었다.두 방식 다 낯설어서 작업이 생각보다 속도가 나지 않았지만 비교하면서 작업하는 것이 생각보다 재미있었다.다음주에는 가능하다면 리엑.. 2022. 8. 11.
[스터디 로그] 2주차: 프론트엔드 개발 - ejs 1주차의 프론트앤드의 모든 기능은 과감하게 버리고...다른 사이트 참고 없이 만들겠다는 당초의 결심도 버리고(시간과 능력의 부족으로)새롭게 만들었다.프론트엔드: html, js, jquery, ajax, ejs, bootstrap백엔드: node.js, express, mongodb, method-override 프론트엔드에서 1주차와 달라진 부분은ejs 를 도입한 것이다.설치$ npm install ejs사용app.set('view engine', 'ejs'); 기본적으로 html 파일과 거의 유사하며 views 폴더에 ejs 확장자로 저장한다. html 코드 안에 js구문, 변수, 인클루드 문서명 등( 사이 위치)을 넣으면 되고네비게이션바나 풋터 같이 반복되는 부분의 처리가 간결하게 인.. 2022. 7. 27.
[스터디 로그] 1주차: 프론트 & 로컬 데이터 연결 새벽 2시다....아직 서버 연결은 안 배웠으니 이번주에 배운 JOSN 파일 연결로 DB를 대신해 보려고 했다.JSON을 GET으로 불러오는 건 5분도 안 걸렸는데 POST가 안 된다.생각해보니 로컬 환경이라 고려할 사항이 한 두가지가 아니다.오히려 그냥 원격 DB에 연결하는 게 더 빠를 것 같다.하지만 왠지 그렇게 하면 공부 단계를 건너뛰는 느낌이라,구글과의 끝없는 논의 끝에JSON Server라는 녀석을 찾았다.내가 찾던 딱 그 아이다.요즘은 정말 구글에 없는 게 없구나.... ㅜㅜ너무 피곤해서 자세한 설명은 공식 깃헙으로 넘긴다.https://github.com/typicode/json-server GitHub - typicode/json-server: Get a full fake REST API .. 2022. 7. 21.
[스터디 로그] 1주차: 프론트엔드 시작 - 간단한 TO-DO LIST 만들기 📌 주제: TO-DO LIST 개발 (프론트엔드) 이번 스터디의 첫 주차 목표는 HTML, JavaScript, BootStrap만 사용하여 간단한 TO-DO LIST를 만드는 것입니다.새로운 기획보다는 핵심 기능 구현에 집중하여, 빠르게 만들고 배운 내용을 적용해보려 합니다. ✅ 개발 목표 핵심:HTML, JavaScript, BootStrap을 활용한 기본 UI 및 주요 기능 구현구현 시간: 약 2~3시간 예상우선순위:할일 추가, 검색 기능다음 단계:다음 주에는 JSON 파일로 데이터 저장 및 불러오기 기능 추가 예정완료 상태 관리 기능도 함께 개발할 계획 🔍 이번 주 학습 포인트 새로 적용해본 것:이번 주에 배운 내용 적극 활용이해가 어려웠던 개념:JavaScript 연산자 (추후 복습 필요.. 2022. 7. 17.
728x90