안녕하세요, 김당쿽🥕입니다! 원티드 프리온보딩 프론트엔드
과정에 참여하게 되었고, 1회차 수업을 들은 후 남기는 기록입니다!
모킹은 테스트 하려는 코드에 외부 의존성이 있을 때, 외부 서비스에 의존하지 않고 독립적으로 실행이 가능한 단위 테스트를 하기 위한 테스팅 기법이다.
참고 자료: 리눅스 인포메이션 프로젝트
로그인 또는 로그온은 사용자가 시스템(예: 컴퓨터 또는 웹 사이트)에 액세스 하기 위해 시스템에 식별자 정보를 입력하는 것. 보안을 염두에 두고 설계된 운영 체제(예: 유닉스 계열 시스템)의 일반 사용자 계정에 로그인 하면 해당 사용자는 시스템의 제한된 파일 및 프로그램 세트에만 접근할 수 있다. 루트(즉, 관리) 계정에 로그인 하면 해당 사용자는 시스템의 모든 파일 및 프로그램에 대한 접근 권한을 얻는다. 로그인은 접근을 제한할 뿐만 아니라 시스템 로그 파일에 자동으로 입력되는 데이터 형식의 감사 추적도 제공한다. 이러한 데이터는 시스템 관리자가 정기적으로 연구하거나 의심스러운 활동 또는 시스템 손상 징후가 있는 경우 연구할 수 있다.
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 메서드로 로그인 유무에 따른 라우터를 생성한다.
reduce
메서드를 활용해 보자! prev, current
를 인자로 받고 로그인이 되어 있다면 current
의 path로 바꿔 준다. 그렇지 않다면 그대로 return prev
을 해주는 콜백 즉시 실행 함수를 사용하면... 된다는데 아직 잘은 모르겠다. 8ㅅ8...
filter
메서드도 나쁘지는 않지만 필요한 값만 가지고 가기 때문에 reduce
를 사용하였다.
<Sidebar content={작성한 reduce 컴포넌트} />
클라이언트 사이드 렌더링과 서버 사이드 렌더링
여기서 말하는 렌더링은 html과 css를 읽어 들이는 것. js를 가지고 오는 것은 아니다. html과 css가 영향을 받을 수는 있다.
렌더링 엔진을 확인해 보는 것도 렌더링을 이해하는 좋은 방법.
v8 어렵겠지만 렌더링에 관한 코드가 있다. 네이버 D2글도 참고해 보면 좋을 것.
Static Site Generation
현재에서 제일 빠른 렌더링 방식.
React에 Next.js나 Gatsby.js 등의 라이브러리를 사용하여 개발한 정적 웹 페이지를 빌드한 후 산춘물을 CDN으로 배포한다. 필요할 때마다 CDN으로부터 전달받은 정적 페이지를 유저에게 빠르게 제공.
참고 자료
서버를 만들어야 하기 때문에 세팅이 필요하다.
CSR > SSR > 인프라 순으로 공부하면 좋다. SSR에서 서버 관리는 보통 프론트에서 하는 편. 상황마다 다르겠지만 백엔드에서 봐 주지 않을 것.
toString()
중 어느 것이 더 안전할까?// 예시 코드 1
const user = formData.get('username') as string
// 예시 코드 2
const user = formData.get('username').toString()
강사님의 의견으로는 안전한 건 toString()
이라고 하셨다. 타입 단언은 짧은 구문에서 조금 더 쉽게 이해하기 위해 사용된 것이라고.
케바케. 상황에 따라서 다르며 가독성이 좋게끔만 쓰면 된다.
internationalization의 축약형. 국제화, internationalization, i18n 로 표현할 수 있다.
팀 바이 팀, 사용하는 곳은 많다.
redux를 사용하는 것이 좋으나 mobx, recoil도 좋다. 래거시 코드는 redux가 많다.
input 값이 변화될 때마다 리랜더링이 일어날 것.