이번 프로젝트에서 이런게 좋았어요.

• 거리낌 없이 질문할 수 있는 분위기

• 기술 스택에 대해서 충분히 이야기 해보고 결정

• 배웠던 내용을 최대한 활용하고, 필요한 부분에 대해 기술 스택 추가 결정

  • TypeScrpit, React, Vite, Storybook, Vercel
  • React Query, Tailwind CSS, npm, Axios, React-Router-Dom

• 프로젝트 시작 전 그라운드 룰을 정하여 협업 환경 개선

  • 디렉토리 구조를 체계적으로 구조화함으로써, 폴더 이름과 구조를 일관되게 유지하여 프로젝트의 가독성 향상
  • 브랜치 명, 깃허브 협업 방식, 커밋 태그 이름(husky사용)

• 공통 컴포넌트를 활용하여 빠른 페이지 개발 가능

• API 타입 구축 및 Axios 기본 설정 담당자를 통한 효율적인 협업

  • 시간 절감 및 일관성 확보

• storybook을 활용하여, 컴포넌트 별 디자인 확인

• Tailwind CSS를 전역적으로도 사용하고, 재사용해 보는 경험

  • cva, tailwindmerge, clsx

일관적인 프로젝트 구조를 가지고 갈 수 있었고, 지속적으로 소통하고 코드 리뷰를 통해 코드를 확인하면서 전체적으로 프로젝트를 함께 이해하면서 진행할 수 있던 점이 좋았어요. 덕분에 프로젝트 결과물이 성공적으로 나왔다고 생각해요.

만족스러운 점도 많았지만, 부족한 점도 많이 느끼고 배울 점도 많이 느꼈던 시간이었어요.

이런 점이 부족하고 아쉬웠어요.

• 의견을 나눴던 내용에 대한 기록 부족으로 혼란스러움을 겪는 상황 발생
  • 실시간으로 협업하는 시간이 많다 보니, 디스코드를 통해 문제점을 말로 공유하고 해결책을 받는 방식으로 진행하여 해결은 빠르게 됨
  • 이전에 이야기 나누고 정했던 것에 대해서 다시 이야기가 나옴
• 시간에 쫒겨서 세세한 부분을 충분히 신경쓰지 못하고, 주요 기능이 동작하도록 마무리하는데 급급하게 진행된 부분
  • 게시글 글자 수 처리
• React Query에 대한 부족한 이해와 컴포넌트와 데이터 간의 관계를 정확히 파악하지 않은 채 코드를 작성하여, 오히려 개발 속도가 늦어지는 문제
  • 게시글 작성, 수정 페이지를 구현할 때, 주먹구구식으로 코드를 개발을 하거나, 다른 팀원의 코드를 참고하여 끼워 맞추는 식으로 코드를 작성
  • 다른 기능에 사용된 훅을 정확한 이해 없이 사용하려다 보니 문제가 발생
    • query가 아닌 suspencequery를 사용하면서 예기치 않은 문제가 발생
• 맡은 부분에 대해서 이슈를 미리 생성하지 않아 작업이 한번 겹치는 문제
• 공통 컴포넌트에서 원하는 CSS 속성 사용이 어려움
  • className을 사용해도 해결이 되지 않는 문제

앞으로 이런 방향을 가지고 노력하면 되겠다고 생각했어요.

• 문제가 발생했거나 의견이 있을 때, 곧바로 issue나 discussions를 활용하여 기록하고, 문서화하는 습관을 가지도록 노력이 필요합니다.
• 잘 모르겠는 부분에 대해서, 좀 더 적극적인 자세를 취해야 될 것 같습니다. 개발이 진척이 안된 것에 대해 소극적인 자세가 되지 말고, 더 질문하고 정보를 얻는 것에 노력이 필요합니다.
• 시간에 쫓기더라도, 내가 작성하는 코드는 모두 이해하도록 노력이 더 필요합니다.
  • 컴포넌트와 데이터 간의 관계를 이해하고 개발하기
  • 사용하는 훅에 대해서는 정확히 알고 사용하기
• 맡은 부분에 대해서 이슈 바로 생성하여 작업 상황을 모두 공유할 수 있도록 주의가 필요합니다.
• React Hook, 사용자 정의 Hook, 컴포넌트, React Query에 대한 공부
• 유연한 사고와 합리적인 타협하는 자세

성장하고 배운 점

강의를 통해서 자주 듣고 사용하지만 자세히 알아보지 않고 넘어갔던 부분들에 대해서 짚고 넘어 갈 수 있었어요. 패키지 매니저 의존성 설치, webpack, prettier, eslint 설정들에 대해서 자세히 알아볼 수 있었습니다.

이전에 프로젝트들을 진행할 때 prettier와 eslint의 세부 속성에 대해 정확히 알지 못하고, 협업에 코드 규칙이 있어야하니 프로젝트에 우선 적용시킨 후, 팀에 필요한 속성이 있으면 변경시키고 추가하는 방식으로 진행을 했었습니다. 이번 강의를 통해 세부 속성들에 대해서 하나하나 알고 학습할 수 있었어요. 다음 프로젝트를 진행할 때는 사용하는 속성들에 대해서 정확히 알고, 필요한 속성들만 사용을 하고 그 외에 내용은 제거를 해서, 내가 사용하는 코드와 속성들에 대해서 확실히 알고 넘어가는 것이 중요할 것이라는 생각이 들었습니다.

이전에 패키지 매니저를 통해서 여러 패키지들을 설치할 때, dependencies에 설치되는 목록과 devDependencies에 설치되는 목록의 차이점이 궁금해서 찾아본적이 있었는데, 이 때 어렵게 받아드려서 이 차이에 대해 기억이 남지 않았어요. 강의에서 다시 학습해 정확하게 기억에 남겼습니다.

• dependencies - 실제 서비스용 (프로그램 실행을 위해 필요해요)

• devDependencies - 개발용 (실제 프로젝트 동작에는 필요가 없어요)

  학습 중 어려웠던 점

  우선 Vue 강의량이 많아 학습에 상당히 버거움을 느꼈습니다. 이건 강의를 함께 듣고 있는 모두가 느꼈을 것이라 생각해요. 강사님께서 하나하나 세세하게 설명해주시는데, 또 그 내용이 하나도 중요하지 않은게 없어서 많은 강의량을 듣고 정리까지 하는데 많은 시간이 들었습니다. 강의를 한 번 듣고 나면 기억에 잘 안남기 때문에, 손으로 한 번이라도 강의를 들으면서 작성해봐야 제 것으로 조금이라도 가져갈 수 있다고 생각해서 손코딩도 포기할 수 없었어요.. 그래서 시간이 더 들었고 결국 강의를 모두 수강하지는 못하게 되었습니다.

  과제를 수행하는데 어려움이 클까 걱정이 되었는데, 다행히 과제를 수행하는데는 어려움이 없었습니다. 다만 학습하지 못한 부분을 활용하지 못한 것이 아쉬웠어요. 이 부분은 코드 리뷰를 통해서 보완할 수 있었습니다. 컴포넌트 구조를 나누는 것과, router를 사용해서 싱글 페이지 앱을 구현하는 부분을 팀원들의 코드를 보면서 학습할 수 있었습니다.

  보완해야할 점

  강의를 듣는데 너무 많은 시간이 들어서, 좀 더 똑똑하게 공부해야겠다라는 생각을 했어요. 강의를 듣고, 코드를 따라치고, 내용을 정리하고, 기억까지 하려다 보니 단기간에 많은 내용을 학습하기에는 제 속도가 따라가지 못했습니다. 강의 내용 정리에 대해서는 다른 분들이 학습하고 정리한 내용도 있으니 그 자료를 참고하고, 코드를 따라치는 것도 우선 강의에 어떤 내용들이 있는지 쭉 들은 후에, 중요한 내용의 강의를 다시 들으면서 진행하거나, 이후 과제를 진행할 때, 다시 찾아 들으면서 학습하는 방식도 좋을 것 같다는 생각이 들었습니다. 계속 강의가 밀리는데 좋은 학습방법이 뭐가 있을까 물어도 보고 고민도 해봤는데 이 방식을 늦게 깨달은 것이 아쉽습니다.

데브코스에 처음 참여하면서 만나게 된 팀원들이라 더 힘이 됐고 정도 많이 들었는데 아쉽기도 하고 다음 팀에는 어떤 분들이 있을지 기대되는 마음도 있었습니다.

그 동안 학습하면서 도움도 많이 주고 받고 같이 공부할 수 있어서 힘 빠지지 않고 나아갈 수 있던 것 같아요.

성장하고 배운 점

프레임워크를 사용해서 기능별로 컴포넌트를 구분해서 코드를 짜는 방식으로는 개발을 진행했었는데, 바닐라 JS로 각 컴포넌트를 모듈화해서 데이터를 주고 받으며 사용하는 것이 처음이라 흥미로웠고 많이 배웠습니다.

개발을 시작하기 전에, 구조를 어떻게 짤지 고민을 해야 코드를 가독성 좋게 짤 수 있고, 데이터를 활용도 높게 사용할 수 있다는 것을 알게되었어요.

학습 중 어려웠던 점

강의를 듣다가 이해가 되지 않아서 질문을 하여 도움을 얻고 싶은 상황이 있었어요.

하지만 어떤 것을 어떻게 질문해야하는지 정리를 할 수 없어 도움을 요청하기 힘들었습니다.

어느 정도의 내용이 이해가 되었어야 어느 부분을 모르는지 알고 질문을 할텐데 그러지 못했어요.
생각해보면 초반에 이해가 안되었지만 사소한 부분이라 생각하고 넘어가서 전체 코드를 이해하지 못하는 일이 생긴 것 같아요.
매개변수에 중괄호로 묶은 형태가 전달되는 것을 정확히 이해하지 않고 넘어갔었어요.

객체 비구조화 할당에 대한 개념을 찾아보고 알게된 후에 코드가 조금씩 보이기 시작했습니다.

또한 브라우저로 디버깅을 하면서 코드의 흐름을 살펴보니 이해를 잘 못하고 있던 부분도 보였고, 비슷한 구조와 방식으로 진행하는 뒤의 다른 강의들을 보고 실습하면서 코드 흐름을 정확히 알 수 있었습니다.
아래는 추가로 학습하면서 이해에 도움이 되었던 내용입니다.

객체 비구조화 할당

• JS 객체나 배열로부터, 데이터를 추출하여 변수에 할당하는 방법 (객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 함)
  • 객체 비구조화 : { } 이용 → 객체 속성 추출
  • 배열 비구조화 : [ ] 이용 → 배열 요소 추출

const person = { name: "Hue", age: 23, country: "Republic of Korea" };

// 객체 비구조화를 사용하여, 객체 속성을 추출하여 변수에 할당
const { name, age } = person;

console.log(name); // Hue
console.log(age); // 23

const person = { name: "Hue", age: 23, country: "Republic of Korea" };

function user({ name, age }) {
    console.log(`안녕하세요! 저는 ${name}이고, 나이는 ${age}입니다 :)`);
}

user(person); // 안녕하세요! 저는 Hue이고, 나이는 23입니다 :)

아래와 같이 작성할 필요를 없애준다.

// 다음과 같이 작성할 필요를 없애준다.
const name = person.name;
const age = person.age;
const country = person.country;

매개변수에 객체 형태로 전달하는 이유

• 객체 형태 : { }를 이용해서 객체 형태로, 매개변수에 전달 가능
  • ex. { name }, { age }
• { }를 사용한 이유 : 키가 $target이고, 값이 실제 $target변수인 객체를 정의하기 위함.

// main.js
import App from "./App.js";

const $target = document.querySelector(".app");

new App({$target});

// App.js
import PhotoList from "./PhotoList.js";

export default function App({$target}){

    new PhotoList({$target});
}

// PhotoList.js
export default function PhotoList({$target}){
    const $photoList = documnet.createElement("ul");
    $target.appendChild($photoList);
}

여러 함수에서 정의된 하나의 객체의 서로 다른 일부 데이터를 활용할 때 유용한 것 같습니다.

또한, 각 함수에서 활용할 데이터를 명시적으로 알 수 있다는 것이 장점인 것 같습니다.

const person = { name: "Hue", age: 23, country: "Republic of Korea" };

// name과 age를 활용할 함수
function user({name, age}) {
  console.log(`My name is ${name}. I'm ${age} years old`);
}

// country를 활용할 함수
function home({country}){
  console.log(`I'm from ${country}`);
}

user(person);
home(person);

const object = { 
    somethings: {
        some1 : 'a', 
        some2 : 'b'
    }, 
    somethings2: {
        some3: 'c'
    } 
}

function some({somethings}){
  console.log(somethings);
}

some(somethings); //{some1: 'a', some2: 'b'}

const object = { 
    somethings: {
        some1 : 'a', 
        some2 : 'b'
    }, 
    somethings2: {
        some3: 'c'
    } 
}

const somethings = object.somethings;

function some(somethings){
  console.log(somethings);
}

some(somethings); //{some1: 'a', some2: 'b'}

보완해야할 점

강의를 듣고 과제를 진행하면서 모르는 부분에 대해서 알 때까지 같은 강의를 돌려보는 것 보다 관련 키워드는 무엇이 있을지 한 번 생각해보고 검색해보는 태도가 필요하다는 것을 느꼈어요. 같은 강의를 돌려보고 정리하는 것도 큰 도움이 되었지만, 시간을 많이 투자하게 되어서 효율적이지 못했다고 생각이 들었기 때문입니다.

데브코스 지원

아직 부족하다는 생각이 커서 취업 준비를 병행하며 더 공부해 보고 싶은 마음이 컸던 시기였습니다. 지인으로부터 프로그래머스에서 프런트엔드 과정 부트캠프가 있다는 소식을 듣고 바로 지원했어요. JS기초부터 탄탄히 다지고 싶었던 터라 데브코스의 커리큘럼이 좋았고, 평소에 공부도 스터디를 통해 하는 편이라 같이 공부할 수 있는 환경이 주어지는 데브코스가 적합하다 판단했습니다. (기회가 보여서 바로 잡은 게 커요ㅎㅎ)

Week1-Week2

데브코스 첫날, OT를 진행해 면접 때 뵀던 매니저님과 짧지 않은 6개월 동안 함께할 분들을 온라인에서 잠깐 뵙고 마무리되었습니다.

데브코스 둘째 날, 드디어 함께할 팀원분들과 만났어요. 게임도 하고 인사도 간단하게 나누며 아이스브레이킹 타임을 가졌어요. 팀원 구성 전 mbti를 포함한 설문조사를 진행해서, E와 I를 섞으려는 목적인 줄 알았는데 그건 아니였더라구요. 저희 팀원은 모두 I였습니다 :) 저를 포함해서 조금은 조심스럽고 조용하지만, 다들 적극적으로 공유하고 도움을 주셨어요.

학습은, JS 주요 문법과 자료구조 & 알고리즘을 진행했어요. 첫날 수업부터 아, 이건 기초부터 하는 수업은 아니구나. 어느 정도 알아야 듣기 수월하겠다는 느낌이 확 왔습니다. 모던 Deep Dive JavaScript 책을 통해 책의 초반 부분 기초 지식을 쌓아놓아 따로 찾아볼 필요 없이 진행할 수 있었는데, 아직 깊게 공부하지 못한 부분은 참고 자료를 통해 추가로 학습했어요. 알고리즘은 진도가 나갈수록 비슷한 유형의 문제를 많이 풀어봐야겠다는 생각이 들었어요. 저에겐 쉽지 않은 난이도였습니다ㅎㅎ

Week3-Week4

셋째 주에는, Vanilla JS 실습과 관련된 내용이 진행됐어요. 개발하는데 꼭 필요한 지식과 방식을 학습하는 느낌이었어요. 개발을 진행할 때 정해진 기한이 있다 보니 기능들을 구현하는데 급급해서 코드의 구조나 유지보수를 상당히 고려하지 못했는데, 좋은 코드를 짤 수 있는 방식을 배웠습니다.

강의를 통해 직접 코드로 컴포넌트 방식, 모듈, 비동기, fetchAPI, historyAPI, localStorage에 대해서 학습했습니다. 저는 여기서 historyAPI가 굉장히 흥미로웠어요. 새 글을 작성하고 등록을 하게되면, 뒤로가기를 클릭했을 때 다시 글을 작성했던 페이지로 되돌아가지 않도록 해주는데 유용하고 새로알게된 내용이라 학습하는데 재미가 있었습니다. 비동기는 항상 어려워했던 부분인데 역시 추가 학습이 필요했어요. 실습을 통해 공부를 하고 있는데 이번에는 마스터하고 가고 싶습니다.

후기

MIL을 작성하고 나니, 학습하면서 부족한 부분을 알게된 것 같아요. 코어타임에 수업을 듣는 것과 자신의 학습을 분리시키지 않고 시간관리와 멘탈관리를 잘 해주는게 중요할 것 같습니다. 차근차근 잘 하고 있으니까 끝까지 화이팅하고, 시간이 지나면 조금씩 성장해 있는 나를 보고 뿌듯할거니까 지치지 않아도 된다!

i-1. CSR(Client-side Rendering) 이란?

• 클라이언트 측에서 렌더링을 진행한다는 것
• 보통 SPA(Single Page Application)에서 쓰이는 기법

• SPA : 첫 요청시 딱 한 페이지만 불러오고, 페이지 이동 시 기존 페이지의 내부를 수정해서 보여준다.

특징

• 모든 코드들이 index.js파일에 들어있다.
• 코드를 받아와 화면을 그리지만, 데이터를 받아오지 않는다.

i-2. CSR의 장단점은?

장점

• 서버의 부하를 줄일 수 있다.

• 서버에서는 데이터를 주고 받는 일만 하면되기 때문에

• 페이지를 이동할 때 화면이 깜빡하지 않아도 바로 렌더링이 된다. (사용성 측면)

단점

• 검색엔진최적화(SEO)가 좋지 않다.
• • 초기에 html 데이터가 없다보니 검색 봇이 해당페이지를 빈페이지로 착각하여 SEO에 취약할 수 있다.
• 사용자가 첫 화면을 보는데 시간이 많이 걸린다.
• • 모든 코드들이 index.js파일에 들어있기 때문에, 처음에 번들된 이 파일을 다운받는데 시간이 꽤 걸릴 수 있다.
• 애플리케이션이 커짐에 따라 필요한 JS의 양이 증가하는 경향이 있다.

• 다운로드 속도가 느려질 수 있다.

ii. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.

첫화면을 빠르게 띄워야하고, 화면 전체를 렌더링하여 새 화면으로 띄워야하는 경우, 또한 html데이터를 초기에 가져와 검색엔진최적화를 시킬 필요가 있을 때에 필요하다.

iii. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.

#!/usr/bin/env node

import arg from 'next/dist/compiled/arg/index.js'
import { startServer } from '../server/lib/start-server'
import { getPort, printAndExit } from '../server/lib/utils'
import isError from '../lib/is-error'
import { getProjectDir } from '../lib/get-project-dir'
import { CliCommand } from '../lib/commands'
import { resolve } from 'path'
import { PHASE_PRODUCTION_SERVER } from '../shared/lib/constants'
import loadConfig from '../server/config'

const nextStart: CliCommand = async (argv) => {
  const validArgs: arg.Spec = {
    // Types
    '--help': Boolean,
    '--port': Number,
    '--hostname': String,
    '--keepAliveTimeout': Number,

    // Aliases
    '-h': '--help',
    '-p': '--port',
    '-H': '--hostname',
  }
  let args: arg.Result<arg.Spec>
  try {
    args = arg(validArgs, { argv })
  } catch (error) {
    if (isError(error) && error.code === 'ARG_UNKNOWN_OPTION') {
      return printAndExit(error.message, 1)
    }
    throw error
  }
  if (args['--help']) {
    console.log(`
      Description
        Starts the application in production mode.
        The application should be compiled with \`next build\` first.

      Usage
        $ next start <dir> -p <port>

      <dir> represents the directory of the Next.js application.
      If no directory is provided, the current directory will be used.

      Options
        --port, -p          A port number on which to start the application
        --hostname, -H      Hostname on which to start the application (default: 0.0.0.0)
        --keepAliveTimeout  Max milliseconds to wait before closing inactive connections
        --help, -h          Displays this message
    `)
    process.exit(0)
  }

  const dir = getProjectDir(args._[0])
  const host = args['--hostname']
  const port = getPort(args)

  const keepAliveTimeoutArg: number | undefined = args['--keepAliveTimeout']
  if (
    typeof keepAliveTimeoutArg !== 'undefined' &&
    (Number.isNaN(keepAliveTimeoutArg) ||
      !Number.isFinite(keepAliveTimeoutArg) ||
      keepAliveTimeoutArg < 0)
  ) {
    printAndExit(
      `Invalid --keepAliveTimeout, expected a non negative number but received "${keepAliveTimeoutArg}"`,
      1
    )
  }

  const keepAliveTimeout = keepAliveTimeoutArg
    ? Math.ceil(keepAliveTimeoutArg)
    : undefined

  const config = await loadConfig(
    PHASE_PRODUCTION_SERVER,
    resolve(dir || '.'),
    undefined,
    undefined,
    true
  )

  await startServer({
    dir,
    isDev: false,
    hostname: host,
    port,
    keepAliveTimeout,
    useWorkers: !!config.experimental.appDir,
  })
}

export { nextStart }

파일 경로 https://github.com/vercel/next.js/blob/canary/packages/next/src/cli/next-start.ts

-> cli로 입력하는 옵션들에 대한 실행 내용이 정의되어 있다.

npm install -> npx create-react-app -> 간단한 cli로 웹앱 프로젝트를 시작할 수 있다.

참고 https://junghyeonsu.tistory.com/258

https://www.sarah-note.com/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9/posting2/

https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/?_sm_nck=1

https://velog.io/@sootulliyang_dev/Next.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-yarn-start-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%A9%B4-%EB%AC%B4%EC%8A%A8-%EC%9D%BC%EC%9D%B4-%EB%B2%8C%EC%96%B4%EC%A7%88%EA%B9%8C