본문 바로가기

분류 전체보기

(20)
9월 2번째 주간 공부기록 1. 숨고르면서 앞으로의 진로에 대해 고민하는 시간을 가지고 있다. 여러 기업에 면접을 보러 다니고, 원서를 넣어보고, 여러 교육과정을 새로 접해보고. 2. html 과제를 30% 완료했다. 돌아오는 주 동안에 완성시켜서 제출해야 한다. 3. 가면 갈수록 항해에서 주특기를 리액트를 왜 선택했나 회의감이 든다. 물론 풀스택을 하더라도 리액트를 할줄 알아야 하는건 맞는데, 리액트 중반에 들서서면서 엄청 헤맸다. 솔직히 리액트보다 노드를 했어야 하는게 아니었을까.
9월 첫번째 주간기록 1. 자주 틀리는 부분 이중배열 접속하는 부분-> 이 부분은 봐도 봐도 모르겠다. 코딩테스트에서 항상 나를 떨어지게 하는 부분. 2. html/ css 구현 과제물을 작성해가면서 배우고 있는 부분. 이 부분은 찾아가면서 계속 잘 진행하고 있는 듯 싶다. 3. 그 외 취업연계를 기대한 곳에서 취업연계가 생각보다 원활치 않아서 고민. 없던 셈 치고 다른 부분을 더 준비해야 하나? 4. 앞으로의 계획 일단 알고리즘 공부+ 마크업 구현 연습 등은 매일매일 해봐야지 않을까 싶다. 그리고 기능구현 연습도 화요일부터 진행하고. 스파르타 강의에 있던 쇼핑몰 구현 연습도 다시 한번 해봐야겠다. (요즘은 살짝 내 진로를 리액트가 아니라 노드로 가야되나 하는 고민도 하고 있다)
(사랑니 치통관계로 이제야 게시하는) 8월 4주차 WIL 사랑니 치통이 극심한 관계로 이번 주는 공부를 거의 하지 못했다. 대신에 기존 프로젝트에 새로운 기능을 구현했다. 프로젝트 기능 구현 이야기 (프로젝트링크) 이전 프로젝트에 사진 업로드 기능을 구현하지 못했었다. 복기하는 차원에서 cloudinary 및 multer 사용법을 다시 익혀 해당 기능을 구현하는데 성공했다. 캠핑장에 본인 사진을 업로드할 수 있고, 업로드된 사진을 수정할 수 있으며 삭제까지 가능하다.
Campermoa 프로젝트 추가기능 구현(이미지 업로드) 이미지가 업로드 되지 않는 부분이 나름 신경쓰여서 해당 내용을 다시 Cloudinary를 통해 업로드 되는 방식으로 구현했다. 문제점 1. 이미지 파싱 4편에서 이미지 업로드시 이미지 이름이 평문으로 나오고 인코딩이 진행되지 않았던 점이 있었다. multer를 다시 설치하니 인코딩이 잘 됐다. const multer = require("multer"); const upload = multer({ dest: "uploads/" }); router .route("/") .get(catchAsync(campgrounds.index)) // .post( // isLoggedIn, // validateCampground, // catchAsync(campgrounds.createCampground) // ); ...
8월 3주차 WIL(Campermoa 프로젝트 완성기) 좀 굵직한 이야기를 꼽아보자면 프로젝트를 완성했다는 것이다. 성남ICT 웹개발자 양성과정에서 들은 colt steele의 유데미 강의인 web developer bootcamp 강의에서 공부한 부분을 정리하고자 만든 프로젝트이다. - 캠퍼모아 프로젝트 이야기 (배포한 프로젝트 링크/ Github) - 개발기(1) - 개발기(2) - 개발기(3) - 개발기(4) - 개발기(5) 개요 간단한 캠핑장 리뷰 및 댓글기능을 사용할 수 있는 사이트이다. 캠핑장 사이트 사진 업로드 기능은 구현하지 못했지만, 이 부분도 문제를 찾아서 보완할 예정이다. 캠핑장을 등록할 경우 해당 등록된 장소를 지오코딩해 지도에 표출할 수 있는 기능을 만들었는데, 이 부분은 우선 mapbox로 구현했다. Cloudinary로 구현했던 부..
미완성된 프로젝트, jpndict 항해99할때 견본 프로젝트로 있던 중국어 사전 앱을 보고 시도해 본 프로젝트이다. 항해99 4주차에 구현 실패한 프로젝트. 리덕스 모듈에 있는 dictionary.js에 초기 상태값으로 설정해 놓은 부분만 표출된다. // 날리고 다시 시작해 볼 것 import { firestore } from "../../firebase"; const LOAD = "dictionary/LOAD"; const CREATE = "dictionary/CREATE"; const DELETE = "dictionary/DELETE"; const UPDATE = "dictionary/UPDATE"; const initailState = { list: [ { id: "0", dict: "サンプル", furigana: "さんぷる", d..
Campermoa 프로젝트 일기(5-完) 이전 진행 상황 지오코딩 일부 구현 cloudinary 구현 실패 우영우가 종영했고, 내 프로젝트도 어떻게 어떻게 해서 우여곡절 끝에 결국 배포까지 했다. 총평은 나중에 적겠지만 지금으로서는 많이 피곤하다. 항해99때 주 100시간을 하는 부분이 많이 힘들긴 했지만, 하다보니 그것도 되더라. 진행된 작업 1. 디자인 수정 어려웠던 부분 몇 가지가 있다. - 메인페이지에서 버튼 좌우 정렬. 여기서 float-md-left, float-md-light가 적용되지 않아 해당 h3과 nav에 ID를 부여해 별도로 css 작업을 통해 좌우로 정렬했다. - 해결되지 않던 플래시 메시지 여기 있는 우상단 엑스 버튼이 이전에는 구현조차 되지 않았다. 이 부분도 부트스트랩을 참고해 가면서 코드를 갈아엎어 해결한 상황. ..
Campermoa 프로젝트 일기(4) 이전 진행상황 로그인 기능 구현, 게시글 수정 삭제 권한 정리, 미들웨어 정리 및 라우트 리팩터링, 별점 기능 결론부터 말하자면, 일단 오늘 3시를 데드라인으로 잡고 heroku 배포까지 전부 완료했다. 순차적으로 포스팅을 하리라 마음 먹었기에 아마 5편이나 6편(완결편)을 빌어 게재하고자 한다. 일단 heroku를 통해 배포한 앱은 여기서 확인 가능하다. 진행된 작업 1. cloudinary를 이용한 이미지 호스팅(구현 실패) 살짝 의아했다. 원래는 firebase를 많이 쓰질 않나 했는데 강사가 미국인이라 그런지(?) 살짝 의아한 서비스를 많이 가져오긴 했다. 그 중 하나가 cloudinary이다. 후술하겠지만 mapbox도 오픈맵 기능이 한국에선 빈약하기 때문에 한국향 서비스의 경우에는 카카오맵이나..
Campermoa 프로젝트 일기(3) 이전 진행 상황 이전 게시글 보기 리뷰 및 평점 기능, 오류 및 데이터 처리 기능, 부트스트랩을 적용한 기초적인 디자인, 라우트 경로 변경, 플래시 메시지, 세션 기능을 구현했다. 현재 진행상황 1. passport를 활용한 기본적인 로그인 관련 기능 탑재 보통 암호를 만들때 암호 자체를 저장하기 보다는 해시값을 저장한다. (전송할때도 암호를 해시값으로 저장한다.) 다만 평문을 같은 알고리즘으로 암호화하면 해시값이 동일해 다른 사이트의 암호나 같은 평문을 쓰는 다른 암호가 해킹되기 마련인데, 이를 방지하기 위해 'salt'를 추가한다. passport는 이 과정을 쉽게 할 수 있도록 만든 기능인데, 네이버나 카카오, 구글같은 소셜로그인 기능도 도입 가능하다. npm install passport pass..
Campermoa 프로젝트 일기(2) 이전 진행 상황 (이전 글 보기) 이전 글에서 기본적인 CRUD와 자료구조를 만든 과정에 대해 간략하게 기록했다. 현재까지의 진행 상황 1. 부트스트랩을 활용한 기본적인 디자인 부트스트랩을 활용해 기초적인 디자인을 구현했으며, ejs-mate를 설치 후 boilerplate.js를 활용해 뷰 파일을 간소화 했다. 2. 오류 및 데이터 검증 기능 구현 오류 발생시 지정된 오류 메시지를 별도의 페이지에 표출하는 기능을 만들었으며, joi를 활용해 데이터 검증 기능을 수행케 했다. 아울러 캠핑장 추가 기능 및 수정 기능에서 데이터가 입력되지 않으면 피드백 하는 기능을 구현했다. joi 경고문이 영어로 나오는데, 한글로도 나오게 할 수 있는지는 차후 확인해 봐야 할 듯. 3. 리뷰 및 평점 기능 탑재 기본적인 ..