안녕하세요, 김당쿽🥕입니다! 원티드 프리온보딩 프론트엔드 과정에 참여하게 되었고, 1회차 수업을 들은 후 남기는 기록입니다!
로그인의 개념과 애플리케이션 구조 알아보기
모킹?
모킹은 테스트 하려는 코드에 외부 의존성이 있을 때, 외부 서비스에 의존하지 않고 독립적으로 실행이 가능한 단위 테스트를 하기 위한 테스팅 기법이다.
로그인이란?
참고 자료: 리눅스 인포메이션 프로젝트
로그인 또는 로그온은 사용자가 시스템(예: 컴퓨터 또는 웹 사이트)에 액세스 하기 위해 시스템에 식별자 정보를 입력하는 것. 보안을 염두에 두고 설계된 운영 체제(예: 유닉스 계열 시스템)의 일반 사용자 계정에 로그인 하면 해당 사용자는 시스템의 제한된 파일 및 프로그램 세트에만 접근할 수 있다. 루트(즉, 관리) 계정에 로그인 하면 해당 사용자는 시스템의 모든 파일 및 프로그램에 대한 접근 권한을 얻는다. 로그인은 접근을 제한할 뿐만 아니라 시스템 로그 파일에 자동으로 입력되는 데이터 형식의 감사 추적도 제공한다. 이러한 데이터는 시스템 관리자가 정기적으로 연구하거나 의심스러운 활동 또는 시스템 손상 징후가 있는 경우 연구할 수 있다.
formData
api 통신을 할 때 종종 FormData로 정보를 주고받는 api를 볼 수 있다. json에 익숙한 상태에서 formdata로 주고받으려고 하니 조금 더 제약이 있어서 어려웠던 것 같다.
const formData = new FormData();
formData.append('쿼카', '당근') // append 메서드를 사용하면 data를 추가할 수 있다.
formData.append('강아지', '귀여워')
for (let [key, value] of formData.entries()) { //entires 메서드를 사용하면 formData 객체에 포함된 모든 key/value쌍을 통과하는 iterator를 반환한다.
console.log(key, value) // 쿼카당근 \n 강아지귀여워
}
formData.get('강아지') // 귀여워 | get 메서드는 해당 key에 대한 value를 반환한다.로그인 유무에 따른 라우터
학습 자료 공유가 불가능하여 말로 설명합니다 ㅠㅠ
element를 이용하여서 auth 유무에 따른 라우터를 생성할 수 있다. route 정보를 담은 배열을 생성 후 createBrowserRouter 함수 안에서 map 메서드로 로그인 유무에 따른 라우터를 생성한다.
그럼 sidebar는?
reduce 메서드를 활용해 보자! prev, current를 인자로 받고 로그인이 되어 있다면 current 의 path로 바꿔 준다. 그렇지 않다면 그대로 return prev 을 해주는 콜백 즉시 실행 함수를 사용하면... 된다는데 아직 잘은 모르겠다. 8ㅅ8...
filter 메서드도 나쁘지는 않지만 필요한 값만 가지고 가기 때문에 reduce를 사용하였다.
<Sidebar content={작성한 reduce 컴포넌트} />CSR과 SSR
클라이언트 사이드 렌더링과 서버 사이드 렌더링
여기서 말하는 렌더링은 html과 css를 읽어 들이는 것. js를 가지고 오는 것은 아니다. html과 css가 영향을 받을 수는 있다.
렌더링 엔진을 확인해 보는 것도 렌더링을 이해하는 좋은 방법.
v8 어렵겠지만 렌더링에 관한 코드가 있다. 네이버 D2글도 참고해 보면 좋을 것.
- 클라이언트 사이드 렌더링
클라이언트가 자바스크립트에 의해서 html, css를 만들어서 화면에 그려 주는 것. - 서버 사이드 렌더링
서버에서 html를 반조립한 상태로 문서를 보내 준다. 서버비가 더 나올 수 있다.
SSG
Static Site Generation
현재에서 제일 빠른 렌더링 방식.
React에 Next.js나 Gatsby.js 등의 라이브러리를 사용하여 개발한 정적 웹 페이지를 빌드한 후 산춘물을 CDN으로 배포한다. 필요할 때마다 CDN으로부터 전달받은 정적 페이지를 유저에게 빠르게 제공.
참고 자료
SSR은 SEO도 된다면 다 SSR 사용하면 되는 거 아닌가요?
서버를 만들어야 하기 때문에 세팅이 필요하다.
CSR과 SSR 선택 기준
- 추가로 서버가 필요한가?
- SEO가 필요한가?
- 검색 엔진에 걸려야 한다면 SSR을 사용하는 것을 추천
- 어떤 유저 인터랙션이 많은가? (페이지 이동 vs 페이지 내 인터랙션)
- 등등...
CSR > SSR > 인프라 순으로 공부하면 좋다. SSR에서 서버 관리는 보통 프론트에서 하는 편. 상황마다 다르겠지만 백엔드에서 봐 주지 않을 것.
수업에 나온 Q&A!
1. 타입 단언과 toString() 중 어느 것이 더 안전할까?
// 예시 코드 1
const user = formData.get('username') as string
// 예시 코드 2
const user = formData.get('username').toString()강사님의 의견으로는 안전한 건 toString()이라고 하셨다. 타입 단언은 짧은 구문에서 조금 더 쉽게 이해하기 위해 사용된 것이라고.
2. 현업에서 삼항연산자를 많이 쓸까?
케바케. 상황에 따라서 다르며 가독성이 좋게끔만 쓰면 된다.
3. i18n
internationalization의 축약형. 국제화, internationalization, i18n 로 표현할 수 있다.
4. 스토리북 많이 쓰나요?
팀 바이 팀, 사용하는 곳은 많다.
5. 신입 프론트엔드의 필수 역량은?
- 코드를 읽을 수 있는 지식
- 내가 뭘 모르는 건지 아는 것
- 2번의 파생되어 질문을 잘하는 것
6. 상태 관리 라이브러리는 어떤 것을 쓰나요?
redux를 사용하는 것이 좋으나 mobx, recoil도 좋다. 래거시 코드는 redux가 많다.
7. 프론트엔드는 백엔드 지식(혹은 CS 지식)을 어느 정도 알면 좋을까?
- CRUD
- HTTP 프로토콜
- DB
- 알고리즘 자료 구조
- 그러나... 프론트 지식이 더 중요하다.
8. Using useState to HTML input?
input 값이 변화될 때마다 리랜더링이 일어날 것.
