[Next.js/코딩애플] 프로그램 만드는 법 (feat. 코딩애플)

프로그램 만드는 방법

오늘은 복잡해 보이는 코드 작성 과정을 단순하게 바꾸는 방법에 대해 이야기하려고 합니다.

저는 이번에 Next.js를 공부하며 터득한 중요한 교훈이 있었는데, "그것은 바로 기능을 먼저 정의하고 코드를 작성하라"입니다.

처음에는 코드를 작성하는 과정이 어려울 수 있지만, 아래의 예시를 통해 기능 정의를 연습해 보세요 :)

 

처음 보는 기능 만들기
1. 기능의 동작 방법에 대해 한글로 상세히 정의하고
2. 코드로 번역하기

글 목록 페이지와 기능 만들기 (글 목록 조회 기능)
1. HTML 페이지 작성하고
2. 페이지 방문 시, DB에 저장된 글을 꺼내와서
3. 글을 HTML에 넣어 보여주기

상세 페이지 기능 만들기
1. 글 제목 클릭 시, 상세 페이지 이동
2. 상세페이지 방문 시, DB에 저장된 글을 꺼내와서
3. HTML에 보여주기

글 작성 기능 만들기
1. 글 작성할 페이지를 만들어
2. 저장 버튼 클릭 시, 작성한 글이 DB에 저장
3. 글 목록 리스트 보이기
→ 1, 2 단계 위험: 공백 전송 등 우려

(수정) 글 작성 기능 만들기
1. 글 작성할 페이지를 만들어
2. 저장 버튼 클릭 시
3. 서버에 글 저장을 부탁하면
4. 서버가 검사 이후 DB에 저장
5. 글 목록 리스트 보이기

서버 개발자 코드 작성하기
1. 요청에 따라 실행될 코드 작성
1-1. /URL, method 작성
1-1-1. method 종류
- GET: 데이터 출력(유저에 전송)
- POST: 데이터 입력(데이터 추가)
- PUT: 데이터 수정(데이터 전체 수정)
- DELETE: 데이터 삭제(데이터 삭제)
- PATCH: 데이터 수정(데이터 일부 수정)

글 수정 기능 만들기
1. 글 작성 기능 만들기와 유사
2. 글마다 수정 버튼 만들고, 클릭 시 수정 페이지로 이동
3. 작성해 둔 글이 미리 채워져있어야 하기 때문에 DB에 저장된 글 불러오기
4. 수정 이후 기존 게시글 대체하기

글 삭제 기능 만들기
1. 게시글 리스트에 삭제 버튼 만들고
2. 삭제 시 화면에 보이는 게시글 페이드 아웃으로 없어짐과 동시에
3. DB에 저장되어있는 글도 함께 삭제

글 삭제 기능 만들기 v2
1. 글쓴이가 아닌 모든 사용자가 글 삭제할 수 있었으므로
2. 작성자가 아니면 글을 삭제할 수 없도록 기능 변경
3. 누군가 삭제 요청을 한다면, 요청자와 글쓴이를 비교
4. 삭제 요청자 === 글쓴이일 경우, 삭제하도록

애니메이션 추가하기
0. 페이드 아웃 애니메이션 생성하기 위해
1. 애니메이션 동작 전: 투명도 1 (opacity: 1)
2. 자연스러운 효과가 필요하므로 투명도 변화 시간 1초 지정하여 (transition: all 1s)
3. CSS 파일에 작성
4. 애니메이션 동작 후: 투명도 0 (opacity: 0)
5. 애니메이션 동작 후 내용은 '삭제' 버튼 클릭 후의 동작 then 절에 작성

회원 기능 만들기: 로그인한 사람만 게시물을 볼 수 있는 기능 만들기

1. 회원가입 시
1-1. 유저 아이디/비밀번호를 서버에 저장

2. 로그인 시
2-1. 유저 아이디/비밀번호를 서버에 전송
2-2. 서버는 DB에서 아이디/비밀번호 일치 여부 확인
2-3. 일치할 경우, 서버는 입장권 발급: session 혹은 token(JWT, JSON Web Token) 방식
2-3-1. session: 
2-3-2. token(JWT): 
2-3-3. OAuth: 

3. 서버에 GET/POST 요청 시
3-1. 입장권을 제시하며 데이터 요청
3-2. 서버는 입장권 확인
3-3. 입장권 확인 후 유저에 데이터/페이지 전달

회원가입 기능 만들기
1. 회원가입 페이지에서 유저가 이메일, 비밀번호를 서버에 전송
2. 서버는 해당 정보를 DB에 저장

다크 모드 만들기 (동적으로 변경되는 UI 만들기)
1. 현재 UI 상태를 적어둘 쿠키 생성
2. 쿠키에 따라 보여줄 UI 작성
3. 필요시 쿠키 값 변경하도록 작성

미들웨어를 통한 감청 기능 만들기
1. 미들웨어 생성하여 코드를 작성
2. 누가 "/list" 페이지 접속 시
3. 시간과 유저정보를 터미널에 출력: 유저가 사용하는 OS 정보와 현재 시간을 출력하도록

 

💿 마무리

복잡한 기능을 간단한 단계로 나누고 코드로 변환하는 것이 처음에는 쉽지 않을 수 있지만,

위와 같은 방법을 통해 조금 더 명확하고 체계적으로 코드를 작성하는 것이 더욱 수월해질 수 있습니다.

저도 위의 방법을 코딩 과정을 효율적으로 만들고 있습니다. 여러분도 시도해 보시길 바라며... 감사합니다 💖