Analytics

보통 벨로그 같은 블로그 서비스에서는 자체 분석 기능을 제공하지만, 분석 기능을 제공하지 않는 커스텀 블로그의 경우에는 Analytics를 따로 setup 해줘야된다. anlytics platform은 다양하게 있다. (가격 정책 조심해야 함)

• simpleAnalytics
• umami
• googleAnalytics
• plausible

GA는 funnel 분석에 사용한 경험이 있어서, 가능한 빠르게 연동 가능한 것을 선정했다.

많은 기능은 필요 없어서 단순하게 1페이지만 보고 싶은데, GA는 너무 많은 분석 정보를 제공하는게 그렇게 필요한가 싶었다. 또 GA는 확실히 대시보드가 열리기까지 뭔가 페이지가 너무 느린 느낌(무거움)에 다른걸로 바꾸는게 좋을 듯하다.

일단 GA는 연동했고, 빠른 시일 내에 측정 도구를 바꿔 볼 예정이다.

Google Analytics

Google Analytics에 접속 후 측정시작을 누르고, 설정을 해준다.

1. 계정 설정

   • 
   • 계정 이름 - 사용할 계정 이름을 기입해준다.
   • 계정 데이터 공유 설정 - google에 데이터를 공유하는 설정인데, 원하는 항목에 체크한다.

2. 속성 설정

   • 
   • 측정할 애플리케이션의 속성을 추가한다.
   • 위의 계정 설정과 마찬가지로 추후에 수정이 가능하다.

3. 비즈니스 설정

   • 
   • 분석에 필요한 측정 규모를 지정한다.

4. 데이터 스트림 선택

   • 
   • 분석 측정을 하기 위한 플랫폼을 설정해준다.
   • 본인은 웹 환경을 측정하기 위해서 웹을 선택했다.

5. 데이터 스트림 환경 설정

   • 
   • 본인이 측정하고자 하는 서비스의 URL을 설정해준다.

6. 환경 설정 확인

   • 
   • 최종적으로 설정된 스트림과, 측정 ID 값을 확인한다.
   • 측정 ID 값을 확인(UA-000000-2 or G-XXXXXXX)하고, 연결하고자 하는 플랫폼과 연동해준다.

7. 분석 측정 방법 선택하기

   • 
   • 해당 script를 본인 애플리케이션에 삽입한다.
   • 이외에 플랫폼에 따라 SDK를 설치해서 세밀한 분석을 하는 방법도 있다.
     • 기본적으로 analytics에서 측정해주는 항목도 있고, logEvent를 통한 세밀한 측정이 가능하다.
     • 이탈율, 페이지 전환률 측정, 리텐션 측정, 퍼널 분석 등

참고 자료

• 보통 google analytics에서 제공하는 공식 문서를 참고하면서 setup을 진행했지만, google에서 기본 가이드를 강의 형태도 제공하는데 참고하면 좋을 것 같다.
  • [Analytics Academy] https://analytics.google.com/analytics/academy

giscus

utterances, disqus도 있지만, github discussions 기반의 giscus를 연동하는게 나을 것 같아서 giscus를 선택했다. 연동하는데는 크게 어렵지 않아서 analytics와 마찬가지로 본인이 선택한 옵션대로 script generator를 지원해서 giscus를 활성화 할 수 있다.

• giscus 공식 사이트

기타 설정(CSP, env setting)

CSP

이외에도 야크털을 좀 깎았는데 giscus를 설정할 때, CSP(Conetent-Security-Policy) 설정이 필요하다는 경고창을 보고 header를 설정해줬다.

CSP는 대충 XSS, Data injection 등의 보안 취약점을 완화시키기 위해 설정할 수 있는 meta tag인데 털릴 정보는 없으나 설정함.. (특 쫄보임)

mdn 문서를 참고해보자면,

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; img-src https://*; child-src 'none';">

위와 같이 <meta> 요소를 사용하여 정책을 설정할 수 있다.

Content value에는 다양한 옵션이 존재한다.

• CSP value 참고 자료

최종적으로 Example usecase를 참고하여 default-src에 GA와 giscus app, localhost를 화이트리스트로 추가했다.

env(environment variable)

API Key나, ID, PW 등 외부에 노출되지 말아야하는 key pair들의 정보는 env 파일로 따로 관리해야하는데, 작성 후에 외부 노출을 방지하기 위해 .gitignore에서 블랙 리스트를 추가해서 관리하는 편이다.

• env prefix, postfix를 통해서 이름 규칙을 정해주고 gihub에 push 되지 않도록 설정
• 정 올리고 싶으면, env.example 파일 생성해서 key 값만 설정하고 참고 형태로 관리해도 됨

웬만하면 react project나 기타 프레임워크에서 프로젝트 init시에 gitignore에 설정되어 있느니, env.production, env.development와 같이 cross-env plugin을 쓰거나, react dot env를 쓸때에는 build script 등 따로 설정해야할 부분은 꼭 체크하고 넘어가자!

build process 를 제공하는 vercel이나 netlify 등 env를 따로 쉽게 서비스 상에서 설정할 수 있으니, 해당 공식 사이트 문서를 참고하면 좋음. gitignore를 설정했다면 github repo에는 env 파일이 push 되지 않습니다.

닫는 말 🚪

• 본인이 연동하고자 하는 서비스의 방향이 어떠냐에 따라서 도구를 잘 선택해 쓰는 것도 중요하다.
• 공식문서에 답이 나와있다, 간과하지 말자!
• umami로 분석 측정도구 바꿔야지... 😃 simple is best가 최고임...

이전 게시글에서 봤듯이, 스터디용 블로그를 위해서 최대한 빠르게 만들 수 있는 정적 웹 블로그가 필요했다. 공부하고 -> 정리하고 올리고 하는 용도의 Note처럼 쓰기 위한 블로그라서 "시간을 잡아먹는(야크털 깎기) 요소들을 줄이고 집중하자."라고 생각했지만 예상외로 초입부터 야크털을 좀 깎았다.

템플릿

Jekyll + github page 조합은 썩 맘에 들지 않아서, JamStack 참고해서 TailwindCSS + Next.js 조합의 템플릿을 발견했다. 바로 새 git repo 새로 파고 몇가지 커스텀을 진행했다.

커스텀

• JS Official 버전으로 진행
  • local project path에서 npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git 명령어를 실행해 clone함
• Sitemetadata.js custom
  • 웹에서 사용하는 메타데이터 구성 요소들 수정
• favicon 등 Assets 수정
  • fivicon 및 Asset들 수정
• 기타 레이아웃 수정
  • 쓰지 않을 라우터 및 페이지 삭제

내가 사용하고 싶은 부분만 수정해서 진행했다. 템플릿 자체가 다른 서드파티 플랫폼 연동을 위한 소스코드가 잘 정리되어 있어서 수정하는데 큰 어려움은 없었다.

Netlify 연결

설정 방법은 아주 간편하다.

• 내가 hosting 하고 싶은 github repository(project)와 연결한다.
• install을 진행하고 deploy setting을 진행한다.
  • main branch or master branch를 지정해주고, build command를 setup 해준다.
  • 내가 선정한 템플릿은 next.js(SSR)를 사용하므로 자동으로 form field에 build command가 채워졌다.
  • 이외의 템플릿을 진행한다면 netlify가 굉장히 친절하게 설명해주고 있으니 공식 사이트를 참고한다.

• Setup이 완료되면 deploy scripting을 netlify가 진행하고, domain 설정을 진행하면 된다.

• 나는 위의 절차대로만 진행하고 따로 domain settings 옵션에서 custom domain 설정을 해주었다.

• netlify에서 내가 설정한 master branch에 소스 코드 변동 사항이 감지되면 Deploys 탭에서 확인할 수 있듯이 building -> published 과정을 진행하는 것을 볼 수 있다.
• Building 중의 오류 사항, 진행 사항을 상세히 볼 수 있다. 또 published 상태에서도 Log를 확인할 수 있다.
• 아직 확실하지는 않지만 Vercel과는 다르게 이전에 배포한 버전으로 쉽게 rollback 할 수 있는 옵션은 제공하지 않는 듯 하다.

시행착오

정신차리자 진짜 👎 ...

위에 보았듯, build script 초기 세팅이 꼬여버려서 에러를 내고 두번째 에러는 분명.. official document를 봤는데도 guide대로 하지 않았기 때문이다. next.js에서 server-side rendering은 build command를 next build로 지정하고 public directory는 .next가 맞는 것인데.. static html export build command를 지정해서 image optimized api setting을 하고... 먼길을 돌아서 왔다...

닫는 말 🚪

남은 Task

• giscus 연동
• analytics 연동

뭔가 알맹이 없이 끝내는 것 같지만, 이제 꾸준히 정리하고 또 정리하고 ... 미친듯이 달려갈 일만 남았다.

질문

정보를 요청하는 데 쓰이는 언어학적 표현이거나, 그러한 표현을 스스로 하는 요청을 가리킨다. 이러한 정보는 답변과 함께 제공될 수 있다.

왜 질문하는가?

점심 뭐먹지? (흔히 겪는 직장인들의 질문 딜레마)

• 고민
• 본인이 해석할 수 없는 경계에 직면했을 때
• 단순 호기심
• 문제 해결

질문을 통해서 얻는 이점

• 탐구
• 새로운 정보 수집, 분류
• 새로운 이해와 통찰

Best question - 왜(Why)

• 기존의 어떤 프레임과 가정, 가설에 대해 의문을 제기
  • 더 좋은 프레임 획득

왜(Why)라는 질문이 왜 필요할까?

• 누구나 어렸을 때부터 질문을 해왔음
• 취학 전 아이들이 부모에게 하루 평균 100가지의 질문을 함(거의 물음표 살인마...)
• 나이를 먹기 시작하면서 묻기를 멈춤

'왜' 라는 질문을 통해 얻는 이점

• 더 깊은 이해를 할 수 있음
• 어떤 주장의 근거를 파악할 수 있음
• 파악된 결과를 통해 어떤 일들이 일어날지 미리 생각해 볼 수 있음
• 다른 사람의 입장을 공감할 수 있음
• 더 좋은 해법을 찾을 수 있음
• 집중할 곳이 어디인지 명확해짐

왜(Why)를 효과적으로 사용하기

5 Why

• 1970's Toyota에서 시작
• 올바른 문제 찾기
  • 눈에 띄는 현상 바라보기
  • 왜 발생했는지 물어보기
  • 문제의 근본 원인 찾기

• 해결책이 아닌 대응책 사용
• 문제의 근본 원인을 찾는 방법

How to use 5 Why?

1. 문제 정의하기

   • 실행 중인 문제 관찰
   • 간단하고 명확한 문제 진술 작성

2. 처음으로 "왜?"라고 질문하기

   • 문제가 발생하는 이유 묻기
   • 질문을 받으면 대답은 최대한 진중하게
   • 실제 일어났던 일에 대한 사실적으로 근거 있는 답 찾기

3. "왜?"를 네 번 더 묻기

   • 2단계에서 생성한 각 답변에 대해 4개의 "이유를" 연속적으로 질문
   • 한 질문에서 다음 질문으로 빠르게 이동하여 결론을 내리기 전에 전체 그림을 그리기
     • 예시 (단순한 형태의 5 why, 복잡한 형태의 5 why)
       • 단순한 형태의 5 why
       • 복잡한 형태의 5 why

4. 언제 멈출지 인지하기

   • 유의미한 응답 확인
     • 더 이상 문제를 해결할 수 없는지 검증 → 적절한 대응책이나 프로세스의 변화가 분명해짐

   💡 Tip 1️⃣

   • 어떤 경우에는 문제의 근원에 도달하기 전에 "왜?"를 몇 번 더 물어봐야 할 수도 있음
   • 다른 경우에는 다섯 번째 "왜?"를 묻기 전에 이 지점에 도달할 수도 있음
   • 만약 그렇다면, 너무 빨리 멈추지 않았는지 그리고 대답할 시간을 충분히 주지 않았는지 확인 → 중요한 점은 유용한 응답을 하지 않을 때, "왜?"라는 질문을 중단

   💡 Tip 2️⃣

   • 일련의 질문들을 해보다 보면, 누군가가 필요한 조치를 취하지 못했다는 것을 발견함 → 5 Why의 가장 좋은 점은 책임을 전가하는 것보다 더 나아가서 왜 그런 일이 일어났는지 물어봐야 함

5. 근본 원인을 해결하기

   • 확인된 근본 원인에 대해 문제가 반복되지 않도록 하는 대응책을 논의 및 합의

6. 측정값을 모니터링하기

   • 대응 조치가 초기 문제를 얼마나 효과적으로 제거하거나 최소화하는지 예의 주시
   • 수정 및 교체의 상황이 발생했을 경우 5가지 이유 프로세스를 반복하여 올바른 근본 원인을 확인

정리

💡 5 Why 전략 → 문제의 근원을 밝히기 위한 간단하고 효과적인 도구

• 문제부터 시작해서 왜 그런일이 일어나는지 물어봐야 함
• 대답이 사실인지 확인
• 문제의 근본 원인 도달할때까지 프로세스 반복
• 단순하거나 다소 어려운 문제에 적합한 프로세스
  • 복잡한 문제 → 상세한 접근 방식 권장

주의: 대충 지금 부터 개소리 일수도 있고 아닐 수도 있다라는 뜻입니다.

내 블로그 연대기

Tistory -> Velog

원래는 Tistory를 이용하다가 잔버그, 느린 속도로 인해서 블로그를 찾기 시작했고 Velog를 알게됐다. 확실히 Velog가 깔끔하고 잔버그도 많지 않고 무엇보다도 WYSIWYG기반의 에디터 보다는 Markdown 기반의 사용성이 더 좋다.

Velog -> Notion

Velog에 게시글을 꾸준히 쌓다가, 이미 공부 정리용으로 사용하고 있는 개인 공간 Notion 집중되어 이도저도 아닌 상황이 되었다. 아마 Velog보다 Notion이 사용성이 더 좋았다고 생각했을지도 모른다. 그러다가 요즘에 드는 생각 Velog 이외의 Blog를 나눠서 운영하고 싶은 생각이 문득 들었다. 기존의 게시글들은 개념적인 부분도 있고, 그게 아닌 부분도 있어서 분리해서 관리하는 게 낫다고 생각했다.

계획

계획을 위한 계획을 좋아하는 나는, 세가지의 유형으로 나눠서 관리하려고 마음 먹었다.

1. 아카이빙(개발 팁, ex) 'Gist' Or 'Code Snippet')
2. 시행착오 Or 문제 해결 위주의 블로그(재밌거나 혹은 재미없거나)
3. 공부 정리용 블로그(노잼)

   아카이빙(Achiving)용 블로그 🗄

   플랫폼 선정 - 노션(Notion)

• 개발 과정에서 이전에 해결했던 문제를 또 다시 반복하는 야크털 깎기의 상황을 마주하고 싶지 않아서, 아카이빙해야 겠다는 생각이 많이 들었다.
• 이미 노션으로 개인 공부(인강, 클론 코딩 등...) 내용들을 따로 정리하고 있었지만, Notion이 점점 여러 포맷들로 인해서 중구 난방되는 것을 보고 더욱 더 분리해서 관리해야 된다고 생각했다.
• 답정 Notion이다. Notion은 필요에 의해서 외부에 웹 링크 형태로 공유할 수 있고, 무엇보다 공개하기 이전의 Private한 내 개인 공간으로 이용중이라서 마음이 너~무 편한 플랫폼이다. 민감한 내용들도 한 곳에서 관리할 수 있기 때문에 당연히 Notion을 안할 이유는 없다.
• 진행중인 프로젝트들 혹은 전 회사에서 마주했던 문제 상황들을 모아서 관리하고, 공개할 부분은 Velog로 노출한다.. 이게 내 계획이다.
• 하지만 리소스 좀 먹는 듯, 사용하기 쾌적한 정도는 아니다

  다양한 export 지원(타 플랫폼과의 이식성), 다양한 포맷 지원, 쉽고 편한 페이지 공유(강려크함) 내 작고 소중한 공간(내작소공)

경험, 야크털 깎는 블로그 🤷🏻‍♂️

플랫폼 선정 - 벨로그(Velog)

• 국내에서 제일 쾌적하고, 쾌적함... Simple Is Best의 우위를 선점하고 있다.
• 나는 '게시글로 수익창출을 한다'에는 전혀 동의하는 바가 없기 때문에 당연히 꾸준히 쓸 수 있어야되는 정도의 쾌적함을 가지고 있어야 된다고 생각했다.
• 딱히 단점은 보이지 않는다.

  Simple Is Best의 표본, 꾸준히 할 수 있는 것, 게시글 수익 창출에 동의하지 않고 자주 쓸 수 있는 곳을 선택한다면 단연 Velog가 아닌가 싶음

스터디용 블로그 🧑‍💻

플랫폼 선정 - Github Page OR Netlify

• 1 부터 10까지 개발해서 블로깅하는 것을 원하지는 않는다.
• 딱히 SEO도 중요하지 않았다. 내가 공부한 것들을 정리하고 노트처럼 저장할 수 있는 '나만의 블로그'가 필요했다.
• Hosting의 이점과 Free Tier의 기능, 추후의 커스텀을 고려해서, Github Page와 Netlify를 고민하던 중 Netlify로 정했다.
• 템플릿을 직접 만드는 시간은 나중에 투자하기로 하고, 여기를 참고해서 Filter 중 내가 경험했던 스펙인 Next.js + TailswindCSS 템플릿을 선정했다.
• mdx, md 기반의 에디터를 지원하고 블로깅은 Hugo Standard로 더 빠르게 페이지를 generate 할 수 있어야 했다.
• 완성된 템플릿인 만큼, 여러 가능성을 열어두고 서드 파티 플랫폼 설정을 바로 할 수 있게 코드가 짜여져 있어서 사용자는 Custom을 어느 정도 할 수 있는가? 혹은 어디까지 할 수 있는가 정도가 분명해야 한다. >`템플릿이라고만 했지, 커스텀은 직접 관리해야한단다...` 좋은 도구를 가져다 쓰는 것도 능력인 듯 하다. 하.. 능력키우기 어렵다... # 닫는 말 🚪
• 이렇게 푸념인지, 정보성 글인지 어쩌란 건지 모르겠는 글을 작성하는 것이 내 Velog의 취지이다.
• 결론, 쓰고 싶은 거 잘 알아보고 쓰자

[소프트웨어 개발의 모든 것] 중, Part 2. 소프트웨어 개발을 성공으로 이끄는 법

소프트웨어 프로젝트 = 생명체

• 생명체와 같이 유기적으로 움직임
• 프로젝트 규모가 작다
  • 전문 지식 경험 없이 수행 가능
  • but. 규모가 커질수록 체계적인 관리 요구! 개발 방법론 도입

CASE1. 개발 방법론을 그냥 따라하면?

• 너무 복잡함
• 문서를 많이 만들어야 함
• 방향성을 잃어버림
• 제대로 도입하지 않으면 방해가 됨

CASE2. 세계적으로 검증된 유명한 개발 방법론을 도입했더니?

• 프로젝트 소요시간 증가
• 개발자의 불만 증가
• 제품의 품질 감소
• 작성해야 할 문서 증가
• 문서 내용 중복
• 형식적인 문서 작성
• 실제 개발에 도움 안됨
• 승인 절차로 인해 너무 지연됨

지쳐서 방법론 따위는 ...

효율적인 개발 방법론 도입

• SRS → 프로젝트의 기둥으로서의 역할

  SRS(Software Requirement Specification) 소프트웨어 요구 명세, 기능 명세

  

• 도입한 개발방법론을 고집하지 않고 무엇이 문제인지 다시 생각

• 이론의 문제보다는 경험자의 지혜를 빌려야 함

• 코딩부터 시작 → 무엇을 만들어야 하는지 정확하게 모르는 상태에서 뭔가를 만든다.

• 불충분한 요구사항으로 인한 재작업은 재앙의 시작.

  생애주기 모델을 제대로 선택하라

  생애주기(Life Cycle) 모델

• 소프트웨어 탄생 ~ 소멸

• 생애주기에 대한 고민 ?!

• 일단 짜보고 고치기(Code-and-fix)의 딜레마

  • 문서도 없이 코딩하고 고치기를 반복
  • 빠른 시간안에 가시적인 결과물이 나온다
    • but. 많은 위험 잠재, 일정 산정, 진행 상황 체크하기 어려움
  • 생애 주기 모델의 범주에 조차 들어가지 않음.

• 적합한 생애주기 모델 선정의 어려움

  폭포수 모델

  

• 모든 생애주기 모델의 근본

• 순차적인 단계 발전의 모델

  • 전 단계가 완벽하게 끝나야 하고 모든 결과 문서화

• 제품의 스펙이 거의 바뀌지 않거나 안정성이 아주 중요한 프로젝트

  • ex) 10년동안 개발하고 실제 환경에서의 테스트가 불가능한 화성탐사선

    장점

• 소프트웨어 개발 공정을 이해하는데 도움

• 단계 별 작업 진행으로 각 단계의 진척 관리 용이

• 각 공정마다 명확하게 정의된 산출물 존재

• 일정관리 용이

• 스펙이 명확하여 산출물의 품질의 명확한 정의

• 이미 유사 제품의 경험이 있는 경우에 효과를 보임

  단점

• 폭포는 거슬러 올라갈 수 없듯이, 앞 공정으로 되돌아갈 수 없음

  • 유연하지 못함

• 작성해야할 문서가 지나치게 많음

• 전체적 일정 지연

• 정확한 요구사항 파악 어려움

• 비즈니스 상황에 유연한 대처 X

• 프로젝트가 끝나기 전까지 진행상황을 거의 보여주지 못함

  • 사용자는 자신의 요구대로 만족스러운 제품이 나왔는지를 프로젝트가 끝난 뒤에야 알 수 있음

    이외의 모델

    반복 모델

    

• 소프트웨어 프로젝트를 원활하게 진행하기 위해 여러 번에 걸쳐 개발 공정을 반복하여 수행

• 각 공정을 반복적이고 점진적으로 진행

• 요구사항이 명확함

• 개발팀이 기술 및 요구사항에 익숙해짐

  • 우수한 소프트웨어를 개발하는데 도움이 됨

• 작은 폭포수 모델을 반복

  • 반복 주기마다 시연 가능한 제품을 릴리즈하는 과정을 반복하면서 점진적 향상에 도움

    장점

• 반복 릴리즈

  • 통합 및 테스트 단계에서 발생할 수 있는 위험요소 분산

• 각 단계 제품 시연

  • 피드백을 제품에 반영할 수 있음

• 비즈니스 상황 변화에 대처 용이

• 요구사항 파악에 용이

  단점

• 여러 차례 릴리즈에 들어가는 부수적 비용 부담

• 사양이 정확하게 정해진 프로젝트에 비효율

  XP(eXtreme Programming) 모델

• 애자일 소프트웨어 개발 방법론의 하나

• 고객에게 최고의 가치를 가장 빨리 전달하는 목적

• 요구사항 변화가 자주 일어날 때 효율적임

• 같은 공간에서 소규모 개발자들이 같이 일할 때 효율적임

• Simple Is Best 요구

• 필요할때마다 방향을 바꾸기 위해

  장점

• 요구사항이 변해도 일정에 영향이 적음

• 작은 프로젝트에 효율적임

• 작은 개발팀 규모에 적합

• 문서를 최소화

• 지식공유 용이

  단점

• 큰 프로젝트에 부적합

• 테스트가 어려운 프로젝트에 사용 불가능

• 빌드 과정이 자동화 되지 않으면 사용이 어려움

• 테스트가 자동화 되지 않으면 사용하기 어려움

  사시미 모델

  

• 폭포수 모델의 변형

• 각 단계의 상당 부분을 중첩하여 진행

• 요구사항 분석 완료 전에 설계 → 설계가 완료되기 전에 구현

• 작은 프로젝트를 진행할 때 효과적

  장점

• 문서의 양을 줄일 수 있음

• 앞 단계의 오류를 빨리 찾을 수 있음

• 위험 요소를 빨리 발견할 수 있음

  단점

• 각 단계가 애매해져 프로젝트 관리가 어려움

• 일정이 모호해서 진행사항 파악에 난관을 겪음

• 여러가지 활동을 동시에 수행 → 프로젝트 진행 혼란, 비효율성 초래

  발전적 프로토타이핑 모델

• 프로젝트를 진행하면서 점점 제품의 개념을 잡아감

• 주요 부분 프로토타입 제작 → 사용자의 피드백을 반영하면서 점진적으로 제품 발전

• 요구사항이 분명하지 않거나, 변할 가능성이 클 때 용이

• 고객과 개발자 모두가 익숙하지 않은 분야를 개발하고 있을 때

  장점

• 요구사항 오류로 인한 문제 감소

• 프로젝트의 위험을 초기에, 진행 여부를 조기에 판단 용이

• 작업 진척이 가시적으로 보이므로 고객을 안심시킬 수 있음

  단점

• 프로젝트 초반에 일정 수립이 어렵고 일정 지연의 위험이 높음

• 체계적인 설계 부족으로 제품의 아키텍처가 깔끔하지 못함

  • 이식성이 떨어짐

• 설계에 대한 미비

  • 성능의 저하

• '일단 짜보고 고치기' 모델의 위험성

  개발 단계별 계획을 수립해라

• 모든 개발은 여러 단계를 거쳐 진행

• 빅뱅 테스트(Big bang)

  • 개발을 단계적으로 진행하지 않는 회사는 업무와 일정에 대한 정교한 구분없이 일을 진행하다가 적당한 시점에서 한 번의 테스트를 통해 제품을 완성하는 것
  • 운 좋게 개발 기간을 단축시켜 줄지도 모른다는 근거없는 생각과 기대감으로 중구난방 일을 진행
  • 테스트가 언제 끝날지 예측 불가
  • 일정 기간 내에 품질의 향상 추측 불가
  • 버그 파악 불가능

• 프로젝트를 단계별로 진행 및 관리

  • 각 단계가 명확해짐
  • 프로젝트 진행 상황이 가시적임
  • 혼란으로 인한 재작업 감소, 비용 절약

• 높은 품질의 제품을 출시하기 위해서?!

  • 단계별 릴리즈 실행
  • 알파, 베타, RC(Release Candidate)

    개발의 각 단계

• 프로젝트 단계는 크게 요구분석, 설계, 구현, 테스트로 나뉨

  요구분석 단계

• 개발에 관련된 모든 내용 검토 및 분석

  • SRS 작성, 프로젝트 계획서 작성, 리스크 분석, 일정 산정 등의 개발 계획 수립

• 프로젝트의 범위와 일정, 진행상의 이유를 명확하게 알 수 있음

  설계 단계

• 제품의 아키텍처를 의논과 설계를 통해 정하는 단계

• 제품을 이해하고 구현하는데 있어서 필요한 것들을 표현

  • 많은 규칙 강요 회피

• 바람직한 설계

  • 설계를 보고 코딩이 가능한 수준
  • 훌륭한 회사와 보통 회사를 가르는 경계
  • 상세하고 정확한 일정의 수립과 일일빌드가 시작

• 요구분석 단계와 설계단계 사이에 애매모한 겹침 발생

  구현 단계

• 설계에 따른 소스코드 작성

• 잘 설계된 제품 → 임시계약 직원이라 할지라도 구현할 수 있음

• 일일 소스코드 빌드 → 테스트 케이스의 작성 완성

• 구현단계의 마지막(릴리즈)

  • 일반적인 경우 → 알파 버전
  • 규모 혹은 복잡성에 따라서 베타버전 혹은 RC버전 릴리즈

    테스트 단계

• 제품을 테스트하고 수정을 반복하여 출시 가능한 제품을 만드는 단계

  • 프리 알파
    • 알파 이전에 벌어지는 엔지니어링 빌드나 일일빌드
  • 알파
    • 기능이 모두 구현됬으나, 버그가 많은 상태
    • 일부 작동이 안되는 기능이 있음
    • 공식적인 버그 등록, 통계
  • 베타
    • 중요한 버그는 거의 수정이 되어서 작은 버그들만 남음
    • 사용자 평가 및 외부 테스트를 위해서 외부에 배포하는 단계
    • 베타테스터 선정
  • RC(Relese Candidate)
    • 출시를 위해 만들어진 버전
    • FCS, 감마 또는 델타라고도 부름
  • GA(General availability)
    • RTM(Release to Manufacturing)이라고 부름
    • RC 중에서 테스트를 통과하여 출시 할 수 있는 버전

• 모든 소프트웨어를 개발할 때마다 이 같은 단계를 전부 거쳐야 하는 것은 아님

• 규모, 난이도, 성격에 따라 다르게 정해야 함

  프로젝트 활동을 확실하게 관리하라

  프로젝트 성공 기준 마련

• 소프트웨어 프로젝트를 성공하기 위해서는 성공의 기준이 무엇인지를 파악

• 성공 기준?!

  • 자신의 관심사에 따라 다름
  • PM → 일정에 맞추어 프로젝트를 완료
  • 개발자 → 일정이 지연되더라도 기술적으로 보람이 있고 완성도가 높아야 함
  • 영업자 → 고객의 요구사항이 프로젝트에 제대로 반영되었는지의 여부

• 프로젝트 성공 기준의 사전적인 의미?

  • 10개월을 예상한 프로젝트가 8개월에 끝났다고 해서 성공적인 프로젝트는 아니다
  • 정해진 기능 이외에 다양하고 화려한 부가 기능을 추가했다고 성공적인 프로젝트는 아니다
  • 스펙대로 만들었다고해도 고객이 만족하지 못한다면 프로젝트가 성공했다 할 수 없다.

정해진 일정 안에 정해진 비용으로 정해진 품질의 제품을 만들어서 고객을 만족시킨다

• 프로젝트에 알맞게 성공 기준을 만들어 개발 계획서에 포함시킨 뒤, 프로젝트 참여자 모두가 알 수 있도록 해야함
  • 프로젝트 참여자들이 일정이 중요한지, 기술이 중요한지, 고객 만족이 더 중요한지에 대해 생각을 하게 되고, 프로젝트 팀이 더 효율적으로 움직이게 된다.

Referenced

• [소프트웨어 개발의 모든 것] 중, Chapter 2. 소프트웨어 개발을 성공으로 이끄는 법

정의

• Rails에서 제공하는 CRUD 구현 명령어 방식
• 뼈대, 기반이라는 뜻을 가지고 있으며, 이 뜻에 걸맞게 CRUD와 더불어 CRUD와 연관된 기본 기능들을 갖춘 프로젝트의 뼈대를 만들어 줌
• 기존에 작성했던 CRUD 코드보다 더 다양한 기능을 사용할 수 있는 코드를 완성할 수 있음

scaffold 실행하기

rails new scaffold_app
cd scaffold_app
rails g scaffold Post title:string content:text
rake db:migrate

• scaffold는 모델을 생성하는 명령어와 다르게 CRUD 기능을 하는 view와, controller, routes도 자동 생성하는 점에서 차이가 있음

config/routes.rb

Rails.application.routes.draw do
  root "posts#index"
  resources :posts
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

scaffold 이해하기1: RESTful과 resources

scaffold 자동 생성

• rails g scaffold Post title:string content:text 와 같은 명령어를 실행하면 해당하는 파일을 자동 생성해주며 명령어 하나로 active_record, 경로, 컨트롤러, 뷰파일, helper, jbuilder, assets 등이 자동으로 생성됨

active_record

• scaffold로 인해 생성한 Post 모델에 관한 부분

resource_route

• /config/routes.rb 파일에 추가된 경로

scaffold_controller

• scaffold controller 파일

erb

• 생성되는 뷰 파일들

jbuilder

• html 형태가 아닌 json 형태로 출력하기 위한 부분

assets

• scaffold에 필요한 scss나 script 요소들

이와 같이 Model, Controller, View 뿐만 아니라 디자인 요소까지 함께 만들어짐

config/routes.rb

Rails.application.routes.draw do
  root "posts#index"
  resources :posts
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

• resources :posts코드로 8개의 주소가 설정됨.
• resources 메서드는 RESTful한 라우트를 생성
• REST
  • Representational State Transfer의 약어로 주소(리소스)와 HTTP 메서드를 통해 그 동작의 의미를 표현하는 방법
  • HTTP 메서드의 조합으로 리소스를 어떻게 할 지 표현하는 방법

리소스의 제약조건

1. 리소스는 동사를 사용하지 않고 명사로 작성
   • 행위를 표현하지 않고 행위의 주체, 즉 자원만 표현
   • 행위 부분은 HTTP 메서드로 대신
2. 리소스는 콜렉션과 도큐멘트로 이루어짐
   • 콜렉션을 표현할 땐 복수형으로, 도큐먼트를 표현할 땐 단수형 또는 콜렉션 뒤에 id 값을 입력하여 표현

scaffold 이해하기2: controller

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit, :update, :destroy]

    [...]

  # GET /posts/1
  # GET /posts/1.json
  def show
  end

    [...]

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_post
      @post = Post.find(params[:id])
    end

    [...]
end

before_action

• 최상단의 before_action :set_post, only: [:show, :edit, :update, :destroy] 부분을 통해 filter 메서드인 것을 예상할 수 있음
• filter method
  • 특정 메서드를 액션 직전(before), 직후(after) 또는 모두(arround)에 실행시키는 메서드
• 액션 직전에 :set_post 실행
• :set_post 선언부

private
# Use callbacks to share common setup or constraints between actions.
def set_post
    @post = Post.find(params[:id])
end

• 라우트 파라미터를 통해 넘어오는 post의 id 값으로 특정 게시글을 찾아주는 역할 수행
• Rails의 controller에서 메소드를 만들면 action method로 생성
• action method는 액션의 이름과 동일하게 자동 생성된 view와 연결
• view와 연결을 원하지 않을 경우 최상단 블럭에 private 혹은 protected 선언

only: [:show, :edit, :update, :destroy]

before_action :set_post, only: [:show, :edit, :update, :destroy]
after_action :set_post
before_action :set_post, except: [:show, :edit, :update, :destroy]

• 지정한 action에서만 before_filter를 설정
• only 설정이 없으면 모든 action에서 filter 적용, except는 지정한 action 이외에 filter 적용

respond_to

def create
    @post = Post.new(post_params)

    respond_to do |format|
        if @post.save
            format.html { redirect_to @post, notice: 'Post was successfully created.' }
            format.json { render :show, status: :created, location: @post }
        else
            format.html { render :new }
            format.json { render json: @post.errors, status: :unprocessable_entity }
        end
    end
end

• 서버에서 응답의 종류를 분기하고 싶을 때 사용
• respond_to do | format | 내부 블록에서 format.type 형식으로 원하는 형식 지정

Strong Parameter

def create
    @post = Post.new(post_params)

    [...]
end

[...]

def post_params
    params.require(:post).permit(:title, :content)
end

• params.require(:post).permit(:title, :content)

  • 화이트리스트 방식으로 보안을 설정하는 코드
  • 모델 코드에서 사용자가 입력 가능한 속성을 명시
  • 사용자의 레벨 등 보안 이슈로 인해 입력하면 안 되는 정보들이 클라이언트 측에서 넘어오더라도 컨트롤러에서 그 속성을 명시하지 않았기 때문에 모델의 해당 컬럼은 변경되지 않음

• 설정 방법

  1. params.require(:모델명)으로 먼저 필터링할 모델 설정
  2. .permit(:허용할 컬럼 리스트)들을 작성

• 동작 방식

  1. 서버가 파라미터를 전달 받은 이후 params.require(:post).permit(:title, :content) 코드로 인해 전달 받은 파라미터 형식

  2. {title: "안녕", content: "하세요"}로 변경

  3. create action에서 아래와 같이 동작

     def create
      @post = Post.new(title: "안녕", content: "하세요")
     
      [...]
     end

scaffold 이해하기3: view

render

app/views/posts/new.html.erb

    <h1>New Post</h1>

    <%= render 'form', post: @post %>

    <%= link_to 'Back', posts_path %>
    ```

app/views/posts/edit.html.erb

    <h1>Editing Post</h1>

    <%= render 'form', post: @post %>

    <%= link_to 'Show', @post %> |
    <%= link_to 'Back', posts_path %>
    ```

    - `<=% render 'form', post: @post %>`는 뷰 헬퍼 코드로, 뷰에서 반복되는 부분이 존재할 때 반복되는 부분을 재사용하기 위해 사용
    - 반복되는 부분을 조각 템플릿(partial)로 만든 뒤 이를 메인 템플릿에서 호출하는 방식을 사용
    - prefix → '_'
    - 조각 템플릿 호출 → render 메서드 사용
    `<%= render "조각 파일명" %>`
    - 조각 파일 호출 및 변수 전달
    `<%= render "form", post: @post %>`와 같이 작성
        - post라는 변수에 @post의 값을 담아 _form 조각 파일에 전달

link_to

• link_to는 a tag의 뷰 헬퍼
• <%= link_to 'Back', posts_path %>
• <a href="/posts">Back</a>
  • Back a tag 감싸질 요소
  • posts_path 클릭 시 이동하는 주소
• Rails는 route에서 생성한 주소를 메서드화 하는데 사용 → 라우트 헬퍼

💡 라우트 헬퍼 확인하는 법

• [Terminal]로 확인하기
  1. rake routes 명령어 실행
  2. Prefix 데이터 → 라우트 헬퍼 확인
  3. Rails에서 사용하고 싶다면 끝에 _path 붙여 사용
• [브라우저]로 확인
  1. 주소/rails/info/routes로 접속

app/views/posts/index.html.erb

    <% @posts.each do |post| %>
        <tr>
            <td><%= post.title %></td>
            <td><%= post.content %></td>
            <td><%= link_to 'Show', post %></td>
            <td><%= link_to 'Edit', edit_post_path(post) %></td>
            <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        </tr>
        <% end %>

<td><%= link_to 'Show', post %></td>

• post
  • link_to 메서드에 모델 객체를 그대로 사용하면, Rails는 코드를 작성했다는 가정을 하고 그 모델의 특정 데이터를 바라보는 멤버 주소를 호출
  • /posts/:id 주소로 이동

<td><%= link_to 'Edit', edit_post_path(post) %></td>

• edit_post_path(post)는 edit_post_path에서 :id 라우트 파라미터르 받아옴
• edit_post_path(post.id)로 작성 가능

form_with

• form의 뷰헬퍼
  app/views/posts/_form.html.erb

    <%= form_with(model: post, local: true) do |form| %>
      <% if post.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

          <ul>
          <% post.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
          </ul>
        </div>
      <% end %>

      <div class="field">
        <%= form.label :title %>
        <%= form.text_field :title %>
      </div>

      <div class="field">
        <%= form.label :content %>
        <%= form.text_area :content %>
      </div>

      <div class="actions">
        <%= form.submit %>
      </div>
    <% end %>

form_with

• form_authenticate_token과 같이 Rails에서 form을 사용할 때 필요한 설정을 자동 설정
• Model 속성에 모델 객체의 값으로 action과 method를 설정

form_with(model: post, local: true)

• form 요소인 action과 method를 설정
• post는 new 액션 → Post.new, edit 액션 → Post.find(params[:id])

Reference

• groomEdu 한 눈에 읽는 루비 온 레일즈

CRUD

• Create, Read, Update, Destroy의 약자
• 생성, 읽기, 수정, 삭제 기능을 담당

ORM

• Object Relational Mapping의 약어
• DB 테이블의 관계형 데이터와 객체형 데이터를 연결
• DB에 있는 테이블을 클래스화하고 데이터 조작 및 SQL 명령어들을 메서드화

1단계: Model class 생성

$ rails g model Post

• rails g model [모델명]으로 작성된 명령어
• 모델명 → 단수형의 CamelCase

1. db/migrate/xxx_create_posts.rb
   • 데이터베이스 테이블 필드 등의 정보를 정의할 수 있는 마이그레이션 파일
2. app/model/post.rb
   • Rails에서 사용할 model
   • 1번 마이그레이션을 통해 생성된 posts 테이블과 연결해서 사용

CoC Naming Rules

1. 모델 클래스의 규칙은 단수형의 CamelCas
   • 첫 글자는 대문자로, 띄어쓰기는 생략하고 그 다음에 오는 문자는 대문자로 설정
   • ex) POST, PostComment
2. 모델 클래스의 파일 이름은 단수형의 snake__case를 사용
   • 첫 글자는 소문자로, 띄어쓰기 대신 '_'를 사용
   • ex) post.rb, post_comment.rb
3. 테이블의 복수형은 snake_case임
   • 복수형이라해서 단순하게 모든 단수형에 s만 붙이지 않음
   • Person이라는 모델을 만들면 table명은 people로 변환
   • ex) posts, post_comments

2단계: 마이그레이션 파일에서 테이블 정보 작성

• Post 모델에 글 제목을 저장할 title 컬럼과 글 내용을 저장할 content 컬럼 생성

db/migrate/&&&&&&&_create_posts.rb

class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|
            t.string :title
            t.text :content

      t.timestamps
    end
  end
end

3단계: 마이그레이션 파일로 테이블 생성

$ rake db:migrate

db/schema.rb

ActiveRecord::Schema.define(version: 2019_09_30_170541) do

  create_table "posts", force: :cascade do |t|
    t.string "title"
    t.text "content"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

end

• ActiveRecord::Schema.define(version: 2019_09_30_170541) do를 통해 version을 확인하면 timestamp가 보이는데 이 부분은 현재 실행된 마이그레이션 파일의 timestamp임

create, read 하기

• 생성할 페이지 안내
  1. 모든 글을 보는 페이지 → index
  2. 글 작성 form 페이지 → new
  3. 상세 페이지 → show
• 생성할 action
  1. index
  2. new
  3. create (글 작성 액션)
  4. show

1단계: CR을 할 controller, action 생성

$ rails g controller posts index new create show

• 자동으로 routesm controller, view 설정
• create는 view가 필요하지 않으므로 app/views/posts/create.html.erb 삭제

2단계: index 만들기 (route, action, view 설정)

config/routes.rb

Rails.application.routes.draw do
  # root 주소 추가
  root 'posts#index'
  get 'posts/index'
  get 'posts/new'
  get 'posts/create'
  get 'posts/show'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

• root 'posts#index'로 초기 주소 설정

app/controllers/post_controller.rb

class PostsController < ApplicationController
  def index
        @posts = Post.all
  end

    [...]
end

• @posts = Post.all 코드로 모든 Post 모델의 데이터를 @posts로 대입
• all 메서드 → SELECT * FROM [테이블명]을 실행 후 테이블의 모든 값들을 모델 객체의 배열(ActiveRecord_Replation)로 리턴

app/views/posts/index.html.erb

<a href="/posts/new">새 글 작성</a>
<hr/>
<table border="1">
    <tr>
        <th>id</th>
        <th>제목</th>
        <th>내용</th>
        <th>생성일</th>
        <th>수정일</th>
    </tr>
    <% @posts.each do |post| %>
        <tr>
            <td><%= post.id %></td>
            <td><%= post.title %></td>
            <td><%= post.content %></td>
            <td><%= post.created_at %></td>
            <td><%= post.updated_at %></td>
        </tr>
    <% end %>
</table>

• @posts 객체 배열의 내용을 순서대로 출력하기 위해 → each 메서드 사용
• <%= %> erb 파일에서 Ruby 코드를 실행하지만 출력하지 않을 때 사용 (조건문, 반복문, 변수 할당 등)

3단계: new 만들기 (route, action, view 설정)

app/views/posts/new.html.erb

<h4>
    새 글 작성
</h4>
<form action="/posts/create" method="POST">
    <input name="authenticity_token" value="<%= form_authenticity_token %>" type="hidden">
    <input type="text" name="title">
    <br/>
    <textarea name="content"></textarea>
    <button>
        제출
    </button>
</form>

• <input name="authenticity_token" value="<%= form_authenticity_token %>" type="hidden"> 코드는 CSRF 공격을 대응하는 코드
  • CSRF
    • 크로스 사이트 요청 위초, 웹사이트 취약점 공격
    • 사용자의 권한 이용, 사용자의 의지와 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하게 하는 공격
• POST, PUT, DELETE 등의 HTTP 메서드로 요청보낼 때 자동으로 난수화된 토큰을 생성하여 함께 전송
• 토큰 일치여부에 따른 요청 처리 방식

config/routes.rb

Rails.application.routes.draw do
  get 'posts/index'
  get 'posts/new'
  post 'posts/create'
  get 'posts/show'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

• get 'posts/create' 코드를 post 'posts/create'로 변경
• 데이터 저장 요청은 HTTP post 메서드 사용에 더 적합

4단계: create 만들기

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  [...]

  def create
      Post.create(title: params[:title], content: params[:content])
      redirect_to "/posts/index"
  end

  [...]
end

• Post.create(title: params[:title], content: params[:content]) 코드를 통해서 입력 받은 title과 content의 게시글(Post 모델의 데이터) 생성
• redirect_to "/posts/index"로 데이터 생성 후 페이지 이동

5단계: show 만들기

app/views/posts/index.html.erb

<a href="/posts/new">새 글 작성</a>
<hr/>
<table border="1">
    <tr>
        <th>id</th>
        <th>제목</th>
        <th>내용</th>
        <th>생성일</th>
        <th>수정일</th>
        <!-- 추가 -->
        <th>링크</th>
        <!-- 추가 끝 -->
    </tr>
    <% @posts.each do |post| %>
        <tr>
            <td><%= post.id %></td>
            <td><%= post.title %></td>
            <td><%= post.content %></td>
            <td><%= post.created_at %></td>
            <td><%= post.updated_at %></td>
            <!-- 추가 -->
            <td><a href="/posts/show/<%= post.id %>">보기</a></td>
            <!-- 추가 끝 -->
        </tr>
    <% end %>
</table>

• <a href="/posts/show/<%= [post.id](http://post.id) %>">보기</a>주소를 /posts/show/<%= post.id %>로 설정한 이유
  • 상세페이지는 라우트 파라미터 방식으로 특정 데이터의 id를 보내기 때문에 이와 같이 작성함

config/routes.rb

Rails.application.routes.draw do
  get 'posts/index'
  get 'posts/new'
  post 'posts/create'
    # 추가
  get 'posts/show/:id' => "posts#show"
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

• get 'posts/show/:id' => "posts#show" 코드로 라우트 파리미터 정의
• posts/show/ 뒤에 따라오는 문자는 id에 대입된 뒤 컨트롤러에 전달
• 라우트 파라미터 정의하는 방식
  • routes.rb에서 주소 정의 부분에 ':변수명' 규칙을 지켜 작성
  • posts/:post_id/comments/:comment_id 방식처럼 라우트 파라미터 변수를 여러개 추가하는 것이 가능함

app/controllers/posts_controller.rb

class PostsController < ApplicationController
    [...]

  def show
      @post = Post.find(params[:id])
  end
end

• @post = Post.find(param[:id]) 라이트 파라미터 방식으로 넘어온 :id 값을 param[:id]로 추출
• ex) "/posts/show/1" → params[:id] 는 1이됨
• :id 값을 추출한 뒤 모델의 find 메서드로 넘어온 id값을 Post 모델에서 검색, 결과를 @post에 저장
  • find(val) 메서드
    • SELECT * FROM [테이블명] WHERE id=val;을 실행

app/views/posts/show.html.erb

<p>
    title : <%= @post.title %>
</p>

<p>
    content : <%= @post.content %>
</p>

<a href="/posts/index">Back</a>

update, destroy 하기

• 생성할 action 안내
  1. edit
  2. update (글 수정 액션)
  3. destroy (글 삭제 액션)

1단계: edit 만들기

app/views/posts/index.html.erb

<a href="/posts/new">새 글 작성</a>
<hr/>
<table border="1">
    <tr>
        <th>id</th>
        <th>제목</th>
        <th>내용</th>
        <th>생성일</th>
        <th>수정일</th>
        <th>링크</th>
    </tr>
    <% @posts.each do |post| %>
        <tr>
            <td><%= post.id %></td>
            <td><%= post.title %></td>
            <td><%= post.content %></td>
            <td><%= post.created_at %></td>
            <td><%= post.updated_at %></td>
            <td>
                <a href="/posts/show/<%= post.id %>">보기</a> 
                <a href="/posts/edit/<%= post.id %>">수정</a>
            </td>
        </tr>
    <% end %>
</table>

• 글을 수정하는 form을 만들기 위해 글의 정보가 필요하니 edit의 route 주소에 id 값이 필요함

config/routes.rb

Rails.application.routes.draw do
  get 'posts/index'
  get 'posts/new'
  post 'posts/create'
  get 'posts/show/:id' => "posts#show"
    # 추가
  get 'posts/edit/:id' => "posts#edit"
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  [...]

  def edit
      @post = Post.find(params[:id])
  end

end

• @post = Post.find(params[:id])를 통해 특정 게시글을 가져옴

app/views/posts/edit.html.rb

<h4>
    기존 글 수정
</h4>
<form action="/posts/update/<%= @post.id %>" method="POST">
    <input name="authenticity_token" value="<%= form_authenticity_token %>" type="hidden">
    <input type="text" name="title" value="<%= @post.title %>">
    <br/>
    <textarea name="content"><%= @post.content %></textarea>
    <button>
        수정
    </button>
</form>

• <input type="text" name="title" value="<%= @post.title %>"> 기존 title 값 추가
• <textarea name="content"><%= @post.content %></textarea> 기존 content 글 → input과 textarea에 추가

2단계: update 하기

config/routes.rb

Rails.application.routes.draw do
  [...]
  post 'posts/update/:id' => "posts#update"
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

app/controllers/post_controller.rb

class PostsController < ApplicationController
  [...]
  def update
      @post = Post.find(params[:id]) #기존 글 검색        
      @post.update(title: params[:title], content: params[:content]) #글 수정
      redirect_to "/posts/show/#{@post.id}" #수정된 게시글 확인을 위해 이동
  end
end

• 큰 따옴표("")로 감싼 문자열 안에 변수값을 포함할 수 있음
• 코드 중간에 등장한 #{} 안에 변수명을 입력하면 문자열 안에 값이 포함됨

3단계: destroy 만들기

config/routes.rb

Rails.application.routes.draw do
    [...]
  get 'posts/destroy/:id' => "posts#destroy"
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

app/views/index.html.erb

<a href="/posts/new">새 글 작성</a>
<hr/>
<table border="1">
    <tr>
        <th>id</th>
        <th>제목</th>
        <th>내용</th>
        <th>생성일</th>
        <th>수정일</th>
        <th>링크</th>
    </tr>
    <% @posts.each do |post| %>
        <tr>
            <td><%= post.id %></td>
            <td><%= post.title %></td>
            <td><%= post.content %></td>
            <td><%= post.created_at %></td>
            <td><%= post.updated_at %></td>
            <td>
                <a href="/posts/show/<%= post.id %>">보기</a> 
                <a href="/posts/edit/<%= post.id %>">수정</a>
                <!-- 코드 추가 -->
                <a href="/posts/destroy/<%= post.id %>">삭제</a>
            </td>
        </tr>
    <% end %>
</table>

• destroy 메서드를 실행하면 id로 검색했던 @post의 데이터를 Post 모델에서 삭제

app/controllers/post_controller.rb

class PostsController < ApplicationController
  [...]
  def destroy
      @post = Post.find(params[:id])
      @post.destroy
      redirect_to "/posts/index"
  end
end

• destroy는 SQL에서 DELETE FROM [테이블명] WHERE 조건; 쿼리를 실행하는 것과 같음

Reference

• groomEdu 한 눈에 읽는 루비 온 레일즈

파일 구조가 복잡한 이유? 🙋

• COC(Convention over Configuration)의 특징을 가지고 있기 때문에 구조를 이루는 요소 각각은 저마다 알맞는 역할을 수행하기 위해 준비됨

구조 설명

1. app/controllers

• app 디렉토리의 하위 디렉토리인 controllers 안에 생성되는 파일은 Rails의 MVC 패턴에서 controller에 해당하는 코드가 담겨있음

2. app/views

• app 디렉토리의 하위 디렉토리인 view에는 MVC 패턴에서 view에 해당하는 코드가 들어감. Rails에서는 view는 controller 내부의 action과 일대일 매칭되어 설정됨

3. app/models

• app 디렉토리의 하위 디렉토리인 models는 Rails MVC 패턴에서 model 역할을 수행함. 내부적으로 설정된 데이터베이스와 연동되어서 관련 테이블을 class화 시킨 것이 model이라고 생각하면 됨

4. config/routes.rb

• config 디렉토리에 포함되어 있는 routes.rb 파일은 클라이언트에서 요청하는 URL을 특정 controller의 action과 매칭함

5. db/migrate

• 사용자가 model을 사용하려면 Rails 프로젝트와 연결된 데이터베이스에 실제로 테이블을 생성해야 함. 실제 테이블을 만들기 위한 코드들은 db 디렉토리의 하위 디렉토리인 migrate에 파일 형태로 생성.

6. db/schema.rb

• 실제로 데이터베이스에 테이블이 생성되면 Rails 프로젝트의 db 디렉토리 하위에 생성되는 파일

7. vendor/Gemfile

• Ruby에서 라이브러리를 Gem이라고 부르는데 vendor 디렉토리 하위에 포함되는 Gemfile에 작성하여 Rails 프로젝트에 추가할 수 있음.

첫 페이지 만들기

1단계 : Controller 생성

# 터미널 실행 후
& rails generate controller home

• 여기서 generate는 g로 축약 가능함

1. 명령어를 실행 → app/controllers/home_controller.rb 가 생성

2. index action과 연결할 view 생성

   • app/views/home 디렉토리에서 위에서 생성한 index action과 동일한 이름을 가진 index.html.erd 파일 생성

   📌 html.erb 파일은 일반 html에 ruby 문법을 사용할 수 있도록 루비를 임베드함 view 디렉토리의 하위 디렉토리는 controller 이름과 동일하게하고 디렉토리 안에 포함된 파일 이름은 action 이름과 동일하게 맞추면 자동으로 연결됨

2단계 : Controller 코드 작성

home_controller.rb

class HomeController < ApplicationController
    # 코드 추가 시작
  def index
  end
    # 코드 추가 끝
end

• def 와 end 사이에 있는 내용을 action이라고 부르며 이름이 동일한 view와 자동 매칭함
• Rails에서 action은 서비스에서 동작할 수 있는 행동으로, 행동은 사용자가 볼 수 있는 페이지 또는 동작하는 하나의 로직이 될 수 있음

3단계 : View 코드 작성

index.html.erb

<h1>
    hello rails world!!
</h1>

4단계 : Route 설정

config/routes.rb

Rails.application.routes.draw do
    # 코드 시작
  get "home/index" => "home#index"
    # 코드 끝
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

• 위 코드에서 get "home/index" => "home#index" 는 아래의 규칙을 기반으로 작성됨
• [HTTP method] "uri" ⇒ "controller#action"

👄 "주어진 규칙을 통해 "home/index" 주소에 get 방식으로 요청하면 home 컨트롤러의 index action으로 연결하라"고 해석할 수 있음

"/" root 주소로 접근

config/routes.rb

Rails.application.routes.draw do
    # 코드 시작
  root "home#index"
    # 코드 끝
  get "home/index" => "home#index"
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

• 위 코드에서 root "home#index"는 다음과 같은 규칙을 기반으로 작성됨
• [root 주소] controller#action

👄 "root 주소, 즉 "/" 이 주소로 요청하면 home controller의 index action으로 보내라"는 의미

페이지 이동하기

페이지 이동 선행 설정

1. route에서 두개의 다른 주소를 요청 받을 수 있도록 설정
2. controller에서 두 개의 페이지를 만들 수 있도록 action 두 개 생성
3. view에서 페이지를 서로 이동할 수 있게 a tag로 연결하기

2단계: controller에서 두 개의 페이지를 만들 수 있도록 action 두 개 생성

$ rails g controller home index next

• rails g controller에 이어 controller 이름을 작성한 뒤 뒤이어 추가 이름 작성하면 그 이름들은 action 이름으로 지정됨

• app/controllers/home_controller.rb 파일 생성

    class HomeController < ApplicationController
      # 자동 생성
      def index
      end
  
      def next
      end
    end    

• controller와 action이 연결될 route 주소를 자동으로 설정

Rails.application.routes.draw do
  get 'home/index'
  get 'home/next'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

3단계: view에서 페이지를 서로 이동할 수 있게 a tag로 연결하기

• route와 마찬가지로 controller를 만들 때 action을 함께 생성하면 해당 action과 매칭되는 view 또한 자동 생성됨

app/views/home/index.html.erb

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<a href="/home/next">home/next로 이동</a>

app/views/home/next.html.erb

<h1>Home#next</h1>
<p>Find me in app/views/home/next.html.erb</p>

<a href="/home/index">home/index로 이동</a>

• 페이지의 이동 링크의 각각의 주소는 우리가 route.rb에서 자동으로 생성한 주소로 만듦
• config/routes.rb 파일 수정을 통해 root 설정

    Rails.application.routes.draw do
        root 'home#index'
      get 'home/index'
      get 'home/next'
    end

서버로 데이터 전달

1. form을 통해 서버(controller#action)로 데이터 전송
2. action에 있는 데이터를 연결된 뷰로 전달하여 출력

1단계: 두개의 페이지(form, next) 생성

$ rails g controller home form next

• 터미널을 실행하면 자동으로 routes, controller, view에서 form, next 설정이 완료

2단계: form view에서 next action으로 데이터 전송

app/views/home/form.html.erb

<h3>
    데이터 전송하기
</h3>

<form action="/home/next" method="GET">
    <input type="text" name="data_1">
    <button>
        제출
    </button>
</form>

• config/routes.rb에 있는 get 'home/next' 코드로 인해 form에서 작성한 데이터는 home controller의 next action으로 전달됨

3단계: form에서 보낸 데이터를 next action에서 view로 전달

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def form
  end

  def next
     @data = params[:data_1]
  end
end

• @data = params[:data_1]를 통해 form에서 보낸 데이터 수신

• params는 클라이언트에서 보낸 요청 정보를 확인하는 메서드

• params로 추출할 수 있는 데이터

  params로 추출할 수 있는 데이터

  • 쿼리 파라미터의 경우 params를 통해 data를 추출함
  • @data 형태의 인스턴스 변수로 생성

4단계: next action에서 보낸 데이터 출력

app/views/home/next.html.erb

<h3>
    받은 데이터
</h3>

<p>
    <%= @data %>
</p>

• <%= @data %>
  • <%= %> erb 파일에서 사용할 수 있는 문법으로 화면 출력이 가능함
• next action에서 정의했던 @data는 next action과 view를 연결함으로써 view에서 사용할 수 있음

Reference

• groomEdu 한 눈에 읽는 루비 온 레일즈

라이브러리

• 개발 생산성을 높이기 위해 사용
• 반복적으로 사용할 로직을 보편적으로 사용할 수 있도록 라이브러리에 묶어 놓고 필요할 때마다 꺼내어 사용

프레임워크

• 정형화 되어있는 뼈대, 구조
• 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용할 수 있게끔 일련의 협업화된 형태로 클래스를 제공하는 것
• 프로그램의 뼈대가 되는 기반 코드와 설정이 이미 존재하여 그 기반을 토대로 개발자가 원하는 기능을 추가할 수 있는 라이브러리가 통합됨
• 프로그램이 정상적으로 동작하기 위해 존재하는 가이드라인

Ruby on Rails란?

• Ruby로 개발된 오픈소스 웹 프레임워크

Ruby on Rails의 특징

1. Convention Over Configuration(설정 보다는 규칙)
   • 개발자가 설정해야 할 요소는 줄이고, 규칙을 제공하여 빠른 개발을 가능하게 함
   • Rails에서 미리 제공하는 규칙을 지키며 개발하면, 개발자는 정말 필요한 개발 작업에만 집중할 수 있음
   • 초기 Rails의 규칙에 대해 이해해야 하므로 초기 진입 장벽이 높다고 느낄 수 있음
2. Don't Repeat Yourself (DRY)
   • 같은 코드를 반복하지 마라!
   • 사용자가 코드 작성 또는 설정 세팅을 반복하지 않도록 다양한 자동화 옵션을 제공

Rails MVC

1. Model
   • 모델은 어플리케이션의 정보, 데이터 및 정보와 데이터를 가공하는 규칙까지를 지칭
   • 데이터베이스 테이블과 상호 작용하는 규칙을 관리
2. View
   • View(뷰)는 사용자가 보는 화면, 즉 인터페이스 부분을 지칭
3. Controller
   • Controller(컨트롤러)는 Model과 View를 연결
   • View에서 사용자가 보낸 요청을 처리, 비즈니스 로직이 필요할 때 Model에서 호출하는 방식으로 사용

MVC 패턴은 유저 인터페이스와 비즈니스 로직을 분리하여 가각의 요소를 수정할 때 서로 영향을 끼치지 않는 장점을 가지고 있고, DRY를 유지하고 코드를 관리하는 데 있어서 편이성을 지니고 있음

Reference

• groomEdu 한 눈에 읽는 루비 온 레일즈

드디어 23일정도의 기간으로 스터디룸용 맵을 만들었다.. 그래서 에너지를 아끼기 위해 맵 만드는 과정은 과감히 생략하고 결과만 올리겠다.

대충 아래 링크에서 보고 진행했다. 공식 게더 타운 가이드 링크 참고하기 -> https://support.gather.town/help

최대한 게더타운에서 제공하는 기존 템플릿으로 작업하려 했는데, 하다보니 도저히 기본 샘플로 만들 수 없어서 몇몇 맵은 커스텀으로 제작했다. 직장 동료 디자이너랑 협업하는 과정에서 어깨넘어로 봤던 피그마툴로...

일단 맵 이름 🤷🏻‍♂️

영국의 공리주의 제레미 벤담이 고안한 감옥 건축 양식 이름이 문득 생각났다. 너의 이름은.. Panopticon 내부 구조는 파놉티콘이 아니지만 그냥 네이밍 그렇게 정하기로함...

그 다음 공간 분리하기

• 공간은 크게 4개 공간으로 나누었다!!
  1. 입장
  2. 로비
  3. Fast Zone(오롯히 집중을 하기 위한 사람들만 모인 곳)
  4. Slow Zone(Fast zone보다 덜 숨막히고 유함 - 대충 디자인만 자연 🤔..)

자자 선수 입장 ~!

입장 했을 때(최초 방 입장)

• 정말 순수하게 게더 타운 기본 템플릿으로 만들었다. 아래로 쭈욱 내려가면 본 건물 등장하는데, 입장하는 사람을 위한 별도의 안내서를 만들어야 할 지 고민이다..

  로비

  작업 전

  

지금봐도 숨막히는 기본 템플릿, 후우... 기존 템플릿으로 하다가 욕심이 났음... 🥴

작업 후

그래서 싹 갈아줬다... 😮 이게 되네?

• 게더 타운에서는 기본 맵 리소스 이외의 백그라운드 작업을 할 수 있다.
• Background image를 내려받아 Figma에서 불러오고 작업을 진행했다.
• 그 다음 map maker에서 upload image하면 지금 맵에서 덮어 씌어진다.
• 참고 문서 링크 -> https://support.gather.town/help/custom-map-overview

제일 많이 손이 갔던 공간이었다.. 맨 위의 나무 바닥 제외하고 벽면, 바닥을 차도처럼 작업해봤다.

Fast zone, Slow zone 고퀄 벽지는 다운로드 받은 이미지이다.

벽지... 앤티크 인테리어 참고했고, 맨 아래 외부 벽면은 나름 그래피티 넉낌 주려고 한건 의도처럼 보였는지 모르겠다...

Fast Zone 🏃‍♀️

로비에 너무 힘을 쓴 탓에, 여기서 부터 넉아웃 된 것 같다 🤣 오브젝트 배치, 일부 배경 수정을 진행했다. 바닥 패턴도 벽지도 Figma로 그렸다

그래도 막상 캐릭터로 탐방해보니, 한쪽 벽면은 통 유리창 느낌으로 작업해 봤는데 나름 느낌이 괜찮아서 다행이다.. (외부 이미지는 다운로드 이미지임)

Slow Zone 🌿

이 공간은 시간을 너무 지연하면 안 될것 같다는 압박감(?)에 gather town github에서 이미지를 구해서 object 배치만 진행했다.

• 참고 링크 -> https://github.com/gathertown/mapmaking

개인적으로 너무 맘에 들었던 템플릿이었다.. 위에 그림 짤렸는데 더 이쁘다.. 맵 이름은 "allhandsPosters"로 이 역시도 다운 받아서 게더 타운 맵 메이커에 upload하는 방식으로 진행했다.

혹시나 하는 마음에 돌 노가다를 통해서 '나 길이야'를 표시해뒀다.

결론🚪

• 웬만하면 기본 템플릿 잘 찾아서 쓰기...(니들은 이런거 하지마라)
• 맵 만들었으니까 운영 계획 확립, 출석체크 기능, 노션 페이지 만들어서 스터디 모집 인원에 대한 안내 작성하기.. 할거 많네 ㅠㅠ
• 나름 불안함을 극복하고자, 시작했던 작업들.. 부디 유의미한 작업이었길... 🙏
• 스터디 인원 빨리 모으자...!

스타트업 다니면서 재택근무를 할 때, 문득 게더타운이라는 플랫폼을 동료에게 소개받았다. 그때 당시에는 픽셀 그래픽으로 게임처럼 캐릭터 커스터마이징도 가능하고 엄청 참신하다고 생각했다.(😃 그냥 개취였음)

수치적으로 봤을 때 게더타운은 311억원의 투자를 유치하면서도 1년도 안되서 170배가 넘는 투자금을 유치했다고 한다. 진심 어마어마함..

이렇게 게더타운은 흔히 말하는 메타버스의 역사에 한 획을 긋는 플랫폼이 되는데...

각설하고 그 이후로, 가끔 회사에서 코로나 이슈때문에 재택근무를 권할 때 종종 사용하곤 했음 이게 뭐라고 진짜 집중 잘됨..

이렇게 활용을 한다고 한다...

각종 커뮤니티 글을 보면 지금처럼 코시국에서는 재택 근무 뿐만 아니라 공부를 하는 사람들도 모여서, 마치 유튜브의 스터디 위드미 혹은 공스타그램처럼 소규모 인원을 모집하고 손 인증 화면 공유를 킨다고 들었다.

메타버스 코인 타기

그래서 !! 나도 공부를 더 효과적으로 진행하기 위해서, 취업을 준비하거나 혹은 자기 계발을 위한 분들을 위해서 방을 만들고 운영하는 계획을 진행하고자 한다. 개인적으로 모각코를 장기적으로 경험도 했고, 활용할 게 많은 것 같다고 생각해서 ㄱㄱ

계획

1. 맵 만들기
2. 기능 추가
   • 출석체크
   • 방명록
3. 인원 타겟층 설정 - 미확정
4. 인원 모집 및 운영 규정 확립 - 노션 홍보 만들기

   인원 타겟층 설정 고민 포인트

   인원 타겟층 설정(모각코, 독서실)

• 공통 니즈 가설
  • 혼자하는 것이 싫어서 메타버스를 통해 같이하는 분위기 형성
  • 동기부여 및 자극을 얻는다.

1. 모각코라면, 서로 TIL 발표를 통해서 인사이트, 동기부여, 자극 느낌
   • 발표를 꺼려하는 사람이 있을 수 있다
   • 인사이트 공유를 한다면, 특정 취준생에게는 이외의 시간(이력서 작성, 개인 브랜딩)이 없을 수 있다
2. 독서실이라면, 진짜 스터디룸 처럼 설계
   • 여타 오프라인 스터디룸 참고
     • Slow, Fast zone 분류해서 운영
   • 인사이트를 얻고 싶은 같은 분야의 사람들은 slow zone으로, 아닌 사람들은 fast zone으로 분류
   • 이게 낫겠다 싶다

실행

글로 정리하니까 결정이 됨... 실행하자 바로 지금...

PS. 오조 오억년 만에 블로그를 쓰는 데, 게더타운이 복귀 첫 글이 될 줄이야...

생각해보니 나의 역경은 정말 축복이었다. 가난했기에 '성냥팔이 소녀'를 쓸 수 있었고, 못생겼다고 놀림을 받았기에 '미운 오리 새끼'를 쓸 수 있었다. 동화작가 안데르센

📭 여는 말

웹 개발자로 인턴 시작 후, 블로그를 오랜만에 작성해본다. 노션이라는 플랫폼을 접하고 블로그에 너무 소홀하지 않았나 싶지만 나의 블로그, 나의 공간에 나의 이야기를 쓰는 것이 맞다고 생각했다. 이 글을 시작으로 매년 회고록을 작성해 볼 계획이다.

💼 첫 직장

대학 졸업 후, 교수님의 추천을 받아 B2B 기반 전자 교육 컨텐츠(e-learning)를 제작하는 것으로 직장 생활을 시작했다. 이제는 브라우저에서도 지원하지 않는 어도비 툴로 콘텐츠를 제작해서 제작물을 영상으로 변환하여 납품을 하거나, .swf 확장자의 파일을 import해서 웹 환경에서 제공하는 일을 했다. 그 당시 빠른 트렌드를 반영하는 B2B 온라인 교육 업계에서는 HTML5, CSS3와 javascript(ECMA5) 혹은 완전한 영상물로 전환을 하는 시기였으므로 내부 회사에서는 마크업을 개인적으로라도 관심을 가져라라는 분위기였다. 직원들과의 관계는 너무 좋았기 때문에 정상 근무 후에도 스터디 그룹을 가져서 과제를 내주고 돌아가면서 발표하기로 했다.

그때쯤 내가 '웹'이라는 영역 자체를 좋아하기 시작했다. 주말에 시간 쪼개어가며 html과 css 기초 과목을 등록했고, 웹 개발자 도구를 처음 사용하면서 관심에 극에 달했다.

이 시기에 회사가 많이 어려워져 버티지 못하는 상황이 왔고, 웹에 관심이 많아하던 나를 눈여겨본 퇴직한 직장 상사는 웹 영역에 근접하는 다른 회사를 추천해줬다.

🏋️‍ 첫 이직

첫 회사보다는 안정을 찾기를 바랬고, 원하는 분야에 더 근접하는 실무 환경을 가질 수 있다는 기대를 가지고 이직을 했다. 이직한 회사는 디지털 교과서 컨텐츠를 제작하는 회사로, 첫 회사보다는 거래하는 주 고객사가 안정적이고 나의 실무 경험도 좋게 쌓을 수 있을 듯 했다. 물론 이 회사도 CD로 납품하는 콘텐츠는 플래시였으므로 메인 장기 프로젝트는 혼자서 맡고 서브 단기 프로젝트는 웹 퍼블리싱 업무를 맡았다.

퍼블리싱 업무를 진행하는 도중, 특정 사용자의 데이터를 고객사 DB에 전달하고 API를 호출하는 부분이 있었고, 그때부터 업무 진행 중에 보여지는 화면 말고도 formdata가 어디로 전달되며, 무언가 호출해서 화면에 다시 보여지는 과정이 뭘까? 화면 뒷단에서는 어떤 요청과 응답을 주고 받는 걸까?

'왜? 왜 그렇게 될까?' 지적인 호기심이 가득차 MDN 공식 문서를 들여다 볼 때, 디지털 교과서 사업 지원금이 부족해서 고객사뿐만 아니라 회사도 어려워지는 상황이 되었고 2년간의 커리어는 막을 내렸다.

🧐 관심, 흥미에서 진로까지

내가 여태까지 직장생활을 하면서 스스로에게 내뱉었던 질문들은 행동으로 이어지지 않았다.

절실하지 않았을까? 정말하고 싶던게 아니였을까?

그 동안 회사에 쏟았던 에너지와 나의 지난 날을 돌아보고 답을 얻기까지는 그리 오래 걸리지 않았다.

누구는 말한다. 진로 선택에 있어서 '도피처'가 되어서는 안된다고. 누구는 말했다. 내가 선택한 이 길이 쉽지 않을거라고.

물론 이 길이 기초부터 탄탄하지 않으면, 걸음마조차 내딛을 수 없다고 생각했다. 나 자신에게 증명해보이고 싶은 목표(개발)를 선정했다.

💪 첫 번째 도전

이 역시, 전 직장에서 개발자 출신의 임원에게 자문을 구했다. 나의 첫번째 목표는 막연하게 자격증 취득으로 정했다고 말했으나(지금 생각하면 너무나도 막연함😳), 돌아오는 답은 개발 커리어로 큰 이점은 아니고 공무원을 지원하지 않는 이상 도움이 되지 않을거라고 답했다. 지금도 생각하지만, 첫 번째 도전은 결코 조금이나마 진로에 도움이 되는 것을 기대하지도 않았다. 물론 취득하면 좋긴 하지만 우선순위는 아니였다.

결론은 첫 걸음 도전 목표는 달성했다.

필기에 비해 실기가 많이 걱정됐지만 결과는 필기에 비해 실기에서 높은 점수를 받았다. 자격증에는 CS 기초 지식 문제도 있었기에, 교육 기관(학원) 등록 후 시험에 출제되는 언어 기초와 병행하여 공부를 했다.

🏬 교육 기관 선정

😭 아쉬움

• 커리큘럼
  • 흠... 좀 오래된 표준을 배웠다. 이미 발 빠른 기업에서는 사용하지 않는 표준, 관례고 업무 효율성, 성능으로 따져봤을 때에도 좋지 않은 표준이였다.
• 사이드 프로젝트
  • 오늘 배운 내용을 '정리'에 관점을 두지 않고 배운 내용을 '응용'하여 사이드 프로젝트를 뭐든 시작했다면, 자문 구할 사람도 있고 내가 프로젝트를 진행하다가 '도저히 안되겠다.' 싶은 건 바로 자문을 구할 수 있었을 텐데.. 아쉬웠다.
• 기억보다는 기록을
  • TODO list, TIL등 전략적인 계획의 부재가 아쉬움

    😮‍💨 그래도 얻은 것

• 규칙적인 학습 패턴
  • 혼자 독학으로 공부를 했다면, 나처럼 생활패턴이 불규칙적인 사람은 마이너스인 요소지만 일정한 생활패턴을 가져올 수 있다는 것은 무시할 수 없는 장점이다.
• 무엇보다 '다 같이'
  • 혼자가 아닌 여럿이 같이 집중하고, 같이 무언가를 한다는 건 분야를 막론하고 큰 시너지 효과를 얻을 수 있다.
• 열정적인 담당자
  • 오래된 표준을 배웠긴 했으나, 강사님이 귀찮아하는 기색없이 개인적인 질의응답에도 잘 알려주셨다. 이외에 동기부여, 자존감도 많이 push 해주셨다.

    👥 첫 팀별 프로젝트

    2020년 첫 해가 막 시작했을 무렵에 교육 기관내 팀을 꾸려 첫 프로젝트를 진행했다.

    INFO

    기간: 2주 주제: 도시락 판매 쇼핑몰 협업: github 스펙: Java, Spring framework, MyBatis, Oracle

    CO-WORK

    팀원 내 개개인이 어떤 역할을 맡고 있는지, 데드라인이 언제까지인지 시각적으로 각인시켜줬으며 구글 스프레드시트로 타임 테이블을 만들고 매일 아침에는 Task 및 Issue 위주의 회의를 진행했다. 소스코드 형상관리 툴은 Git으로 협업했으나, 미숙한 Git 실력에 초반에는 자리돌아다니면서 setting 해주느라 바빴다. 후반에는 다른 조에 비해 Task만 집중할 수 있었다. 다른 팀에서는 USB로 .war 파일을 취합하는 대환장 파티를 볼 수 있었다. 첫 프로젝트를 위해 시간에 구애받지 않고 주말에도 모여서 빈 강의실 찾아 각자 개발을 했고, PT 전날에는 스터디룸을 잡아서 다같이 완성도를 위해 밤샘 작업도 할 정도로 열정있게 진행했다.

    아쉬움

• Github 활용 미숙지
  • git-flow를 알았다면 더 효율적으로 branch, issue 및 bug, conflict 관리를 할 수 있었을텐데 지금보면 너무 아쉬웠다.
• 비효율적인 시간 분배
  • 내 기능은 빨리 끝났지만 조장의 역할을 맡아, 조원의 개발상 오류 및 프론트를 전부 맡다보니 정작 내 기능을 테스트할 시간이 많이 부족했다.
  • 또, 팀 구성상 1명의 부재로 남은 1명은 디버그 또는 발표용 자료 제작을 로테이션으로 진행했다면 많이 촉박하지 않았을 듯하다.
• 비현실적인 목표
  • 자료 수집, 벤치 마킹 할 때 완성도 및 난이도 높은 웹 사이트를 목표로 잡다보니 현실과 목표를 구분하지 못했다.

    💀 시련

    교육 기간을 끝마친 후, 생각에 잠겼다. 나는 분명히 지난 날들을 열정적으로 배움에 자세에 임했고, 강의를 열심히 따라갔으며 시험도 잘 치루고 첫 팀프로젝트도 잘 끝냈다고 생각했다.

    그럼에도 불구하고, 내가 한 선택에는 대답을 쉽게 할 수 있었지만

• 왜* 이렇게 동작하고 왜 이렇게 사용하는가 왜 쓰이는가? 대답을 할 수 없었다.

내가 해왔던 것은 '이렇게, 저렇게 사용하면 돼, 이럴 땐 이렇게 써 저럴 땐 저렇게 써.'

진도를 따라가고 정리한 것에만 급급했다.

궁극적으로 중요한 것은 How가 아니라 Why?였다.

또, 배우면서 왜 시행착오를 겪었는지, 어떻게 해결했는지 전부 어딘가에는 기록하고 정리했어야 했다. 축적한 데이터가 하나도 없이 '그냥 해결하면 된거지', '잘 따라가면 돼'에만 치우쳐져 있으니 동일한 문제에 직면했을 때, 기억력에만 의존한 사고방식을 가지고 있던 것이다. 전략적으로 접근해야 한다는 것을 뼈저리게 느끼는 순간이었다. 생각에서만 그칠게 아니라, 내가 직접 서비스를 만들고 나만의 데이터를 구축하는 적극적인 액션이 필요하고 생각했다.

👊 모각코, 소모임

적극적인 액션과 동기부여, 자극을 잡기 위해 모각코 모임에 참여했다. 단기적인 모각코에 그치지 않고, 집중과 몰입을 위해 '소호 사무실'도 따로 두었다.

모각코를 하면서 얻었던 이점

1. 개발과 관련된 지식과 인사이트 공유
2. 개개인의 TIL 내용 발표를 통한 자극 및 동기부여
3. 각자의 목표를 달성하기 위한 시너지를 얻음
4. 방향성 및 목표 의식 함양

   Do, Action

• 일주일을 쪼개서 요일 단위로 공부
• 개인 프로젝트(포트 폴리오) 진행

3~4개월의 기간동안, 방향성도 바로 잡게되고 목표 의식도 뚜렷한 시간이었다.

🤠 인턴으로서의 개발 커리어의 시작

청소년을 위한 플랫폼을 개발하는 스타트업이 눈에 들어왔다. 그때 당시, 결과와는 상관없이 개인적으로 좋은 모토를 가진 회사의 대표와 인터뷰 해보고 싶은 마음이 더 커서 편한 마음으로 인터뷰 약속을 주고 받았다. 회사는 오프라인으로 콘텐츠를 이미 제공하고 있었지만, 장기화된 코로나로 인해 주춤한 상태에서 온라인으로 서비스를 전환 및 확장하기 위해 B2C 기반 서비스를 준비하는 상태였다. 면접 질문에서는 여태 동안 겪은 수 많은 시행착오와 얻은 것, 준비한 것, 마인드 등 많은 질문이 오갔고, 덩달아 나도 '교육'이라는 공통 분모와 관심이 많이 갔던 포인트, 전략적인 부분 이외에도 회사에 궁금한 점을 많이 물어봤다. 결과는 긍정적인 반응이었고 개발분야의 커리어로써 첫 발걸음을 내딛는다.

Work in progress 모바일 환경의 어플리케이션을 목표로 예정된 두 개의 서비스 중 한 개의 서비스를 3~4주 정도 개발에 혼자 투입됬으나, 결국 한 개의 서비스에 집중을 하자는 의견으로 모아져서 능력 있는 사수와 함께 개발을 진행중이다.

흐름 선호하는 언어, 프레임워크는 다르지만 전체적인 흐름은 객체 중심의 개발 방식인 ORM 표준을 채택하고 API 서버를 별도로 두어 호출 응답하는 개발하는 흐름이다.

좋은 것들 또, 코드 리뷰, 환경 설정, 이슈 공유, 목표 상기, 자극, 동기 부여, 개발 지식 등 이외에도 '같이' 해결하는 협업, 인사이트 등 얻는 것이 많다.

적응 걱정과는 달리, 스타트업 특유의 자유롭고 개방적인 회사 분위기에 더 빠르게 적응할 수 있었고, 서비스의 공동 목표를 위해 모두가 아이디어를 제시하고 '나'보다는 '팀'의 개념이 인상적이었다. 비로소 '진정한 팀 플레이는 이런 것이구나'라고 느껴졌다.

📫 닫는 말

회고록을 진행하니, 단순히 기억으로써 지난 날에 그치는게 아니라 아쉬웠던 점이나 준비를 하면서 느끼고 봤던 점 등 조금 더 객관적인 시야가 트이는 계기가 되었고 막연하게 기억되는 게 글로써 정리되니 가치있는 시도를 많이 했다는 생각이 들었다. 도전과 시련을 반복하니, 자존감도 많이 낮아진 상태에서 문득 나는 누군가에게는 미운 오리 새끼가 아니었을까?하는 생각이 많이 들었다. 그런 생각을 할수록 자기 자신을 갉아먹는 느낌이었다. 누가 어떤 생각으로 나를 바라보든, 내가 진짜 하고 싶은 것을 찾고 행복하다면 더 이상 미운 오리 새끼가 아니라는 마음이 들었다.

확고하고 탄탄한 시도를 통해 성공에 가까운 가치를 얻어가는 것. 나는 지금의 팀원들과 같이 걸어가는 길이 결코 가치가 없다고 생각하지 않는다.

package com.mywork.ex;
import javax.swing.JOptionPane;

public class Ex01_if {
    public static void main(String[] args) {
        /*
         * 1. 형식
         *    if(조건식){
         *      실행문;
         *    }else if(조건식){
         *      실행문;
         *    }else{
         *      실행문;
         *    }
         * 2. 특징
         *   1) else if 문은 없어도 되고, 여러 개가 있을 수 있다.
         *   2) else 문은 없어도 되고, 한 개가 있을 수 있다.
         *   3) 실행문이 하나라면 실행 블록의 중괄호({})는 생략할 수 있다.
         */

        int num = Integer.parseInt(JOptionPane.showInputDialog("정수를 입력하세요"));

        if(num > 0) {
            JOptionPane.showMessageDialog(null, "양수");
        }else if(num == 0) {
            JOptionPane.showMessageDialog(null, "ZERO");
        }else{
            JOptionPane.showMessageDialog(null, "음수");
        }
    }
}

Ex02_switch

package com.mywork.ex;
import javax.swing.JOptionPane;

public class Ex02_switch {
    public static void main(String[] args) {
        /*
         * 1. 형식
         *    switch(표현식){
         *      case 값1 : 실행문; break;
         *      case 값2 : 실행문; break;
         *      default : 실행문;
         *    }
         * 2. 특징
         *    1) 표현식의 결과는 정수, 문자, 문자열만 가능하다, 실수는 불가능하다.
         *    2) 실제 사용 예시
         *       switch(var){
         *         case >= 10:     // 불가능!(X)
         *         case 10:        // 가능! (정수)   // 정수만 들어올 수 있다.
         *         case 1.5:        // 불가능!(실수)
         *         case '남'        // 가능! (문자)
         *         case "admin"    // 가능! (문자열)
         *       }
         */

        int age = Integer.parseInt(JOptionPane.showInputDialog("정수를 입력하세요"));

        switch(age / 10) {   // 필요한 계산식 가능
        case 0:              // break 찾아서 case를 진행해라.
        case 1: JOptionPane.showMessageDialog(null, "미성년자");
                break;            
        default : JOptionPane.showMessageDialog(null, "성인");
        }
    }
}

Ex03_while

package com.mywork.ex;

public class Ex03_while {
    public static void main(String[] args) {
        /*
         * 1. 형식
         *    while (조건식){
         *      반복실행문;
         *    }
         * 2. 특징
         *    1) 조건식을 만족하지 않으면 한 번도 실행이 안 될 수 있다.
         *    2) 반복실행문이 없는 경우엔 while(조건식);과 같은 형식으로 사용한다
         *       -> 코드 블럭이 필요 없음.
         *    3) 무한루프는 while (true) { } 과 같은 형식으로 사용한다.
         */

        int num = 0;            // 초기문

        while(num < 10) {         // 조건문 (종료문)
            System.out.println(num);
            num++;                // 초기 -> 종료 (증감)
        }
    }
}

Ex04_do_while

package com.mywork.ex;

public class Ex04_do_while {
    public static void main(String[] args) {
        /*
         * 1. 형식
         *    do{
         *      반복실행문;
         *    } while (조건식);
         * 2. 특징
         *    1) 조건식과 관계없이 반드시 한 번은 실행되는 반복문이다.
         *    2) 나머지 특징은 while 문이다.
         */

        int num = 0;
        do {
            System.out.println(num);
            num++;
        }while(num < 10);
    }
}

Ex05_for

package com.mywork.ex;

public class Ex05_for {
    public static void main(String[] args) {
        /*
         * 1. 형식
         *    for (초기문; 조건문; 반복 실행문 후 실행;){
         *      반복실행문;
         *    }
         * 2. 특징
         *  1) 반복의 횟수 또는 범위가 명확한 경우에 사용하는 반복문이다.
         *  2) 주로 배열과 함께 사용된다.
         *  3) 무한루프 for( ; ;) { } 과 같은 형식으로 사용한다.
         *  4) 반복실행문이 없는 경우엔 for(초기문; 조건문; 반복실행문 후 실행);과 같은 형식으로 사용한다
         */

        for(int num = 0; num < 10; num++) {
            System.out.println(num);
        }   // num이 소멸되는 시점

        //System.out.println(num); --> 오류 (main 스코프에서 선언된 num이 없으므로 에러)

        for(int i = 0; i < 10; i++) {
            System.out.println(i);
        }

        for(int i = 0; i < 10; i++) {
            System.out.println(i);
        }
    }
}

Ex06_break

package com.mywork.ex;
import javax.swing.JOptionPane;

public class Ex06_break {
    public static void main(String[] args) {
        /*
         * 1. 형식
         *    while(true){
         *        if(조건식){
         *          break;
         *        }
         *    }
         * 2. 특징
         *    1) 반복문을 곧바로 종료한다.
         *    2) switch 문을 곧바로 종료한다.
         */

        String id;
        while(true) {
            id = JOptionPane.showInputDialog("ID 입력하세요");
            if(id.equals("admin")) {
                JOptionPane.showConfirmDialog(null, "아이디 일치!");
                break;
            } else {
                JOptionPane.showConfirmDialog(null, "다시 입력하세요!");
            }
        }
    }
}

Ex07_continue

package com.mywork.ex;

public class Ex07_continue {
    public static void main(String[] args) {
        /*
         * 1. 형식
         *    while(조건식){
         *        반복실행문;
         *        if(조건식){
         *            continue;  // while(조건식) <- 이동!
         *        }
         *        반복실행문;  // continue 가 동작하면 실행되지 않는 영역
         *    }
         *         
         *    for(초기문; 조건식; 반복실행문 후 실행){
         *        반복실행문;
         *        if (조건식){
         *            continue; // for 문의 반복실행문 후 실행 <- 이동!
         *        }
         *        반복실행문;
         *    }
         * 
         *    while(다 먹을때까지){
         *        반찬을 집어라!
         *        if (반찬 == 굴){
         *            continue;
         *        }
         *        반찬을 먹는다!
         *    }
         * 2. 특징
         *  1) 반복에서 제외하고 싶은 데이터를 조건식으로 만들고 continue로 처리한다.
         *  2) while 문과 for 문 계열에 약간의 차이가 있다.
         *
         */

        // 1 ~ 10 출력 (3의 배수는 제외)
        int num = 0;
        while (num <= 10) {
            num++;
            if (num % 3 == 0) {
                continue;
            }
            System.out.println(num);
        }

        // 2. 1 ~ 10출력 (3의 배수는 제외)
        for(num = 1; num <= 10; num ++) {
            if(num % 3 == 0) {
                continue;
            }
            System.out.println(num);
        }
    }
}

package com.mywork.ex;

public class Book {
    // Field
    String title;
    String writer;
    int price;
    int salesVolume;       // 판매량
    boolean isBestSeller;  // 판매량이 1000 이상이면 true, 아니면 false

    // Constructor
    Book(){    }    // Deafult 
    Book(String _s, int _p){
        title = _s;
        writer = "작가미상";
        price = _p;
    }
    Book(String _s, String _w, int _p){
        title = _s;
        writer = _w;
        price = _p;
    }

    // Method
    void setSaleVolume(int sales) {
        salesVolume = sales;
        isBestSeller = sales >= 1000 ? true : false;
    }
    void output() {
        System.out.println("제목 : " + title);
        System.out.println("저자 : " + writer);
        System.out.println("가격 : " + price);
        System.out.println("판매량 : " + salesVolume);
        System.out.println(isBestSeller ? "베스트셀러" : "일반서적");
    }

}

BookMain

package com.mywork.ex;

public class BookMain {
    public static void main(String[] args) {
        Book book1 = new Book();
        Book book2 = new Book("콩쥐팥쥐", 10000);
        Book book3 = new Book("도전 자바 200문제", "김자바" ,25000);

        book1.setSaleVolume(0);
        book2.setSaleVolume(500);
        book3.setSaleVolume(1500);

        book1.output();        System.out.println("-----");
        book2.output();        System.out.println("-----");
        book3.output();
    }
}

Circle

package com.mywork.ex;

public class Circle {

    // Field
    int x;
    int y;
    double radius;

    // Constructor
    Circle() {
        x = 0;
        y = 0;
        radius = 1;
    }
    Circle(double r) {
        x = 0;
        y = 0;
        radius = r;
    }
    Circle(int _x, int _y, double r) {
        x = _x;
        y = _y;
        radius = r;
    }

    // Method
    double calcArea() {
        return radius * radius * Math.PI;
    }
    double calcCircum() {
        return 2 * Math.PI * radius;
    }
    void output() {
        System.out.println("중심좌표 : [" + x + ", " + y + "]");
        System.out.println("반지름 : " + radius);
        System.out.println("크기 : " + calcArea());
        System.out.println("둘레 : " + calcCircum());        
    }
}

CircleMain

package com.mywork.ex;

public class CircleMain {
    public static void main(String[] args) {
        Circle circle1 = new Circle();
        Circle circle2 = new Circle(1.5);
        Circle circle3 = new Circle(3, 3, 2.5);

        circle1.output();
        circle2.output();
        circle3.output();
    }
}

Local

package com.mywork.ex;
public class Local {

    // Field
    String name;
    int age;
    String sn;          // 주민등록번호(식별번호가 1~4는 한국인, 5~8은 외국인, 주민등록번호가 없어도 외국인)
    boolean isKorean;   // 한국인: true, 외국인: false

    // Constructor
    Local(String _name, int _age) {
        name = _name;
        age = _age;
    }
    Local(String _name, int _age, String _sn) {
        name = _name;
        age = _age;
        sn = _sn;
        isKorean = sn.charAt(7) <= '4' ? true : false;
    }
    // Method
    void output() {
        System.out.println("이름 : " + name);
        System.out.println("나이 : " + age);
        System.out.println("주민등록번호 : " + (sn == null ? "없음" : sn));
        System.out.println(isKorean ? "한국인" : "외국인");
    }

}

LocalMain

package com.mywork.ex;

public class LocalMain {
    public static void main(String[] args) {

        Local person1 = new Local("홍길동", 20, "901215-1234567");
        Local person2 = new Local("응우엔티엔", 21, "911215-6789123");
        Local person3 = new Local("james", 22);

        person1.output();    System.out.println("-----");
        person2.output();    System.out.println("-----");
        person3.output();

    }
}

Rect

package com.mywork.ex;

public class Rect {
    // 1. Fields
    int width;
    int height;
    boolean isSquare;

    // Constructor
    // 1. 생성자이다.
    // 2. 객체(인스턴스)를 생성할 때 호출되는 메소드이다.
    // 3. 객체 초기화 용도로 사용한다.
    // 4. 리턴이 없다.
    // 5. 클래스 명과 같다
    Rect(){
        width = 1;
        height = 1;
        isSquare = true;
    }

    Rect(int side){
        width = side;
        height = side;
        isSquare = true;
    }

    Rect(int w, int h){
        width = w;
        height = h;
        isSquare = (w == h) ? true : false;
    }

    // Method
    void output(){
        System.out.println("너비 : " + width);
        System.out.println("높이 : " + height);
        System.out.println("크기 : " + calcArea());
    }
    int calcArea() {
        return width + height;
    }
}

RectMain

package com.mywork.ex;

public class RectMain {
    public static void main(String[] args) {
        // 1. 객체(인스턴스) 생서
        // ==>>> 생성자가 호출된다!
        Rect nemo1 = new Rect();    // Rect(){} [Default(기본) 생성자] 
                                    //   -> 프로그래머가 만들지 않아도 자바가 자동으로 만들어준다.
        Rect nemo2 = new Rect(3);
        Rect nemo3 = new Rect(3, 5);

        // 2. 객체 메소드 호출
        nemo1.output();
        nemo2.output();
        nemo3.output();
    }

}

Student

package com.mywork.ex;
import java.util.Scanner;

public class Student {

    // Field
    String name;
    String dept;
    String score1;
    String score2;
    double average;
    boolean isPass;

    // Constructor
    Student(String _name, String _dept) {
        name = _name;
        dept = _dept;
    }

    // Method
    void input(Scanner scanner) {
        System.out.print("중간 >> ");
        score1 = scanner.nextLine();
        System.out.print("기말 >> ");
        score2 = scanner.nextLine();
        average = (Double.parseDouble(score1) + Double.parseDouble(score2)) / 2;
        isPass = average >= 80 ? true : false;
    }
    void output() {
        System.out.println("이름 : " + name);
        System.out.println("학과 : " + dept);
        System.out.println("평균 : " + average);
        System.out.println("결과 : " + (isPass ? "합격" : "불합격"));
    }

}

StudentMain

package com.mywork.ex;
import java.util.Scanner;

public class StudentMain {
    public static void main(String[] args) {

        Student student = new Student("홍길동", "컴퓨터공학과");
        student.input(new Scanner(System.in));
        student.output();

    }
}

Triangle

package com.mywork.ex;

public class Triangle {
    // Field
    int width;
    int height;

    // Constructor
    Triangle(){
        width = 1;
        height = 1;
    }
    Triangle(int w, int h){
        width = w;
        height = h;
    }
    // Method
    double calcArea() {
        return width * height / 2.0;
    }
    void output() {
        System.out.println("넓이 : " + width);
        System.out.println("높이 : " + height);
        System.out.println("크기 : " + calcArea());
    }
}

TriangleMain

package com.mywork.ex;

public class TriangleMain {
    public static void main(String[] args) {
        Triangle semo1 = new Triangle();
        Triangle semo2 = new Triangle(1, 3);
        semo1.output();
        semo2.output();
    }
}

• 어떤 행위를 수행할 때 상태에 행위를 수행하도록 위임
• 시스템의 각 상태를 클래스로 분리해 표현
• 각 클래스에서 수행하는 행위들을 메서드로 구현
• 외부로부터 캡슐화하기 위해 인터페이스를 생성하여 시스템의 각 상태를 나타나는 클래스로 실체화

• State: 시스템의 모든 상태에 공통의 인터페이스를 제공한다. 따라서 이 인터페이스를 실체화한 어떤 상태 클래스도 기존 상태 클래스를 대신해 교체해서 사용할 수 있다.
• State1, State2, State3: Context 객체가 요청한 작업을 자신의 방식으로 실제 실행한다. 대부분의 경우 다음 상태를 결정해 상태 변경을 Context 객체에 요청하는 역할도 수행한다.
• Context: State를 이용하는 역할을 수행한다. 현재 시스템의 상태를 나타내는 상태 변수 (state)와 실제 시스템의 상태를 구성하는 여러 가지 변수가 있다. 또한 각 상태 클래스에서 상태 변경을 요청해 상태를 바꿀 수 있도록 하는 메서드(setState)가 제공된다. Context 요소를 구현한 클래스의 request 메서드는 실제 행위를 실행하는 대신 해당 상태 객체에 행위 실행을 위임한다.

상태 머신 다이어그램

• UML에서의 상태와 상태 변화를 모델링하는 도구
• 바람 세기를 선택하거나 회전 등을 할 수 없고 정해진 바람 세기로만 동작하는 선풍기(단순한 기능)
• 사각형: 상태(state)
• 화살표: 전이(state transition)

상태(state)

• 객체가 시스템에 존재하는 동안, 즉 객체의 라이프 타임 동안 객체가 가질 수 있는 어떤 조건이나 상황
• ex) 객체가 어떤 상태에 있는 동안 어떤 액티비티 등을 수행하거나 특정 이벤트 발생을 기다리는 것
• 시작 상태: 객체가 시작하는 처음 상태
  • 시작 상태에서의 진입은 객체를 새로 생성하는 이벤트만 명시하거나 아예 어떤 것도 명시하지 않아야 함
• 상태 진입: 객체의 한 상태에서 다른 상태로 이동하는 것
  • 특정 이벤트가 발생한 후 명세된 조건을 만족한 경우에 이루어진다.

해석

• 선풍기는 기본적으로 OFF 상태에서 시작한다.
• OFF 상태에서 사용자가 선풍기 스위치를 켜면 switch_on 이벤트를 발생시킨다. 이때 전원이 들어온 상태라면(power_exists 조건) ON 상태로 진입한다. 이때 turnon 액션을 실행하게 된다.
• OFF 상태에서 사용자가 선풍기 스위치를 켜면 switch_on 이벤트를 발생시킨다. 이때 전원이 들어오지 않은 상태라면(power_exists 조건) OFF 상태에 머무른다.
• 사용자가 ON 상태에서 동작 버튼을 누르면 run 이벤트를 발생시키고 WORKING 상태로 진입한다. 이때 operate 액션을 실행하게 된다.
• 선풍기가 ON 상태나 WORKING 상태에 머무를 때 사용자가 스위치를 끄면 switch_off 이벤트가 발생하고 이 이벤트로 인해 OFF 상태로 진입한다.

형광등 만들기

전제조건

• 형광등(Light 클래스)을 만들려면 형광등의 행위를 분석할 필요가 있다.

• 꺼져 있을 때 On 버튼을 누르면 켜지고, 켜져 있을 때 Off 버튼을 누르면 꺼진다.

• 만약 켜져 있는 상태에서 On 버튼을 누르면 그대로 켜져 있고, 꺼져 있는 상태에서 Off 버튼을 눌러도 아무런 변화가 없다.

• OFF, ON: 형광등의 상태

• off_button_pushed, on_button_pushed: 형광등의 Off 버튼과 On 버튼의 상태

  private static int ON = 0;
  private static int OFF = 1;

• 형광등의 상태를 저장하는 변수

  private int state;

구현

Light 클래스

public class Light{
    private static int ON = 0; // 형광등이 켜진 상태
    private static int OFF = 1; // 형광등이 꺼진 상태
    pricate int state; // 형광등의 현재 상태

    public Light(){
        state = OFF; // 형광등 초기 상태는 꺼져 있는 상태임
    }

    public void on_button_pushed(){
        if( state == ON ){
            System.out.println("반응 없음");
        }
        else { // 형광등이 꺼져 있을 때 On 버튼을 누르면 켜진 상태로 전환
            System.out.println("Light On!");
            state = ON;
        }
    }

    public void off_button_pushed(){
        if( state == OFF) {
            System.out.println("반응 없음");
        }
        else { // 형광등이 켜져 있을 때 OFF 버튼을 누르면 꺼진 상태로 전환됨
            System.out.println("Light Off!");
            state = OFF;
        }
    }
}

Client 클래스

public class Client{
    public static void main(String[] args){
        Light light = new Light();
        light.off(); // 반응 없음
        light.on();
        light.off();
    }
}

문제점

• 형광등에 새로운 상태를 추가할 떄, 가령 형광등에 '취침등' 상태를 추가하려면?

설계

• 취침등 상태를 나타내는 상수인 SLEEPING를 추가

private static int SLEEPING = 2;

• on_button_pushed 상태와 off_button_pushed 메서드 안에서 현재 상태 값이 SLEEPING 변수 값과 같은지를 검사하고 값이 같다면 요구사항에 맞게 수정

public void on_button_pushed(){
    if(state == ON) { // 형광등이 켜져 있는 경우에 On 버튼을 누르면 취침등 상태로 전환됨
        System.out.println("취침등 상태");
        state = SLEEPING;
    }
    else if(state == SLEEPING) { // 형광등이 취침등 상태에 있는 경우
        System.out.println("Light On!"); // On 버튼을 누르면 켜진 상태로 전환됨
        state = ON;
    }
    else { // 상태가 꺼져 있는 경우에 On 버튼을 누르면 켜진 상태로 전환됨
        System.out.println("Light On!");
        state = ON;
    }
}

요구사항 반영

public class Light{
    private static int ON = 0;
    private static int OFF = 1;
    private static int SLEEPING = 2;
    private int state;

    public Light(){
        state = OFF; // 초기 상태는 형광등이 꺼져 있는 상태
    }

    public void off_button_pushed(){
        if(state == OFF) { // 형광등이 꺼져 있는 경우에 OFF 버튼을 누르면 상태 전환 없음
            System.out.println("반응 없음");
        }
        else if(state == SLEEPING) { // 형광등이 취침등 상태에 있는 경우
            System.out.println("Light OFF!"); // Off 버튼을 누르면 OFF로 전환됨
            state = OFF;
        }
        else {
            System.out.println("Light Off!");
            state = OFF;
        }
    }
}

public void on_button_pushed(){
    if(state == ON){ // 형광등이 켜져 있는 경우에 On 버튼을 누르면 취침등 상태로 전환됨
        System.out.println("취침등 상태");
        state = SLEEPING;
    } 
    else if(state == SLEEPING){ // 형광등이 취침등 상태에 있는 경우
        System.out.println("Light On!");
        state = ON;
    }
    else { // 꺼져 있는 상태라면 On 버튼을 눌렀을 때 켜진 상태로 전환됨
        System.out.println("Light On!");
        state = ON;
    }
}

• 새로운 상태가 추가되는 경우에 상태 변화를 초래하는 모든 메서드에 이를 반영하기 위해 코드 수정은 불가피함

해결책

• 무엇이 변하는가?
• 변하는 것에 따른 캡슐화
• 상태 변화에 독립적으로 코드를 수정하는게 목표
• 상태를 클래스로 분리
• 의존적인 행위도 상태 클래스에 두어 특정 상태에 따른 행위 구현

개선된 설계, 구현

• 스트래티지 패턴과 구조가 매우 흡사함
• Light 클래스에서 구체적인 상태 클래스가 아닌 추상화된 State 인터페이스만 참조하므로 현재 어떤 상태에 있는지와 무관하게 코드를 작성할 수 있음
• Light 클래스에서는 상태 클래스 작업만 위임하면 됨

State 인터페이스

interface State{
    public void on_button_pushed(Light light);
    public void off_button_pushed(Light light);
}

ON 클래스

public class ON implements State{
    public void on_button_pushed(Light light){
        System.out.println("반응 없음");
    }

    public void off_button_pushed(Light light){
        System.out.println("Light Off!");
        light.setState(new OFF(light));
    }
}

OFF 클래스

public class OFF implements State{
    public void on_button_pushed(Light light){
        System.out.println("Light On!");
        light.setState(new ON(light));
    }

    public void off_button_pushed(Light light){
        System.out.println("반응 없음");
    }
}

Light 클래스

public class Light{
    private State state;

    public Light(){
        state = new OFF();
    }

    public void setState(State state){
        this.state = state;
    }

    public void on_button_pushed(){
        state.on_button_pushed(this);
    }

    public void off_button_pushed(){
        state.off_button_pushed(this);
    }
}

• state 변수를 통해 현재 시스템의 상태 객체를 참조
• Light 클래스는 시스템이 어떤 상태에 있는지 무관

현 코드의 문제점

• 상태 변화가 생길 때마다 새로운 상태 객체 생성
  • 메모리 낭비, 성능 저하 야기

개선된 싱글턴 패턴 ON, OFF 클래스로의 변경

ON 클래스

public class ON implements State{
    private static ON on = new ON(); // ON 클래스의 인스턴스로 초기화됨
    private ON() { }

    public static ON getInstance() { // 초기화된 ON 클래스의 인스턴스를 반환함
        return on;
    }

    public void on_button_pushed(Light light){ // ON 상태일 때 On 버튼을 눌러도 변화 없음
        System.out.println("반응 없음");
    }

    public void off_button_pushed(Light light){
        light.setState(OFF.getInstance());
        System.out.println("Light Off!");
    }
}

OFF 클래스

public class OFF implements State{
    private static OFF off = new OFF(); // OFF 클래스의 인스턴스로 초기화됨
    private OFF() { }

    public static OFF getInstance() { // 초기화된 OFF 클래스의 인스턴스를 반환함
        return off;
    }

    public void on_button_pushed(Light light){ // Off 상태일 때 On 버튼을 눌러도 On 상태임
        light.setState(ON.getInstance());
        System.out.println("Light On!");
    }

    public void off_button_pushed(Light light){ // Off 상태일 때 Off 버튼을 눌러도 변화 없음
        System.out.println("반응 없음");
    }
}

Reference

• 정인상,채흥석, 『JAVA 객체 지향 디자인 패턴』, 한빛미디어(2014.4.2), 218p~232p

• 전략을 쉽게 바꿀 수 있도록 해줌

• 같은 문제를 해결하는 여러 알고리즘이 클래스별로 캡슐화되어 있고 이들이 필요할 때 교체할 수 있도록 함으로써 동일한 문제를 다른 알고리즘으로 해결할 수 있게 하는 디자인 패턴

전략 어떤 목적을 달성하기 위해 일을 수행하는 방식, 비즈니스 규칙, 문제를 해결하는 알고리즘 ex) 게임 프로그래밍에서 게임 캐릭터가 자신이 처한 상황에 따라 공격이나 행동하는 방식을 바꾸고 싶을 때

• Strategy: 인터페이스나 추상 클래스로 외부에서 동일한 방식으로 알고리즘을 호출하는 방법을 명시

• ConcreateStrategy1, 2, 3: 스트래티지 패턴에서 명시한 알고리즘을 실제로 구현한 클래스

• Context: 스트래티지 패턴을 이용하는 역할 수행. 필요에 따라 동적으로 구체적인 전략을 바꿀 수 있도록 setter 메서드 제공

로봇 만들기

설계

• 추상 클래스 Robot의 자식 클래스: Atom 클래스, TaekwonV 클래스
• 추상 클래스 Robot의 추상 메서드 정의: attack method(), move method()

구현

Robot 추상 클래스

public abstract class Robot{
    private String name;
    public Robot(String name){
        this.name = name;
    }

    public String getName(){
        return name;
    }

    public abstract void attack();
    public abstract void move();
}

TaekwonV 구현 클래스

public class TaekwonV extends Robot{
    public TaekwonV(String name){
        super(name);
    }

    public void attack(){
        System.out.println("I have Missile and can attack with it.");
    }

    public void move(){
        System.out.println("I can only walk.");
    }
}

Atom 구현 클래스

public class Atom extends Robot{
    public Atom(String name){
        super(name);
    }

    public void attack(){
        System.out.println("I have strong punch and can attack with it.");
    }

    public void move(){
        System.out.println("I can fly.");
    }
}

Client 클래스

public class Client{
    public static void main(String[] args){
        Robot taekwonV = new TaekwonV("TaekwonV");
        Robot atom = new Atom("Atom");

        System.out.println("My name is " + taekwonV.getName());
        taekwonV.move();
        taekwonV.attack();

        System.out.println();

        System.out.println("My name is " + atom.getName());
        atom.move();
        atom.attack();
    }
}

문제점

새로운 기능 수정의 경우

• 기존 로봇의 공격 또는 이동 방법을 수정하려면 어떤 변경 작업을 해야 하는가?

  • ex) 아톰이 날 수는 없고 오직 걷게만 만들고 싶다면?, 태권V를 날게 하려면?

• 새로운 로봇을 만들어 기존의 공격 또는 이동 방법을 추가하거나 수정하려면?

  • ex) 새로운 로봇으로 지구의 용사 선가드를 만들어 태권V의 미사일 공격 기능을 추가하려면?

• 기존의 코드 내용 수정 발생(OCP 위배)
• Atom 클래스의 move 메서드, TaekwonV 클래스의 move 메서드 기능의 중복

새로운 로봇에 공격/이동 방법을 추가/수정하는 경우

• 새로운 로봇에 기존의 공격 또는 이동 방법을 추가하거나 변경하려고 하면 문제 발생

• 다른 클래스와의 특정 메서드 중복 사용

• 시스템 변경에 따른 기존 모든 코드 수정

해결책

• 무엇이 변화되었는가? 에 중점

• 변화된 것을 찾은 후 캡슐화

  • 이동 방식: move()
  • 공격 방식: attack()

• 외부에서 구체적인 이동 방식, 공격 방식을 담은 클래스 은닉화

• 공격, 이동을 위한 인터페이스 생성, 실현할 클래스를 만듦

• 클라이언트: 연관 관계를 이용해 이동 기능과 공격 기능의 변화 포함(Robot 클래스)

• MovingStrategy, AttackStrategy 인터페이스를 포함해야 함

개선된 설계, 구현

• 구체적인 이동 방식과 공격 방식이 MovingStrategy, AttackStrategy 인터페이스에 의해 캡슐화

  • 향후 이동 방식, 공격 방식의 변화를 수용할 수 있음

• 새로운 공격 방식 개발 시

  • AttackStrategy 인터페이스가 변화에 대한 일종의 방화벽 역할을 수행해 Robot 클래스의 변경 차단

• OCP(Open-Closed Principle) 만족하는 설계

  • 새로운 기능 추가 시, 기존의 코드에 영향을 미치지 않음

• 외부에서 로봇 객체의 이동 방식과 공격 방식을 임의대로 변경해야하는 메서드 생성

  • setter를 통해 공격, 이동 방식 메서드를 정의해서 필요에 의해 변경 가능(집약 관계)

Robot 추상 클래스

public abstract class Robot{
    private String name;
    private MovingStrategy movingStrategy;
    private AttackStrategy attackStrategy;

    public Robot(String name){
        this.name = name;
    }

    public String getName(){
        return name;
    }

    public void move(){
        movingStrategy.move();
    }

    public void attack(){
        attackStrategy.attack();
    }

    public void setMovingStrategy(MovingStrategy movingStrategy){
        this.movingStrategy = movingStrategy;
    }

    public void setAttackStrategy(AttackStrategy attackStrategy){
        this.attackStrategy = attackStrategy;
    }
}

Atom 클래스

public class Atom extends Robot{
    public Atom(String name){
        super(name);
    }
}

TaekwonV 클래스

public class TaekwonV extends Robot{
    public TaekwonV(String name){
        super(name);
    }
}

MovingStrategy 인터페이스

interface MovingStrategy{
    public void move();
}

FlyingStrategy 구현체

public class FlyingStrategy implements MovingStrategy{
    public void move(){
        System.out.println("I can fly.");
    }
}

WalkingStrategy 구현체

public class WalkingStrategy implements MovingStrategy{
    public void move(){
        System.out.println("I can only walk.");
    }
}

AttackStrategy 인터페이스

interface AttackStrategy{
    public void attack();
}

MissileStrategy 구현체

public class MissileStrategy implements AttackStrategy{
    public void attack(){
        System.out.println("I have Missile and can attack with it.");
    }
}

PunchStrategy 구현체

public class PunchStrategy implements AttackStrategy{
    public void attack(){
        System.out.println("I have strong punch and can attack with it.");
    }
}

Client 클래스

public class Client{
    public static void main(String[] args){
        Robot taekwonV = new TaekwonV("TaekwonV");
        Robot atom = new Atom("Atom");

        taekwonV.setMovingStrategy(new WalkingStrategy());
        taekwonV.setAttackStrategy(new MissileStrategy());

        atom.setMovingStrategy(new WalkingStrategy()); // 이동 전략을 날아간다는 전략으로 설정
        atom.setAttackStrategy(new PunchStrategy()); // 공격 전략을 펀치를 구사하는 전략으로 설정

        System.out.println("My name is " + taekwonV.getName());
        taekwonV.move();
        taekwonV.attack();

        System.out.println();

        System.out.println("My name is " + atom.getName());
        atom.move();
        atom.attack();
    }
}

Reference

• 정인상,채흥석, 『JAVA 객체 지향 디자인 패턴』, 한빛미디어(2014.4.2), 166p~179p

• 주어진 문자열의 대문자는 소문자로, 소문자는 대문자로 변환하시오

출력

HELLOwORLd

풀이

public class Main{
    public static void main(String[] args){
        String input = "helloWorlD";
        char[] arr;
        arr = input.toCharArray(); // 문자열 객체를 char array type으로 반환
        System.out.print(arr);
        System.out.println();

        for(int i=0; i<arr.lenght; i++){
            if(arr[i] >= 'a' && arr[i] <= 'z'){        // i번째 요소가 소문자라면
                arr[i] = (char)(arr[i] + 'A' - 'a');   // 대문자와 소문자와의 간격만큼 더해준다.
            } else if(arr[i] >= 'A' && arr[i] <= 'Z'){
                arr[i] = (char)(arr[i] - ('A' - 'a');
            }
        }

        System.out.print(arr);
    }
}

Reference

• 진쓰 코딩, "[알고리즘 기초 100제] 5번 대소문자 변환", www.youtube.com/watch?v=DTEiENYVR14&list=PLVoihNyHW4xkm_KJ8_N8X7F6EQP4uSRyR&index=6(2020.09.06)

• 주어진 10진수를 2진수로 변환하시오

출력

010011

풀이

public class Main{
    public static void main(String[] args){
        int inputNum = 19;  // 10진수
        int bin[] = new int[100]; // 2진수가 저장된 배열

        /*
                     (몫) (나머지)
          19 / 2      9...1
           9 / 2      4...1
           4 / 2      2...0
           2 / 2      1...0
           1 / 2      0...1

           010011 => 19
        */

        int i = 0;  // 인덱스 초기화
        int mok = inputNum;  // 몫에 10진수 저장

        while(mok > 0){  // 몫이 나누어 떨어질 때까지 반복
            bin[i] = mok % 2;  // 몫을 2로 나누어 나머지 값을 저장
            mok /= 2;    // 몫을 2로 나눈 값을 갱신
            i++;         // 인덱스를 1증가시켜 bin[i] 배열의 다음 저장된 값을 꺼내도록 함
        }

        i--;  // bin[i] 배열의 인덱스는 0부터 4까지 저장되었으므로 현재 인덱스 값인 5에서 1을 감한다.
        for(; i>=0; i--){
            System.out.print(bin[i]);
        }
    }
}

Reference

• 진쓰 코딩, "[알고리즘 기초 100제] 4번 10진수를 2진수로 변환", www.youtube.com/watch?v=8Xh2Zgap9hs&list=PLVoihNyHW4xkm_KJ8_N8X7F6EQP4uSRyR&index=5(2020.09.06)

• n개의 정수를 입력받아 배열에 저장한다.

• 이들 중에서 0개 이상의 연속된 정수들을 더하여 얻을 수 있는 최대값을 구하여 출력하시오.

예제 입력

13
-2 3 5 -14 12 3 -9 8 -1 13 2 -5 4

예제 출력

28

풀이

public class Main{
    public static void main(String[] args){
        Scanner kb = new Scanner(System.in);
        int n = kb.nextInt();
        int[] data = new int[n];
        for(int i=0; i<n; i++)
            data[i] = kb.nextInt();
        kb.close();

        int max = 0;
        for(int i=0; i<n; i++){
            int sum = 0;
            for(int j=i; j<n; j++){ // 시작과 끝점이 같음
                sum += data[j];
                if(sum > max)
                    max = sum;
            }
        }
        System.out.println("The max sum is " + max);
    }
}

Reference

• 권오흠 교수, 인프런 - "Java로 배우는 자료구조",www.inflearn.com/course/java-%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0/dashboard(2020.09.06)

• 1~100000사이의 모든 소수들을 찾아서 출력하시오.

소수

• 1과 자기자신을 제외한 약수를 갖지 않는 수

출력

2
3
5
7
11
13

...

99923
99929
99961
99971
99989
99991

풀이

public class Main{
     public static void main(String[] args){
         for(int i=2; i<=100000; n++){
              boolean isPrime = true;
              for(int i=2; i*i<=n && isPrime; i++{
                   if(n%i == 0)
                       isPrime = false;
              }
              if(isPrime)
                  System.out.println(n);
         }
     }
}

• 각각의 정수 n에 대해서 이 for문을 돌면서 2보다 크거나 같은 약수가 있는지 검사한다. 하나라도 약수가 있다면 이미 소수가 아니므로 더 이상 검사할 필요가 없다.

• 변수 isPrime이 어떤 역할을 하는지 잘 생각해봐야한다.

문제

입력된 수가 소수인지 판별하시오

출력

7은 소수입니다.

풀이

public class Main{
     public static void main(String[] args){
         int num = 7;

         boolean isPrimeNumber = true;

         for(int i=2; i<=num/2; i++){
              if(num%i==0)
                  isPrimeNumber = false;
         }
         if(isPrimeNumber){
             System.out.println(num + "은 소수입니다.");
         } else {
             System.out.println(num + "은 소수가 아닙니다.");
         }
     }
}

Reference

• 권오흠 교수, 인프런 - "Java로 배우는 자료구조",www.inflearn.com/course/java-%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0/dashboard(2020.09.06)
• 진쓰 코딩, "[알고리즘 기초 100제] 7번 소수 판별", www.youtube.com/watch?v=CZOkPNGWpDA&list=PLVoihNyHW4xkm_KJ8_N8X7F6EQP4uSRyR&index=8(2020.09.06)