✨ 소감
개발 컨퍼런스를 들으면서 프론트엔드 개발을 하면서 몰랐었던 부분이나 헷갈렸던 부분들을 해결할 수 있었습니다! 어느 방향으로 공부를 해야될지, 성능 향상을 위해서 어떤 부분을 건드려야 할지 감을 잡을 수 있었던 유익한 시간이었습니다. 이 컨퍼런스를 들으면서 CMC에 도전해봐야겠다는 생각이 들었고, 저 또한 추후에 개발 컨퍼런스를 통해 프론트엔드 개발자를 희망하는 사람들에게 도움이 될 수 있는 멋진 사람이 되어야겠다는 다짐을 할 수 있었습니다🔥
개발 컨퍼런스 진행해주신 CMC 선배님들 정말 감사합니다.
아래 내용은 컨퍼런스를 들으며 정리해놓은 것들입니다. 참고하셔도 됩니다!
<목차>
1. 디바운싱과 쓰로틀링
2. 비동기 suspense 다루기 (feat. react-query + suspense)
3. PWA(Progressive Web App)
4. 모든 서비스의 시작 | 안전하게 로그인하기
5. 웹 해킹/ 시스템 해킹
6. csr과 ssr, 무엇을 사용해야 하는가?
7. CI/CD
8. 자바스크립트 메모리 누수
9. SEO(Search Engine Optimization)
1️⃣ 디바운싱과 쓰로틀링
- 디바운싱
엔터 없이도 결과를 즉시 보여주려면 항상 input 이벤트에 대기하고 있어야 한다. 그렇기에 event를 줄이기 위해 input 창 입력 마지막에 실행되게 하는 것을 디바운싱이라고 한다.
- 쓰로틀링
쓰로틀링은 보통 성능 문제 때문에 많이 사용한다. 특성 자체가 실행 횟수에 제한을 거는 것이기도 하다.
스크롤을 올리거나 내릴 때 scroll 이벤트가 매우 많이 발생한다. scroll 이벤트가 발생할 때 뭔가 복잡한 작업을 하도록 설정했다면 매우 빈번하게 실행되기 때문에 엄청 렉이 걸릴 것이다. 그럴 때 쓰로틀링을 걸어주며 몇 초에 한 번, 또는 몇 밀리초에 한 번씩만 실행되게 제한을 두는 것이다.
2️⃣ 비동기 suspense 다루기 (feat. react-query + suspense)
비동기 종류
비동기 프로그래밍을 하는 이유?
서버에게 요청을 했는데 기다리기만 하지 않고, 사용자에게 좋은 정보를 준다.
좀 더 좋은 사용자 경험을 줄 것이다.
- Callback
promise가 나오기 전에 자주 사용하던 방식
단점 => 성공의 유무가 실패의 유무가 섞여있다.
에러 핸들링을 하기 힘들다. 그래서 async await try catch를 통해 에러 핸들링을 한다.
좀 더 좋은 코드
성공 실패 경우를 분리해서 처리할 수 있다.
어려운 코드
성공 실패 경우가 섞여있어 비즈니스 로직을 파악하기 힘들다.
비동기 + suspense
- react-query + suspense
펜딩 상태와 에러 상태를 체크하지 않고 외부에 위임해 주는 코드
성공하는 로직만 내부에, 에러와 로딩상태는 외부에
3️⃣ PWA(Progressive Web App)
웹 앱이란, 정적 파일 요청 매번 요청하지 않고
필요한 정보만 서버에게 요청해 모바일 앱처럼 부드러운 느낌 그래서 웹 앱이라고 불
PWA(Progressive Web App) 특징
발견 가능, 설치 가능, 연결 가능, 네트워크 독립적, 점진적, 재 참여 가능, 반응형, 안전
4️⃣ 모든 서비스의 시작 | 안전하게 로그인하기
개발자 보안이슈로 한순간에 나락으로 갈 수 있다.
토큰 기반 인증 시스템
보통 저장 장소에서 보안 이슈가 많이 일어난다.
브라우저 저장소 종류와 보안 이슈
그럼 어떡하라고?
이 방법에도 많은 허점이 있듯이, 보안에는 정답이 없다.
스크립트 형식에 보안이 뚫리지 않도록 프론트, 백이 많은 노력을 기울여야 한다.
좀 더 안전한 방식은 무엇인지 고민하면서 안전한 개발자 되자.
5️⃣ 웹 해킹/ 시스템 해킹
6️⃣ csr과 ssr, 무엇을 사용해야 하는가?
CSR, SSR 외에도 다양한 렌더링 방식이 등장한다.
CSR이란, 클라이언트인 브라우저가 렌더링을 처리하는 방식이다.
클라이언트 사이드 렌더링
react, vue.js 이 나오면서 페이지 간 이동이 ssr보다 부드럽게, 서버 부하를 줄여줘서 csr을 택하는 방식이 많아짐
CSR 단점이란
초기로딩 시간이 길어지고, SEO 시간이 길어지는 큰 단점
사람들은 다시 과거로 돌아가 SSR가 재조명 됐다.
CSR 단점 극복할 수 있는 Next.js
SSR이란, 클라이언트가 매번 서버에게 요청을 한다.
자신이 만들려는 웹의 목적을 정확히 알고, 목적을 충족할 수 있는 것을 선택하자
변화에 민감하게 반응을 해야 하며, 정답은 없고 상황에 맞는 것을 사용해야 한다.
쇼핑몰인 경우, 검색이 많이 떠야 한다. 이와 같은 경우엔 SEO가 효율적인 SSR, Next.js를 선택해야 한다.
민감한 정보, CSR react.js를 택하는 것이 더 효율적이다.
SEO를 극대화시킬 필요가 없을 것이다.
7️⃣ CI/CD
CI란?
1. 개발 생산성 향상
2. 문제점을 빠르게 발견
3. 버그 수정 용이
=> 코드의 퀄리티 향상
CD?
CD는 개발자의 변경사항이 고객의 상품까지 반영이 되는 것
8️⃣ 자바스크립트 메모리 누수
페이지 로딩 속도 원인 중 하나가 메모리 누수다.
컴퓨터 프로그램이 더 이상 필요하지 않은 메모리를 해제하지 않아 성능 저하를 초래하는 것이다.
- 콘솔 출력
- 해제하지 않은 타이머
- 의도치 않은 전역 변수
- 클로저의 잘못된 사용
9️⃣SEO(Search Engine Optimization)
검색 결과 최상단에 노출
비용적인 단점을 커버하기 위해서 나온 것이 SEO 검색 엔진 최적화다.
SEO는 검색엔진 최적화, 즉 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스다.
검색 엔진의 검색 결과 페이지 생성 프로세스
1. 크롤링
2. 인덱싱
3. 랭킹
1. 고유하고 정확한 페이지 제목
2. 메타 설명 태그 적극적 사용
3. 페이지에서 꼭 필요한 부분만 표제 사
4. 구조화된 데이터 마크업을 추가
'🍞 대외활동 > 개발 컨퍼런스' 카테고리의 다른 글
| [UMC] 웹 컨퍼런스 정리 (0) | 2023.07.20 |
|---|
