개발자들이 남긴 기록..

테슬라 주식 이야기와 투자 분위기
BigBlueButton(BBB) 소개와 개발 이슈
JavaScript 초보 질문: 변수 선언과 함수 오류 해결
React SEO(검색엔진최적화) 관련 대화
Git rebase와 PR 최신화 팁
상태관리 라이브러리(리코일, 주스탠드, 모브엑스 등) 이야기
API 호출 최적화 및 백엔드 데이터 처리 전략
React 폼 라이브러리(yup, zod, react-hook-form 등) 비교
개발자의 일상과 커뮤니티 문화
개발 학습 리소스와 조언

1. 테슬라 주식 이야기와 투자 분위기 🚀

테슬라 주식이 갑자기 16~40% 가까이 올랐다는 소식이 활발히 오감
분할매수와 물타기, 후회하는 투자자들의 대화가 다수
소액 투자라도 꾸준히 들여놓는 것에 대한 응원과 농담 교환
주식 성공 사례도 공유되며 친근한 분위기 형성

2. BigBlueButton(BBB) 소개와 개발 이슈 🎥

BBB는 오픈소스 화상회의 및 줌과 유사한 솔루션
기존에 다뤄본 개발자는 오래돼 기억이 가물가물하다고 언급
대형 컴포넌트(600줄)가 복잡해 함수명과 동작이 맞지 않아 작업하기 어렵다는 불평
1:1 채팅 문의 및 관련 정보 공유도 이루어짐

BigBlueButton 설명

BigBlueButton은 온라인 교육/회의를 위한 오픈소스 플랫폼으로, 비디오, 오디오, 채팅, 화면 공유 등 다양한 기능을 제공함. 줌과 비슷한 기능을 제공하나 오픈소스로 커스터마이징 가능해 개발자들 사이에서 교육용 솔루션으로 많이 사용됨.

3. JavaScript 초보 질문: 변수 선언과 함수 오류 해결 💻

초보자가 JS 변수 선언법, 함수 작성법, 조건문 사용법에 대해 질문
math.floor → Math.floor 등 케이스 민감 문제 및 변수 업데이트 관련 오류 설명
Code has no side effects 에러는 변수를 실제로 할당하지 않아 생기는 문제
let 변수 재선언 오류, 스코프(scope) 이해 필요성 강조
전역변수와 지역변수 차이에 대한 간단 설명
함수 매개변수(파라미터)란, 함수 호출 시 전달하는 값을 의미함을 안내
자바스크립트 기초 문법과 객체 개념 공부 권장

초보자 팁

자바스크립트는 대소문자를 구분하며 변수는 반드시 선언 후 사용할 것. 함수 내 변수는 let 또는 const로 선언하며, 변수를 수정할 때는 변수명 = 변수명 + 1 혹은 변수명 += 1을 사용. 함수에 값을 전달하는 파라미터 개념도 꼭 익힐 것.

4. React SEO(검색엔진최적화) 관련 대화 🔍

React 앱은 기본적으로 SPA(Single Page Application) 구조라 SEO에 취약할 수 있음
구글 봇은 최신 트렌드에 맞춰 자바스크립트 렌더링을 어느 정도 지원하지만, 네이버는 지원이 미흡한 편
react-helmet은 HTML <head> 태그를 다이나믹하게 관리하는 라이브러리지만 자바스크립트 실행이 필요해 SSR(서버사이드렌더링) 없이는 SEO 효과가 제한적임
react-snap은 SPA를 사전 렌더링하는 도구로 SEO 향상에 도움됨
Next.js 같은 프레임워크를 사용하면 SSR로 SEO 문제를 체계적으로 해결 가능
한국 시장에서는 네이버 노출을 신경쓰는 게 중요하다는 의견 존재

SEO 기본 설명

SEO는 검색엔진이 웹페이지 내용을 잘 인식하도록 만드는 작업이다. SPA는 페이지가 하나이므로 모든 콘텐츠가 자바스크립트로 동적으로 렌더링되어 검색엔진이 인식하는 데 문제가 발생하기 쉽다. 서버사이드 렌더링(SSR) 또는 사전 렌더링(Static Site Generation, SSG)이 이를 보완함.

5. Git rebase와 PR 최신화 팁 🐙

PR을 리베이스하고 충돌 해결 시, main 브랜치의 최근 커밋들이 피알 커밋에 같이 올라가는 점 질문
이는 리베이스 과정에서 발생하는 정상적인 현상이며, PR 최신화 방법 중 하나임
깃브랜치 관리 시 노드모듈 등 불필요한 파일이 메인 브랜치에 섞이지 않도록 .gitignore를 올바르게 설정해야 함

Git rebase 간단 팁

Rebase를 하면 기준 브랜치의 변경 사항을 자신의 브랜치에 덧씌우는 방식으로 최신화함. 충돌 해결 후 git rebase --continue로 마무리하며, PR에 포함된 커밋들이 달라질 수 있음. 꼭 깃 이그노어 설정을 미리 확인하는 것이 좋음.

6. 상태관리 라이브러리 이야기 (리코일, 주스탠드, 모브엑스 등) ⚛️

최근 React 상태관리 라이브러리로 리코일(Recoil), 주스탠드(Zustand), 모브엑스(MobX), 리덕스(Redux)가 많이 언급됨
리코일 관련 이슈와 대체 라이브러리로 주스탠드, 조타이(Jotai) 등이 추천됨
여러 상태관리 라이브러리가 각각 장단점 있으며, 상황과 프로젝트 특성에 맞게 선택 권고
전역 상태관리 코드를 갈아끼우는 작업은 샘플 코드가 있으면 비교적 수월

상태관리란?

React에서 상태(state)란 UI를 구성하는 데이터. 상태관리를 잘 해야 컴포넌트가 효율적으로 렌더링되고, 앱이 예측가능하게 동작함. 상태관리 라이브러리는 이런 상태를 관리하고 공유하는 역할을 담당함.

7. API 호출 최적화 및 백엔드 데이터 처리 전략 ⚙️

게시글 첨부파일 수정 시 삭제할 파일만 삭제 요청하는 방식을 두고 고민
1번: Patch 요청 시 남아있는 파일 목록만 보내 백엔드에서 차이를 찾아 삭제 처리
2번: 각 파일 삭제 시 별도 DELETE 요청 여러 번 보내는 방법 (API 호출 횟수 증가)
첨부파일 수가 많을 경우(50개 이상) API 호출이 과다해지는 문제가 있음
서버 부하는 적지만 호출 횟수를 줄이는 방식 권장(1번 방법)
물리적 파일 삭제는 비동기 처리 또는 스케줄러로 관리하는 게 효율적

API 호출 최적화 팁

가능하면 한번의 요청에 변경 사항 전체를 보내고 서버에서 비교 처리하는 것이 좋음. 이렇게 하면 네트워크 통신량과 부하를 줄일 수 있고, 코드 유지보수성도 향상됨.

8. React 폼 라이브러리 비교: yup, zod, react-hook-form 💡

React 폼 작업 시 많이 쓰이는 라이브러리는 Formik, react-hook-form 등이 있음
yup과 zod는 자바스크립트/타입스크립트용 데이터 검증 라이브러리(Validator)
zod는 schema 기반 검증을 제공하며 생산성 향상에 도움됨
react-hook-form과 결합 시 비동기 폼 상태 관리가 용이
yup은 검증 로직이 명확하고 간단, zod는 타입스크립트 친화적이고 강력한 기능 제공
상황과 팀 스타일에 따라 적절한 도구 선택 권장

Validator란?

Validator는 사용자가 입력한 데이터가 원하는 형식과 조건에 맞는지 검사하는 코드나 라이브러리를 의미함. 예를 들어 이메일 형식 검사, 필수 입력 여부 등을 체크함.

9. 개발자의 일상과 커뮤니티 문화 🎉

해장, 운동가기 싫다, 밥 먹으러 간다 등 일상 소소한 대화 다수
가벼운 농담과 응원, 명언(?) 공유로 친근한 분위기
개발 관련 농담도 함께 오가며 스트레스 해소 역할

10. 개발 학습 리소스 및 조언 📚

자바스크립트 기초부터 공부하라는 조언과 링크 다수 공유
영상 강의, 블로그, 오픈카페 추천
프로그래밍은 단순히 읽고 외우기보다 코드를 직접 타이핑하며 실행해보는 게 중요함
함수, 변수, 객체, 스코프 개념부터 차근차근 이해할 것
높은 완성도를 원한다면 체계적인 커뮤니티 참여와 꾸준한 학습이 필요함

면접팁⚡

자바스크립트 기초 개념(변수선언, 스코프, 함수 호출 및 파라미터 이해)은 필수적으로 숙지해야 함
React 컴포넌트 SEO 문제, SSR 기본 개념에 대해 알고 있으면 좋음
Git rebase와 충돌 해결 경험은 실무에서 자주 묻는 주제
상태관리 라이브러리 종류와 특성에 대해 간략히 설명하는 연습 추천
API 설계 시 호출 최적화 및 백엔드와의 데이터 흐름에 대한 이해는 큰 장점

링크🔗

BigBlueButton 공식 위키: https://en.m.wikipedia.org/wiki/BigBlueButton
JavaScript 변수 선언 및 스코프 가이드: https://velog.io/@marksen/JavaScript-%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8%EA%B3%BC-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%95%A0%EB%8B%B9-4a54ujdu
React SEO 이슈 github 이슈: https://github.com/nfl/react-helmet/issues/377
깃허브 .gitignore 사용법: https://git-scm.com/docs/gitignore
react-hook-form 공식 페이지: https://react-hook-form.com/
yup vs zod 비교 블로그: https://dev.to/debtcollecter/comparing-zod-yup-and-superstruct-validation-libraries-2maj
자바스크립트 객체 개념 설명: https://poiemaweb.com/js-object
Visual Studio Code에서 JavaScript 실행 환경 설정: https://onsil-thegreenhouse.tistory.com/entry/Visual-Studio-Code%EC%97%90%EC%84%9C-Javascript-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95
리액트 상태관리 라이브러리 비교(gist): https://gist.github.com/arkatsy/7ff5b6cd95fe94b5e480972a0d116aeb
청년내일저축계좌 안내: https://link.kakaopay.com/_/_5mA8JV
React Helmet GitHub Repo: https://github.com/nfl/react-helmet
react-snap: https://github.com/stereobooster/react-snap
Next.js 공식 홈페이지: https://nextjs.org/
JavaScript 객체 개념 TCP School: https://www.tcpschool.com/javascript/js_object_concept
카카오톡 봇 관련 커뮤니티: https://cafe.naver.com/highkrs?iframe_url=/MyCafeIntro.nhn%3Fclubid=30461407

2024-04-30

목차

1. 테슬라 주식 이야기와 투자 분위기 🚀

2. BigBlueButton(BBB) 소개와 개발 이슈 🎥

3. JavaScript 초보 질문: 변수 선언과 함수 오류 해결 💻

4. React SEO(검색엔진최적화) 관련 대화 🔍

5. Git rebase와 PR 최신화 팁 🐙

6. 상태관리 라이브러리 이야기 (리코일, 주스탠드, 모브엑스 등) ⚛️

7. API 호출 최적화 및 백엔드 데이터 처리 전략 ⚙️

8. React 폼 라이브러리 비교: yup, zod, react-hook-form 💡

9. 개발자의 일상과 커뮤니티 문화 🎉

10. 개발 학습 리소스 및 조언 📚

면접팁⚡

링크🔗

2024-04-29

2024-05-01