react 썸네일react

2024-10-29

목차

  1. 일상과 개발 환경 이야기
  2. 자바스크립트 시험과 공부 팁
  3. Postman에서 트RPC 데이터 시각화 활용
  4. 버전 정보 관리 및 CI/CD 활용법
  5. Tailwind CSS, MUI 등 프론트엔드 스타일링 이야기
  6. Git 커밋 메시지 작성 중요성
  7. 개발자 직장 및 근무 환경 토론
  8. 운동과 건강 챙기기
  9. VSCode UI 변경과 셋업 팁
  10. SQL 실행 순서 이해 퀴즈 및 해설

1. 일상과 개발 환경 이야기

  • 개발자들 사이에서 출근길, 운동, 식사, 건강 챙기기 등 일상 대화가 활발했음.
  • 직장 내에서 무료 간식, 점심, 저녁 지원 등 복지 이야기도 나왔음.
  • 집과 회사 근처 환경, 특히 경기도 수원, 파주 등 지역에 대한 친근한 토크가 오감.
  • 운동 특히 러닝과 풀업(턱걸이) 등으로 체력 관리를 하는 분들도 많았음.

2. 자바스크립트 시험과 공부 팁

  • JS 시험은 보통 조건문, 반복문, React의 useState 활용 등 기초를 평가.
  • 평소 실력을 바탕으로 문제를 푸는 것이 중요하며, 코드를 외우기보다는 작동 원리를 이해하는 게 핵심임.
  • ‘코드가 울다’라는 표현은 개발자로서 코드가 안 되는 상황에 좌절함을 의미.
  • 자바스크립트에 어려움을 느낌 → 타입스크립트로 관심 전환하는 의견도 있었음.

초보자를 위한 자바스크립트 공부 팁

  • 기본 문법(변수 선언, 조건문, 반복문)을 잘 익힐 것
  • React에서 상태 관리(useState 등) 이해하기
  • 암기보다는 스스로 코드 작성과 디버깅을 통해 원리 체득

3. Postman에서 trPC 데이터 시각화 활용

  • Postman 스크립트 기능을 활용하여 응답 데이터를 가공하고 차트로 시각화 가능.
  • Chart.js 라이브러리를 불러와 캔버스(<canvas>)에 차트를 그림.
  • Postman pm.visualizer.set을 사용해 템플릿과 데이터를 시각적으로 표현함.

Postman Visualizer란?

  • API 테스트 도중 JSON 등 응답을 차트, 표 등으로 시각화해 주는 기능으로, 이를 통해 복잡한 데이터를 쉽게 이해할 수 있음.
  • 초보자는 Postman 스크립트탭에 JavaScript 작성을 통해 구현 가능.

4. 버전 정보 관리 및 CI/CD 활용법

  • 프로젝트 버전 정보는 CI/CD 파이프라인에서 환경 변수로 주입하는 방식 추천.
  • 예) VITE_APP_VERSION 같은 변수에 Git commit hash를 넣어 관리 가능.
  • Git hash란?
    • 커밋을 식별하는 고유 문자열로, 짧은 앞부분 문자열로 버전 표기에 자주 사용됨.
    • 프로젝트 버전을 특정 커밋 버전과 매칭시킬 때 유용함.

5. Tailwind CSS, MUI 등 프론트엔드 스타일링 이야기

  • Tailwind CSS는 유틸리티 클래스 기반 스타일링 도구로 호불호가 있음.
  • MUI(Material UI)는 React용 UI 컴포넌트 라이브러리로 실무에서 많이 사용됨.
  • "회사마다 다름"이 일관된 의견으로, 프로젝트와 팀 상황에 맞게 선택하는 게 적합함.
  • CSS 기본기를 갖추는 것이 우선이며, Tailwind는 필요에 따라 배우는 것을 권장.

6. Git 커밋 메시지 작성 중요성

  • 의미 없는 커밋 메시지(예: 버그수정, 이상한 말) 작성 경고
  • 좋은 커밋 메시지는 수정 내용을 간결하고 명확하게 작성해야 팀 협업에 도움 됨.
  • 예) 기능명과 변경사항 간단 표기 → [업뎃] 로그인 기능 개선
  • 초보 개발자가 실수하기 쉬운 부분임.

7. 개발자 직장 및 근무 환경 토론

  • 주 35시간 근무를 하는 직장도 있는 반면, 대부분은 10~18시 기준 근로.
  • 사내 복지(음료, 간식, 점심·저녁 제공 등) 좋은 곳은 만족도 높음.
  • 각 개발자는 자신에게 맞는 환경과 복지, 일과 삶의 균형을 중요시함.

8. 운동과 건강 챙기기

  • 운동 챗도 활발, 러닝 페이스 조절과 헬스장 등록 계획 공유
  • 러닝 훈련 페이스: 1km 당 6분을 꾸준 유지하는 방식 설명
  • 운동은 정신 건강과 코딩 생산성에 도움이 됨을 공감함.

9. VSCode UI 변경과 셋업 팁

  • 최근 VSCode 업데이트 후 UI 변화 때문에 적응 필요하단 반응.
  • Extension(확장 기능) 다수 사용 시, 기존 단축키나 인터페이스 약간 달라질 수 있어 설정 확인 권장.
  • Git branch 확인은 기본적으로 Source Control 탭에서 가능하며, 터미널 프롬프트에 브랜치 표시도 가능함.

10. SQL 실행 순서 이해 퀴즈 및 해설

  • SQL 쿼리 실행 순서 문제 출제 및 답변 공유
  • 올바른 SQL 구문 실행 순서: FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY
  • 각 절의 역할
    • FROM: 테이블 선택
    • WHERE: 행 필터링
    • GROUP BY: 그룹핑
    • HAVING: 그룹 필터링
    • SELECT: 결과 컬럼 추출
    • ORDER BY: 정렬
  • SQL문 작성 및 이해에 도움이 되는 기본 지식임.

면접팁⚡

Git 커밋 메시지 작성

  • 명확하고 간결한 메시지를 작성하라
  • 변경 내용과 목적이 드러나도록 작성하면 평가에서 좋은 인상

자바스크립트 기초와 React 상태관리

  • 기초 문법 정확히 알고 활용할 줄 알아야 함
  • useState, 조건문, 반복문 이해도 중요

SQL 실행 순서 이해

  • 실무에서 쿼리 최적화와 디버깅 시 해당 순서 이해 필수
  • GROUP BY와 HAVING 절의 차이점 명확히 설명 가능해야 함

링크🔗

#자바스크립트#Postman#CI_CD#TailwindCSS#VSCode#Git커밋#SQL#운동#프론트엔드#개발자일상