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

find란?

 - 어떤 원소가 vector 내부에 포함되는 요소인지 확인할 수 있는 함수

 - 만약 존재한다면 요소의 index를 반환해 준다.

 - 존재하지 않는다면 vector의 size 값을 반환

사용법

 - algorithm 헤더에 포함되어 있다.

#include<iostream>
#include<vector>
#include<algorithm>

using namespace std;

vector<int> v = {1,2,3,4};
...


cout << find(v.begin(), v.end(), 1) - v.begin(); // 1 존재 index : 0 출력
cout << find(v.begin(), v.end(), 2) - v.begin(); // 2 존재 index : 1 출력
cout << find(v.begin(), v.end(), 3) - v.begin(); // 3 존재 index : 2 출력

cout << find(v.begin(), v.end(), 123) - v.begin(); // 123 요소가 아님 vector의 size인 5가 출력
						   // == v.size()

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

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

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

github.com/holicAZ

이번에 새로운 프로젝트를 하면서 객체의 형태로 변수를 저장하면서 Js에서 데이터를 다룰 때

많이 사용된다는 것을 알게 되었다.

객체란..?

 객체란 데이터 저장형식의 일종이다.

 객체는 {key : value} 와 같은 형태로 저장이 된다. Java와 C++의 Map과 같은 형식이다.

사용법

var ob = {1:"red"}

ob[1] == "red"

 {key : value}의 형태로 사용되며, 호출할 때는 2차원 배열을 호출 하듯이 호출하면 key값에 해당하는

 value 값이 반환된다.

 객체는 여러가지 key value 조합을 한 번에 쓸 수도 있는데,

var ob = { 
		1 : {"color" : "red", "name" : "apple"} 
      		2 : {"color" : "yellow", "name" : "banana"}
         }
         

// ob[1]["color"] == "red"
// ob[2]["name"] == "banana"

 위와 같이 객체 내부에 객체를 선언 함으로써 다양한 데이터를 필요에 따라 호출할 수 있다.

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

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

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

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.14

댓글의 수정과 삭제를 완성하고, 대댓글 기능의 틀만 잡아뒀다.

수정과 삭제의 기능 부여는

 1. 글(Post)의 author.

 2. 댓글(Comment)의 author과 현재 로그인된 user.id 가 동일할 때

위 두 가지의 경우에 버튼을 활성화되게 했다. 

 + 추가적으로 관리자(admin) 계정의 경우에도 삭제 기능을 추가하면 좋을 것같다.

댓글이 삭제가 됐다고 가정했을 때 DB에서 완전히 제거하면, 그 아래에 달린 reply들은 Parent를 잃은 고아(orphanage)가 되어버리기 때문에 Comment 모델의 isDeleted 부분을 만들어 이 부분을 true로 함으로써 페이지 상에 표시되지 않게 한다. 

대댓글(reply)의 경우는 로그인된 상태이면 활성화되게 했다.

현재 reply를 저장하게 되면 해당 댓글의 아래가 아닌 맨 아래로 내려가는 현상이 있다.

이 부분은 추후 보완이 필요한 부분이다.

추가된 개발 상황

 - 댓글의 수정, 삭제 기능

 - 수정, 삭제 기능의 제약

추가할 기능

 - 대댓글 기능

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

sort, stable_sort 공통점

 - 둘 다 sorting(정렬)의 일종이다.

 - sort 의 기본은 오름차순 정렬이다.

- 평균적으로 O(NlogN)의 시간복잡도를 가진다.

sort, stable_sort 차이점

 - sort는 퀵정렬, stable_sort는 병합정렬로 이루어져 있다.

 - sort와 stable_sort의 차이점은 같은 항목의 정렬에 있어서 있다.

   * sort(불안정 정렬), stable_sort(안정 정렬) : sort는 같은 항목에 있어서 정렬 후와 정렬 전의 순서가 변할 수도 있고,

     stable_sort는 같은 항목은 정렬 전과 정렬 후 순서가 변하지 않는다는 특징이 있다.

사용법

 - algorithm 헤더에 포함되어 있다.

#include<iostream>
#include<algorithm>
#include<vector>
using namespace std;

vector<int> v;
...

// sort
sort(v.begin(), v.end(),compare);

// stable_sort
stable_sort(v.begin(), v.end(),compare);

 ※ compare은 사용자가 임의로 만든 비교함수 이다.

    만약 compare 자리에 아무것도 넣지 않는다면 기본적으로 sort는 오름차순으로 실행된다.

 관련된 문제는 BOJ 10814번 나이순 정렬 (www.acmicpc.net/problem/10814)

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

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

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

github.com/holicAZ