coding AtoZ

사이트

↓ ↓ ↓ ↓ 테스트 하러가기 ↓ ↓ ↓ ↓

icti.netlify.app/

서론

 MBTI 테스트는 다양한 version으로 

 한 가지의 주제(과자, 꽃, 컬러 등)를 바탕으로 만들어지고 있다.

 평소에 SNS를 하면서 아무생각 없이 다른 사람이 테스트한 것을 보고 따라 한 다음

 공유를 한 경험이 종종있다. 

 문득, 그런 MBTI 테스트들의 알고리즘이 궁금해졌고, 직접 만들어보고 싶다는 생각이 들었다.

 그래서 공부하고, 만들기에 이르렀다.

요소

알고리즘

 MBTI 테스트라고 하면 16가지의 성격유형과 그에 맞는 경우의 수를 결정짓는 문제가 필요했다.

 알고리즘은 상반되는 각각의 유형별로 3문제씩 출제해서 과반수인 유형을 택하게 했다.

 E(외향) / I(내향)

 S(감각) / N(직관)

 T(사고) / F(감정)

 J(판단) / P(인식)

부가적 요소

 사용자들의 눈을 만족시키기 위해서 나올 수 있는 16가지의 유형별로 대입할 사진이나 그림이 필요했는데,

 사진을 사용하자니 너무 투박하고, 일러스트를 사용하자니 저작권이 걱정되고, 비용적 측면도 있어서

 학창시절 미술부였던 실력을 살려 직접 그려서 사용했다. ( 사실 개발 보다 이부분에 시간이 더 많이 할애 됨..)

결과 도출

 결과를 보여줄 때는 그림뿐만 아니라, 

 각 유형별 특징을 표현해주는 짤막한 문장들이 필요했다.

 12문제의 선택에 의한 결과에 따라 각 유형별로 특징을 정리해서 10-12문장 정도를 만들었다.

 어휘실력의 한계 그리고 무엇보다 16가지 유형을 10문장씩 만든다고 해도 160가지의 문장을 

 떠올려야 하는 일이 쉬운 일이 아니었다. 

 말이 16가지의 유형이지, 유형이 사실 한 두개 다르면 비슷하고 크게 다른 부분은 없어서 더 힘들었던 것 같다.

디자인

 디자이너가 함께 한 프로젝트가 아니기에 오로지 정통 css와 js, bootstrap을 이용해서

 최대한 이쁘게 만드려고 노력했는데, 개인적으로는 만족하지만 사용자들은 어떨지 모르겠다.

배포 및 광고

 배포는 netlify로 진행했고, 광고는 kakao 애드핏을 사용했다.

후기

 사람들이 사용하길 바라면서 만들어 보는 웹은 처음이라 기대되고, 신기했다.

 생각보다 알고리즘은 간단했는데, 창작의 고통을 느끼는 부분이 많았던 프로젝트이다. (문장, 그림 등)

 front 요소 밖에 없기 때문에 쉽게 생각했었지만, css는 언제나 어렵고 복잡했다... 그래도 이번 기회에

 css를 전반적으로 공부하는 기회가 되어서 만족한다.

 많은 사람들이 사용했으면 좋겠다..!

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ

처음 node.js를 이용해서 백엔드와 프론트를 모두 만들어보고 싶다는 생각을 한 것은 20년 가을 즈음이었다.

20년 초반, 뭘 할 수 있을까 고민하다가 Bootstrap을 이용해 프론트에 발을 들인 게 웹의 시작이었다.

가을부터 해가 바뀌고 나서야 목표를 완성한 것은 솔직히 말도 안되게 느린 것이다.

스스로도 느린 것을 인정한다. 

학기 중에도 처음에는 열정을 가지고 달려 들었지만, 막상 혼자 하려고 하니까 모든 기능의 구현에 있어

한 발자국 나아 갈 때마다 벽에 막히는 듯한 느낌을 받았다. 처음에는 열심히 해결하려고 했지만,

학업을 병행하면서 하니까, 시험기간에는 도저히 이쪽으로는 손이 가질 않았다. 그러다 보니

점차 막히면 좌절을 많이 하게 되었고, 해결을 위해 노력하는 시간도 비중이 줄어갔다.

그래서 이렇게 늦어지지 않았나 생각한다.

개발자들의 여러 블로그를 보면서 마감기한이 중요하다.라는 말을 많이 본 것 같은데,

이제야 그 이유를 어느 정도 알 것 같다. 이번에는 마감기한 없이 하고 싶을 때 하는 느낌이 강했다. 

다음 프로젝트를 시작하게 된다면 마감기한을 설정하고, 최대한 빠르게 해결해 보려고 한다.

프로젝트를 끝내고 주저리주저리 적다 보니 배웠던 기술과 보완할 점이 보여서 좋은 것 같다.

2021.01.21

대댓글 기능을 완성했다.

댓글과 대댓글의 구분에 있어 차별을 두기 위해서 대댓글은 들여쓰기 하는 느낌으로 사용자에게 보여지게 했다

구조상 대댓글과 댓글의 작성에 이용되는 라우터가 같기 때문에 

똑같이 출력 되는 현상이 초기에는 존재했다. 

물론 늦장 부린 것도 어느정도 있지만, 이 현상을 해결하느라 고군분투한 것도 작업이 늦어지는 이유에 포함된다.

결론적으로 Schema 변수명과 저장할 때 변수명이 다르게 적혀있어 오류가 발생했던 것이다..

정말 어처구니 없는 실수였는데, 다음부터는 조심하도록 하자

일단 여기까지 계획했던 게시판의 기능은 대부분 구현 완료했다. 이번엔 순전히 배포가 아닌 공부목적으로 다음에는 

배포가능한 서비스를 만들어 보려고 한다.

추가된 개발 상황

 - 대댓글 기능

추가할 기능

 - x

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

부족합니다.

그 점 양해 부탁드립니다.

github.com/holicAZ/Nodejs

2021.01.13

댓글의 생성까지는 쉬웠으나 수정과 삭제가 매우 까다로웠다.

html의 form태그의 method 속성은 post와 get방식만 지원한다는 것을 알게 되었고,

put과 delete의 처리를 위해선 method override라는 패키지의 설치를 요했다.

하지만 내 케이스는 왠지 모르게 put의 처리가 동작하지 않았고, 임시방편으로 post 형식으로

update를 수행하게 만들었다.

아직은 코드에 수정에 있어 id의 제약을 걸지 않은 상태이다.

추가된 개발 상황

 - 댓글의 수정(edit) 기능

추가할 기능

 - 댓글 수정 id 제약

 - 댓글의 삭제

 - 대댓글 기능

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

부족합니다.

그 점 양해 부탁드립니다.

github.com/holicAZ/Nodejs

2021.01.06

게시판의 댓글 작성 기능까지 구현을 완료했다.

작성 외의 수정, 삭제, 대댓글 등은 추후 추가할 예정이다.

댓글은 Comment 라는 새로운 스키마의 생성과

User 와 Post 둘 다 관계를 설정해 줘야 해서 좀 까다로웠다.

추가된 개발 상황

 - 댓글 기능 추가

추가할 기능

 - 댓글의 수정 및 삭제

 - 대댓글

 - 비밀번호 오류가 발생 수정 예정

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

부족합니다.

그 점 양해 부탁드립니다.

github.com/holicAZ/Nodejs