프론트엔드 개발을 하면서 백엔드에서 자주 논의되는 특정 개념들이 (ex. 의존성 주입 등)
상대적으로 덜 등장하는 이유가 항상 궁금했다.
단순한 느낌일까, 아니면 실제로 그러할까?
이 글은 이러한 의문에서 출발했다.
마침 같은 주제에 대하여 다른 언어로 작성된 (각각 FE, BE를 대변하는 JS, JAVA) 코드들이 존재했고
이 코드들에 대한 PR 리뷰/코멘트 의 양도 아주 많은 컨텐츠를 발견했다.
그래서 이것들을 간단한 방법으로 직접 데이터를 수집하여 분석해 보았다.
혹시라도 이 데이터 활용에 대한 문제가 있을 경우 이 글은 삭제할 예정이다.
분석 과정
- 우아한 테크코스에서 사용한 public 레포지토리 사용
- 자동차 경주와 로또 게임의 PR(BE: 1326개, FE: 659개)과 코드리뷰 코멘트에 등장한 키워드들의 빈도를 분석
- PR과 코멘트는 공개된 저장소이기 때문에 GitHub API를 호출하여 PR/코멘트 텍스트 데이터를 수집
- 수집된 텍스트를 txt 파일로 저장한 뒤, 파이썬을 이용해 간단한 전처리와 명사 추출 수행
- 빈도에서 제외할 언어는 BE/FE 쪽의 텍스트 모두 동일하게 설정
- 제외 언어는 빈도 추출 후 직접 판단 후 추가 -> 빈도 재추출 을 반복
제외언어 = ["로또","금액","구입","미르","지난","금액","모두","스스로","유조","달창","수익","지적","수익률","메로","페어","보너스","한번","게임","처럼","마지막","해주시","노력","당첨","수동","번호","모든","적용","구매","개수","가격","마다","메로","원래","양하","부분","이기","일단","부터","다만","사실","여부","이후","기도","서도","일단","거나","바로","공부","그대로","그냥","대신","먼저","크게","생각","개인","어님","리뷰어","개인","도움","만약","라면","덕분","이전","각각","항상","우선","별도","학습","무엇","이야기","계속","전진","자체","해도" "따라","따라서","프리","주신","라운드","코스","대로","해도","오히려","메로","우선","느낌","여기","어디","굳이","크루","조언","정도","제대로","진행","방법","숫자","답변","여러","횟수","이해","좀","시간","다음","현재","문제","사항","우승자","우승","아래","기존","이번","다른","아래","조금","코멘트","또한","지금", "혹시","커밋","내용","처리","다시","하나","정말","말씀","감사","소드","해당","때문","가지","의견","랜덤","처음","통해","피드백","질문","추가","서드","코드","사용","작성","위해" ,"대한","작성","우테코","car","자동차","경주","단계","대해","경우","자동차 경주","racing" "리뷰", "미션", "제출", "안녕하세요", "감사합니다", "잘", "부탁드립니다", "고민", "수정", "반영"]
- 추출된 명사의 빈도를 워드클라우드로 시각화
아이디어는 직접 구상했고, GPT의 도움을 받아 파이썬 코드로 쉽게 구현할 수 있었다.
분석 결과 - FE(JavaScript)
단어 빈도 출력 (상위 100개): [('테스트', 1918), ('함수', 1573), ('구현', 1421), ('입력', 1210), ('로직', 1129), ('기능', 1001), ('객체', 946), ('클래스', 942), ('분리', 937), ('방식', 667), ('변경', 639), ('구조', 588), ('파일', 533), ('패턴', 531), ('이름', 461), ('관리', 449), ('역할', 438), ('이벤트', 414), ('변수', 403), ('버튼', 392), ('에러', 378), ('상수', 377), ('컨트롤러', 354), ('리팩토링', 346), ('단위', 338), ('상태', 337), ('검사', 332), ('유효', 329), ('요구', 326), ('출력', 325), ('검증', 324), ('동작', 313), ('과정', 312), ('이용', 312), ('발생', 311), ('컴포넌트', 300), ('해결', 293), ('활용', 277), ('이유', 276), ('시작', 275), ('프로그래밍', 275), ('모듈', 266), ('데이터', 266), ('배열', 262), ('태그', 261), ('설계', 258), ('수행', 252), ('내부', 251), ('요소', 245), ('상황', 242), ('개발', 236), ('중복', 229), ('접근', 221), ('인스턴스', 215), ('폴더', 210), ('호출', 209), ('시도', 208), ('직접', 206), ('요청', 206), ('반환', 202), ('가독성', 201), ('선언', 192), ('오류', 184), ('의미', 184), ('기준', 182), ('초기', 182), ('화면', 182), ('의존', 175), ('모델', 175), ('팩터링', 173), ('정리', 173), ('개선', 169), ('하위', 169), ('보고', 169), ('판단', 167), ('외부', 164), ('메세지', 164), ('속성', 163), ('보기', 163), ('제거', 162), ('메시지', 161), ('담당', 160), ('계산', 159), ('고려', 158), ('위치', 157), ('인자', 156), ('렌더링', 156), ('자동', 155), ('선택', 152), ('필요', 151), ('설정', 151), ('의도', 149), ('반복', 148), ('기반', 146), ('작업', 145), ('인지', 143), ('예외', 142), ('목록', 141), ('프로그램', 137), ('경험', 137)]
분석 결과 - BE(JAVA)
단어 빈도 출력 (상위 100개): [('테스트', 2653), ('객체', 2622), ('클래스', 2072), ('구현', 1535), ('로직', 1186), ('변경', 1152), ('검증', 1018), ('입력', 932), ('기능', 785), ('이름', 777), ('역할', 730), ('생성자', 700), ('분리', 677), ('리팩토링', 662), ('방식', 641), ('책임', 633), ('출력', 577), ('예외', 562), ('패턴', 559), ('구조', 487), ('변수', 481), ('상수', 436), ('반환', 434), ('컨트롤러', 408), ('상태', 394), ('의존', 391), ('발생', 385), ('설계', 385), ('패키지', 379), ('이유', 365), ('인터페이스', 362), ('컬렉션', 356), ('포장', 353), ('요청', 352), ('관리', 344), ('과정', 342), ('요구', 334), ('전달', 334), ('함수', 329), ('호출', 328), ('일급', 328), ('인스턴스', 328), ('위치', 325), ('상황', 319), ('데이터', 316), ('내부', 301), ('정적', 300), ('의문', 284), ('중복', 280), ('활용', 273), ('팩토리', 271), ('수행', 268), ('전략', 266), ('판단', 265), ('이용', 265), ('해결', 250), ('의미', 248), ('필드', 246), ('이동', 244), ('정리', 243), ('기준', 240), ('보고', 240), ('정보', 229), ('프로그래밍', 226), ('제거', 226), ('외부', 225), ('시도', 220), ('불변', 218), ('필요', 216), ('장점', 214), ('자동', 210), ('단위', 210), ('유효', 206), ('메시지', 202), ('제이', 195), ('비즈니스', 189), ('타입', 188), ('비교', 188), ('정의', 185), ('가장', 185), ('메세지', 183), ('인지', 182), ('주입', 179), ('변환', 178), ('프로그램', 175), ('의도', 170), ('접근', 170), ('직접', 169), ('개발', 168), ('팩터링', 166), ('모델', 166), ('원시', 163), ('문자열', 162), ('선언', 162), ('개선', 160), ('고려', 160), ('리스트', 159), ('메로', 158), ('담당', 155), ('상속', 154)]
분석 결과 - 종합
분석 with GPT
GPT 에게 단어 빈도 100개 출력 데이터를 아무 정보 없이 각각 보여준 후 (BE, FE, JAVA, JS의 대한 맥락, 편향 차단),
유사점과 차이점을 분석해달라고 했다.
첫 번째 데이터가 FE의 데이터, 두 번째 데이터가 BE의 데이터이다.
마무리
프론트엔드 개발자들은 "함수", "이벤트", "버튼", "화면", "렌더링" 등의 키워드를 주로 사용하고 있음을 확인할 수 있었다.
이는 프론트엔드 개발이 사용자와의 상호작용과 시각적 요소에 관심을 두고 있음을 나타내는 듯하다.
반면, 백엔드 개발자는 "객체", "클래스", "생성자", "인터페이스" 등의 키워드를 더 많이 사용하고 있다.
이러한 키워드는 백엔드 개발이 코드의 재사용성, 모듈성, 확장성 등 객체 지향 설계 원칙을 중시하고 있음을 보여준다.
분석 결과 실제로 양측에서 코드리뷰에서 자주 등장하고 있는 키워드가 다른 것을 확인할 수 있었다.
왜 서로 논의되는 주제가 달랐을까? 이것은 기회가 된다면 다시 다뤄보면 좋을 것 같다.
'기술' 카테고리의 다른 글
| [토스 프론트엔드 멘토링] Frontend Accelerator 1기 참여 후기! (4) | 2024.08.20 |
|---|---|
| 주니어 FE 개발자의 “클린 아키텍쳐” 1회독 후기 (2) | 2024.08.07 |