항해 3기 2주차 WIL 2021.09.20~2021.09.26

CH_Hwang·2021년 9월 26일
0

항해99

목록 보기
3/14

2021.09.20

nodejs 수업이 열려서 설레는마음에 아침 9시부터 공부를 시작했다. 중간중간 떠들기도 하고 집중이 조금 어려워서 5주차 수업 과제제출까지 했을때는 새벽 3시정도 됐었던것 같다.
수업을 들으면서 어려웠던 점은 라우팅 미들웨어를 따로 파일에 분류하는 점이나 미들웨어에서 next()를 쓰는 이유 등이 조금 어려웠던 것 같다.

대체로 구조를 나누는 것이 힘들었고 왜 잘게나눠야 되는지는 아직까지도 살짝은 의문이긴 하다.
조금더 코드를 이해 하고싶고 아직까지는 cs적 지식이 조금은 부족한 것 같은 느낌이다.
수업에 만족스러웠던 부분은 aws 배포하는 부분에서 웹개발 종합반과는 다르게 더 친절히 알려주었고 코드도 무조건적으로 코드스니펫을 이용하여 복사하여 붙여넣기 하는 것이 아닌 한줄한줄 직접치시는 경우도 있고 복사하게 되면 한줄한줄 해석해주셔서 만족스러웠다.

다만 아쉬웠던 점은 코드스니펫을 복사붙여넣기 했을때 완전히 똑같이 따라했음에도 불구하고 에러가 나는 경우가 많았고 나 뿐만 아니라 다른 수강생들도 에러가 많이 나는 것을 봐서는 코드 스니펫이 잘못 된 것들이 있다는 것을 알았다.(예를 들어 몽구스에서 더이상 지원하지 않는 옵션을 넣는다던가, 애초에 조금 잘못된 코드라던가)

수업을 다 들었지만 조금 어려워서 혼자서 더 공부해야 할 것 같다.

2021.09.21

회원가입/ 로그인 서비스를 혼자서 만들어 보기로 했다.
회원가입은 금방 완성했다(기본적인 crud여서...). 물론 암호화 작업도 안하고 유효성 체크도 안하고 해서 금방 만들었지만 기본적인 crud부터 하는 것이 좋을 것 같아서 따로 그런 부수적인 요소들은 빼고 진행했다.
회원가입 기능을 만들때 app.use의 순서라던지, 데이터베이스의 이름에 따옴표를 넣는 바람에 naming restrict(있는줄도 몰랐다...)에 걸린다던지의 이슈가 말생했다.
async와 fetch기능을 이용해서 통신을 하는것을 해봤는데(물론 클라이언트단 통신이라서 조금은 결이 다르지만 async await를 조금 더 이해한것 같다.) 기존에 fetch then을 이용해서 promise구조로 사용하는 것 보다 더 좋은것 같다는 생각이 들었다.(코드가 깔끔해지는 느낌..?)

회원가입 기능을 하면서 생각이 들었던 것은 구조짜는거나 어떤 미들웨어가 다른 미들웨어와 어떻게 연계가 되는지, 어떤구조로 짜야 조금 더 보기 수월할 지 등에서 부족함을 느꼇고, 이러한 것들을 해결하려면 조금더 많은 서비스를 만들어봐야 될 것 같다.

수업에서는 routes와 router 폴더를 나누어서 진행을 했는데 내 생각에는 routes 폴더에서는 렌더링만 해주는 용도인 것 같고, router에서 기능적인 부분을 담당해서 한 것 같은데 나는 따로 구분은 했지만 rendering에서도 기능을 구현했다.

로그인기능을 시작했을때 secret키를 .env 파일에 따로 보관하기 위해서 dottenv 모듈을 깔았다.
로그인 기능(로그인을 했을떄 토큰이 발급되고 쿠키에 담아져서 보관되는 것.)은 완성을 했지만 쿠키 path 지정단계에서 path='/'로 지정을 했더니 제대로 지정이 되지 않았다. 그래서 한창 고민하다가 혹시나 하고 path = / 로 수정하니까 되는 어이없는 경우가 발생했다...

2021.09.22

next()에 대해 조금 더 알아보려고 했다.
현재 next가 사용되고 있는 미들웨어에서 request를 받고 response로 다시 보내주지 않고 next()를 사용하여 다음 function으로 request값을 전달해주며, 특정 url에 매핑시킬 수도 있다고 한다. 하지만 아직 이걸 응용해볼 방법이 떠오르지 않아 더 공부해야겠다는 생각이 들었다.

쿠키를 불러오기위해 cookie-parser 모듈을 다운로드 받았고,

cookieparser가 urlencoded보다 먼저 실행될 경우 홈 화면에 안들어가지는 issue가 발생했다.

app.use(express.urlencoded({extended: false}));
app.use(express.json());
app.use(cookieParser());

그래서 코드를 이런 순으로 짯다..
그리고 나는 템플릿 언어를 pug를 채택했는데, 조건문이나 이런 부분에서 차질이 생겨서 ejs로 바꿨다.
그리고 홈페이지 로딩을 하는 미들웨어에서 try catch문을 써보려고 했는데 뭔가 오류가 생겼지만 터미널이나 콘솔에 오류가 찍히지않아서 어떤오류인지는 잘 모르겠다... try catch문도 실행이 잘 안되어서 이부분도 나중에 공부해야겠다고 생각하고 넘어갔다.

2021.09.23

항해가 정상적으로 시작했다.
팀도 새로 짜졌고 새로운 프로젝트가 생겨서 첫날부터 개인프로젝트를 시작했다. (수업은 연휴때 들어서...)
개인프로젝트는 블로그만들기였는데 기본적인 crud를 하는 블로그였다. 포스팅 만들기, 보여주기, 수정하기, 삭제하기.
프론트와 백에서 각각 쿼리스트링을 불러노는 법을 배웠다.

프론트:

const url = new URLSearchParams(window.location.search);
const cardId = url.get('key');

백엔드:

req.query;

하루만에 다 만들고 싶어서 노력했지만 하루만에 다 만들지는 못했다.(배포를 못했기때문에)

새벽 1시반정도까지 했을때가 디테일한 비밀번호 체크를 제외한 crd는 만들었고 update 부분에서 원페이지 업데이트를 하려다가 (innerHTML 활용) 클라이언트부분에서 막혀서 그냥 수정페이지를 새로 만들어서 새벽 3시가 조금 넘었을때 crud를 완성했다.

2021.09.24

2일차.
어제만들었던 crud중에서 비밀번호 확인하는 모달창을 만들고 비밀번호 확인기능을 추가했다. 그리고 배포까지해서 과제를 제출했고 추가기능으로 댓글기능과 대댓글기능을 해보려고 했다.
댓글기능은 수월하게 완성했다. 하지만 대댓글 기능에서 막혀서 이번 과제기간동안 해결해보고싶은데 아무래도 어려울 것 같다. 추가적으로 과제를 다하면 xss와 csrf 문제에 대해서 생각해보는 것이 써있었는데 xss는 스크립트문으로 클라이언트공격을 하는 것이고 csrf는 서버에 공격을 하는 것이라고 이해했다. xss의 경우 서버에서 < = &ls 로 하는 필터링 등을 해주면 좋을것 같고, 라이브러리나 래퍼런스가 많아 하면 좋을 것 같았다.
내가 만든 블로그에 xss공격을 해봤는데 실행되지 않아 찾아봤는데, ejs에서는 기본적으로 html태그를 이스케이핑해주는 기능이 있어서 실행이 안되는 것이었다.

2021.09.25

3일차.
csrf 방어법은 쿠키 이외의 다른 파라미터 값으로 추가 인증처리를 하거나,
xss스크립트 실행 방지는 당연히 해줘야 하고 값이 매번 바뀌는 one time 값을 사용한다.
ips나 웹 방화벽을 사용한다.(정상적인 html 스크립트라서 보안솔루션으로는 방어가 되지 않는다고한다.)
referer 체크,
get/post요청을 구분한다 .
등의 방법들이 있다고 한다.

대댓글 작업을 추가로 해보려고했다.
대댓글 기능이 좀 많이 어려운 것 같다. 객체 안에 객체가 들어있는 형태로 종속성을 주입시켜서 REST API를 만들어야 할 것 같은데 어떤방식으로 해야 하는지 잘 모르겠다.
트리구조로 해보려고 했으나 트리구조의 경우 대댓글이 무한으로 생길경우 그만큼 collection도 무한으로 생겨야 하는것 같아서 이방법은 비효율적이라고 생각이 들고, 댓글이라는 한 collection안에서 서로 물고있는 형태가 되어야 할 것 같은데 무한이라는 경우의 수에서 계속해서 막히는 것 같다. 이 REST API를 짜는 방법이 내가 아직 미숙해서 어려운 것 같아 조금 더 지식이 있었으면 하고 생각이 며칠째 든다... 참 정신적으로 힘든 3일차였다.

2021.09.26

4일차.
오늘은 일요일이라 휴식을 취하면서 로그인/회원가입을 잠시 만들어 볼 생각이다.

정신적으로 조금 많이 힘든것 같다. 3일동안 대댓글 기능에 말려들어서 해결은 커녕 단 한발자국도 앞으로 못나간 느낌이라서 이부분에서 많이 힘든 것 같다. 객체를 다루는법, REST API 구조를 짜는것 모든게 부족한 것 같다. 더 잘해지고싶다.

REST API:
리소스를 중심으로 디자인되며 클라이언트에서 접근할 수 있는 모든 종류의 개체. 우리가 하고있는 곳에서는 res.sender로 보내는 json 포멧의 객체들이 REST API의 한 예가 될 수 있음.

1개의 댓글

comment-user-thumbnail
2021년 9월 28일

갓창환님...충성충성.......

답글 달기