let input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n');

const [row,col]=input[0].split(' ').map(Number);

for (let i=1; i<=row; i++){
    let rows = input[i].split(' ').map(Number);
    let otherRows = input[i+row].split(' ').map(Number);

    let answer= [];
    for (let j=0; j<col; j++){
        answer.push(rows[j]+otherRows[j]);
    }
    console.log(answer.join(' '));
}

집합은 중복되지 않은 원소 구할때 적합하다

let input=require('fs').readFileSync('/dev/stdin').toString().split('\n').map(x=>Number(x));

let mySet = new Set(); //집합객체생성

for(let i=0; i<10; i++){
    mySet.add(input[i]%42);
}
console.log(mySet.size);

제한 사항 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다. 첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다. 입출력 예 s return "try hello world" "TrY HeLlO WoRlD" 입출력 예 설명 "try hello world"는 세 단어 "try", "hello", "world"로 구성되어 있습니다. 각 단어의 짝수번째 문자를 대문자로, 홀수번째 문자를 소문자로 바꾸면 "TrY", "HeLlO", "WoRlD"입니다. 따라서 "TrY HeLlO WoRlD" 를 리턴합니다.

✏️문제풀이

function solution(s) {
    let word = s.split(' ');

    let answer=word.map(a=>{
        word=a.split('');
        return word.map((w,idx)=>{
            if(idx%2){
                return w.toLowerCase();
            }else{
                return w.toUpperCase();
            }
        }).join('');
    }).join(' ');

    return answer;
}

• 또로그는 소소한 일상들, 기억하고 기록하고 싶은 것들을 공유하고, 이웃들과 소통할 수 있는 블로그입니다.☕︎︎‎𓂃 𓈒𓏸

⏰ 개발 기간

﹣ 2023.01.03~2023.02.06 (기획+구현)

🌎 배포

• (프론트) Netlify를 이용하여 배포하였습니다. 또로그 링크입니닷 ጾጽ ⁀➷♥ https://ttolog.netlify.app/

⚒️ 기술 스택

[Front-end] - Typescript, React, JavaScript, Router, Sass, Figma(디자인) [Back-end] - Node.js, Express, Mysql, Typescript [Communication] - Trello, Discord

🙋🏻‍♀️ 내가 담당한 부분

메인페이지

1. 잔디 기능
2. 날씨 기능
3. 전체 글 리스트 (페이지네이션)
4. 이웃 새글 리스트
5. 주제 드롭다운 카테고리

팔로우

6. 팔로우, 팔로잉 기능

메인페이지

swiper를 이용하여 잔디와 날씨기능을 캐러셀로 구현하였고, 로그인 하지 않았을 시에는 날씨부분만 보여지도록 구현하였습니다.

(1) 잔디 기능

메인페이지의 잔디는 현재 년도의 1월 1일부터 12월 31일까지를 보여주고, 해당 날짜에 블로그 포스팅을 했을 때 잔디에 색이 들어가도록 하였습니다.

  const now = new Date(); //현재 날짜
  const year = now.getFullYear(); //현재 년도
  const start = new Date(year + '-01-01'); //시작일은 현재 년도의 1월 1일
  const timeDiff = now.getTime() - start.getTime(); 
  const day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1); ////1월1일부터 오늘날짜까지의 경과일계산

const [postingData, setPostingData] = useState<postDataInterface[]>([]);
////유저의 데이터에 1월1일과 12월 31일 데이터가 있는지 확인  
const dayCheck1 = postingData.some(
    (data) => data.date === year + '-01-01' && year + '-12-31'
  ); 
  const dayCheck2 = postingData.some((data) => data.date === year + '-01-01');
  const dayCheck3 = postingData.some((data) => data.date === year + '-12-31');

  const firstDate = {
    date: '2023-01-01',
    count: 0,
    level: 0,
  };

  const lastDate = {
    date: '2023-12-31',
    count: 0,
    level: 0,
  };

//1년 범위로 보여주기 위한 데이터 추가
  if (dayCheck1 === false) {
    postingData.unshift(firstDate);
    postingData.push(lastDate);
  } else if (dayCheck2 === false) {
    postingData.unshift(firstDate);
  } else if (dayCheck3 === false) {
    postingData.push(lastDate);
  }

1년단위의 잔디를 보여주기 위해 1월1일과 12월 31일의 범위를 지정해주었고, 유저가 블로그를 시작한 경과일을 보여주었습니다.

(2)날씨 기능

새벽 아침 낮 노을 지는 오후 밤

//현재 시간에 맞추어 (새벽,아침,낮,노을,밤) 으로 저장
useEffect(() => {
    const date = new Date();
    const hour = date.getHours();
    setCurrentHour(hour);

    if (hour >= 4 && hour <= 6) {
      setTime('dawn');
    } else if (hour >= 7 && hour <= 12) {
      setTime('morning');
    } else if (hour >= 13 && hour <= 15) {
      setTime('afternoon');
    } else if (hour >= 16 && hour <= 17) {
      setTime('dusk');
    } else {
      setTime('night');
    }
    getWeather();
  }, [currentHour]);

//현재 위치정보 이용 동의 여부와 , 현재 위치의 현재 날씨 정보를 가져옴
  const getWeather = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;
        const url = `https://api.openweathermap.org/data/2.5/weather?&lat=${lat}&lon=${lon}&appid=${process.env.REACT_APP_WEATHER_API_KEY}&units=metric`;

        const fetchData = async () => {
          try {
            const weatherResponse = await fetch(url);
            const weather = await weatherResponse.json();
            setWeatherData(weather.weather[0].main);
            //현재 지역
            setLocation(weather.name);
            //현재 위치 날씨
            setWeatherId(weather.weather[0].id);
            //현재 온도
            const temp = Math.floor(weather.main.temp) + '°C';
            setTemperature(temp);
            //위치정보 동의
            setAgree(true);
          } catch (error) {
            console.error('error');
          }
        };
        fetchData();
      });
    } else {
      setAgree(false);
    }
  };

//현재날씨 한글로 변역
  useEffect(() => {
    const translateData = async () => {
      try {
        const weatherTranslateResponse = await fetch('./data/weather.json');
        const weatherTranslate = await weatherTranslateResponse.json();
        setTranslateData(weatherTranslate.data);
      } catch (error) {
        console.error('error');
      }
    };
    translateData();
  }, []);

{translateData.map((data) => {
              const { id, content } = data;
              if (id === weatherId) {
                return (
                  <span key={id} className={css.currentWeather}>
                    {content}
                  </span>
                );
              }
            })}

☀️ 날씨 api는 openWeatherApi를 사용하였습니다.

날씨기능은 현재 날씨 api와 3시간 간격의 날씨 api 두가지는 가져와 fetch 해주었습니다. 현재 시간에 맞추어 배경색상을 변경해주었고, 아이콘 또한 낮과 밤 2가지 버전으로 넣어주어 확인하기 편하도록 구현하였습니다. 현재 날씨를 한글로 보여주고 싶어 번역파일을 목데이터로 만들어 번역해주었습니다.

(2)-1 날씨 배경 애니메이션

눈과 비가 내리는 모습을 위해 조건을 true로 하고 영상을 찍어보았습니다. 이 애니메이션들은 현재 날씨에 맞추어 화면에 나타납니다.

//비내리는 애니메이션 코드
const Rainy = () => {
  const RainDrop = ({ style }: any) => {
    return (
      <p className={css.rainDrop} style={style}>
        💧
      </p>
    );
  };

  const makeRainDrop = () => {
    let animationDelay = '0s';
    let fontSize = '5px';
    const arr = Array.from({ length: 50 }, (v, i) => i);

    return arr.map((el, i) => {
      animationDelay = `${-Math.random() * 10}s`; //랜덤 delay
      fontSize = `${Math.floor(Math.random() * 20)}px`; //랜덤 물방울 크기

      const style = {
        animationDelay,
        fontSize,
      };
      return <RainDrop key={i} style={style} />;
    });
  };

  return <div className={css.rainContainer}>{makeRainDrop()}</div>;
};

(3)전체 글 리스트 (페이지네이션)

//타입지정
interface AllPostInterface {
  id: string;
  title: string;
  content: string;
  thumbnailImgUrl: string;
  createdAt: string;
  user: {
    id: number;
    nickname: string;
    profileImgUrl: string;
  };
}
//주제 드롭다운 인터페이스
export interface TopicDataInterface {
  setTopicIdData: Dispatch<SetStateAction<number>>;
  setPagination: Dispatch<SetStateAction<number>>;
}

  //전체글 데이터
 //주제 아이디
  const [topicIdData, setTopicIdData] = useState(0);
  //페이지네이션
  const [pagination, setPagination] = useState(1);
  const [allPostData, setAllPostData] = useState<AllPostInterface[]>([]);
  const [maxCountPage, setMaxCountPage] = useState<number>(1);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          `${process.env.REACT_APP_API_URL}/posts?${
            topicIdData !== 0 ? `topicId=${topicIdData}&` : ''
          }countPerPage=8&pageNumber=${pagination}`,
          {
            headers: requestHeaders,
          }
        );
        const json = await response.json();
        setMaxCountPage(json.maxPage);
        setAllPostData(json.data);
      } catch (error) {
        console.error('error');
      }
    };
    fetchData();
  }, [pagination, topicIdData]);


  const prevPage = () => {
    setPagination(pagination - 1);
  };

  const nextPage = () => {
    setPagination(pagination + 1);
  };

//첫 페이지 일 경우 버튼 안보이도록 
  {pagination === 1 ? null : (
      <FaChevronLeft className={css.chevron} onClick={prevPage} />
  )}

 //최대 페이지 수 일 경우 버튼 안보이도록
  {pagination === maxCountPage ? null : (
       <FaChevronRight className={css.chevron} onClick={nextPage} />
  )}

주제가 선택되지 않을 시 모든 주제의 전체글을 보여주고, 주제 선택 시 주제에 해당하는 글들만을 보여줍니다. 화살표 버튼 클릭 시 이전과 다음페이지로 이동을 합니다!

(4)이웃 새글 리스트

이웃이 없을 시

이웃이 있으면 이웃의 글을 보여주고, 주제별로 확인이 가능합니다.

// 팔로잉 여부 확인
  const [newPostData, setNewPostData] = useState<NewPostInterface[]>([]);

useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          `${process.env.REACT_APP_API_URL}/following?myFollowing=true`,
          {
            headers: requestHeaders,
          }
        );
        const json = await response.json();
        if (json.data.length === 0) {
          setBuddyData(false);
        } else {
          setBuddyData(true);
        }
      } catch (error) {
        console.error('error');
      }
    };
    fetchData();
  }, []);

  useEffect(() => {
    const fetchData = async () => {
      const isSelected = topicIdData !== 0;
      try {
        const response = await fetch(
          `${process.env.REACT_APP_API_URL}/posts?myFollowing=true${
            isSelected ? `&topicId=${topicIdData}` : ''
          }`,
          {
            headers: requestHeaders,
          }
        );
        const json = await response.json();
        if (json.data.length === 0) {
          setBuddyPostData(false);
        } else {
          setNewPostData(json.data);
          setBuddyPostData(true);
        }
      } catch (error) {
        console.error('error');
      }
    };
    fetchData();
  }, [topicIdData]);

로그인한 유저가 팔로잉한 유저가 있는지 확인 하였고, 주제를 선택했는지 안했는지에 여부에 따라 fetch를 하였습니다.

(5)주제 드롭다운 카테고리

const DropDown = ({ setTopicIdData, setPagination }: TopicDataInterface) => {
  const token = localStorage.getItem('token');

  const requestHeaders: HeadersInit = new Headers();
  requestHeaders.set('Content-Type', 'application/json');
  if (token) {
    requestHeaders.set('Authorization', token);
  }

  //드롭타운 클릭여부
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [topic, setTopic] = useState<string>('주제');
  const onToggle = () => setIsOpen(!isOpen);
  const onOptionClicked = (value: string, index: number) => () => {
    setIsOpen(false);
    setTopic(value);
    setTopicIdData(index);
    setPagination(1);
  };
  const [topicData, setTopicData] = useState<TopicInterface[]>([]);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`${process.env.REACT_APP_API_URL}/topics`);
        const json = await response.json();
        let topicList = json.data as TopicInterface[];
        topicList.push({ content: '전체', id: 0 });
        setTopicData(json.data);
      } catch (error) {
        console.error('error');
      }
    };
    fetchData();
  }, []);


  {topicData.map((topic) => {
                const { id, content } = topic;
                return (
                  <li
                    key={id}
                    className={css.topicItem}
                    onClick={onOptionClicked(content, id)}
                  >
                    {content}
                  </li>
                );
              })}

주제 데이터를 fetch를 통해 가져오고 해당 주제를 클릭 하였을 때, value값을 저장해주었습니다.

팔로우

(6) 팔로우, 팔로잉 기능

팔로워 클릭 시 팔로워 리스트가 보이고, 팔로잉 클릭 시 팔로잉 리스트가 보입니다. 인원이 많을 시 scroll을 이용하였고, 팔로잉에서 언팔로우 클릭 시 리스트에서 사라지며, 팔로워에서 내가 팔로우 했는지 안했는지 여부를 확인할 수 있고 언팔로우 시 팔로워버튼이 뜨도록 하였습니다. 다른사람의 팔로우에서 내 계정은 버튼이 안보이도록 하였습니다. 유저의 정보를 클릭 시 해당 유저의 블로그로 이동할 수 있습니다.

//팔로워와 팔로잉 페이지 띄우는 조건
 const onFollowingBtn = () => {
    if (selectFollowingBtn === false) {
      setSelectFollowingBtn(true);
      setSelectFollowerBtn(false);
    } else if (selectFollowingBtn === true) {
      setSelectFollowingBtn(true);
    }
  };

  const onFollowerBtn = () => {
    if (selectFollowerBtn === false) {
      setSelectFollowerBtn(true);
      setSelectFollowingBtn(false);
    } else if (selectFollowerBtn === true) {
      setSelectFollowerBtn(true);
    }
  };


  //팔로우, 언팔로우 버튼
  const follow = (value: string, index: number) => () => {
    fetch(`${process.env.REACT_APP_API_URL}/follow`, {
      method: 'POST',
      headers: requestHeaders,
      body: JSON.stringify({
        targetUsersId: index,
      }),
    })
      .then((res) => res.json())
      .then((result) => {
        if (result.message === 'FOLLOW_SUCCESSFULLY') {
          fetch(`${process.env.REACT_APP_API_URL}/follower/user/${params.id}`, {
            headers: requestHeaders,
          })
            .then((res) => res.json())
            .then((res) => setFollowerData(res.data));
        }
      });
  }; // 팔로우 버튼 클릭하고 다시 데이터 fetch하기

  const unFollow = (value: string, index: number) => () => {
    fetch(`${process.env.REACT_APP_API_URL}/follow/${index}`, {
      method: 'DELETE',
      headers: requestHeaders,
    })
      .then((res) => res.json())
      .then((result) => {
        if (result.message === 'UNFOLLOW_SUCCESSFULLY') {
          fetch(`${process.env.REACT_APP_API_URL}/follower/user/${params.id}`, {
            headers: requestHeaders,
          })
            .then((res) => res.json())
            .then((res) => setFollowerData(res.data));
        }
      });
  }; //언팔로우 버튼 클릭 후 다시 데이터 fetch!

👏 프로젝트 마치는 소감

﹣기획부터 한 프로젝트여서 디자인 부분 또한 많이 신경을 써서 만들었다(날씨 아이콘, 배경, 전체 레이아웃, 팔로우 레이아웃, 로고 등등).그리고 처음으로 타입스크립트를 공부하며 프로젝트를 해보았는데 아직 익숙치 않아 그런지 조금 더 공부를 해야겠다는 생각이 들었다. 부트캠프 수료 후 만든 첫 프로젝트였는데 함께 프로젝트를 해왔던 팀원들과 작업해서 회의뿐만 아닌 소통 모두 수월하고 재미있게 진행했던 것 같다. 중간에 설 연휴로 인해 1주일 조금 안되는 시간 동안은 작업을 할 수 없었어서 기획부터 프로젝트 완성까지 3주정도 소요 된 것 같다. 3주동안 많이 성장하고, 또 많이 즐거웠던 시간들이었다.! 마지막으로 은또 팀원 모두 원하는 곳에 취뽀 성공하길..! ｡ ♡ ˙˚ ʚ ᕱ⑅ᕱ ɞ˚˙ ♡ ｡

• 패스트파이브의 기획문서를 기반으로 프로젝트를 진행하였습니다.

⏰ 개발 기간

﹣ 2022.12.12~2022.12.22 (11일)

🙌🏻 협업방식 - (트렐로)

트렐로를 이용해서 진행상황을 공유하였고, 디스코드를 이용하여 오전에 회의 하였습니다!

⚒️ 기술 스택

[프론트] - React, Javascript, Router, Sass [백엔드] - Javascript, Express(Node.js), Mysql, dbmate(DB scheme 버전관리), jsonwebtoken(토큰 발행), bcryptjs(비밀번호 암호화),Axios

🙋🏻‍♀️ 내가 담당한 부분

1. 회원가입
2. 로그인, 로그아웃
3. 대표/멤버 요청
4. 게시글 리스트페이지 (전체보기 페이지, 카테고리페이지)

먼저 페이지는 모두 반응형으로 구현하였습니다. 회원가입과 로그인, 대표/멤버요청 페이지는 새롭게 모달을 구현할 수 있는 portal을 알게되어 공부하였고, 이를 이용해 구현하였습니다.

또한 미디어 쿼리로 넓이가 줄어 들 시 배경 이미지 사라지도록 하였습니다!

게시글 리스트 페이지는 grid를 minmax를 사용해 반응형으로 만들었습니다.

(1)회원가입

  //이메일 중복확인
  const [duplicateEmail, setDuplicateEmail] = useState(true);
  const duplicateCheck = e => {
    fetch(`${process.env.REACT_APP_API_URI}/email`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: email,
      }),
    })
      .then(res => res.json())
      .then(res => {
        if (res.duplicateEmail === false) {
          alert('사용 가능한 이메일 입니다.');
          setDuplicateEmail(false);
        } else {
          alert('이미 존재하는 이메일 입니다.');
        }
      });
  };

  const emailCheck = e => {
    const emailRegex =
      /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
    if (emailRegex.test(e.target.value)) {
      setEmailError(false);
      setEmail(e.target.value);
    } else {
      setEmailError(true);
    }
  };

  const passwordCheck = e => {
    const passwordRegex =
      /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,16}$/;
    if (passwordRegex.test(e.target.value)) {
      setPasswordError(false);
      setPassword(e.target.value);
    } else {
      setPasswordError(true);
    }
  };

회원가입은 이메일 유효성 검사 및 비밀번호 유효성 검사와 모든 항목을 다 작성해야만 회원가입을 진행할 수 있도록 구현하였다. 이메일과 비밀번호는 실시간으로 인풋창 아래에서 알림이 뜨도록 만들었으며, 모든 조건을 충족했을 시 알림이 사라지도록 구현하였다. 이메일 중복확인은 버튼 클릭 시 fetch를 이용해 백엔드에서 중복되는 이메일 여부를 확인하였다. 중복이면 다시 이메일을 작성해야하고, 사용가능하면 버튼이 비활성화 되도록 구현하였다.

(2)로그인, 로그아웃

 const onLogin = () => {
    fetch(`${process.env.REACT_APP_API_URI}/login`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: email,
        password: password,
      }),
    })
      .then(res => {
        if (res.status === 200) {
          return res.json();
        } else {
          return null;
        }
      })
      .then(res => {
        if (res !== null) {
          localStorage.setItem('token', res.token);
          alert('로그인에 성공하였습니다!');
          window.location.href = '/';
        } else {
          alert('로그인에 실패하였습니다.');
        }
      });
  };

  const onLogout = () => {
    window.localStorage.setItem('token', '');
    window.location.href = '/';
    setUserName('');
  };

이메일 양식 검사를 실시간으로 하였고, 비밀번호 입력 후, fetch를 이용해 로그인 성공 시 성공하였다고 알림창이 뜨고, 아닐 시 실패하였다고 알림창이 뜨게 구현하였다. 로그아웃은 토큰 값을 없애주고, 메인화면으로 돌아가도록 하였다.

(3)대표/멤버 요청

🥕 대표요청

🥕 멤버요청

//대표요청
  useEffect(() => {
    if (companyCheck) {
      setValidation(true);
    }
  }, [companyCheck]);

  const requestCheck = e => {
    alert('회사 이름을 작성해주세요');
  };

//캘린더
 const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());

  const startDateFormat = moment(startDate, 'YYYY.MM.DD').format('YYYY-MM-DD');
  const endDateFormat = moment(endDate, 'YYYY.MM.DD').format('YYYY-MM-DD');

  useEffect(() => {
    setStartDateData(startDateFormat);
    setEndDateData(endDateFormat);
  }, [startDate, endDate]);

//멤버요청
 useEffect(() => {
    fetch(`${process.env.REACT_APP_API_URI}/company`)
      .then(res => res.json())
      .then(data => {
        setCompanyData(data);
      });
  }, []);

  const onCompanyData = e => {
    setUserCompany(e.target.value);
  };

대표요청에서는 캘린더(DatePicker)를 이용하여 이용기간을 설정할 수 있도록 하였으며 만료날짜는 시작 기한 이전은 선택할 수 없도록 만들었고, moment를 이용하여 원하는 포맷으로 변환시켜주었다. 대표는 자신의 회사를 요청하면 admin(관리자)가 승인 할 수 있다.

멤버요청에서는 등록된 회사들 중 자신의 회사를 선택할 수 있고, 선택 후 요청을 보내면 해당하는 회사의 대표가 승인할 수 있다.

(4)게시글 리스트페이지 (전체보기 페이지, 카테고리페이지)

1. 로그인 여부 확인 후 게시글 페이지 이동가능

로그인을 해야만 게시글 페이지로 이동이 가능하며, 일반 멤버는 우리회사 소개하기 버튼이 보이지 않으며, 대표나 관리자만 우리회사 소개하기 버튼이 보인다.

// 로그인 여부 확인
   const toCompanyList = () => {
    const token = localStorage.getItem('token');
    if (token === '' || token === null) {
      alert(`로그인 후 이용해주세요!`);
      navigate(`/`);
    } else {
      navigate(`/companyList`);
    }
  };

2. 게시글 전체보기 페이지

게시글 전체보기 페이지에서는 지역필터, 카테고리필터, 상세 카테고리 필터 이렇게 3가지 필터가 들어가야했고, 선택할때마다 쿼리스트링을 사용해 실시간 필터링 되도록 하였다. 그리고 카테고리 필터 변경 시 이전의 상세 카테고리 필터데이터는 리셋 시켜주었다.

useEffect(() => {
    const queryString = `${area ? `locationsId=${area}&` : ''}${
      category ? `categoriesLv1Id=${category}` : ''
    }${subCategory ? `&categoriesLv2Id=${subCategory}` : ''}`;
    setQueryString(queryString);
  }, [area, currentPage, category, subCategory, navigate, setQueryString]);

3. 게시글 카테고리 페이지

게시글 전체보기 페이지에서는 1차로 해당 카테고리를 클릭해서 들어가기 때문에 지역필터, 상세분야필터 두가지만 뜨며, 해당하는 카테고리 데이터에서 실시간 필터링 됩니다.

//카테고리 해당 데이터 가져오기
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (queryString !== '') {
      fetch(
        `${process.env.REACT_APP_API_URI}/post?categoriesLv1Id=${params.id}`,
        {
          headers: {
            'Content-Type': 'application/json',
            authorization: token,
          },
        }
      )
        .then(res => res.json())
        .then(data => {
          setAllData(data);
        });
    } else {
      fetch(`${process.env.REACT_APP_API_URI}/post?${queryString}`, {
        headers: {
          'Content-Type': 'application/json',
          authorization: token,
        },
      })
        .then(res => res.json())
        .then(data => {
          setAllData(data);
        });
    }
  }, [params.id, queryString]);

4. 페이지네이션

한페이지에 10개의 게시글을 불러오고 페이지네이션 기능으로 페이지를 넘기면 다음 10개의 게시글을 불러오도록 하였다.

//전체 게시글을 10개로 나누어 페이지 버튼 생성
const pagination = [];
  for (let i = 1; i <= Math.ceil(allData.length / 10); i++) {
    pagination.push(i);
  }

{pagination.map(page => (
                <button
                  className={
                    Number(currentPage) === page ? css.currentPage : css.page
                  }
                  key={page}
                  value={page}
                  onClick={onPages}
                >
                  {page}
                </button>
              ))}


// fetch로 현재 페이지의 10개의 데이터를 가져왔다.
fetch(  `${process.env.REACT_APP_API_URI}/post?categoriesLv1Id=${params.id}&offset=10&page=${currentPage}`,
        {
          headers: {
            'Content-Type': 'application/json',
            authorization: token,
          },
        }
      )
        .then(res => res.json())
        .then(data => {
          setCompanyListData(data);
        });              

👏 프로젝트 마치는 소감

﹣ 기업의 기획문서를 토대로 개발하는것은 처음이라 지금까지 해왔던 프로젝트보다 훨씬 어려웠던 것 같다. 먼저 기획문서에서의 각 페이지마다 주어진 요구사항들을 구현하기 위해 많은 토론을 했으며, 문서 이해를 위해 하루종일 회의했었다. 전 프로젝트에서 구현해 본적이 없는 파트를 담당해보고 싶어 새로운 파트를 담당해보았는데 구현 하니 한층 성장한 느낌이 들어 뿌듯하고 재밌었다. 기한내에 구현하고자 후반부에 가서는 다들 새벽까지 열심히 코딩했는데 같이 한 팀원들 모두 수고하셨고 감사하다고 말하고 싶다!🥺 최고의 팀워크였고, 결과물 또한 너무 마음에 들어 힘들었지만 행복하고 뿌듯했던 2주였다 ❤️

📕 두번째 프로젝트 - [밀리는 서재]

• 두번째 프로젝트 클론코딩 사이트로 '밀리의 서재' 사이트를 선정했다.

🎞️ 시연영상 https://www.youtube.com/watch?v=vOymkA7-0rU

⏰ 개발 기간

﹣ 2022.11.14~11.25

⚒️ 기술 스택

[프론트] - React, Javascript, Router, Sass [백엔드] - Javascript, Express(Node.js), Mysql, dbmate(DB scheme 버전관리), jsonwebtoken(토큰 발행), bcryptjs(비밀번호 암호화),Axios

🙋🏻‍♀️ 내가 담당한 부분

1. 도서 상세페이지 구현
2. 서적 찜 기능 구현
3. 서적 서재 담기 기능 구현
4. 댓글 기능 구현
5. 페이지 링크 복사 구현
6. 내 서재 페이지 구현

🙌🏻 협업방식 - (트렐로)

트렐로를 이용해서 진행상황을 공유하고, 디스코드를 이용하여 매일 10시 회의를 하였습니다!

(1) 도서 상세페이지 구현

      {item.map(
        ({
          id,
          title,
          cover_img,
          toc,...
        }) => (
          <div className="wrapper" key={id}>
            <div className={css.BookContainer}>
              <img src={cover_img} alt="책 이미지" />
              <div className={css.BookInfo}>
                <div className={css.BookInfoContent}>
                    ...
                  {books_authors.map((prop, idx) => {
                    return <AuthorName key={idx} {...prop} />;
                  })}
                </div>
                ...
        <Index key={toc.id} toc={toc} />
            {books_authors.map(author => {
              return <Author key={author.author_id} {...author} />;
            })}
            <Publisher key={publisher.id} publisher={publisher} />
            <Comments setBookInfoComments={setCommentArray} />
          </div>
        )
      )}

백엔드에서 해당 책의 정보가 담긴 데이터들을 가져왔다. map 함수를 돌려서 데이터를 넣어주었고, 해당하는 컴포넌트에 props를 이용해 데이터를 넘겼다. 배열데이터는 한번 더 map함수를 돌려 넘겨주었다.

(2) 서적 찜 기능 구현

  const [bookData, setBookData] = useState([]);
  const [likeCheck, setLikeCheck] = useState(false);

//찜 데이터 보내기
  const onFavorite = () => {
    fetch(`서버주소`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        authorization: localStorage.getItem('token'),
      },
      body: JSON.stringify({
        books_id: bookData[0].id,
      }),
    })
      .then(res => res.json())
      .then(res => {
        fetch(`서버주소`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            authorization: localStorage.getItem('token'),
          },
        })
          .then(res => res.json())
          .then(data => {
            setLikeCheck(data);
          });
      });
  };

  //찜 데이터 삭제
  const delFavorite = () => {
    fetch(`서버주소`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
        authorization: localStorage.getItem('token'),
      },
      body: JSON.stringify({
        books_id: bookData[0].id,
      }),
    })
      .then(res => res.json())
      .then(res => {
        fetch(`서버주소`, {
          headers: {
            'Content-Type': 'application/json',
            authorization: localStorage.getItem('token'),
          },
        })
          .then(res => res.json())
          .then(data => {
            setLikeCheck(data);
          });
      });
  };

찜부분은 fetch 를 많이해야만 했다..! 먼저 찜했을때 books_id 데이터를 보내고, 한번 더 클릭 시 삭제할 수 있도록 했다. 그리고 페이지에서 찜한 상품의 별은 노란색이 채워져 있어야해서 찜 값이 true일 시 적용 될 수 있도록 하였다. 물론 이 부분도 체크 데이터를 확인하기 위해 fetch를 사용했다.

(3) 서적 서재 담기 기능 구현

  //내 서재에 데이터 보내기
  const onMyShelf = () => {
    fetch(`서버주소`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        authorization: localStorage.getItem('token'),
      },
      body: JSON.stringify({
        books_id: bookData[0].id,
      }),
    });
  };

찜과 같이 서재 담기를 클릭 시 백으로 데이터를 전송하였다! 그 후 내서재 페이지에서 해당 책이 담긴 것을 확인 할 수 있다.

(4) 댓글 기능(추가, 삭제) 구현

----------댓글 추가

  const addComment = event => {
    fetch(`서버주소`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        authorization: localStorage.getItem('token'),
      },
      body: JSON.stringify({
        books_id: params.id,
        content: value.current.value,
      }),
    })
      .then(res => res.json())
      .then(res => {
        fetch(`서버주소`)
          .then(res => res.json())
          .then(data => {
            setComments(data.reviewInfo.reviewArray);
            setBookInfoComments(data.reviewInfo.reviewArray);
          });
      });
  };

// 댓글 데이터 가져오기
  useEffect(() => {
    fetch(`서버주소`)
      .then(res => res.json())
      .then(data => {
        setComments(data.reviewInfo.reviewArray);
        setBookInfoComments(data.reviewInfo.reviewArray);
      });
  });

댓글을 추가하면 백엔드로 데이터를 보내주고, 백에서 리뷰데이터를 가져와 보여주었다.

----------댓글 삭제

//comments.js
  const onRemove = review_id => {
    if (window.confirm('삭제 하시겠습니까?')) {
      fetch(`서버주소`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          authorization: localStorage.getItem('token'),
        },
        body: JSON.stringify({
          review_id: review_id,
        }),
      })
        .then(res => res.json())
        .then(result => {
          setComments(comments.filter(props => props.review_id !== review_id));
        });
    }
  };

//comment.js
  {visible && (
       <button className={css.moreArea}
        onClick={() => onRemove(review_id)}>
              삭제하기
       </button>
   )}

삭제하기 버튼을 클릭하면 onRemove 함수가 실행 되고, filter메소드를 이용해서 해당 review_id와 다른 review_id들로 새로운 배열을 만들었다.

(5) 페이지 링크 복사 구현

  const copyUrl = () => {
    let url = '';
    let textarea = document.createElement('textarea');
    document.body.appendChild(textarea);
    url = window.document.location.href;
    textarea.value = url;
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    alert('복사가 완료되었습니다.');
  };

textarea의 value값에 지금 브라우저의 url을 넣어주고, document.execCommand('copy');로 클립보드에 복사하고, document.body.removeChild(textarea);로 필요없는 textarea를 제거했다.

(6) 내 서재 페이지 구현

useEffect(() => {
    fetch(`서버주소`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        authorization: localStorage.getItem('token'),
      },
    })
      .then(res => res.json())
      .then(data => {
        setBookDataList(data);
      });
  }, []);

 <div className={css.bookContainer}>
    <div className={css.bookBox}>
       <div className={css.imgBox}>
          {bookDataList.map((bookData, idx) => (
            <img key={idx} src={bookData.cover_img} alt="책 이미지" />
          ))}
        </div>
       <div className={css.bookSupport}></div>
    </div>
 </div>

백엔드에서 찜 데이터, 서재담기 한 책의 데이터 가져온 후, 찜에 해당하는 책, 내 책장에 해당하는 책들의 이미지를 넣어주었다.

👏 프로젝트 마치는 소감

﹣ 두번째 프로젝트여서 그런지 한결 수월했던 것 같았다. 백엔드와의 연결, 내 파트 코드 작성, 에러 해결 등등 프로젝트 하는 기간 동안 많이 전과 비교해 성장했음을 느낄 수 있었다! 마지막으로 2주동안 함께 열심히 해준 밀리는서재 팀원들 모두 수고하셨고 감사했습니다~!🙇🏻‍♀️

🍊 첫번째 프로젝트 - [제이솝 JSOP]

• 첫번째 프로젝트 클론코딩 사이트로 이솝(Aesop)사이트를 결정했다!

⏰ 개발 기간

﹣ 2022.10.31~11.11

⚒️ 기술 스택

[프론트] - React, Javascript, Router, Sass [백엔드] - Node.js / Express / Bcrypt / jsonwebtoken(JWT) / MySQL(+ Morgan / Cors / Typeorm)

🙋🏻‍♀️ 내가 담당한 부분

1. 메인화면 UI, 로고, 파비콘, 상품 이미지 제작 🎨
2. 상품 캐러셀 기능 구현
3. 카테고리 필터링 구현
4. 상품 디테일 페이지로 연결

(1) 이미지 제작과정

먼저 사이트 디테일과 이미지 저작권(?) 문제로 이미지를 제작했다! 포토샵 이용해서 로고랑 상품이미지를 만들어봤는데 png 저장이 잘 되지 않아서 약간 애를 먹었지만! 다 만들고 나니까 뿌-듯했다!

(2) 상품 캐러셀 기능

처음 파트 분배할때부터 캐러셀 기능을 구현해보고 싶어서 내가 하고싶다고 했다! 아래 보이는 캐러셀이 내가 구현해낸 캐러셀이다 ! 두가지 버전이 있는데 첫번째는 상품 한개씩 움직이는 것이고, 두번째는 현 페이지가 모두 넘어가도록 만들었다.

carousel.js

const prevCarousel = () => { //이전으로 움직이는 캐러셀
    if (currentCarousel > 0) {
      currentCarousel = currentCarousel - 1;
    }
    let moveToCarousel = currentCarousel * -32; //캐러셀 움직이는 부분
    let moveToPage = currentCarousel * 22; //캐러셀 아래 페이지 이동부분
    carouselRef.current.style.transform = `translate(${moveToCarousel}vw)`; //현재위치에서 지정된 범위만큼 위치 이동
    pageRef.current.style.transform = `translate(${moveToPage}vw)`;
    setCarousel(currentCarousel);
  };

  const nextCarousel = () => { //다음으로 움직이는 캐러셀
    if (currentCarousel < item.length - 3) {
      currentCarousel = currentCarousel + 1;
    }
    let moveToCarousel = currentCarousel * -32; //캐러셀 움직이는 부분
    let moveToPage = currentCarousel * 22; //캐러셀 아래 페이지 이동부분
    carouselRef.current.style.transform = `translate(${moveToCarousel}vw)`; //현재위치에서 지정된 범위만큼 위치 이동
    pageRef.current.style.transform = `translate(${moveToPage}vw)`;
    setCarousel(currentCarousel);
  };

위 코드는 상품 한개 이동 캐러셀 코드로, 전체페이지 이동은 이동범위를 이미지 크기만큼 지정해주었다.

(3) 카테고리 필터링 구현

//카테고리 클릭하는 필터링
 const contentChange = e => {
    e.preventDefault();
    setContent(e.target.value);
    fetch(
      {서버주소}
    )
      .then(res => res.json())
      .then(res => {
        const filterItems = res.filter(detail => {
          return detail.category.level_2_category === e.target.value; 
        });
        setFilterItem(filterItems);
      });
  };

카테고리 버튼에 클릭 이벤트를 주었고, 상단에 클릭한 카테고리를 확인 할 수 있도록 만들었다! e.target.value에 해당하는 제품들은 filter메소드를 통해 가져와서 저장했고, 밑에서 map을 돌려서 페이지를 만들었다!

(4) 상품 디테일 페이지로 연결

 const [product, setProduct] = useState([]);
 const params = useParams();

  useEffect(() => {
    window.scrollTo(0, 0);
    fetch(`{서버주소}/${params.id}`)
      .then(res => res.json())
      .then(res => setProduct(res));
  }, []);

{product.map(props => {
        return <CategoryProductDetail key={props.id} {...props} />;
      })}

useParams()를 이용하여 서버에서 해당 상품의 id에 해당하는 정보를 가져왔다! 그리고 props이용해서 디테일 페이지 안에 데이터를 넣어주었다!

🥺 어려웠던 부분

− 위에서 카테고리 필터구현을 어떤 식으로 해야할지 감이 안잡혀서 map만 냅다 돌렸는데,, 팀원들이 도와주셔서 filter 메소드 사용해서 해결했다.. 그리고 처음 깃에서 merge를 main으로 해버려서 되돌리는데 애를 먹었다..😿 진짜 Git은 끝판왕으로 너무너무 어려웠다... 에러풀면 새로운 에러가 생기구,,눈물의 연속이었다..그리구 gitk ..=>이친구 진짜 눈으로 딱딱보여서 아주 좋았다!!신세계였달까...?

🫶 프로젝트 마치는 소감

﹣ 처음 프로젝트을 진행해봤는데 너무 재밌구, 행복했다🔥 우리팀~ (💗지온,기밍,떵아,우령쿤,상유니,기혀니💗) 모두모두 수고하셨어욤🥺 다들 도움요청도 잘 도와주셔서 너무 감사했고, 회의할때도, 회의안할때도! 분위기 너무너무 좋고 재밌어서 하는 내내 너무너무(x10000)!즐거웠다(제이솝 최고👍)❤️ 다음에는..2인분할수있도록 성장해서..돌아올거니까..! 우리 타입스크립트로 기깔나는거 한번 더 맹드러봐요오🫶

1. Top-level Await Operator

• 이전에는 비동기 함수 외부에서 await 키워드를 선언할 수 없어 오류가 발생했는데, 이제는 비동기 함수 및 클래스 외부에서 await 연산자를 선언하여 동기화 문제를 해결할 수 있다.

(async function () {
  await startServer();
})();

-------------------------------
await startServer();

2. Error Cause

• 오류의 인과관계를 기록하는데 사용하는 Error 객체 속성을 추가할 수 있게 되었다.

new Error('New error message');

-------------------------------
new Error('New error message', { cause : "승인되지 않았습니다." });
new Error('New error message', { cause : "데이터가 없습니다." });
new Error('New error message', { cause : "데이터베이스가 가득 찼습니다." });

3. Method .at() function for Indexing 📎

• .at() 키워드 추가 : at() 함수를 사용하여 양수 및 음수 인덱스를 모두 사용하여 문자열을 인덱싱할 수 있다.

• 맨 마지막 요소를 가져오고 싶을 때 length 속성을 사용해 array[array.length - 1]을 하는 대신, 짧게 array.at(-1)을 사용할 수 있다.

const array= [1,2,3,4];
array.at(2); //이전 : array[2];
array.at(0); // 1
array.at(-1); // 4

4. Object.prototype.hasOwnProperty() 📎

• Object.prototype.hasOwnProperty의 대안으로 추가, hasOwn() 추가

• Object.hasOwnProperty는 Object를 첫 번째 인수로, 확인하려는 속성을 두 번째 인수로 사용합니다.

• hasOwnProperty() 메소드는 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환한다.

const obj = Object.create(null);
obj.color = 'green';
obj.age = 2;
obj.hasOwnProperty = () => false;

console.log(Object.hasOwn(obj, 'color')); // true
console.log(Object.hasOwn(obj, 'name')); // false

// 객체와 속성이 인수로, 지정된 속성이 객체의 직접속성이면 true, 아니면 false.

5. Class field declarations

• 처음에는 생성자 내에서만 클래스 필드를 선언할 수 있었지만 이제는 4단계의 제안을 사용하여 생성자를 호출할 필요없이 클래스 자체에서 선언할 수 있다.

class Car {
  constructor() {
    this.color = 'blue';
    this.age = 2;
  }
}

const car = new Car();
console.log(car.color); // blue
console.log(car.age); // 2


// ES13 이전에는 클래스 필드를 생성자에서만 선언할 수 있었고, 클래스의 가장 바깥쪽 범위에서 선언하거나 정의할 수 없다.
--------------------------------

class Car {
  color = 'blue';
  age = 2;
}

const car = new Car();
console.log(car.color); // blue
console.log(car.age); // 2

//ES13은 이 제한을 제거한다.

6. Ergonomic Brand Checks for Private Fields 📎

• in연산자를 사용하여 개체에 특정 개인 필드가 있는지 확인할 수 있다.

class Car {
  #color;

  hasColor() {
    return #color in this;
  }
}

const car = new Car();
console.log(car.hasColor()); // true;

npm install -g @vue/cli

여기서 권한 없음 에러가 발생 시! "sudo"를 붙혀서 해결가능합니다!

sudo npm install -g @vue/cli

여기서 "vue --version"을 실행시켰을때

• >zsh: command not found: vue 라는 에러가 발생..

2. 해결방법

1. 먼저 모든 vue cli를 제거

sudo npm uninstall --global vue-cli sudo npm uninstall --global @vue/cli

1. 최신 버전의 vue cli를 설치

sudo npm install --global @vue/cli@latest

1. "vue --version" 을 통해 잘 깔린것을 확인할 수 있습니다!

~ % vue --version
@vue/cli 5.0.8

🐻 참고하였습니다 https://stackoverflow.com/questions/58590890/how-to-fix-zsh-command-not-found-vue

🌻 1. vue 파일에서 template 부분에서 문제가 있다고 알려주고 있었다

🌻2. 문제 내용! -> 대충 TypeScript Intellisense를 활성화 시켜야한다는 말..

TypeScript intellisense is disabled on template.
To enable, configure `"jsx": "preserve"` in the `"compilerOptions"`
property of tsconfig or jsconfig. To disable this prompt instead, configure `"experimentalDisableTemplateSupport": true` in `"vueCompilerOptions"`
property.volar

🌻3. jsconfig.json 에 코드를 추가해주니 문제가 해결되었다!

"jsx": "preserve"

✋ this 란?

-> 함수를 선언되었을 때가 아닌 호출되었을때 결정 -> ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입 -> ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가

1. 함수 호출

전역객체(Global Object)는 모든 객체의 유일한 최상위 객체를 의미한다

• Browser-side에서는 window객체
• Server-side(Node.js)에서는 global객체

function foo() {
  console.log("foo's this: ",  this);  // window
  function bar() {
    console.log("bar's this: ", this); // window
  }
  bar();
}
foo();


👉 기본적으로 this 는 전역객체에 바인딩 되고, 내부함수의 this 도 전역객체에 바인딩 된다.

//내부함수
var value = 1;

var obj = {
  value: 100,
  foo: function() {
    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    function bar() {
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1
    }
    bar();
  }
};

obj.foo();

----------------------------------------------------

//콜백함수
var value = 1;

var obj = {
  value: 100,
  foo: function() {
    setTimeout(function() {
      console.log("callback's this: ",  this);  // window
      console.log("callback's this.value: ",  this.value); // 1
    }, 100);
  }
};

obj.foo();

🔥 this가 전역 객체에 바인딩 되는 경우

• 전역 함수에서의 this

• 내부 함수(중첩 함수)에서의 this

• 메서드의 내부 함수에서의 this

• 콜백 함수에서의 this

• 이벤트에서의 this는 '이벤트 객체'

• 메서드에서의 this는 '메서드 객체'

2. 메소드 호출

🫧 메서드 내부에서의 this

• this에는 호출한 주제에 대한 정보가 담기는데, 어떤 함수를 메서드로서 호출할때의 호출주체는 함수명(프로퍼티명) 앞의 객체이다.
• 점 표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this가 된다.

//메소드 내부 this
var obj1 = {
  name: 'Lee',
  sayName: function() {
    console.log(this.name); //Lee
  }
}

var obj2 = {
  name: 'Kim'
}

obj2.sayName = obj1.sayName; //Kim

obj1.sayName();
obj2.sayName();

👉 함수가 객체의 프로퍼티 값일 시, 메소드로서 호출되고, this는 메소드를 소유한 객체가 된다.

----------------------------------------------------

//프로토타입 객체
function Person(name) {
  this.name = name;
}

Person.prototype.getName = function() {
  return this.name;
}

var me = new Person('Lee');
console.log(me.getName()); //Lee

Person.prototype.name = 'Kim';
console.log(Person.prototype.getName()); //Kim

👉 프로토타입 객체도 메소드를 가질 수 있고, 프로토타입 객체의 this도 해당 메소드를 호출한 객체를 바인딩한다.

3. 생성자 함수 호출

• 어떤 공통된 성질을 지니는 객체들을 생성하는데 사용하는데 함수이고, 자바스크립트에서는 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.
• 객체지향 언어에서는 생성자를 클래스, 클래스를 통해 만든 객체를 인스턴스라고 한다.

어떤 함수가 생성자 함수로서 호출된 경우 내부에서의 this는 곧 새로 만들 구체적인 객체(인스턴스) 자신이다.

// 생성자 함수
function Person(name) {
  // 생성자 함수 코드 실행 전 -------- 1
  this.name = name; // --------- 2
  // 생성된 함수 반환 -------------- 3
}

var me = new Person('Lee');
console.log(me); // Person {name: 'Lee'}

// new 연산자와 함께 생성자 함수를 호출하지 않으면 생성자 함수로 동작하지 않는다.
var you = Person('Kim');
console.log(you); // undefined

👉 new 연산자와 함께 생성자 함수를 호출하면 this 바인딩이 메소드나 함수 호출 때와는 다르게 동작한다.

1. 객체 리터럴 방식과 생성자 함수 방식의 차이

// 객체 리터럴 방식
var foo = {
  name: 'foo',
  gender: 'male'
}

console.dir(foo); //Object

// 생성자 함수 방식
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}

var me  = new Person('Lee', 'male');
console.dir(me); //Person

var you = new Person('Kim', 'female');
console.dir(you);  //Person


/* 객체 리터럴 방식과 생성자 함수 방식의 차이는 프로토타입 객체([[Prototype]])에 있다.

객체 리터럴 방식의 경우, 생성된 객체의 프로토타입 객체는 Object.prototype이다.

생성자 함수 방식의 경우, 생성된 객체의 프로토타입 객체는 Person.prototype이다.

프로토타입이 다르므로 상위 객체가 다르다
*/

가장 큰 차이점은 재사용 가능 여부입니다. 객체 리터럴 방식으로 객체를 생성하는 방법은 재사용할 수 없지만, 생성자 함수는 재사용할 수 있습니다.

2. 생성자 함수에 new 연산자를 붙이지 않고 호출할 경우

   생성자 함수는 new 연산자를 붙여서 함수를 호출하면 return문이 없어도 객체가 반환된다는 점 이외에는 일반 함수와 큰 차이점이 없다. (new 연산자를 사용해야 객체가 반환된다)

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}

var me  = Person('Lee', 'male');
console.log(me); // undefined

👉 javascript 함수에 return문이 존재하지 않을 시 함수는 undefined를 반환한다.

4. apply/call/bind 호출 📍

• this에 바인딩될 객체는 함수 호출 패턴에 의해 결정되는데, 자바스크립트 엔진의 암묵적 this 바인딩 이외에 this를 특정 객체에 명시적으로 바인딩하는 방법도 제공된다.

Function.prototype.apply, Function.prototype.call, Function.prototype.bind 메소드는 모든 함수 객체의 프로토타입 객체인 Function.prototype 객체의 메소드이다.

1. apply 메서드 call 메서드와 기능적으로 완전히 동일하며, call 메서드는 첫 번째 인자를 제외한 나머지 모든 인자들을 호출할 함수의 매개변수로 지정하는 반면, apply 메서드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다는 점에서만 차이가 있다.

Person.apply(foo, [1, 2, 3]);

Person.call(foo, 1, 2, 3);```

apply() 메소드는 this를 특정 객체에 바인딩할 뿐 본질적인 기능은 함수 호출이다.

var Person = function (name) {
  this.name = name;
};

var foo = {};

// apply 메소드는 생성자함수 Person을 호출, 이때 this에 객체 foo를 바인딩한다.
Person.apply(foo, ['name']);

console.log(foo); // { name: 'name' }

2. call 메서드 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령. call 메서드의 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 한다. 함수를 그냥 실행하면 this는 전역객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다.

function Person(name) {
  this.name = name;
}

Person.prototype.doSomething = function(callback) {
  if(typeof callback == 'function') {
    // --------- 1
    callback();
  }
};

function foo() {
  console.log(this.name); // --------- 2
}

var p = new Person('Lee');
p.doSomething(foo);  // undefined

1에서 this는 Person 객체이다.
2에서 this는 전역 객체 window를 가리킨다.
기본적으로 콜백함수 내부의 this는 window를 가리킨다

// --------- 1
callback.call(this);
콜백함수 내부의 this를 콜백함수를 호출하는 함수 내부 this와 일치시킨다.

// --------- 1
callback.bind(this)();

3. bind 메서드

function Person(name) {
  this.name = name;
}

Person.prototype.doSomething = function (callback) {
  if (typeof callback == 'function') {
    // callback.call(this);
    // this가 바인딩된 새로운 함수를 호출
    callback.bind(this)();
  }
};

function foo() {
  console.log('#', this.name);
}

var p = new Person('Lee');
p.doSomething(foo);  // 'Lee'

👉 함수에 인자로 전달한 this가 바인딩된 새로운 함수를 리턴, 
  Function.prototype.bind는 Function.prototype.apply, Function.prototype.call 메소드와 같이 함수를 실행하지 않기 때문에 명시적으로 함수를 호출할 필요가 있다.

js로 만든 파일을 react로 옮기는데 같은 클래스이름을 가진 css스타일이 같이 적용되는 문제발생..!

CSS-Module이란?

• CSS를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술

🫧 사용이유?

1. 클래스명(className)이 충돌하는 것을 방지해준다.

2. 유지보수하기 편해진다.

3. 간결한 클래스명을 이용해 컴포넌트 단위로 스타일을 적용할 때 유용하다.

react에서 모듈을 사용하지 않을 시, 부모 컴포넌트의 css가 자녀들에게 모두 적용되어 side effect 발생 확률이 높아진다!

사용방법

기존 프로젝트의 css 클래스와 이름이 중복되어도 스타일이 꼬이지 않도록 css파일의 확장자를 .module.css로 만든다. 👉 다른 파일이 같은 클래스명을 사용해도 중첩되지 않는다.

import React from "react";
import styles from "./Box.module.css";

const CSSModule = () => {
  return (
    <div className={styles.Box}>
      Box
    </div>
  );
};

export default Box;

---------------------------------------------

<button className={`${style.buttonColor} ${style.fontColor}`}>버튼</button>
//여러개의 클래스 적용 시 백틱 사용

📍 .module.css 확장자로 파일을 저장 📍 import styles from "CSS module 클래스명"

function foo() {
  x = 10;
}

console.log(x);  //10

• 자바스크립트 엔진은 암묵적으로 전역객체에 x 프로퍼티를 동적으로 생성, x 프로퍼티를 전역변수처럼 사용 가능한데 이걸 암묵적 전역 변수(implicit global)라 한다.

• 이 암묵적 전역변수는 오류를 발생시키는 원인이 될 가능성이 높아 꼭 var, let, const 키워드를 사용하여 변수를 선언한 다음에 사용해야한다 !

• 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었는데, 기존 기능을 변경하였기에 하위 호환성 문제가 생겨 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었는데, use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화 되도록 하였다.

• 잠재적인 오류를 발생시키기 어려운 개발 환경을 만들고 그 환경에서 개발을 하는 것으로 오류를 줄일 수 있다.

strict mode 특징

1. 기존에 무시되던 에러들을 Throwing 한다.
2. JS 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡음.
3. ECMAScript의 차기 버전들에서 정의될 문법을 금지한다.

ESLint와 같은 린트 도구를 사용하여도 strict mode와 유사한 효과를 얻을 수 있다. => 정적 분석(static analysis) 기능을 통해 소스 코드를 실행하기 전에 소스 코드를 스캔하여 문법적 오류만이 아니라 잠재적 오류까지 찾아내고 오류의 이유를 리포팅해주는 유용한 도구

Strict mode 적용 방법

'use strict';
// 전역의 선두에 추가하면 스크립트 전체에 적용! // 함수 몸체의 선두에 추가하면 해당 함수 및 중첩된 내부 함수에 적용 !

Strict mode 발생시키는 에러

'use strict'

x = 10;
console.log(x); // Reference Error 

선언되지 않은 변수 참조 시 Reference Error 발생

'use strict'

let x = 10;
delete x; // Syntax Error 

delete연산자로 변수,함수,매개변수 삭제 시도 시 Syntax Error 발생

'use strict'

function foo(x, x){
    return x + 10;
} //Syntax Error

매개변수 이름을 중복으로 사용 시, Syntax Error 발생

'use strict'

  function foo() {
    console.log(this); // undefined
  }
  foo();

  function Foo() {
    console.log(this); // Foo
  }
  new Foo();

strict모드에서 일반함수로 호출 시 this에는 undefined가 반영되고 이때는 오류가 발생하지 않는다. 생성자 함수가 아닌 일반 함수 내부에서는 this를 사용할 필요가 없기 때문이다.

'use strict'

var foo = {
    name: "foo"
}
with (foo) {
    console.log(name);
}

with를 위와 같이 사용할 순 있지만, with 블록 안에 name은 전역 변수의 name인지 foo의 name인지 모호합니다. 그렇기 때문에 strict 모드에서는 with를 사용하는 것이 불가능합니다.

기존 자바스크립트 문법과 다른 Strict Mode의 문법

이미지출처

• Hyper Text Transfer Protocol의 두문자어로, 인터넷에서 데이터를 주고받을 수 있는 프로토콜

REST(REpresentational State Transfer) 🔗

웹에 존재하는 모든 자원(이미지,동영상,DB 자원)에 고유한 URI를 부여해 활용하는 것으로, 자원을 정의하고 자원에 대한 주소를 지정하는 방법론을 의미. 이런 REST 형식을 따른 시스템을 RESTful 이라 부름. HTTP URI를 통해 자원을 명시하고 HTTP Method를 통해 해당 자원의 대한 CRUD Operation을 적용. 

• CRUD Operation + HTTP Method : Create(POST, 자원 생성) / Read(GET, 자원의 정보 조회) / Update(PUT, 자원의 정보 업데이트) / Delete(DELETE, 자원 삭제)

웹은 클라이언트와 서버로 구분, 클라이언트 (요청 -> 서버) & 서버(응답 -> 클라이언트) REST API {URI(주소) 통해서 요청--> 서버} & {서버 html,xml,json등으로 --> 응답}

주소는 명사로 구성, 명사만 있을 시 무슨 동작을 행하는지 알기 어렵기 때문에 REST에서는 HTTP 요청 메서드를 사용한다

HTTP 요청 메소드

1.GET ( CRUD - Read )

🐯 URI 형식으로 웹 서버측 리소스(데이터)를 요청 서버 자원 가져오고자 할 때 사용. 파라미터를 넘겨서 해당하는 본문형식을 받는다.

2.POST ( CRUD - Create )

🐻‍❄️ 내용 전송(파일 전송 가능) 클라이언트에서 서버로 전달하고자하는 정보를 서버로 보냄 서버에 자원을 새로 등록하고자 할 때 사용

3.PUT ( CRUD - Update (전체 수정) )

🐹 내용 갱신 위주(파일 전송 가능) POST처럼 정보를 서버로 제출하는 것이나 보통 갱신 위주 서버의 자원을 요청에 들어 있는 자원으로 치환할 때 사용

4.PATCH ( CRUD - Update (일부 수정) )

🐷 클라이언트가 서버의 리소스를 수정 할 때 사용

5.DELETE ( CRUD - Delete ) 🔗

🦊 웹 리소스를 제거할 때 사용 하지만, DELETE의 경우 서버에서 클라이언트의 요청을 무시 가능하기 때문에 실제로 삭제되지 않았지만, 클라이언트는 파일이 삭제 되었다고 생각할 수 있다.

-> 원격지 웹 서버에 파일을 삭제하기 위해 사용되며, 멱등성을 가지고 있습니다. 서버에게 요청 URL로 지정한 리소스를 삭제할 것을 요청하더라도 클라이언트는 삭제가 수행되는 것을 보장 못한다.

이유 : HTTP 명세에는 서버가 클라이언트에게 알리지 않고 요청을 무시하는 것을 허용하지 않기 때문입니다.   보통 대부분의 경우 멱등성을 가지고 있다면 Safe한데, DELETE는 멱등하지만 리소스를 변경하므로 Safe 하지 않다.

URI(Uniform Resource Identifier) 란? 🔗

• URI는 특정 리소스를 식별하는 통합 자원 식별자를 의미하는데, 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스

URI 는 네트워크 상 자원을 가리키는 일종의 고유 식별자(ID) URL, URN 은 URI 에 포함되는 개념이며 URL 은 자원의 위치, URN 은 자원의 이름 을 의미 

• URL (Uniformed Resource Locator)

프로토콜 포함 해당 자원의 위치, Path를 의미 일반적으로 사이트 도메인을 자주 의미함. 웹 상 뿐만 아니라 컴퓨터 네트워크상의 자원은 모두 나타낼 수 있다.

• URN (Uniformed Resource Name)

프로토콜 포함 X 해당 자원의 이름을 의미 독립적인 자원 지시자 Page 이후 부분까지 포함

!!0-> false !! null -> false !! undefined -> false

!! 48 -> true !! "hello" -> true !![1,2,3] -> true

실제로 !(not) 을 두번 사용하고, 첫번째 ! 는 객체를 반대 역 값으로, 두번째 ! 는 반전된 값을 반전시킨다.

🔗

• 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어로 불린다.

• 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다.

• 자바스크립트의 모든 객체는 [[Prototype]]이라는 숨겨진 속성(internal slot)을 갖고 있다. [[Prototype]]은 항상 null 또는, 객체이며 상속을 구현할때 사용된다.

• [[Prototype]]의 값은 Prototype(프로토타입) 객체이며 _ proto _ accessor property로 접근할 수 있다. _ proto _ 프로퍼티에 접근하면 내부적으로 Object.getPrototypeOf가 호출되어 프로토타입 객체를 반환한다.

🔗 이미지 출처 : 생활코딩

함수 객체 앞에 new키워드를 사용하면 생성자가 되고, 이걸로 생성한 객체를 인스턴스라고 한다.

"_ proto _" : 모든 객체가 가지고 있는 속성으로, 객체가 생성될 때 자신의 부모 객체인 프로토타입을 가리킨다!

"prototype" : 함수 객체만이 가지는 프로토타입으로, 함수 객체가 생성자로 사용될 때 인스턴스의 부모 역할을 하는 객체를 가리킨다!

1. [[Prototype]] vs prototype

• 모든 객체는 자신의 프로토타입 객체를 가리키는 [[Prototype]] 인터널 슬롯(internal slot) 을 갖으며 상속을 위해 사용되는데, 객체인 함수 또한 [[Prototype]] 슬록을 가지는데 일반 객체와 다르게 prototype 프로퍼티도 소유한다.

function Person(name) {
  this.name = name;
}

var foo = new Person('Lee');

console.dir(Person); // prototype 프로퍼티가 있다.
console.dir(foo);    // prototype 프로퍼티가 없다.


/* dir(object)
매개변수로 전달된 객체의 속성을 출력한다. */

🍎 [[Prototype]] 함수를 포함한 모든 객체가 가지고 있는 인터널 슬롯이다. 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우 Function.prototype를 가리킨다. 여기서 Function.prototype의 프로토타입 객체는 Object.prototype(프로토타입 체인의 종점)

console.log(Person._ proto _ === Function.prototype);

🍏 prototype 프로퍼티 함수 객체만 가지고 있는 프로퍼티이다. 함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킨다.

console.log(Person.prototype === foo._ proto _);

2. constructor 프로퍼티

• 프로토타입 객체는 constructor 프로퍼티를 가지고, constructor 프로퍼티는 객체의 입장에서 자신을 생성한 객체를 가리킨다.

function Person(name) {
  this.name = name;
}

var foo = new Person('Lee');

// Person() 생성자 함수에 의해 생성된 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(Person.prototype.constructor === Person);

// foo 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(foo.constructor === Person);

// Person() 생성자 함수를 생성한 객체는 Function() 생성자 함수이다.
console.log(Person.constructor === Function);

Person()생성자에 의해 자손인 foo객체가 생성, foo의 부모는 Person()생성자, 그래서 foo객체의 프로토 타입 객체는 Person.prototype이며, 이 Person.prototype의 constructor 프로퍼티는 Person() 생성자 함수를 가리킨다 !

3. Prototype chain 🔗

-자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다. 이것을 프로토타입 체인이라 한다.

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! my name is ' + this.name);
  };
}

var foo = new Person('Lee', 'male');

console.dir(Person);
console.dir(foo);

console.log(foo.__proto__ === Person.prototype);                // ① true
console.log(Person.prototype.__proto__ === Object.prototype);   // ② true
console.log(Person.prototype.constructor === Person);           // ③ true
console.log(Person.__proto__ === Function.prototype);           // ④ true
console.log(Function.prototype.__proto__ === Object.prototype); // ⑤ true

▶️ 레포지토리의 상태를 보여주는 명령어이다!

1. Git 저장소의 상태 확인 명령어

$ git status

2. 변경된 파일이 많을 시 유용

$ git status -s $ git status --short

파일 상태 라이프 사이클 🖇

Git이 보는 파일의 4가지 상태 🖇출처

Untracked 상태 : Git으로 버전 관리를 하지 않는 상태. 파일을 추적 관리하지 않는 상태 (파일을 한 번도 git add 해주지 않았을때의 상태)

Tracked 상태 : 파일이 Git에 의해 변동사항이 추적되고 있는 상태

• unmodified : git add로 파일이 Staging Area에 올라갔지만 파일에 변경은 없는 상태. Git은 이 파일을 추적 관리한다. (커밋을 하고 난 직후에는 working directory 안의 모든 파일들의 상태)

• modified : 추적 관리하던 파일이 수정된 상태

  Add the file : Untracked 상태의 파일이 처음으로 git add시 Staged 상태가 된다.
  Edit the file : 최신 커밋과 비교해 차이가 없는 Unmodified 상태의 파일의 내용을 수정 시 Modified 상태가 된다.
  Stage the file : Modified 상태의 파일을 git add시 Staged 상태가 된다.
  Remove the file : 파일을 삭제 시 git에서 인식 불가
  Commit : 커밋을 하면 staging area에 있던 파일들이 커밋에 반영되고, 모든 파일들은 최신 커밋과 차이가 없어져 Unmodified 상태가 된다.

• staged : Staging Area에서 file이 staged 되어 반영된 상태. (새로 생성한 파일에 내용을 쓰고 git add를 해줄 시, 한 번이라도 커밋에 포함됐었던 파일이라도 내용을 수정하고 git add를 한 경우)

• 객체 생성 이후, 더 이상 변경불가능한 상태로 만드는 디자인 패턴을 의미한다.
• 객체는 참조(Reference)를 통해 접근이 가능한 특성을 가져서 상태가 변경될 수 있다는 가능성이 있다.
• ES5에서는 방어적 복사(defencive copy) 또는 Observer패턴으로 대처
• 불변 객체로 만들게 되면 복제나 비교를 위한 작업이 단순화 되며, 성능 개선에 도움이 되지만, 객체가 변경이 가능한 데이터가 많을 경우 오히려 좋지 않아 주의해야한다.
• ES6에서는 이를 불변 데이터 패턴(immutable data pattern)을 쉽게 구현하는 새로운 기능 추가
• 자바스크립트에서 변경이 불가능하다는 의미는 메모리에 올라가 있는 데이터는 변경이 불가능하다는 것이고, 재할당은 가능하다.

2. immutable value(변경 불가능한 값) vs mutable value (변경 가능한 값)

① 원시타입 값 (값에 의한 전달) -> immutable value

📌 원시타입 (primitive data type)

• Boolean
• null
• undefined
• Number
• String
• Symbol(New in ECMAScript 6)

재할당 이외의 원시 값인 변수 값을 변경할 수 있다면 예기치않게 변수값이 변경될 수 있다는 것이고, 이는 값의 변경, 즉 상태 변경을 추적하기 어렵게 만든다. 따라서예상가능하고 신뢰할 수 있는 코드를 위해 원시 값은 불변

② 객체(참조)타입 값 (참조에 의한 전달) -> mutable value

📌 객체타입 (primitive data type)

• Object
• Array
• Function

예기치 못한 변경이 발생하지 않도록 바로 값을 담는것이 아닌, 메모리 공간 주소를 담아 한 단계 더 거쳐 실제 객체에 접근함으로써 명확하고 신뢰성이 확보된다.

변경 불가능하다는 것은 '변수'가 아닌 '값'이다.

(String)
var statement = 'I am an immutable value';
var otherStr = statement.slice(8, 17);

console.log(otherStr);   // 'immutable'
console.log(statement);  // 'I am an immutable value'
---------------------------------------------
(Array)
var arr = [];
console.log(arr.length); // 0

var v2 = arr.push(2);    // arr.push()는 메소드 실행 후 arr의 length를 반환
console.log(arr.length); // 1  
---------------------------------------------
 var user1 = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

var user2 = user1; // 변수 user2는 객체 타입이다.

user2.name = 'Kim';

console.log(user1.name); // Kim
console.log(user2.name); // Kim


✔️ 별도로 새로운 메모리에 할당 되는 것이 아니라 같은 곳을 바라보기 때문에 동시에 변경되고 의도된 코딩이 아니라면 막아야한다.

3. 불변 데이터 패턴 (immutable data pattern)

① Object.assign - 객체의 방어적 복사(defensive copy)

• 타킷 객체로 소스 객체의 프로퍼티를 복사한다.
• 소스 객체의 프로퍼티와 동일한 프로퍼티를 가진 타켓 객체의 프로퍼티들은 소스 객체의 프로퍼티로 덮어쓰기된다.
• 리턴값으로 타킷 객체를 반환한다. ES6에서 추가된 메소드이며 Internet Explorer는 지원하지 않는다.

Object.assign(target, ...sources)

const user1 = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

// 새로운 빈 객체에 user1을 copy한다.
const user2 = Object.assign({}, user1);
// user1과 user2는 참조값이 다르다.
console.log(user1 === user2); // false

user2.name = 'Kim';
console.log(user1.name); // Lee
console.log(user2.name); // Kim

// 객체 내부의 객체(Nested Object)는 Shallow copy된다.
console.log(user1.address === user2.address); // true

user1.address.city = 'Busan';
console.log(user1.address.city); // Busan
console.log(user2.address.city); // Busan

/*
user2가 할당한 객체가 수정되어도 user1의 참조 객체는 수정되지 않는다. 
user1이 참조한 객체를 수정하면 user2에 할당된 객체도 수정된다. 
*/

② Object.freeze - 불변객체화를 통한 객체 변경 방지

• 타킷 객체로 소스 객체의 프로퍼티를 복사한다.
• 소스 객체의 프로퍼티와 동일한 프로퍼티를 가진 타켓 객체의 프로퍼티들은 소스 객체의 프로퍼티로 덮어쓰기된다.
• 리턴값으로 타킷 객체를 반환한다. ES6에서 추가된 메소드이며 Internet Explorer는 지원하지 않는다.

Object.freeze(obj)

const user1 = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

// Object.assign은 완전한 deep copy를 지원하지 않는다.
const user2 = Object.assign({}, user1, {name: 'Kim'});

console.log(user1.name); // Lee
console.log(user2.name); // Kim

Object.freeze(user1); //프로퍼티 변경 불가능

user1.name = 'Kim'; // 무시된다!
user.adress.city = 'Busan'; // 변경된다!

console.log(user1); // { name: 'Lee', address: { city: 'Seoul' } }

console.log(Object.isFrozen(user1)); // true

--------------------------------------------------------- 

(객체 내부의 객체(Nested Object)는 변경가능)
const user = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

Object.freeze(user);

user.address.city = 'Busan'; // 변경된다!
console.log(user); // { name: 'Lee', address: { city: 'Busan' } }

---------------------------------------------------------

(Nested Object에 대해서는 하나하나 중첩 안의 객체들에 대해서 freeze로 처리해 주어야 한다.  Deep freeze)  

function deepFreeze(object) {
  //Object.getOwnPropertyNames() 메서드:객체에 정의된 속성명을 추출하여 배열로 반환한다
  let props = Object.getOwnPropertyNames(object); //객체 key를 props에 저장

  // 스스로를 동결하기 전에 속성을 동결
  for(let name of props){ //배열의 length만큼 반복
      let value=object[name];

    object[name]=value&&typeof value ==="object"?
        deppFreeze(value):value;
  }
  return Object.freeze(object);
}

const user = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

deepFreeze(user);

user.name = 'Kim';           // 무시된다
user.address.city = 'Busan'; // 무시된다

console.log(user); // { name: 'Lee', address: { city: 'Seoul' } }


/*
user2가 할당한 객체가 수정되어도 user1의 참조 객체는 수정되지 않는다. 
user1이 참조한 객체를 수정하면 user2에 할당된 객체도 수정된다. 
*/

Object.assign과 Object.freeze을 사용하여 불변 객체를 만드는 방법은 번거러울 뿐더러 성능상 이슈가 있어서 큰 객체에는 사용하지 않는 것이 좋다.

또 다른 대안으로 Facebook이 제공하는 Immutable.js를 사용하는 방법이 있다.

• Immutable.js는 List, Stack, Map, OrderedMap, Set, OrderedSet, Record와 같은 영구 불변 (Permit Immutable) 데이터 구조를 제공한다.

💡 반복문이란?

• 주어진 조건식(conditional expression)의 평가 결과가 참인 경우 코드 블럭을 실행한다. 그 후 조건식을 다시 검사하여 여전히 참인 경우 코드 블록을 다시 실행, 조건식이 거짓일 때까지 반복된다.

💡 반복문 사용이유

• 여러번 반복되는 작업을 일일이 하나씩 작업을 하게된다면 실수가 일어날 수도 있기 때문에 같은 계산을 여러번 하는 것을 한 번의 코딩으로 해결할 수 있도록 해주는 반복문의 사용으로 실수를 없앨 수 있다.

1. for 문

🔗 기본 구조

for (initialization; condition; afterthought)
  statement

• *initialization(초기화식) * ➡️ 루프가 시작되기 전에 한 번 평가 되는 표현식( 할당 표현식 포함 ) 또는 변수 선언으로, 일반적으로 카운터 변수를 초기화하는 데 사용된다. var이나 let키워드를 사용해서 새로운 변수를 선언할 수도 있다.
• condition(조건식) ➡️ 각 루프 반복 전에 평가하는 표현식으로, 표현식이 true 로 평가되면 statement가 실행되고, false 로 평가 되면 루프를 종료하고 구문 뒤의 첫 번째 명령문으로 이동한다.
• afterthought(증감식) ➡️ 반복문을 한 번 실행할 때마다 반복문에 사용되는 변수를 업데이트
• *statement(조건식이 참일 시 반복 실행 될 문) * ➡️ 조건이 true로 평가되는 동안 실행되는 명령문이다.

for 문의 초기화식, 조건식, 증감식은 모두 옵션으로, 반드시 사용할 필요는 없다. 어떤 식도 선언하지 않으면 무한 루프가 된다.

1️⃣ for문

for (let i = 0; i < 3; i++) {
  console.log(i);
}

//i = 0,1,2

for (let i = 2; i >= 0; i--) {
  console.log(i);
}

//i = 2,1,0

2️⃣ 중첩 for문

for (let i=2; i<=9; i++)  {
  for(let j=1; j<=9; j++)  {
    console.log(i+"x"+j+"="+i*j);
    }
}

2x1=2
2x2=4
2x3=6
2x4=8
2x5=10
2x6=12
.
. 
9x9=81

👉 i for문은 다음 반복으로 넘어가기 위해 안쪽에 있는 j for문을 마쳐야한다. j for문을 모두 마치면 i값이 1 증가하고 다음반복으로 넘어간다. console.log는 (i for문 반복수)*(j for문 반복수)만큼 출력된다.

 i=2       |         j=123456789   i=3       |         j=123456789 

2. while 문

for문은 반복 횟수가 명확할 때 주로 사용하고, while문은 반복 횟수가 불명확할 때 주로 사용한다. while (조건문) 형식으로 이 조건이 참이기만 하면 무조건 반복한다.

🔗while 예제

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

//0,1,2

🔗무한루프

while (true) {
  console.log("test");
}

무한루프는 피해야한다.

let i = 0;
while (true) {
  console.log(i);
  i++;
  if (i === 5 ) {
    console.log("THE END");
    break;
  }
}
//0,1,2,3,4,THE END

코드 블럭 탈출 조건을 if 문에 부여하고 break 문으로 코드 블럭을 탈출한다.

3. do..while 문

코드 블록을 먼저 실행하고 조건식을 평가한다. 코드블록은 무조건 한 번 이상 실행된다.

var count = 0;

// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do {
  console.log(count);
  count++;
} while (count < 3); // 0 1 2

☘️ break 문

레이블 문, 반복문, switch 문의 코드 블록을 탈출한다. 레이블 문, 반복문, switch문의 코드 블록 외에 break 문을 사용하면 문법 에러가 발생한다. break문은 반복문, switch 문에서도 사용할 수 있는데 이 경우 레이블 식별자를 지정하지 않는다. break문은 반복문을 더 이상 진행하지 않아도 될 때 불필요한 반복을 회피할 수 있어 유용하다.

이미지출처

for(let i = 1; i <= 5; i++){
  if(i == 3){
    break;
  }
  console.log(i);
}

//1,2

i가 3일때 break를 실행하면 즉시 for문을 빠져나온다.

let i = 0;
let j = 0;

while (i < 5) {
  i++;

  if (j == 3) {
    break;
  }

  j += i;
}

console.log(j);

//j = 3 (1+2)

i가 3일때 break를 실행하게 되면 즉시 while을 빠져나온다.

➕ 레이블 문

프로그램에서 다른 곳으로 참조할 수 있도록 식별자로 구문을 제공한다. 중첩된 for 문 외부로 탈출할 때 유용하지만, 그 밖의 경우에는 일반적으로 권장하지 않는다. 그 이유는 프로그램의 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기 때문이다.

🔗 구조

 label :   
       statement

label : js에서 사용가능한 식별자면 모두 가능 statement : break는 모든 레이블 구문에서 사용가능, continue는 반복레이블 구문에서만 사용가능

🔗 레이블 붙인 블록에 break 사용

foo: {
  console.log('september');
  break foo;  //foo 레이블 블록문 탈출
  console.log('Autumn');
}
console.log('october');

//september
//october

🔗 중첩 for문

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    // i + j === 3이면 외부 for 문을 탈출한다.
    if (i + j === 3) break outer;
  }
}

console.log('Done!');

//Done!

중첩된 for 문의 내부 for 문에서 break 문을 실행하면 내부 for 문을 탈출하여 외부 for 문으로 진입한다. 이때 내부 for 문이 아닌 외부 for 문을 탈출하려면 레이블 문을 사용한다.

🍀 continue 문

continue 문은 반복을 끝내지 않고 continue문 아래에 있는 실행해야 하는 문장들을 건너 뛰고, 다음 루프를 실행한다. 반복문을 완전히 종료하는 것이 아니라 for문이라면 업데이트 표현식으로, while문의 경우 다시 조건으로 넘어간다.

이미지출처

for(let i = 1; i <= 5; i++){
  if(i == 3){
    continue;
  }
  console.log(i);
}


//1,2,4,5

i가 3일때 continue실행하게 되면 console.log를 거치지 않고 넘어가고 i++인 4로 루프를 돈다.

let i = 0;
let j = 0;

while (i < 5) {
  i++;

  if (i == 3) {
    continue;
  }

  j += i;
}

console.log(j);

//j = 12 (1+2+4+5)

i가 3일때 continue실행하게 되면 j에 값을 더하지 않고 while로 돌아간다.

1. image sprite란?

• 배경이미지를 적용할때 각각의 요소에 들어가는 배경이미지를 따로따로 만들지 않고, 여러 가지의 이미지를 하나의 이미지 파일 안에 배치하여 이미지 로드 부담을 줄이는 방법이다.

이미지 출처

2. image sprite 사용법

• 방법 1: background: url( ) 값 다음에 x, y 2개 값으로 지정
• 방법 2: background-position 속성으로 지정

⭐️방법 1

.imgsprite {
  width: 314px; //원하는 이미지의 가로좌표 
  height: 314px; //원하는 이미지의 세로좌표

  background: url(    ) no-repeat;  //이미지 주소
}

결과 ⬇️

⭐️방법 2

background-position을 사용하며, 가로이동(→)과 세로이동(↓)은 -값을 줘야 한다!

.tool {
  width: 130px; //원하는 이미지 가로길이
  height: 80px; //원하는 이미지 세로길이

  background: url(  ) no-repeat; //이미지 주소
  background-position: -315px -225px; //원하는 이미지의 위치까지 가로,세로 이동
}

결과 ⬇️

*💡 이미지스프라이트 도움 사이트 💡
* 🔗 이미지 스프라이트 생성사이트 🔗 이미지 좌표확인 사이트

3. image sprite 장단점

장점

1. 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있어 웹페이지 로딩 시간을 줄여준다.
2. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있다.
3. 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다.
4. hover 시 나타나는 이미지의 경우, 이미 스프라이트 이미지를 로딩했기에 로딩 지연이 없다.

단점

1. 이미지 용량이 클 시 로딩이 매우 오래걸리는 문제점이 있다.
2. 해당 이미지의 정확한 position을 알아야한다.
3. 스프라이트 이미지 내의 이미지를 변경할 시 단일파일보다 번거롭다.

🌠

✔️ 원시형(primitive type)

• Boolean : 논리적인 요소, true와 false값이 있다.
• null : 빈 값
• undefined : 값을 할당하지 않은 변수가 가지는 값
• Number : 숫자형으로 정수와 부동 소수점, 무한대 및 NaN(숫자가 아님)값을 포함한다.
• String : 문자열
• Symbol

✔️ 참조형 (Reference Type)

Reference 타입이라고도 하며, Object 클래스 뿐만 아니라, 배열과 함수, 사용자 정의 클래스, ES6에서는 Map, Set, WeakMap, WeakSet 등도 추가

- 차이점
기본형에는 바로 값을 그대로 할당한다는 것이고 참조형에는 값이 저장된 주소값을 할당(참조)한다는 것

1. 변수

변수란 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)

• 변수를 선언할 때 var 키워드를 사용한다. 할당 연산자 =는 변수에 값을 할당하기 위해 사용

• 기본형식 var 변수명

var 변수명 = 기본값

변수명 = 기본값

var example;  //변수 (example)의 선언
example : 1;  //example에 정수값 할당

2. 값

'값' 은 프로그램에 의해 조작될 수 있는 대상

• 변수를 선언할 때 var 키워드를 사용한다. 할당 연산자 =는 변수에 값을 할당하기 위해 사용

var example = 'Hello';  //example변수에 문자열 리터럴 'Hello' 값으로 할당

• 데이터 타입(Data Type) - 프로그래밍 언어에서 사용할 수 있는 값의 종류
• 변수(Variable) - 값이 저장된 메모리 공간의 주소를 가리키는 식별자(identifier)
• 리터럴(literal) - 소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하며 값을 구성하는 최소 단위

// 숫자 리터럴
12.34
12345

// 문자열 리터럴
'Hi'
"Welcome"

// 불리언 리터럴
true
false

// null 리터럴
null

// undefined 리터럴
undefined

// 객체 리터럴
{ name: 'Tom', gender: 'male' }
{ name: 'Jerry', gender: 'female' }

// 배열 리터럴
[ 1, 2, 3 ]

// 정규표현식 리터럴
/ab+c/

// 함수 리터럴
function() {}

🫥 자바스크립트는 C나 Java외는 다르게 변수를 선언 시 데이터 타입을 미리 지정하지 않고, 변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정. 이를 동적 타이핑이라 하며 자바스크립트가 다른 프로그래밍 언어와 구별되는 특징 중 하나이다.

// 1byte 정수형: -128 ~ 127
char c;

// 4byte 정수형: -2,124,483,648 ~ 2,124,483,647
int num;

3. 연산자

// 산술 연산자
var area = 3 * 4; // 12

// 문자열 연결 연산자
var str = 'Nice to ' + 'meet you'; // "Nice to meet you"

// 할당 연산자
var animal = 'dog'; // "dog"

// 비교 연산자
var foo = 7 > 5; // true

// 논리 연산자
var bar = (5 > 3) && (2 < 4);  // true (and연산 둘다 충족해야 true)

// 타입 연산자
var type = typeof 'study'; // "string" 문자열로 이루어짐

// 인스턴스 생성 연산자
var today = new Date(); //날짜 생성

피연산자의 타입은 반드시 일치할 필요는 없다. 이때 자바스크립트는 암묵적 타입 강제 변환을 통해 연산을 수행한다.
암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

var foo = 1 + '10'; // '110'  
/*예제의 + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작, 문자열 연결 연산자의 역할은 문자열 값을 만든다*/

var bar = 1 * '10'; // 10

var ex = 3 * 'hi' //NaN
/*자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다. 이때 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 NaN을 반환한다.*/

⭐️ 주석 // 는 한줄주석 /* */ 는 여러줄 주석

4. 키워드

자바스크립트에서 특정한 목적을 위해 사용하는 단어

• var = 변수를 선언할 때 사용하는 키워드

5. 예약어

프로그램을 작성할 때, 변수명, 함수명 등 이름으로 사용할 수 없는 단어 이미 자바스크립트에서 쓰임이 정해져있는 키워드.

6. 문

• 각각의 명령을 문(statement)이라 하며 문이 실행되면 무슨 일인가가 일어나게 된다.
• 문은 리터럴, 연산자(Operator), 표현식(Expression), 키워드(Keyword) 등으로 구성되며 세미콜론( ; )으로 끝나야 한다.

// 함수
function example(x, y) {
  return x + y;
}

// if 문
if(x > 0) {
  // do something
}

// for 문
for (var i = 0; i < 10; i++) {
  // do something
}

7. 표현식

값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은 모두 표현식이며 하나의 값으로 평가(Evaluation)된다.

// 표현식
1             // 1
1 * 10        // 10
1 * 10 > 10   // false
(10 * 10 > 10) && (3 * 10 < 100)  // true

8. 함수

어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록이다. 함수는 이름과 매개변수를 갖으며 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있다.

// 함수의 정의(함수 선언문)
function square(number) {
  return number * number;
}

// 함수의 호출
square(2); // 4
square(3); // 9
square(4); // 16

함수는 호출에 의해 실행되는데 한번만 호출할 수 있는 것이 아니라 여러번 호출할 수 있다.