Beginner 16회차 (8/26) | 개발 요구사항 정리, 렉시컬 스코프

개발 요구사항 정리

무작정 시작하는 게 아니라 요구사항 정리를 먼저 !

요구사항 정리: 프로젝트가 완성되기 위해서, 개발자가 구현해야 하는 기능을 정리한 것

 

1. 프로젝트(서비스) 기획

어떤 기능부터 개발할지는 상황별로 너무 달라서 딱 뭐 부터 ! 할 수는 없음

 

- 할 일 목록을 출력하는 서비스

- 할 일을 추가하는 기능

• 버튼을 클릭했을 때 추가되는 기능
• 엔터키를 눌렀을 때 추가되는 기능

- 할 일 목록을 출력하는 기능

- 할 일 항목을 수정하는 기능

- 할 일 항목을 삭제하는 기능

- 할 일 목록을 재정렬하는 기능

 

2. 핵심 기술

(main 기술, 모르면 프로젝트 투입이 불가능)

- Next.js(SSR)

- SPA(CSR)

- RESTful API

- Vite.js

npm create vite@latest

ESLint, Prettier 설정

- Typescript

- React

- vercel

- Vercel Serverless Functions

- Supabase(PostgreSQL)

- SEO

 

3. 세부 기술

(sub 기술, 몰라도 바로 배워서 프로젝트 투입 가능)

- ESLint, Prettier

- SCSS

- Tailwind CSS

- Axios

- React Router

- Framer Motion

- React Query

- Zustand

- Day.js

- Sortable.js

 

4. 개발 기간(마일스톤)

2024.09.01 - 2024.12.31

 

5. 와이어프레임

https://www.google.com/url?sa=i&url=https%3A%2F%2Fmiro.com%2Fko%2Ftemplates%2Flow-fidelity-wireframes%2F&psig=AOvVaw1flFzkVJ03O8-CysDtUlHb&ust=1724726065720000&source=images&cd=vfe&opi=89978449&ved=0CBcQjhxqFwoTCOC1y73PkYgDFQAAAAAdAAAAABAg

 

* 개발자 입장에서

1) 요구사항 정의서 작성

2) 기능 개발

3) 테스트(단위, E2E, QA)

4) 배포

5) 리팩토링 (성능 최적화, 유지보수)

 

+ 기획 문서 작성

+ 시안 디자인

+ 기타 잡무

 

렉시컬 스코프

- 스코프 = 범위, context

 

함수의 렉시컬 스코프(Lexical Scope)란, 정적 스코프(Static Scope)라고도 하며, 함수를 선언한 위치에서 유효하게 접근 가능한 범위(유효범위)를 말합니다.
간단하게는 전역(Global)을 포함한 선언된 함수의 상위 함수 범위로 이해할 수 있습니다.

 

다음 예제에서, fnC 함수는 렉시컬 스코프의 window, a, b, c 객체를 모두 참조할 수 있습니다.
fnX 함수는 fnC 함수의 상위 함수가 아니므로, 접근 가능하지 않습니다.

const a = {
  name: 'A',
  fnA() {
    const b = {
      name: 'B',
      fnB() {
        const c = {
          name: 'C',
          fnC() {
            console.log(window) // window 객체
            console.log(a) // a 객체
            console.log(b) // b 객체
            console.log(c) // c 객체
            console.log(d) // Error: d is not defined
          }
        }
        return c
      }
    }
    return b
  },
  fnX() {
    const d = {
      name: 'D'
    }
  }
}
a.fnA().fnB().fnC()

---

* 쿼리(검색)
프론트엔드 --> 네트워크 기준에서 데이터를 요청하는 것
react qury: 요청과 응답, 네트워크 통신을 어떻게 다룰것인가 ? FE --> BE
백엔드 --> 데이터베이스(DB)에서 검색하는 것(특정 항목)
                  BE -----(query)-----> DB

* 문서를 읽을 때 모르는 단어, 구절, 문장이 나오면 그것에 대해서 파고들어야 함
ex) 조직 ? 완벽하게는 아니지만 적어도 조직이 무엇을 의미하는지는 알고 다음으로 넘어가야 함

* SEO 적용 --> 검색하면 나올 페이지, 누구나 다 쓰는 페이지
(<-> 보안이 필요한 페이지(ex. setting의 my page 등))

 

https://www.heropy.dev/p/N6phSt

JS 함수 핵심 패턴