분류 전체보기 (138) 썸네일형 리스트형 [SNS서비스 만들기] 초록색의 생기있는 블로그 만들기 성능 향상을 고민하는 개발자 지망생입니다.구현을 넘어서 대용량 데이터를 웹 성능을 향상시키는 과정을 즐겨합니다.또한 Next.js, TypeScript, Styled-Components와 같이 정적언어와 반복 사용이 가능한 컴포넌트로 개발하는 것을 좋아합니다. 이번 SNS서비스는 React, Typescript, Styled-Components로 개발할 예정입니다. 초록색이나 파란색을 메인 색으로 진행할 예정이며, 초록색으로 우선 구현해 봤습니다.PC로 웹 환경으로 구현 후 아이패드와 모바일 환경에 맞게 적용할 예정입니다.무한스크롤, Lazy-Loading, 페이지네이션, 검색기능 등을 구현할 예정입니다.optimistic update를 사용한 좋아요 기능을 추가할 예정입니다. 필수 기능은 빠르게 구현하.. [SNS서비스 만들기] Firebase Database 설정 Firebase 기능 중 Database를 사용하려 할 때 다음과 같은 문구가 나타났다. Firestore에는 Datastore 모드와 기본 모드 두가지가 있는데, Datastore 모드로 업그레이드 중이다.새로 작성되는 Datastore로 업그레이드 된다.그러나 Datastore는 웹은 지원하지 않는다. 기본 모드로 전환google cloud console로 들어가서 오른쪽 위의 쉘 아이콘을 누른다. 화면 아래쪽에 터미널이 연결되면 다음과 같이 적으면 된다. Firebase의 Database 창을 확인하면 화면이 바뀌어 있을 것이다.아래쪽이 기본 모드의 Database 창이다. 기본 모드와 Datastore 모드 중 선택 | Firestore | Google Cloud의견 보내기 컬렉션을.. [SNS서비스 만들기] 환경설정 npm create vite@latestnpm i react-router-dom@6.14.2 styled-components@6.0.7 styled-resetnpm i @types/styled-components -D styled-reset: reset.css와 동일한 기능을 한다.types/styled-components: Typescript로 styled-components를 생성할 수 있게 하기 위해 사용한다. 프론트엔드 성능 체크리스트 프론트엔드 성능 체크리스트로 개선할 수 있는 부분을 알 수 있다. https://github.com/parksb/Front-End-Performance-Checklist GitHub - parksb/Front-End-Performance-Checklist: 🎮 더 빠르게 작동하는 프론트엔드 성능 체크리스트🎮 더 빠르게 작동하는 프론트엔드 성능 체크리스트. Contribute to parksb/Front-End-Performance-Checklist development by creating an account on GitHub.github.com [Javascript] falsy한 값 거짓 같은 값 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN거짓 같은 값(Falsy, falsey로 쓰이기도 함) 값은 Boolean 문맥에서 false로 평가되는 값입니다.developer.mozilla.org [Javascript] Switch문 사용하기 Switch문 사용하기break를 넣어서 해당하는 경우만 실행할 수 있도록 해야 한다.default를 넣어서 해당하지 않는 경우에 내보내는 경우를 작성한다. [Javascript] 타입의 변환(명시적 형 변환, 암시적 형 변환) undefined: 값을 할당하지 않았다.null: 값이 존재하지 않는다. 개발자가 의도적으로 존재하지 않다고 표시했다. 타입의 변환명시적 형 변환변환하겠다고 선언한다. false ---------true 암시적 형 변환자동으로 타입이 변한다.문자열+숫자 => 문자열문자열+boolean => 문자열문자열+null => 문자열문자열+undefined => 문자열 더하기 연산자는 문자 타입에, 빼기와 곱하기 나누기는 숫자 타입에 우선권이 있다. [Javascript] 자바스크립트의 특성 1. 객체지향 언어다.객체라는 단위로 실행한다.절차지향(순서대로 작동)과 대비되는 개념이다.재사용 할 수 있다. 2. 동적 타이핑 언어다.변수를 저장할 때 타입이 선언되지 않고 런타임에서 선언된다.Typescript는 정적 언어에 해당된다. 3. 함수형 프로그램을 지원한다. 4. 비동기 처리가 가능한 언어다. 5. 클라이언트 측, 서버 측 모두 사용 가능하다. [Javascript] 객체 자바스크립트에서는 다음과 같이 추가, 수정, 삭제를 할 수 있다.React에서는 이 방법은 불변성을 유지하지 않기 때문에 사용하지 않는다. Object.keys(객체) : 객체의 키 값을 배열로 나타낸다.Object.values(객체) : 객체의 값을 배열로 나타낸다.Object.entries(객체) : 객체를 배열로 나타낸다.Object.assign(객체1, 객체2) : 객체1에 객체2를 추가하여 추가된 객체1로 나타낸다.*객체1은 대상객체, 객체2는 출처객체라 한다. [Typescript] 공식문서 공부중4 만약 매개변수보다 더 많은 인수가 들어가 있는 함수를 호출한다면 추가 인수는 무시된다.Construct Signaturesnew를 이용해여 함수의 타입을 만들 수 있다.Generic Functions입력과 출력의 유형이 관련되어 있다면 사용할 수 있다. 부분이 generic이다. extends로 항목을 추가할 수 있다.콜백함수를 인자로 넣어서 사용할 수 있다. or을 넣어 두가지 경우의 타입만 가능하게 할 수 있다.objectstring, number, bigint, boolean, symbol, null, undefined가 아닌 값에 해당한다.즉 함수를 나타낼 수 있는 타입이다.objsect는 여러 properties를 가지고 있으며 object.keys와 같이 사용할 수 있다.빈 배열이나 글로벌 타.. 이전 1 2 3 4 5 6 ··· 14 다음
