정신없던 1주차가 끝이 났다.
9 to 9 이라는 생활패턴에 적응하는데 벅찼던 일주일, 주어진 프로젝트를 어떻게 진행했는지도 가물가물하다. 기본적인 if문이나 for문을 활용하는 것은 내게는 새로운 내용이 아니었는데, 너무 그래서 이번주의 WIL은 내가 쓴 허접탱이 코드, 주로 script 부분을 돌아보고, 어떻게 개선할수 있을까,를 써보려 한다.
1) 변수
먼저 변수들을 살펴본다면,
// [이니셜, 이름, 설명, Github링크, Blog링크]
const ssh = ['ssh', '신성훈', 'ISFJ인 신성훈', 'https://github.com/seonghoon90', 'https://velog.io/@dotofi'];
const pmh = ['pmh', '박민혁', 'INTP인 박민혁', 'https://github.com/hanraeul', 'https://velog.io/@hanraeul'];
const sdo = ['sdo', '신다온', 'INTJ인 신다온', 'https://github.com/shin-daon', 'https://shindaon.tistory.com/'];
const hjb = ['hjb', '홍준빈', 'INFJ인 홍준빈', 'https://github.com/Hongjunbin', 'https://bin2dev.tistory.com/'];
const lmh = ['lmh', '이민호', 'ESTP인 이민호', 'https://github.com/2minus', 'https://velog.io/@2_minus'];
const team_l = [ssh, pmh, sdo, hjb, lmh];팀원 별 정보들을 담은 배열, 그리고 그 배열을 요소로 담은 배열들.
지금 생각해보면 링크같은 경우는 사용하지 않았는데 삭제를 잊었다.
const text_l = [
"팀원이 당신과 잘 맞을수도 있습니닷!",
"팀원과 같은 성향입니다. 공통점을 찾으셨네요 축하드립니다!",
"팀원과 mbti는 아무 관련 없지만 당신과 잘 맞을수도 있을것 같은 느낌적인 느낌이 없지않아 있는 예감"
];
// mbti 텍스트
const mbti_l = ['ESTP', 'ESFJ', 'ESFP', 'ESTJ', 'ENTP', 'ENTJ', 'ENFP', 'ENFJ',
'ISTP', 'ISTJ', 'ISFP', 'ISFJ', 'INTP', 'INTJ', 'INFP', 'INFJ'];
const title_dic = {
'ESTP': "사업가 | ESTP", 'ESFJ': "집정관 | ESFJ", 'ESFP': "연예인 | ESFP", 'ESTJ': "경영자 | ESTJ", 'ENTP': "", 'ENTJ': "통솔자 | ENTJ", 'ENFP': "활동가 | ENFP", 'ENFJ': "선도자 | ENTJ",
'ISTP': "장인 | ISTP", 'ISTJ': "현실주의자 | ISTJ", 'ISFP': "모험가 | ISFP", 'ISFJ': "", 'INTP': "논리술사 | INTP", 'INTJ': "전략가 | INTJ", 'INFP': "중재자 | INFP", 'INFJ': "옹호자 | INFJ"
};
const de_dic = {
'ESTP': "사업가(ESTP)는 항상 주변 사람에게 영향력을 행사하곤 합니다. 파티에서 가는 곳마다 사람들에게 둘러싸여 있는 사람을 발견한다면 바로 사업가일 것입니다. 이들은 직설적인 유머 감각을 지니고 있으며 수많은 사람의 관심을 받는 일을 즐깁니다. 한 마디로 사회자가 무대로 올라올 사람을 찾을 때 직접 무대로 올라가는 성격이라고 할 수 있습니다. 사업가는 이론적이고 추상적인 개념과 지루한 토론에는 크게 관심이 없습니다. 지능이 높고 활기찬 대화를 유지할 수 있는 성격이기는 하지만, 현실적인 주제에 대해 이야기하고 직접 행동하기를 원하는 성격이기 때문입니다. 이들은 계획을 심사숙고하기보다는 먼저 행동하고 시행착오를 겪으며 실수를 바로잡는 방식을 선호합니다.",
'ESFJ': "집정관(ESFJ)에게 인생이란 다른 사람과 함께할 때 가장 달콤한 것입니다. 이들은 많은 공동체의 기반이 되며 친구와 연인과 이웃을 열린 마음으로 대합니다. 집정관이 모든 사람을 좋아하거나 무한한 관용을 지닌 것은 아닙니다. 하지만 이들은 친절하고 예의 바른 태도가 도움이 된다고 믿고 있으며 주변 사람들에게 강한 책임감을 느끼곤 합니다. 또한 관대하고 신뢰할 수 있는 성격으로 작은 일이든 큰 일이든 가족과 공동체를 하나로 모으기 위해 스스로 책임을 짊어질 때가 많습니다.",
'ESFP': "연예인(ESFP)은 즉흥적으로 노래하고 춤을 추는 일을 즐기는 성격입니다. 이들은 지금 이 순간을 즐기며 남들도 자신과 같은 즐거움을 느낄 수 있기를 바랍니다. 또한 남을 응원하는 데 기꺼이 시간과 에너지를 투자하며, 매우 매력적인 방식으로 다른 사람의 기운을 북돋곤 합니다.",
'ESTJ': "경영자(ESTJ)는 전통과 질서를 중시하는 성격으로, 자신이 생각하는 옳고 그름과 사회적 기준에 따라 가족과 공동체가 화합할 수 있도록 노력합니다. 이들은 정직과 헌신과 존엄성을 중시하며, 어려운 길을 기꺼이 앞장서고 다른 사람들에게 명확한 조언과 지도를 제공합니다. 이들은 사람들이 화합하도록 하는 일에서 자부심을 느끼며, 모든 사람이 지역 축제를 즐길 수 있도록 노력하거나 가족과 공동체의 전통적인 가치관을 지키는 역할 등을 맡곤 합니다.",
'ENTP': "변론가(ENTP)는 두뇌 회전이 빠르고 대담한 성격으로 현재 상황에 이의를 제기하는 데 거리낌이 없습니다. 변론가는 어떤 의견이나 사람에 반대하는 일을 두려워하지 않으며, 논란이 될 만한 주제에 대해 격렬하게 논쟁하는 일을 즐깁니다. 그렇다고 변론가가 반론을 제기하는 데만 관심이 있거나 악의를 지닌 것은 아닙니다. 사실 변론가는 지식이 풍부하고 호기심이 넘치며 활기찬 유머 감각으로 다른 사람을 즐겁게 할 수 있는 성격입니다. 다만 대부분의 성격과 달리 논쟁에서 즐거움을 찾는 성향이 있을 뿐입니다.",
'ENTJ': "통솔자(ENTJ)는 타고난 리더라고 할 수 있습니다. 이들은 카리스마와 자신감을 지니고 있으며 자신의 권한을 이용해 사람들이 공통된 목표를 위해 함께 노력하도록 이끕니다. 또한 이들은 냉철한 이성을 지닌 것으로 유명하며 자신이 원하는 것을 성취하기 위해 열정과 결단력과 날카로운 지적 능력을 활용합니다. 이들은 전체 인구의 3%에 불과하지만, 다른 많은 성격을 압도하는 존재감을 뽐내며 다양한 비즈니스와 단체를 이끄는 역할을 할 때가 많습니다.",
'ENFP': "활동가(ENFP)는 진정으로 자유로운 영혼이라고 할 수 있으며 외향적이고 솔직하며 개방적인 성격입니다. 이들은 활기차고 낙관적인 태도로 삶을 대하며 다른 사람들 사이에서 돋보이곤 합니다. 그러나 신나는 인생을 보내는 것처럼 보인다고 해서 즐거움만을 좇는 성격은 아니며, 다른 사람과 감정적으로 깊고 의미 있는 관계를 맺는 일을 추구합니다.",
'ENFJ': "선도자(ENFJ)는 삶에서 위대한 사명을 위해 힘써야 한다는 느낌을 받곤 합니다. 사려 깊고 이상주의적 성향을 지닌 선도자는 다른 사람과 주변 세상에 긍정적인 영향력을 발휘하기 위해 최선을 다하며, 어려운 상황에서도 올바른 일을 할 기회를 마다하지 않습니다.",
'ISTP': "장인(ISTP)은 이성과 호기심을 통해 세상을 바라보며 눈과 손으로 직접 탐구하는 일을 즐깁니다. 이들은 타고난 손기술을 지니고 있으며, 다양한 프로젝트에서 유용하고 재미있는 물건을 만들어 내고 주변 환경에서 배울 점을 찾습니다. 장인은 보통 기술자나 엔지니어로 일하는 경우가 많으며 물건을 직접 분해하고 조립해 개선하는 일을 즐깁니다.",
'ISTJ': "현실주의자(ISTJ)는 진솔하게 행동하는 자신의 모습에서 자부심을 느끼며, 자기 생각을 솔직하게 이야기하고 어떤 것에 헌신하기로 한 경우 최선을 다합니다. 현실주의자는 인구의 상당 부분을 차지합니다. 화려한 삶이나 다른 사람의 주의를 끄는 일에는 관심이 없으며 안정된 사회를 위해 자신의 몫보다 많은 기여를 하곤 합니다. 이들은 가족이나 주변 사람들로부터 믿음직한 사람이라는 평판을 받을 때가 많으며, 현실 감각이 뛰어나 스트레스가 극심한 상황에서도 현실적이고 논리적인 태도를 유지하는 사람으로 인정받곤 합니다.",
'ISFP': "모험가(ISFP)는 진정한 의미의 예술가라고 할 수 있습니다. 하지만 모험가라고 반드시 예술 업계에만 종사하는 것은 아닙니다. 이들에게는 삶 자체가 자신을 표현하기 위한 캔버스이기 때문입니다. 이들은 입는 옷부터 여가 시간을 보내는 방식까지 다양한 측면에서 자신의 독특한 개성을 생생히 드러냅니다. 모든 모험가는 각자 독특한 성격을 지니고 있습니다. 이들은 호기심이 많고 새로운 것을 추구하는 성격으로 다양한 분야에 관심과 열정을 보일 때가 많습니다. 모험가는 탐험가적 성향과 일상 생활에서 즐거움을 찾을 수 있는 능력을 지니고 있는 매우 흥미로운 성격이라고 할 수 있습니다. 그러나 보통 자신의 놀라운 개성에 자만하는 대신 자신이 하고 싶은 일을 할 뿐이라고 겸손하게 생각하곤 합니다.",
'ISFJ': "수호자(ISFJ)는 겸손한 자세로 세상을 지탱하는 역할을 합니다. 이들은 근면하고 헌신적인 성격으로 주변 사람들에 대한 깊은 책임감을 느낍니다. 이들은 마감 기한을 철저히 지키고 동료와 친구의 생일과 기념일을 챙기며, 기존 질서를 유지하고 주변 사람을 배려하는 동시에 기꺼이 도움의 손길을 건넵니다. 또한 감사를 요구하기보다는 뒤에서 묵묵히 헌신하는 성격이라고 할 수 있습니다. 수호자는 유능하고 긍정적인 성격으로 다양한 방면에서 역량을 발휘합니다. 또한 세심하고 배려심이 넘치며 분석 능력과 세부 사항 파악 능력도 뛰어납니다. 그리고 차분한 성격인 동시에 대인 관계 능력도 뛰어나며, 이 덕분에 여러 사람과 깊은 관계를 맺을 가능성도 큽니다. 이들의 다양한 장점은 시너지 효과를 내며 일상생활에서도 빛을 발하곤 합니다.",
'INTP': '논리술사(INTP)는 자신의 독특한 관점과 활기 넘치는 지성에 자부심을 느끼며, 우주의 미스터리에 대해 깊이 생각하곤 합니다. 유명한 철학자와 과학자 중 논리술사 성격이 많은 것도 이 때문일 것 입니다. 논리술사는 상당히 희귀한 성격이지만 뛰어난 창의성과 독창성으로 많은 사람 사이에서 존재감을 드러내곤 합니다.이렇게 논리적이면서도 마술사와 같은 창의력을 발휘하는 성격이기에 ‘논리술사’라고 부르게 되었습니다.',
'INTJ': "최고가 되는 것은 외로운 일입니다. 매우 희귀한 성격이면서도 뛰어난 능력을 지닌 전략가(INTJ)는 이러한 말의 의미를 잘 알고 있습니다. 전략가는 이성적이면서도 두뇌 회전이 빠른 성격으로, 자신의 뛰어난 사고 능력을 자랑스러워하며 거짓말과 위선을 꿰뚫어 보는 능력이 있습니다. 하지만 이로 인해 끊임없이 생각하고 주변의 모든 것을 분석하려는 자신의 성향을 이해할 수 있는 사람을 찾는 데 어려움을 겪기도 합니다.",
'INFP': "중재자(INFP)는 언뜻 보기에 조용하고 자신을 내세우지 않는 것처럼 보이지만, 사실은 에너지와 열정이 넘치는 마음을 지닌 성격입니다. 이들은 창의적이고 상상력이 뛰어나며 몽상을 즐기는 성격으로 머릿속에서 수많은 이야기를 만들어 내곤 합니다. 또한 음악과 예술과 자연에 대한 감수성이 뛰어나며 다른 사람의 감정을 빠르게 알아차립니다. 중재자는 이상주의적이고 공감 능력이 높으며 깊고 의미 있는 관계를 원하고 다른 사람을 도와야 한다는 사명감을 느끼곤 합니다. 그러나 전체 인구에서 큰 비중을 차지하지 않는 성격이기 때문에 외로움을 느끼거나 존재감을 드러내지 못하는 때가 있으며, 자신의 독특한 강점을 인정하지 않는 세상에서 방황하는 느낌을 받을 수도 있습니다.",
'INFJ': "옹호자(INFJ)는 매우 희귀한 성격임에도 불구하고 세상에 큰 영향력을 발휘하곤 합니다. 이들은 이상주의적이고 원칙주의적인 성격으로, 삶에 순응하는 대신 삶에 맞서 변화를 만들어 내고자 합니다. 이들에게 성공이란 돈이나 지위가 아니라 자아를 실현하고 다른 사람을 도우며 세상에서 선을 실천하는 일입니다. 원대한 목표와 야망을 품고 있다고 해서 옹호자가 몽상가와 같은 성격이라는 뜻은 아닙니다. 이들은 원칙과 완벽함을 중시하며 자신이 옳다고 믿는 일을 끝내기 전에는 만족하지 않습니다. 또한 매우 양심적인 성격으로 자신의 확실한 가치관에 따라 인생을 살아가며, 다른 사람이나 사회의 가치를 따르는 대신 자신의 지혜와 직관을 통해 정말로 중요한 가치를 찾기 위해 노력합니다."
};
const mbtichar = ['E', 'I', 'S', 'N', 'T', 'F', 'P', 'J']; 다음은 mbti 정보를 담은 변수들이다. 팀원들을 한 배열로 묶었던 것 처럼 한번에 묶을수 있지 않았을까 싶다.
그리고 전체적으로 let, var, const의 차이점을 더 알고 처음부터 사용했다면 좋았을 텐데 라는 생각이 든다.
2) 함수
첫번째 함수로 페이지로 부터 입력받은 문자열이 mbti의 16가지 형태에 맞는가를 검사하는 함수다.
function verifymbti(res) {
var flague = true;
let i = 0;
let j = 0;
while (flague && i < res.length) {
console.log(res[i]);
if (res[i] == mbtichar[j] || res[i] == mbtichar[j + 1]) {
i++;
j++;
j++;
} else {
var res = "error";
flague = false;
}
}
return res;
};반복문을 진행시키기 위한 boolean 변수 flague, 호출을 위한 index 변수 i와 j를 사용했다.
flague가 true일 때, index 가 입력받은 문자열의 크기보다 커지지 않을 때 while문이 반복되고, 문자열의 순서대로 mbti 알파벳과 일치한다면, 진행하고 아니라면 반복문을 중지하며 입력된 문자열을 error를 집어넣는다. 함수는 입력된 문자열을 그대로 반환하거나, error를 반환한다.
mbti 문자를 비교하면서 위의 변수를 호출하는 과정에서 undefined error를 맞닥뜨린 부분이고, 철저히 패배한 부분이다.
위의 변수들의 자료형을 수정하면 더 매끄럽게 진행할 수 있지 않을까?
두번째 함수는 페이지에서 입력받은 문자열을 검증하고 결과값을 도출하려고 함수 두 개를 담은 함수다.
// mbti를 입력받는 부분
function ipmbti() {
var res = $("#umbti").val().toUpperCase();
res = verifymbti(res);
console.log(res);
if (res.length == 4) {
alert("당신은 흥미로운 " + res + " 시군요!");
opresult(res);
$("#initres").fadeToggle(1000);
} else {
alert("제대로 된 mbti가 아닌것 같은데요!");
};
};지금 살펴보면 이 함수가 필요했는지, 문자열의 글자수를 검사하여 alert을 실행시키는 정도는 나머지 두 함수 중 하나에 포함시켜도 되지 않았을까?
세번째 함수는 결과 페이지를 생성하는 함수다.
갖가지 조건문과 장황한 변수가 눈에 띈다.
// 입력된 값(mbti)로 html을 생성하는 함수
function opresult(res) {
// 입력된 mbti를 바탕으로 저장된 변수를 불러옴
let mbtiimgdir = "./img/" + res + ".png";
let title = title_dic[res];
let detail = de_dic[res];
var rand = Math.random(); // 확률변수 생성
var member1 = [];
var m1de = text_l[0];
var member2 = [];
var m2de = text_l[0];
// 입력된 mbti와 관련된 팀원을 불러옴
// 같은 mbti 팀원
if (res == "ISFJ" || res == "INTP" || res == "ESTP" || res == "INTJ" || res == "INFJ") {
var m1de = text_l[1];
if (res == "ISFJ") {
var member1 = ssh;
var member2 = lmh;
} else if (res == "INTP") {
var member1 = pmh;
} else if (res == "ESTP") {
var member1 = lmh;
var member2 = ssh;
} else if (res == "INTJ") {
var member1 = sdo;
} else {
var member1 = hjb;
};
// 합이 잘맞는 팀원
} else if (res == "ESFP") {
var member1 = ssh;
} else if (res == "ENFJ" || res == "ENTJ") {
var member1 = pmh;
} else if (res == "ISTJ") {
var member1 = lmh;
} else if (res == "ENFP" || res == "ENTP") {
var member1 = sdo;
var member2 = hjb;
};
// 임의로 빈자리 메꾸기
if (member1.length == 0) {
var m1de = text_l[2];
var m2de = text_l[2];
let randIndex = Math.floor(rand * team_l.length);
var member1 = team_l[randIndex];
team_l.splice(randIndex, 1);
var member2 = team_l[randIndex];
} else if (member1.length != 0 && member2.length == 0) {
var m2de = text_l[2];
for (let i = 0; i < team_l.length; i++) {
if (JSON.stringify(team_l[i]) == JSON.stringify(member1)) {
team_l.splice(i, 1);
break;
}
}
let randIndex = Math.floor(rand * team_l.length);
var member2 = team_l[randIndex];
};
let member1imgdir = "./img/" + member1[0] + ".jpg";
let member1name = member1[1];
let member1detail = member1[2];
let member1glink = member1[3];
let member1blink = member1[4];
let member2imgdir = "./img/" + member2[0] + ".jpg";
let member2name = member2[1];
let member2detail = member2[2];
let member2glink = member2[3];
let member2blink = member2[4];
let temp_html = `..생략..`
$("#mbtiresult").empty();
$("#mbtiresult").toggle();
$("#mbtiresult").append(temp_html);
$("#mbtiresult").fadeToggle(1000);
}입력받은 변수명으로 이미지 주소, 위에 선언된 변수들로 부터 값 호출, 16가지 mbti의 경우의 수를 전부 조건문에 넣은 것만 같은 조건문들. 예전 코딩을 배울때, 다른 경우에도 사용할 수 있게 '일반화'를 중요시 해야한다고 배웠는데 일반화의 ㅇ도 찾아 볼수 없는 코드들이다. 만약 팀원들이 바뀌거나, 팀원들의 mbti가 바뀐다면 처음부터 끝까지 일일이 다 바꿔야한다.
3) 개선을 어떻게 해.
먼저 내가 담당한 부분에서 필요한 요소가 무엇이 있는 지 알아보자.
먼저 사용자가 입력한 mbti=문자열을 값으로 받아 코드 속으로 가져오고, 그에 따라 해당되는 mbti 이미지, 설명, 그에 맞는 팀원과 그에 맞는 이미지와 문구를 페이지에 출력 해야한다.
입력값 = input
이미지 = input.img
설명 = input.detail
input 값이 고정되면 한 번에 묶인다. 이 셋은 동시에 변수로 할당해도 괜찮지 않을까?
mbti.list = [[ESTP, ESTP.img, ESTP.detail], [..], .. ] 이런 식으로.
mbti에 따른 조건은 뒤로 미루고 팀원 부분을 먼저 살펴보면, 팀원도 마찬가지로 팀원이라는 값에 정보들이 묶인다. 설명문구는 같은 팀원, 잘맞는 팀원, 아무도 없어서 임의의 팀원을 출력하는 세가지 경우에 묶이니 제외한다.
그렇다면 member.list = [[이름, mbti, 이미지], [..], ..] 근데 이건 이미 했다. 역시 나야.
문제는 조건식을 어떻게 일반화 하느냐인데 일단 초기에는 mbti별로 잘맞는 관계를 입력할 필요가 있을 것 같다. 그 관계를 어떻게 표현할 것인가. 일일이 문자열로 표현해서 입력하기에는 좀 성가신데,
ex) ESTP = [ISFJ, ISTJ] ...
이렇게 표현하면 조건문의 조건에 어떻게 걸리게 할 것 이며, 그에 따른 변수를 어떻게 호출할 것인가?
그래서 생각나는게 mbti를 배열로 두고, index 값에 맞춰서 mbti 별로 0과 1로 이루어진 배열을 만드는 건 어떨까 싶다.
ex)
i) ESTP의 index 값은 0, ISFJ = 11, ISTJ = 9 라고 했을 때,
ESTP.rellist = [-1, 0 ,0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0,]
자신의 값은 -1 아무 관계 아니면 0 관계가 있으면 1을 둔다 만약 관계를 검사하고 싶다면
for (i = 0, i < ESTP.rellist.length, i++) {
if (ESTP.rellist[i] == 1) {
...
}
}
이런식으로 조금 범용적으로 사용할 수 있지 않을까? 문자열보다 저장공간도 덜 사용할 것 같고 말이다. 지금 당장을 어떻게 수정할지 가닥이 잡히지 않으니 다음에 또 수정하러 와야겠다.(2024.04.21)
