[0418] TIL

한별·2024년 4월 18일

TIL trouble

스파르타 내배캠 TIL

목록 보기

3/63

1. 미니프로젝트 회고

맡은 역할

와이어프레임 제작
헤더 제작
팀원 별 프로필 동적으로 구현 profile.js
추가 스타일링 작업

팀원 별 프로필 구현 방법

1. 📁 팀원 정보 저장

members 변수에 각 팀원들에 대한 정보가 객체 형태로 저장되어있다.

mbti, 강점, 태그, 블로그, 깃허브, 한마디 정보를 저장
블로그 정보는 없을 수도 있음

const members = {
  이한별: {
    mbti: 'ISTP',
    strength: '능동적이고 열정적인 성격입니다!',
    tag: '팀원',
    velog: '2hanbyeol1',
    github: '2hanbyeol1',
    word: '다같이 열심히 해봅시다 🐹',
  },
  멤버이름: {
    mbti: 'CUTE',
    strength: '저는 다 잘해요',
    tag: '리더',
    github: 'githubId',
    word: '람따봉 👍',
  },
};

2. 🛜 페이지에 보여줄 팀원의 이름 가져오기

url 끝에 paramter를 넣어 어떤 팀원의 정보를 보여줄지 알려주는 방식을 선택했다.

🤓 URL parameter는?

웹페이지 주소에서 물음표(?) 이후 문자열을 뜻한다.

key-value 형태

도메인주소?key1=value1&key2=value2와 같이 작성

예시 ) naver 검색 페이지

where, sm, fbm, ie, query 값이 들어있다

팀원 이한별씨의 소개 페이지의 경우,
https://secretcandy.github.io/sparta_Teampage/profile/profile.html?name=이한별
파라미터 name에 팀원의 이름 정보가 들어있다.

URL로부터 name의 값을 가져오는 함수가 바로 getName이다.
팀원 '이한별'의 프로필을 열었다면, getName은 '이한별'이라는 문자열을 리턴할 것이다.

이 문자열 '이한별'은 profile_name 변수에 저장된 후 팀원 정보를 불러올 때 사용된다.

function getName() {
  const urlParams = new URL(location.href).searchParams;
  const name = urlParams.get('name'); // 'name'은 key 이름
  return name;
}

const profile_name = getName();

3. 👀 팀원 정보 보여주기

STEP 2에서 가져온 '이한별'이라는 팀원 정보로 이한별의 mbti, 강점 등을 웹페이지에 보여줄 것이다.

STEP 1에서 정의한 팀원의 정보 members 객체는 다음과 같다.

여기서, 이한별의 정보를 가져오기 위해선? members['이한별']를 해야 한다.

그런데 '이한별' 문자열은 profile_name 변수에 저장해놨으니?
members[profile_name]에는 이한별에 대한 정보가 들어있을 것이다!!

setInfo 함수에 두 가지 정보를 전달한다.

이름 문자열 name
이한별에 대한 정보 info

그러면 setInfo 함수는 이 정보들과 jquery를 이용하여 웹페이지에 정보를 세팅해줄 것이다.

function setInfo(name, info) {
  $('#img').attr('src', `../img/members/${info.github}.jpg`); // 이미지의 src를 지정
  $('#tag').text(info.tag); // 태그 세팅
  $('#name').text(name); // 이름 세팅
  $('#mbti').text(info.mbti); // mbti 세팅
  $('#strength').text(info.strength); // 강점 세팅
  $('#word').text(`" ${info.word} "`); // 한마디 세팅

  // velog 세팅 : velog 정보가 있는 경우에만 보여주기
  if (info.velog) {
    $('#velog').attr('href', `https://velog.io/@${info.velog}/posts`);
  } else {
    $('#velog').css('display', 'none');
  }

  // 깃허브의 href를 지정하여 링크 연결
  $('#github').attr('href', `https://github.com/${info.github}`);
}

setInfo(profile_name, members[profile_name]);

그러면 완성입니다 :D

느낀점

오랜만의 팀 프로젝트였고 학교 사람이 아닌 새로운 사람들과 진행하니 기존에 어떻게 시작했었는지 기억이 안 나서 처음에 무엇을 해야할지 감이 안 오고 막막했던 것 같다.
각자의 다른 생각을 하나로 뭉쳐서 프로젝트를 완성하는 것은 참 어려운 일이라는 걸 다시 한 번 느꼈다 ㅎㅎㅎㅎ
생각을 모으는 방법으로 각자의 와이어 프레임 만들어오는 것이 떠올랐는데 지금 생각해보면 "예전에 배웠던 '기능 요구사항 정리하기'와 같은 것을 해야했지 않을까?"하고 떠올라 아쉬웠다.
이번 프로젝트는 간단한 주제였기 때문에 별 문제 없었지만 다른 프로젝트에서 복잡한 도메인을 다룰 때는 조심해야겠다! ㅎㅎ 😏

2. Array.from

JS 코테를 풀던 중 이차원 배열을 사용하는 문제를 처음 접했다.
[level 0] 정수를 나선형으로 배치하기 - 181832 | 프로그래머스
정수를 나선형으로 배치하기.js | 깃허브

문제 발생

JS에서 이차원 배열을 생성할 때 ~~반복문 돌리기가 귀찮아서~~ fill 함수만을 이용하여 이차원 배열을 초기화하려고 했으나 문제가 발생했다.

// n x n 배열 생성
Array(n).fill(Array(n).fill(0))

n = 5
초기화가 잘 된 것처럼 보이지만 값을 할당하면

arr[0][0] = 1

arr[0][0] 뿐만 아니라 arr[1][0], arr[2][0]...에 값이 할당된다.

문제 원인

배열은 메모리 주소로 저장되기 때문에fill 함수를 사용하여 배열로 채우면 모두 같은 메모리 주소를 참조하기 때문일 것으로 예상된다.

해결

JS에서 이차원 배열을 생성할 때, 반복문 말고도 Array.from() 를 사용한다고 한다. 이는 ES6 문법으로 생성하는 방법
이를 사용했을 때 문제가 해결됐다!! 👍

Array.from(Array(row), ()=> Array(col).fill(0));

map()과의 차이점

근데 Array.from을 알고 나니, 내가 알고 있던 함수 map과 너무 비슷한 느낌이었다.
두 함수 모두 배열의 각 원소를 돌며 함수를 수행하고 그 결과로 새로운 배열을 만든다.

Array(row).fill(0).map(() => Array(col).fill(0))

map을 이용해서도 이차원배열을 선언할 수 있었다.

이 두 함수의 차이점이 궁금해졌다. 검색해보니,
• Array.from()은 배열과 유사 배열 객체, 이터러블 객체를 배열로 변환하기 위한 메서드로 사용
• map()은 기존 배열의 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성하는데 사용
한다고 한다.

오호랏 🤓