1. 프로젝트 설명

더샤아니의 고투게더 반응형 웹페이지 리뉴얼, 시니어를 대상으로 한 여행 패키지 상품 검색 및 추천 서비스로 FrontEnd, BackEnd, UX/UI 협업 프로젝트이다.

주된 기능으로는 로그인, 회원가입, 상품검색, 상품추천, 상품예약, 찜(위시리스트), 후기 등이 있다. 나는 회원가입, 로그인, 아이디, 비밀번호 찾기, 내 정보 수정, 예약 내역 조회 및 취소, 찜(위시리스트) 목록 조회, 추가, 삭제 부분을 맡았다.

주요 기술 스택으로는 React, TypeScript, React-Query, Recoil, Styled-components를 사용했다.

깃헙 링크 노션 링크

2. 진행 과정

기획 단계

• 이번 파이널 프로젝트는 프론트엔드 4명, 백엔드 3명, UX/UI 3명 총 10명이 한팀으로 진행되었다. 어쩌다보니 미니 프로젝트에 이어 이번에도 나는 프론트엔드 팀장 역할을 맡게 되었다. 이번에는 프론트엔드, 백엔드 뿐만이 아니라 UX/UI도 함께 진행을 했는데 협업과 소통에 있어 깊은 난항이 예상되었다.

• 10명이 모두 모인 첫 회의에서는 기획을 열심히 했다. 기존에 있던 사이트를 리뉴얼하는 프로젝트였기 때문에 더 나은 사이트를 만들기 위해서 서로 여러가지 아이디어를 생각했다. 그 과정에서 기존 사이트에는 없는 국내여행을 도입하자는 의견이 주 목표로 채택되었다.

• 이번 프로젝트는 미니 프로젝트와는 다르게 UX/UI가 있었기 때문에 프론트 측에서 디자인을 담당할 필요가 없어서 편했다. 그런데 UX/UI팀의 작업 속도가 좀 느려서 개발 기간이 부족해지는 이슈가 있었다. 그리고 디자인도 기존 사이트와 너무 비슷했던 점이 조금 아쉬웠다.

• 이번 프로젝트에서는 내가 미니 프로젝트에서 사용해보지 않은 기술 및 라이브러리를 사용해보고 싶었다. 그래서 react-query(서버 데이터)와 recoil(클라이언트 데이터)을 사용해보자고 어필했다. 그리고 미니 프로젝트에서 매우 만족한 typescript를 사용하기로 했다.

개발 단계

• Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분)
• Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)
• Try (Problem에 대한 해결 방식으로 혹은 개인적으로 다음 프로젝트에서 시도해볼 점)

1. Keep

   • Typescript를 사용함으로써 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 차단할 수 있던 점이 이번에도 마음에 들었다.
   • react-query로 서버 데이터를 더 쉽게 관리할 수 있었던 것 같다.
   • react-query의 훅들을 활용하여 커스텀 훅을 만든 경험이 좋았다고 생각한다,
   • react-hook-form과 yup을 사용하여 유효성 검사를 더 쉽게 할 수 있었다.
   • PrivateRoute로 인증(로그인)을 해야만 접근 가능한 페이지를 구분해준 것이 좋았다.
   • refresh-token을 백엔드에서 Http-Only로 쿠키에 담아서 전달해주고 그것을 가지고 서로 소통하는 방식인데 이 부분이 잘 동작하지 않아서 백엔드분과 함께 문제를 해결해 나간 점이 좋았다.

2. Problem

   • react-query 관련 문제점 및 아쉬운 점

     • 처음 사용해본 탓인지 관련 코드를 엉성하게 짠 느낌이 있다
     • Suspense를 활용하여 로딩을 추가했으면 더 좋았을 것 같다.
     • 서버 데이터와 클라이언트 데이터를 분리하기 위해 react-query를 사용한건데 서버로부터 받아온 유저 정보를 Recoil 전연 변수로 설정해버렸다.

   • 인증 관련 문제점 및 아쉬운 점

     • 로그인 방식으로 JWT 방식을 사용했는데 refresh token이 로직이 제데로 작동하는지 잘 모르겠다.(로그인이 계속 유지가 되긴 하는데 흠...)
     • 소셜 로그인(Oauth)이 계획에 있었는데 하지 못한 점이 아쉽다. 인가 코드를 받는 것까지는 했는데 그 다음 서버로 인가코드를 전달 후의 로직을 백엔드 측에서 완성하지 못한 듯 하다.

   • 협업에서의 아쉬움

     • 팀장으로써 팀원들의 개발 의지를 끌어올리지 못한 점이 아쉽다.
     • UX/UI와의 소통이 원할하지 못한 점이 아쉽다.

3. Try

   • 서버 데이터와 클라이언트 데이터를 확실하게 분리하기.
   • react-query 더 자세히 공부해서 잘 적용하기.
   • 소셜 로그인(Oauth) 성공하기.
   • Next.js 공부하고 사용해보기.

3. 느낀점

• 프로젝트를 진행하면서 힘들었던 점은? 혹은 어려웠던 점은?

  • 다소 익숙하지 않았던 react-query를 사용하느라 어려웠지만 결과적으로 새로운 기술을 익힐 수 있어서 좋았다
  • 처음으로 FE, BE, UX/UI 3개의 분야가 한팀으로 협업을 해보았는데 소통이 얼마나 어려운 일인지 알게 되었다.
  • 기획 기간이 길어짐에 따른 짧아진 개발 기간 때문에 프로젝트의 완성도가 높지 않은 점이 아쉽다.
  • UX/UI와의 소통이 원할하지 못했던 점이 아쉽다.
  • 디자인이 기존 사이트와 너무 비슷하다.
    
    

• 팀에서 좋았던 점/ 아쉬웠던 점
  
  

  ❤️ 좋았던 점

  • 프론트 팀원의 대부분이 오프라인으로 참여하여 빠르고 정확한 소통이 가능했다.
  • 프론트와 백엔드간의 소통이 원활해서 좋았다.
  • 코드 리뷰를 하면서 팀원들의 코드로 배울점이 많았다.
  • 자신이 맡은 부분이 아니더라도 서로 정보 공유를 통해 전체적인 이해도를 높이고자 했던 부분이 좋았다.
  • 적절한 역할 분담과 서로 부족한 부분은 도와주고 할 수 있었던 협력 과정이 좋았다.
    
    

😓 아쉬웠던 점

- 문서화에 많이 신경 쓰지 못한점이 아쉽다.
- 프론트팀의 의견을 좀 더 강하게 어필하지 못한 점이 아쉽다.
- 코드의 유지 보수 측면에서 많이 아쉽다.<br/><br/>

• 나 스스로 잘했다고 생각한 포인트가 있는지? 아쉬움은 없는지?

  • 2번째 팀장 역할이었는데 처음보다는 잘한 것 같다.
  • 이번 프로젝트에서 react=query를 사용해본 점이 좋았다.
  • 소셜로그인을 완성하지 못한게 아쉽다.
  • 내가 맡은 부분을 넘어서 다른 팀원의 몫까지 나서서 한 점이 좋았다.

  
  
  

마치며

이번 포스트에서는 파이널 프로젝트 회고를 작성해보았다. 처음으로 FE, BE, UX/UI 3개의 분야가 한팀으로 협업을 해보았는데 소통이 얼마나 어려운 일인지 알게 되었다. 나름 협업을 잘하는 편이라고 스스로 생각했었는데 그래도 쉽지 않았다. 팀원 모두 열심히 해줘서 고마웠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. 프로젝트 설명

금융상품 중 카드를 상품으로 다루고, 추천해주는 서비스로 FrontEnd와 BackEnd 협업 프로젝트이다.

주된 기능으로는 로그인, 회원가입, 나의 카드(신청한 카드), 검색, 카드 추천, 관심상품이 있다. 나는 카드 추천, 카드 검색, 초기세팅, 헤더, 관심상품 부분을 맡았다.

주요 기술 스택으로는 React, TypeScript, Redux, Styled-components를 사용했다.

깃헙 링크 노션 링크

2. 진행 과정

기획 단계

• 이번 미니 프로젝트는 프론트엔드 4명, 백엔드 4명 총 8명이 한팀으로 진행되었다. 나는 프론트엔드 팀장 역할을 맡게 되었다.(부담감 Up!!) 아무래도 처음 팀 프로젝트를 하는거다 보니 긴장을 좀 했던 것 같다.

• 8명이 모두 모인 첫 회의에서는 기획을 열심히 했다. 결국에는 카드를 회원에게 추천하는 서비스를 만들자는 의견이 다수결로 채택되었다.

• UX/UI가 없기 때문에 디자인은 프론트 측에서 담당했다. 와이어 프레임을 만들어서 기능에 대해 상세하게 이야기를 나누었고 덕분에 개발 단계에서도 큰 차질 없이 진행된 것 같다. 그리고 최종 디자인 같은 경우 우리 팀의 예능 담당 ㅈㅅ님이 열심히 작업해주셨다.

• 사용할 기술 스택을 정하는 과정에서 의견이 갈렸었다. Typescript 사용 여부였는데 내가 팀장 권한으로 사용하자고 강력히 어필했다. 언젠가는 반드시 사용해야 할 텐데 이번에 미리 연습하자는 취지였다. Redux 또한 대부분 잘 모르는 상태였는데 같은 취지로 사용하기로 했다.

개발 단계

• Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분)
• Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)
• Try (Problem에 대한 해결 방식으로 혹은 개인적으로 다음 프로젝트에서 시도해볼 점)

1. Keep

   • Typescript를 사용함으로써 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 차단할 수 있던 점이 정말 마음에 들었다.
   • 모르는 부분이 생겼을 때는 혼자 해결할 수도 있지만 팀원들과 같이 해결 방법을 찾는 과정이 좋았다.
   • 함께 작업을 진행하면서, 같은 주제에 대해 서로 어떻게 다른 생각을 하는지 확인해보며 사고의 확장을 경험할 수 있던 점이 좋았다..

2. Problem

   • 검색부분 구현에 대한 문제점 및 아쉬운 점

     • 검색을 하면 키워드에 대한 모든 검색결과가 한꺼번에 넘어온다. 즉 서버에서 페이지 처리가 되지 않았다.
     • 프론트 쪽에서도 페이지네이션을 하지 않은 점이 아쉽다(원래는 무한 스크롤 계획...)
     • 검색 페이지에서 검색 된 상품을 클릭하여 상세 페이지로 이동 후 뒤로가기를 하여 돌아오면 다시 검색을 해서 리렌더링 되는 문제가 있다.

   • 인증 관련 문제점 및 아쉬운 점

     • 로그인 방식으로 JWT 방식을 사용했는데 refresh token을 구현하지 않은 점이 아쉽다.
     • 로그인하지 않은 상태에서 로그인을 해야만 볼 수 있는 페이지로 이동을 못하게 하는 로직이 바람직하지 못하다. (useEffect로 렌더링이 일어날때 마다 토큰이 필요한 api를 날려서 오류가 발생하면 로그인으로 이동...)

   • 협업에서의 아쉬움

     • 공통으로 활용할 수 있는 컴포넌트 혹은 함수들을 따로 빼내지 못한게 조금 아쉽다.
     • 팀장의 역할을 좀 더 잘할 수 있었지 않았을까에 대한 아쉬움이 조금 있다.

3. Try

   • 이번에 하지 못한 페이지네이션을 도전!!
   • 인증 관련 마지막 문제의 개선 방법으로 PrivateRoute로 인증(로그인)을 해야만 접근 가능한 페이지를 감싸주는 방법 해보기.(PrivateRoute 내부 로직이 중요!!)
   • 다음에는 redux 대신 다른 전역 상태 관리 라이브러리를 사용해보기.(recoil, mobx 등)
   • 다음에는 react-query 같은 서버 상태 관리(data fetching) 라이브러리를 사용해보기. (검색 부분 마지막 문제를 쉽게 해결 가능하지 않을까?)

3. 느낀점

• 프로젝트를 진행하면서 힘들었던 점은? 혹은 어려웠던 점은?

  • 다소 익숙하지 않았던 redux toolkit, typescript를 사용하느라 어려웠지만 결과적으로 새로운 기술을 익힐 수 있어서 좋았다
  • 개발이 다 끝나 보니 생각보다 프로젝트 크기가 작아서 아쉬웠다.
    
    

• 팀에서 좋았던 점/ 아쉬웠던 점
  
  

  ❤️ 좋았던 점

  • 팀원의 대부분이 오프라인으로 참여하여 빠르고 정확한 소통이 가능했다.
  • 와이어프레임을 그려보는 과정이 있어서 기능에 대해 상세하게 이야기 나눌 수 있었고 덕분에 개발 단계에서도 큰 차질 없이 진행된 것 같다.
  • 프론트와 백엔드간의 소통이 원활해서 좋았다.
  • 타입스크립트를 이번 기회에 익힐 수 있어서 좋았다.
  • 팀원들의 코드로 배울점이 많았다.
  • 자신이 맡은 부분이 아니더라도 서로 정보 공유를 통해 전체적인 이해도를 높이고자 했던 부분이 좋았다.
  • 적절한 역할 분담과 서로 부족한 부분은 도와주고 할 수 있었던 협력 과정이 좋았다.
    
    

😓 아쉬웠던 점

- 문서화에 많이 신경 쓰지 못한점이 아쉽다.
- 코드 리뷰를 제대로 하지 않고 머지를 많이 한 점이 아쉽다.
- 좀 더 많은 기능을 넣지 못한 아쉬움이 있다.
- 코드의 유지 보수 측면애서 많이 아쉽다.<br/><br/>

• 나 스스로 잘했다고 생각한 포인트가 있는지? 아쉬움은 없는지?

  • 팀장 역할을 처음 해보았는데 좋은 경험이었다.
  • 이번 프로젝트에서 redux toolkit 을 처음 사용해 보았는데 사용법을 어느 정도 잘 이해한 것 같다 .
  • 프로젝트 초기 세팅을 처음 해보았는데 좋은 경험이었다.
  • 인증 관련 부분에 대한 공부가 필요하다고 느꼈다.
  • 코드를 너무 더럽게 짠 것 같다.
  • 다음 프로젝트에서는 react-query 혹은 rtk-query를 사용해보면 더 좋을 것 같다.

  
  
  

마치며

이번 포스트에서는 미니 프로젝트 회고를 작성해보았다. 백엔드까지 같이 한팀으로 진행한 첫 협업 프로젝트였다. 부족한 점도 많았지만 개인적으로 소통이 잘되었다는 점에서 매우 만족스러운 프로젝트였다. 팀원 모두 열심히 해줘서 고마웠다. 다음에는 파이널 프로젝트 회고로 찾아오겠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. Context API란?

Context-API는 컴포넌트 트리에서 속성을 전달하지 않고 필요한 데이터를 컴포넌트에 전달하는 방법을 제공하는 API다.

기존에는 부모 컴포넌트에서 상태와 상태를 변경하는 함수를 만들고 속성으로 자식 컴포넌트에게 전달했지만 컴포넌트 트리가 복잡해지면 끝단의 컴포넌트가 필요한 데이터를 부모에서부터 끝까지 내려주는 것이 불편하다.

Context-API는 Provider를 이용해 공유하는 데이터(value)를 제공하고 데이터를 필요로 하는 컴포넌트는 useContext 훅을 이용해 데이터에 접근 가능하다. (속성을 이용한 전달을 반복하지 않아도 됨)

2. Context-API 사용 단계

1. Context 객체가 관리할 데이터(value) 타입 정의

   export type TodoListContextValueType = {
     state: {
       // 상태 타입 정의
     };
     actions: {
       // 상태 변경 함수 타입 정의
     };
   };

   데이터의 타입을 정의할 때는 상태뿐만 아니라 상태를 변경하는 함수까지 포함하며 정의한 타입은 useContext 훅을 이용해 자식 컴포넌트가 데이터에 접근할 때도 사용하므로 export 해두어야 한다.

2. React.createContext() 함수를 이용해 Context 객체를 생성

   const TodoContext = React.createContext<TodoListContextValueType | null>(
     null
   );
   // or
   const TodoContext = React.createContext<TodoListContextValueType>(
     {} as TodoListContextValueType
   );

   미리 정의한 데이터(value)의 타입 또는 null을 허용하도록 제네릭으로 지정하여 createContext 함수를 호출하고 Context 객체를 생성한다.

   null을 하용하는 이유는 Context를 생성할 때 null로 초기화하기 때문이며 null을 사용하지 않고 두 번째 처럼도 사용 가능하다.

3. 상태와 상태 변경 함수를 관리할 Provider 컴포넌트를 작성

   type Props = {
     children: JSX.Element | JSX.Element[];
   };
   
   export const TodoProvider = ({ children }: Props) => {
     // 상태와 상태 변경 함수 작성
   
     const value: TodoListContextValueType = {
       state: {
         // 상태
       },
       actions: {
         // 상태 변경 함수
       },
     };
     return (
       <TodoContext.Provider value={value}>{children}</TodoContext.Provider>
     );
   };

   상태와 상태 변경 함수를 작성하기 위해 앱에서 사용할 Provider 컴포넌트를 작성한다.

   Provider 컴포넌트에는 상태와 상태 변경 함수를 1.에서 정의한 데이터의 타입에 맞게 객체로 구성한 뒤, Context 객체의 Provider로 렌더링하도록 작성한다.

   Context 객체의 Provider에 데이터(value)를 value 속성으로 전달한다.

4. 데이터(value)를 필요로 하는 컴포넌트에서 사용하기 위해 Provider 컴포넌트로 감씨줌

   ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <TodoProvider>
       <App />
     </TodoProvider>
   );

   이렇게 해주면 과 의 하위 컴포넌트에서 useContext 훅을 이용해 데이터(value) 사용 가능하다.

   3.에서 {children}은 TodoProvider를 위 코드처럼 렌더링할 때 컴포넌트와 같은 자식 컴포넌트에 해당한다.

5. 자식 컴포넌트에서는 useContext 훅을 이용해 데이터 객체(value)를 받아서 상태와 상태 변경 함수를 이용

   const value = useContext(TodoContext);
   // or
   const { state, actions } = useContext(TodoContext);

   2.에서 null을 허용하는 첫 번째 방법으로 Context 객체를 생성헀으면 위 코드에서 첫 번째 방법을 사용한다.(두 번째는 사용불가)

   2.에서 두번 째 방법으로 Context 객체를 생성헀으면 위 코드에서 첫 번째 방법도 가능하지만 두번 째 방법처럼 객체의 구조분해할당을 이용해 바로 속성 사용 가능하다.

마치며

이번 포스트에서는 React의 Context-API 대해서 알아보았다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. useRef란?

• useRef는 변수 관리 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다.
• 바닐라 자바스크립트를 사용 할 때, 우리가 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용한다. React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요하다. 그럴 때 useRef라는 React Hook을 사용한다.

2. 변수 관리

!codesandbox[useref-byeonsu-gwanri-me6zix?fontsize=14&hidenavigation=1&theme=light] 위 코드에는 useState를 사용해 값을 저장한 stateCount, useRef를 사용해 값을 저장한 refCount, 변수를 통해 값을 저장한 varCount가 있다.

버튼을 누르면 각각의 값이 올라가고 콘솔창에 출력이 된다. 확인해보면 ref up을 아무리 눌러도 콘솔창에만 출력되고 화면에 렌더링이 되지 않는것을 확인할 수 있다.

하지만 state up 버튼을 누르면 화면이 렌더링되면서 올려놨던 refCount값도 화면에 출력되게 된다. 그 이유는 useRef로 관리하는 값은 state와는 다르게 변해도 화면이 다시 렌더링되지 않기 때문이다. 하지만 값은 기억하고 있다는 특징이 있다. 즉 다시 렌더링 되어도 초기값으로 돌아가지 않는다.

var 같은 경우 var up 버튼을 통해 변수값을 아무리 높혀도 state up 버튼을 통해 렌더링을 하면, 컴포넌트 내부에 있는 let varCount = 0; 이 계속 실행되기에 값이 초기화된다.

3. DOM요소 선택

!codesandbox[useref-dom-yoso-seontaeg-or37ob?fontsize=14&hidenavigation=1&theme=light] 위 코드에서는 input 요소를 ref 속성을 이용하여 선택해 놓았다. 그리고 focus버튼을 클릭하면 input 요소로 접근해서 focus를 하도록 했다. focus버튼을 누르면 input 창에 focus되는 것을 확인할 수 있다.

focus 버튼을 누르고 콘솔창에 useRef를 통해 선택된 DOM 요소를 확인할 수 있다.

마치며

이번 포스트에서는 React의 Hook 중 하나인 useRef 대해서 알아보았다. 다음 포스트에서는 React의 또 다른 Hook 중 하나인 useContext에 대해서 알아보자. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

여러가지 어려운 점이 있었다.

• 일단 가장 짜증 났던 점은 유튜브 api가 호출 횟수 제한이 걸려있던 점이다. 그래서 dummy data를 사용하였다.
• 타입지정에도 어려움을 겪었다. 타입 에러가 정말 많이 발생했다.
• 반응형으로 제작하는 것도 생각보다 어려웠다.
• 마지막으로 merge conflict가 좀 발생했었는데 이 때 처리하는게 좀 번거로웠다.

다음 주에는 부족한 부분을 좀 더 보완할 예정이다. 잘 마무리 되었으면 좋겠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. useEffect란?

• useEffect는 React의 Hook 중 하나로 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.
• 컴포넌트가 처음 렌더링 될 때 한 번, 특정 값이 변경될 때 마다, 컴포넌트가 제거될 때 이렇게 크게 3가지 경우로 나눌 수 있다.
• useEffect(() => {}, []) 의 형식이다. 첫 번째 인자는 특정 작업을 수행하는 콜백 함수이고 두 번째 인자는 의존성 배열이다. 이 의존성 배열에 어떤 값이 들어가는지에 따라서 useEffect가 호출되는 상황이 달라진다.

2. 최초 렌더링시에만 실행

• 버튼을 클릭하면 수가 증감하는 counter 예제이다.
• 의존성 배열에 아무 값도 넣지 않으면 컴포넌트가 최초 렌더링 될 때 딱 한번 useEffect 안의 콜백 함수가 실행된다.
• 결과를 보면 최초에 한 번 log를 찍고 그 이후에는 state값을 바꾸어도 동작하지 않는다.

3. 특정 값이 변경될 때에만 실행

• 이번에는 input을 하나 추가하고 의존성 배열에 num 변수를 넣었다. 의존성 배열에 들어가 있는 변수가 변경되면 useEffect안의 콜백 함수가 실행된다. 따라서 num이 변경되면 log가 찍힌다.
• input의 value값이 변경될 때에는 console.log가 동작하지 않지만, num의 값이 변경될 때에는 log가 찍히는 것을 볼 수 있다.
• 만약 의존성 배열 안에 value를 추가하면 num 혹은 value가 변경되면 log가 찍힐 것이다.

4. 컴포넌트가 제거될 때 실행

• App.js를 살짝 변경했다. countRenderd의 상태에 따라서 Counter 컴포넌트를 렌더 할지 말지 결정한다. 처음에는 보이지만 버튼을 클릭하면 사라질 것이다.
• Counter.js에서의 useEffect이다. 콜백 함수 안에 return으로 함수를 넣을 수 있는데 이것을 clean-up 함수라고 한다. 컴포넌트가 사라질 때 실행된다.
• 결과를 보면 처음 렌더링 될 때 log를 찍고 버튼을 눌러 컴포넌트가 사라지면 return 안의 log가 찍히는 것을 볼 수 있다.

마치며

이번 포스트에서는 React의 Hook 중 하나인 useEffect 대해서 알아보았다. 다음 포스트에서는 React의 또 다른 Hook 중 하나인 useRef에 대해서 알아보자. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. state란?

• state는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다.
• state 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 한다.

2. useState란?

• 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 이 때 사용되는 Hook이 useState이다. 위에서 말한 state를 만들거나 관리해주는 Hook이다.

3. Counter 예제

• +버튼을 클릭하면 숫자가 증가하고 -버튼을 클릭하면 감소하는 예제이다.

• Counter.js 안의 내용이고 App.js에서 사용되는 중이다. 처음에는 state를 사용하지 않고 일반 변수를 사용해 보았다. 화면에는 우측의 UI가 보여진다.

• 증가 혹은 감소 버튼을 클릭하면 변수의 값은 바뀌는 것을 콘솔을 보면 확인할 수 있다. 하지만 UI상에서 변하지 않았다. 그 이유는 숫자가 state가 아닌 일반 변수여서 그렇다. state의 경우 값이 변경되면 화면을 다시 렌더링하지만 일반 변수는 변경되어도 화면을 다시 렌더링하지 않기 때문이다.

• 이번에는 state를 사용해보았다. num은 상태관리를 할 변수, setNum은 num의 값을 변경할 때 사용된다. 그리고 useState의 괄호 안의 값(0)은 num의 초기값이다.

• 결과를 보면 화면에서 잘 변하는 것을 볼 수 있다. 한가지 이상한 것은 콘솔을 보면 num의 이전 값들이 찍히는 것이다. 그 이유는 useState가 비동기적으로 동작하기 때문이다. 그렇기 때문에 먼저 콘솔에 찍히고 그 다음에 증감을 하는 것이다.

• useState의 비동기적 작동을 볼 수 있는 코드이다. 코드를 보면 증감이 2씩 될거라고 생각했으나 1씩 되었다.

• 이번에는 아예 증감이 일어나지 않았다. 그 이유는 공식 문서에 나와있다. 다음 리렌더링 시에 useState를 통해 반환받은첫 번째 값은 항상 갱신된 최신 state가 됩니다.
• 위의 코드를 해석해 보면 num+1이 실행되고 num+0가 실행된다. 여기서 num값은 둘다 동일한 값이다. 가장 최신 state를 렌더링 한다고 했으므로 1증가와 0증가 중에 가장 최신인 증가를 하게 된 것이다.

• state의 변경시마다 렌더링을 하고 싶다면 위 코드처럼 함수형 업데이트를 사용해주면 된다.
• 함수형 업데이트 방식은 setState를 줄 때 위 코드처럼 어떠한 값을 바로 주는 것이 아니라 함수를 통해서 전달하는 방식이다. 이렇게 하면 2씩 증가한 것을 볼 수 있다.
• 정확히 말하면 1이 증가 후 렌더링, 한번 더 1 증가 후 렌더링, 이렇게 2번 렌더링 했지만 동작이 매우 빠르기에 우리 눈에 2가 증가한 것 처럼 보이는 것이다.

마치며

이번 포스트에서는 React의 Hook 중 하나인 useState 대해서 알아보았다. 다음 포스트에서는 React의 또 다른 Hook 중 하나인 useEffect에 대해서 알아보자. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. props란?

• props 는 properties 의 줄임말이다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용한다.

2. props 사용법

지난 포스트에서 상자를 만들었을 때 상자안의 내용이 동일했었다. 이를 다르게 하려면 props를 시용하면 된다.

• 먼저 Box 컴포넌트에 전달해주고 싶은 값을 위와 같이 코드를 작성하면 된다. 전달해줄 것은 name, age, id, hobby 이렇게 4가지다. 보면 각각의 Box 컴포넌트에 다른 값들을 전달하고 있다.

• Box 컴포넌트에서는 위와 같이 코드를 작성하면 된다. props(변수 이름은 아무거나 가능)라는 변수로 모든 전달 받은 값들을 가져오고 객체를 사용할 때처럼 props.???로 사용하면 된다.

• 또 다른 방법으로는 위와 같이 객체의 구조분해할당을 사용하는 방법이다. 개인적으로는 이 방법이 더 괜찮은 것 같다.

• 결과를 보면 위와 같이 박스마다 전달받은 다른 값들로 내부의 내용이 채워져 있는 것을 볼 수 있다.

마치며

이번 포스트에서는 React 컴포넌트의 props에 대해서 알아보았다. 다음 포스트에서는 리액트의 useState를 통해 동적인 값(state)을 관리하는 법에 대해서 알아보자. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. 컴포넌트란?

• 리액트로 만들어진 앱을 이루는 최소한의 단위이다.
• 컴포넌트는 재사용을 할 수있다.
• 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수이다.
• 컴포넌트 이름은 항상 대문자로 시작한다.

2. 컴포넌트를 쓰는 이유

• 재사용 및 유지보수가 편리하다는 점이 가장 큰 이유다.

• 다음과 같이 하나의 박스가 있다. 그런데 만약 여러개의 박스가 필요하다고 한다면 다음과 같이 코드를 작성할 수 있다.

• 같은 코드가 중복되는 것을 볼 수 있다. 중복되는 코드는 함수화 하듯이 이런 경우에는 컴포넌트화 하면 되다.

• Box.js 라는 파일을 만들어 중복되는 부분을 넣어준다. 그리고 App.js에서 import 후 위와 같이 사용하면 된다. 코드가 깔끔해진 것을 볼 수 있다.

마치며

이번 포스트에서는 React를 컴포넌트에 대해서 알아보았다. 지금은 아직 박스안의 내용이 동일하다. 내부의 내용을 박스마다 다르게 하고 싶으면 어떻게 해야 할까? 바로 props 기능을 사용하면 된다. 다음 포스트에서는 리액트 컴포넌트의 props에 대해서 알아보자. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. Angular

Angular는 구글에서 만든 타입스크립트 기반의 웹 어플리케이션 오픈소스 프레임워크이다. Angular는 가장 다루기 어렵고 가장 많은 것을 만들 수 있는 프레임워크이다. 프로젝트의 생성부터 테스팅, 빌드와 배포까지 모든 기능을 제공한다. Angular는 유니크한 템플릿 문법이 정해져 있기에 자유도는 떨어지는 반면 모두가 그 문법에 맞추며 또한 타입스크립트 기반이기에 유지 관리에 용이하다. 마찬가지로 컴포넌트 기반이며, 많은 기능을 제공하는 만큼 프레임워크 자체가 무겁기에 초기 로딩속도는 느리지만 페이지간 전환 속도는 빠른 편이다.

2. React

React는 Facebook에서 만든 자바스크립트 UI 라이브러리이다. 특징으로는 라이브러리이기에 유연성이 좋으며, native를 통해 웹 뿐만아니라 앱 개발로도 확장할 수 있다. 또한 Virtual DOM을 활용하여 성능을 높였으며 create-react-app 등의 커맨드라인 인터페이스(CLI)가 많아 접근성이 좋고 편리하다는 강점이 있다. 중요한 점은 금일 기준 위의 3가지 중 가장 인기가 많기 때문에 방대한 커뮤니티를 통해 정보를 얻고 활용하기 쉽다.

React는 Vue, Angular와 달리 JSX라는 Javascript에 XML을 확장한 문법을 사용한다. 그렇기 때문에 자바스크립트에서 HTML과 유사한 형태로 코드를 작성할 수 있어서 코드가 직관적이고 가독성이 좋다. 작성한 코드는 웹팩(Webpack)과 바벨(Babel)을 통해 브라우저에 맞게 코드를 변환한다. 리액트는 컴포넌트라는 개념이 등장한다. 컴포넌트는 자바스크립트 함수와 유사한, UI를 이루는 작은 단위라고 생각하면 된다. 이렇게 캡슐화된 컴포넌트는 복잡한 어플리케이션에서의 재사용성을 높여준다. 이처럼 유명하고 편리한 React지만 로딩시간이 길다는 단점이 있다.

3. Vue

Vue는 Evan You라는 개발자가 독립적으로 만든, UI를 위한 자바스크립트 프레임워크이다. 마찬가지로 Virtual DOM을 이용하였고, 컴포넌트를 사용한다. 그 외 많은 부분에서도 React와 매우 유사하다. 차이점이 있다면 더 가볍다. 각 기술의 전반적인 학습량을 기준으로 한다면 Vue가 가장 익히기 쉽다. Vue 제작자 인터뷰에서도 React와 Angular에서 쓸만한 기능들만 따서 만들었다고 한다.

Vue의 핵심은 간단한 템플릿 구문을 활용해 선언적으로 DOM에 데이터를 렌더링하는 것이다. 이게 어떻게 활용되느냐 하면 스크립트가 HTML과 데이터를 주고받을 때, 데이터가 DOM과 연결되어 있기에 하드코딩으로 직접적으로 상호작용할 필요없이 반응형으로 변경값을 업데이트할 수 있다. Vue는 기업에서 만든것이 아니기에 유지관리 측면에서 부족할 수 있다.

또한 위의 NPM trends 순위에서 볼 수 있듯이 React에 비해선 상대적으로 마이너하다. 커뮤니티가 작다는 것은 이제 막 공부를 시작하려는 분들에겐 생각보다 큰 단점이 될 수 있다.

4. 어떤 기술 스택을 익히면 좋을까?

• 기존 앱에서 보수 및 확장이 필요하거나 빠르게 크로스플랫폼 앱개발까지 필요할 때 - React
• 가벼운 서비스를 개발할 때, 개발을 잘 모르지만 빠르게 성과를 내야할 때 - Vue
• 규모가 큰 기업에서, 많은 기능을 구현해야 하고 확장성이 높은 어플리케이션을 개발할 때 - Angular

마치며

이번 포스트에서는 프론틑엔드의 대표적인 프레임워크 및 라이브러리인 Angular, React, 그리고 Vue에 대해서 가볍게 알아보았다. 상황에 맞는 기술을 알맞게 사용하면 좋을 것 같다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. Node.js

• 먼저 Node.js를 설치해야 한다. 다운로드

2. create-react-app

• VSCode를 열고 터미널에 npx create-react-app "파일 이름" 입력!!

3. npm start

• 설치가 완료되면 해당 파일로 들어간 후 터미널에 npm start 입력!! 그러면 localhost:3000에 리액트 프로젝트가 실행된 화면을 볼 수 있다.

마치며

이번 포스트에서는 React를 시작하는 법에 대해서 알아보았다. 다음 포스트에서는 리액트 컴포넌트에 대해서 알아보자. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. MPA

• MPA(Multi Page Application)는 여러 개의 페이지로 구성된 애플리케이션을 의미한다. MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고 전체 페이지를 다시 렌더링한다. 이 때 화면이 깜빡거리게 되는 것이 큰 특징이다.

• 장점

  1. SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리하다. MPA는 완성된 형태의 HTML파일을 서버로부터 전달받는다. 따라서 검색 엔진이 페이지를 크롤링하기에 적합하다.

  2. 서버에서 이미 렌더링해 가져오기 때문에 첫 로딩 매우 짧다.

• 단점

  1. 매 페이지 요청마다 새로고침이 발생하며 화면 깜빡임이 있다. 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문이다.
  2. 페이지 이동시 불필요한 템플릿도 중복해서 로딩함으로 성능 측면에서 좋지 못하다.

2. SPA

• SPA(Single Page Application)는 한 개의 페이지로 구성된 애플리케이션을 의미한다. SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드하며 그 이후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다. Angular, React, Vue 등 프론트엔드 기술들이 나오면서 크게 유행하고 있다.

• 장점

  1. 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 깜빡임이 없다. 따라서 자 연스러운 사용자 경험을 줄 수 있다.

  2. 전체가 아닌 필요한 리소스만 부분적으로 다시 렌더링 하기 때문에 성능적인 측면 에서 좋다.

  3. 컴포넌트별 개발이 용이하기 때문에 유지보수 측면에서 유리하다.

• 단점

  1. 모든 정적 리소스를 최초 한 번에 다운로드 받기 때문에 초기 구동 속도가 느리 다.
  2. SEO(Search Engine Optimization, 검색 엔진 최적화)가 어렵다.

마치며

이번 포스트에서는 SPA와 MPA에 대해서 알아보았다. 프로젝트의 성격에 맞게 SPA와 MPA 중 어떤 것을 사용할지 각자의 장단점을 고려하여 정하면 될 것 같다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. 호이스팅이란?

호이스팅이란 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기하는 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. let과 const는 호이스팅이 발생하지 않는다고 알고 있는 사람들도 있는데 그것은 사실이 아니다. let과 const 또한 var과 같이 호이스팅이 발생한다. 다만 undefined로 초기화를 하지 않는 것이다. 호이스팅을 설명할 땐 주로 변수의 선언과 초기화를 분리한 후 선언만 코드의 최상단으로 옮기는 것으로 말한다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다.

2. 호이스팅 예제

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 3; // 초기화

• 위 코드를 보면 var를 사용한 num 변수가 선언부에서 호이스팅이 된다. 따라서 선언 전에 num을 콘솔에 출력하면 undefined가 출력된다. 다만 호이스팅은 선언만 해당하기 때문에 초기화 부분은 의미가 없다.

console.log(num); // ReferenceError
num = 3; // 초기화

• 위 코드에서는 선언 없이 초기화만 존재한다. 따라서 호이스팅이 없고 ReferenceError 에러가 발생한다.

console.log(num); // ReferenceError
let num; // 선언
num = 3; // 초기화

• 위 코드를 보면 let를 사용한 num 변수가 선언부에서 호이스팅이 된다. 다만 let은 호이스팅이 되지만 초기화는 하지 않으므로 ReferenceError가 발생한다. const 또한 마찬가지다.

console.log(sum(3, 7));  // 10

function sum(a, b) {
  return a + b 
}

• 위 코드에서는 함수 호출이 함수 자체보다 앞서지만 잘 동작한다. function 키워드를 사용하여 함수를 선언하면 가능하다.

console.log(sum(3, 7));  // ReferenceError

const sum = (a, b) => {
  return a + b 
}

• 위 코드에서는 ReferenceError 가 발생한다. 그 이유는 함수를 선언할 때 function 키워드가 아니라 const를 사용했기 때문이다. 잘 알아두자.

마치며

이번 포스트에서는 자바스크립트의 호이스팅에 대해서 알아보았다. 상황에 맞게 호이스팅 현상을 이용하면 더 편하게 코드를 작성할 수 있을 것 같다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. 삽입

// set으로 삽입
let eric = new Map();
eric.set('id', 0);
eric.set('name', 'eric');
eric.set('age', 25);
console.log(simba);      // {'id' => 0 'name' => 'eric', 'age' => 25}

// 2차원 배열로 넘겨주기
let simba = new Map([
  ['id', 1],
  ['name', 'simba'],
  ['age', 10],
]);
console.log(simba);      // {'id' => 1, 'name' => 'simba', 'age' => 10}

Map 객체는 set 메소드를 사용하여 키와 값을 삽입한다. 또 다른 방법으로는 Map 객체를 생성할때 2차원 배열을 이용해서 키와 값을 삽입할 수 있다.

2. 조회

let simba = new Map([
  ['id', 1],
  ['name', 'simba'],
  ['age', 10],
]);
// get으로 조회
console.log(simba.get('name'));  // "simba"
console.log(simba.get('age'));  // 10
console.log(simba.get('weight'));  // undefined

Map 객체는 get 메소드를 사용하여 값을 조회한다. 인수로 키를 주면 그에 해당하는 값을 반환한다. 만약 키가 존재하지 않으면 undefined를 반환한다.

3. 삭제

let simba = new Map([
  ['id', 1],
  ['name', 'simba'],
  ['age', 10],
]);
// delete로 삭제
simba.delete('age');  
console.log(simba); // {'id' => 1, 'name' => 'simba'}

// clear로 맵 안의 key,value 전부 삭제
simba.clear(); 
console.log(simba);   // {}

Map 객체는 delete 메소드를 사용하여 키와 값을 삭제한다. 인수로 키를 주면 그에 해당하는 키와 값을 삭제한다. 삭제를 성공하면 true를 , 실패하면 false를 반환한다.

추가로 clear 메소드는 Map 객체 안의 있는 모든 키와 값들을 삭제한다.

4. 일반 객체와의 차이

Map 객체와 일반 객체의 가장 큰 차이점은 Map 객체의 경우 문자열 아닌 값도 키로 사용 가능하다는 점이다. 일반 객체에서는 문자열(String) 혹은 심볼(Symbol)만 키로 사용할 수 있지만 Map 객체에서는 숫자, 함수, 객체를 포함한 모든 자료형이 키로 쓰일 수 있다.

let obj = {
  1 : 'one',
  2 : 'two',
  3 : 'three'
}

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
])

console.log(obj.1) // unexpected number 에러
console.log(obj['1']) // 'one'
console.log(map.get(1)) // 'one'

5. 순회

let simba = new Map([
  ['id', 1],
  ['name', 'simba'],
  ['age', 10],
]);

console.log(simba.entries());
// MapIterator { ['id', 1],['name', 'simba'],['age', 10]}

for (const [key, value] of simba) {
  console.log(key, value);
}   /*
      'id' 1
      'name' 'simba'
      'age' 10
    */

Map 객체는 for of 문을 통해 순회가 가능하다. 순회는 Map Iterator의 형태로 이루어지며 Map Iterator 는 키-값을 쌍으로 묶은 배열이다. entries 메소드를 사용하면 Map Iterator를 볼 수 있다.

마치며

이번 포스트에서는 자바스크립트의 Map Object (맵 객체)에 대해서 알아보았다. 객체 안의 값들을 자주 사용된다고 한다. 필요한 상황에 맞게 객체와 Map 객체를 사용해야겠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. sort()

arr.sort([compareFunction])

compareFunction 은 정렬 순서를 정의하는 함수이다. 이 것을 생략하면, 배열의 요소들은 문자열로 취급되어, 유니코드 값(사전 순) 순서대로 정렬된다. 여기서 주의할 점은 원본 배열이 정렬된다는 것이다.

let arr1 = ["b", "a", "d", "c"]
let arr2 = [5, 1, 2, 10, 3]
arr1.sort()
arr2.sort()
console.log(arr1)  // ["a", "b", "c", "d"]
console.log(arr2)  // [1, 10, 2, 3, 5]

2. 오름차순, 내림차순 정렬

compareFunction을 사용하면 숫자를 오름차순 정렬 가능하다. 이 함수는 두 개의 배열 요소를 파라미터로 입력 받는다. a, b 두개의 요소를 파라미터로 입력받을 경우 반환값이 0보다 작을 경우 a가 b보다 앞에 오도록 정렬하고 0보다 클 경우 b가 a보다 앞에 오도록 정렬한다. 0을 반환하면 a와 b의 순서를 변경하지 않는다.

let arr = [5, 1, 2, 10, 3]
arr.sort((a, b) => a - b)  // 오름차순 정렬
console.log(arr)  // [1, 2, 3, 5, 10]

arr.sort((a, b) => b - a)  // 내림차순 정렬
console.log(arr)  // [10, 5, 3, 2, 1]

3. 객체 정렬

compareFunction을 사용하여 객체의 속성 중 하나의 값을 기준으로 정렬 할 수 있다.

let items = [
  { name: 'Eric', age: 15 },
  { name: 'Sam', age: 30 },
  { name: 'Harry', age: 25 },
  { name: 'James', age: 10 },
];
items.sort((a, b) => a.age - b.age)   // 나이를 기준으로 오름차순 정렬

items.sort((a, b) => {       // 이름을 기준으로 오름차순 정렬
  let nameA = a.name.toUpperCase(); // 대소문자 구분 안하기
  let nameB = b.name.toUpperCase(); // 대소문자 구분 안하기
  if (nameA < nameB) {
    return -1;
  } else if (nameA > nameB) {
    return 1;
  } else{
    return 0;
  }
})

마치며

이번 포스트에서는 자바스크립트의 배열의 요소들을 정렬시켜주는 내장함수인 sort()에 대해서 알아보았다. 배열을 정렬할 상황이 많을텐데 그 때마다 유용하게 잘 사용해야겠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. indexOf

indexOf 는 인수로 전달받은 문자열을 검색하여 첫 번째 인덱스를 반환한다. 찾지 못하면 -1를 반환한다.

const str = "Hello World World Hello"

console.log(str.indexOf("W")) // 6
console.log(str.indexOf("Hello")) // 0
console.log(str.indexOf("hi")) // -1

2. includes

includes 는 인수로 전달받은 문자열이 포함되어 있는지 확인하여 true, false 를 반환한다.

const str = "Hello World"

console.log(str.indexOf("Hello")) // true
console.log(str.indexOf("hi")) // false

3. substring

substring(begin, end) 은 begin 인덱스 위치부터 end인덱스 바로 앞 문자 까지의 부분문자열을 반환한다. end가 없으면 begin 인덱스 위치부터 마지막 문자까지의 부분문자열을 반환한다.

const str = "Hello World"

console.log(str.substring(3, 7)) // lo W 
console.log(str.substring(3)) // lo World

4. replace, replaceAll

replace(s1, s2) 는 문자열에서 s1문자열을 찾아 s2문자열로 교체한 문자열을 반환한다. s1 문자열이 여러개면 첫번째 s1만 s2로 교체한다. 반면에 replaceAll(s1, s2) 는 모든 s1 문자열을 s2로 교체한다.

const str = "Hello World Hello World"

console.log(str.replace("World", "Jaeheon")) // Hello Jaeheon Hello World
console.log(str.replaceAll("World", "Jaeheon")) // Hello Jaeheon Hello Jaeheon

5. split

split(str) 은 str을 기준으로 문자열을 분리한 후 분리된 문자열 을 원소로 갖는 배열을 반환한다.

const str1 = "hello"
const str2 = "cat/dog/horse"

console.log(str1.split("")) // ["h", "e", "l", "l", "o"] 
console.log(str2.split("/")) // ["cat", "dog", "horse"]

6. concat

concat 은 두 개의 문자열을 서로 붙여주는 함수이다.

const str1 = "Hello"
const str2 = "World"

console.log(str1.concat(str2))  // HelloWorld
console.log(str1.concat(" ", str2)) // Hello World

마치며

이번 포스트에서는 자바스크립트의 문자열 내장함수에 대해서 알아보았다. 문자열을 다룰 일이 많을텐데 그 때마다 유용하게 잘 사용해야겠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. forEach

const animals = ["cat", "dog", "tiger", "lion", "horse"]

for (let i = 0; i < animals.length; i++) {
  console.log(animals[i])
}

배열 안에 있는 모든 원소들을 출력해야 할 때 보통 for 문을 사용하여 다음과 같이 구현 할 수 있다. 하지만 forEach를 사용하면 좀 더 간단하게 만들 수 있다.

const animals = ["cat", "dog", "tiger", "lion"]

animals.forEach((animal, idx) => {
  console.log(animal, idx) // "cat" 0 "dog" 2 "tiger" 3, "lion" 4
})

forEach 내부에는, 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어준다. 이 함수의 매개변수 animal는 배열의 각각의 원소를 가르키게 된다. 이 콜백함수의 첫 번째 매개변수는 배열의 각각의 원소를 의미하고 두 번째 매개변수는 각 원소의 index(0,1,2,3)를 의미한다.

2. map

map 은 배열 안의 각 원소를 변환 할 때 사용 된다, 이 과정에서 새로운 배열이 만들어지며 원본배열은 변화가 없다.

const numbers = [1, 2, 3, 4, 5]
const double = numbers.map((n) => 2*n)

console.log(double)   //  [2, 4, 6, 8, 10]
console.log(numbers)  //  [1, 2, 3, 4, 5]

3. indexOf, includes

indexOf 는 원하는 항목이 몇번째 index인지 찾아주는 함수이다. 원하는 항목이 배열 내에 없으면 -1을 반환한다.

const animals = ["cat", "dog", "tiger", "lion"]

const indexDog = animals.indexOf('dog')   
const indexLion = animals.indexOf('lion') 
const indexLion = animals.indexOf('cow')

console.log(indexDog)   // 1
console.log(indexLion)  // 3
console.log(indexCow)   // -1

includes 는 배열이 특정 요소를 포함하고 있는지 판별한다. 포함하고 있으면 true 없으면 false를 반환한다.

const animals = ["cat", "dog", "tiger", "lion"]

console.log(animals.includes("cat"))   // true
console.log(animals.includes("cow"))   // false

4. filter

filter 함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.

const numbers = [1, 2, 3, 4, 5, 6]
const evenNum = numbers.filter((n) => n % 2 === 0)

console.log(double)   //  [2, 4, 6]

위 코드르 보면 filter 함수의 콜백함수에 n이 짝수인 경우만 통과하도록 조건을 걸었고 그 조건에 만족하는 2, 4, 6만 반환된다.

5. slice

slice 는 배열을 잘라낼 때 사용한다. slice 에는 두 개의 파라미터를 넣게 되는데 첫번째 파라미터는 어디서부터 자를지, 그리고 두번째 파라미터는 어디까지 자를지 를 의미한다. 추가로 기존의 배열은 건들이지 않는다.

const numbers = [1, 2, 3, 4, 5, 6]
const sliced = numbers.slice(0, 3) // index 0부터 시작해서 3전까지

console.log(sliced) // [1, 2, 3]
console.log(numbers) // [1, 2, 3, 4, 5, 6]

6. splice

splice 는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

const months = ['Jan', 'March', 'April', 'June']

months.splice(1, 0, 'Feb')  // index 1에 Feb 추가
console.log(months)  // ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May')  // index 4에서 요소 하나를 지우고 그 자리에 May 추가
console.log(months)  // ["Jan", "Feb", "March", "April", "May"]

마치며

이번 포스트에서는 자바스크립트의 배열 내장함수에 대해서 알아보았다. 배열을 다룰 일이 많을텐데 그 때마다 유용하게 잘 사용해야겠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Commit Message Convention은 커밋 메시지의 규칙을 정해두는 것이다. 팀 단위로 협업을 할 때 유용하게 사용되며 커밋 히스토리를 읽는것 만으로도 변경사항을 이해할 수 있도록 commit message를 남기는 것이다.

그 중에서 가장 많이 쓰이는 AngularJS 의 커밋 메세지 컨벤션에 대해서 알아보자.

1. Commit Message 기본 구조

커밋 메시지는 빈 줄로 구분된 세 부분 '제목/본문/꼬리말'로 구성된다. 이 때 커밋 메시지의 제목만 필수이며 본문과 꼬리말은 선택적 입력이다.

  type(scope): subject

  body

  footer

2. Type

• feat : 새로운 기능 추가
• fix : 버그 수정
• docs : 문서 관련
• style : 스타일 변경 (포매팅 수정, 들여쓰기 추가, …)
• refactor : 코드 리팩토링
• test : 테스트 관련 코드
• build : 빌드 관련 파일 수정
• ci : CI 설정 파일 수정
• perf : 성능 개선

3. Scope

• 커밋 변화가 일어난 곳의 법위를 특정하며 생략 가능하다.
• $location, $browser, $compile, $rootScope, ngHref, ngClick, ngView, 등이 들어갈 수 있다.

4. Subject

• 변경사항에 대한 간단한 설명을 적는다.
• 명령문, 현재시제로 작성한다.
• 첫글자를 대문자로 시작하지 않으며 문장 끝에 마침표(.)를 붙이지 않는다.

5. Body

• 의무는 아니며 현재시제로 작성하기를 권장한다.
• 변경한 이유와 변경전과의 차이점을 설명한다

6. Footer

• 선택사항이므로 의무적으로 작성할 필요는 없다.
• Issue tracker id를 작성할때 사용된다.

마치며

이번 포스트에서는 Commit Message Convention, 그 중에서도 AngularJS commit message conventions에 대해서 알아보았다. 커밋 메세지를 규칙성 없이 원하는대로 작성했었는데 이제부터는 AngularJS의 커밋 컨벤션을 적용해야겠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. Branch란?

A, B, C 3명의 개발자가 있고 이들은 같은 소스코드를 공유한다고 헤보자. 그리고 각각 a, b, c라는 다른 작업을 수행해야한다고 해보자. 이처럼 같은 소스코드에서 서로 다른 작업을 하게 되면 서로 다른 버전의 코드가 만들어 질 수 밖에 없다.

이러한 상황에서 여러 개발자들이 동시에 다양한 작업을 할 수 있게 만들어 주는 기능이이 'branch'다. 각자 독립적인 작업 영역에서 자신의 작업을 하면 된다. 이렇게 분리된 작업 영역에서 만들어진 다른 버전의 코드들은 나중에 원래 버전과 비교해서 하나의 새로운 버전으로 만들어 낼 수 있다.

결론적으로 branch란? Branch란 독립적으로 어떤 작업을 수행하기 위한 작업공간이다. 각각의 branch는 서로에게 영향을 주지 않기 때문에, 여러 작업을 동시에 진행할 수 있고 나중에 합칠 수도 있다.

2. Branch 만들기, 전환

• 그러면 branch를 만들어보자

  git branch "브랜치 이름"    // branch 생성
  git branch      // 현재 내가 있는 branch 확인
  git branch -a   // 현재 내가 있는 branch와 만들어진 모든 branch 확인

  
• branch-practice라는 branch를 만들었고 branch 목록을 보면 잘 만들어진 것을 볼 수 있다.
• 그러면 branch를 전환해보자

git checkout "브랜치 이름"  // 브랜치 이름으로 branch 전환

• branch가 main에서 branch-practice로 바뀐 것을 볼 수 있다.

3. Branch 원격저장소에 올리기

• 원격저장소에 올리기 전에 내용을 바꿔보자.

• hello.txt 파일을 만들었고 안에 HelloWorld라고 작성했다.
• 이러면 main과 버전이 달라졌다.
• 달라진 버전을 원격저장소에 올려보자. 그전에 add, commit은 까먹지 말고 해주자.

  git push origin "브랜치 이름"   // branch를 원격저장소로 push

• 해당 명령어 입력 후 원격저장소로 가보자.

• 빨간부분을 눌러보면 브랜치 목록들을 볼 수 있다. 눌러보면 branch-practice 브랜치가 생겼을 것이다.
• 눌러서 들어가면 main과는 다른, hello.txt가 있는 버전의 branch를 볼 수 있다.

4. Branch merge(병합)

• 이번에는 main과 branch-practice를 병합해보자.
• 일단 먼저 main으로 이동하자.(git checkout main)

• 보다시피 main에는 hello.txt가 없는 것을 볼 수 있다.
• main에도 아까 작성했던 hello.txt를 가져와보자.

  git merge "브랜치 이름"    // 현재 있는 branch에 브랜치 이름 branch 병합

  
• 병합 후 main에도 hello.txt가 생겼고 내용도 HelloWorld로 잘 병합 된것을 볼 수 있다.
• 병합된 main은 local저장소이므로 원격저장소에는 아직 변경사항이 적용되지 않았다. 병합된 main을 원격저장소에도 적용시키려면 main에 push를 해주면 된다.
  
  

마치며

이번 포스트에서는 독립적인 작업 공간을 만들어주는 git의 branch에 대해서 알아보았다. 다음 Git 완전정복 3탄에서는 또 다른 병합 방법인 Pull Request와 Merge Conflict(병합충돌)에 대해서 알아보자. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧