디자이너 회의
반응형 디자인 예시 : PC / 테블릿 / 모바일
오전 디자인 회의
1.
폰트는 조금 더 찾아봐야 할 것 같음
2.
pc 버전 간격 중요
3.
디테일 페이지 태그정보 수정
4.
실패페이지 색 들어간걸로 수정
5.
기본 레이아웃에 칠드런에 패딩
6.
md부터 사이드바 내려오고 보라색 배경 full로
7.
하단 사이드바 색 진한걸로 변경, 아이콘 색도 변경예정
데일리스크럼
•
zoom을 컨텍스트로 가져와서.. ref로..
◦
오픈소스 보면서 잘하는 사람들은 어떻게 구현했는지 공부
•
hic heic 아이폰에서만 지원
◦
이미지를 업로드할때 그확장자를 판단을해서 hic hiv다 그러면 next api라우트로 경유서버로 돌린 다음에 서버에서 파싱해서 webp로 파싱해서 그걸 받아와서 스토리지에 저장
•
state of css
◦
css 최신 정보 뭐가 추가됐는지 확인 가능 점유율 등등
•
엠뷸라 캐러셀?
•
데이피커 달마다 비활성화 배열 생성
◦
잘 되면 오픈소스 기여 고려해보기
•
z-index 30
•
margin collapse - 마진 상쇄
◦
가능하면 패딩을 먼저 사용
•
supabase egress 오류
◦
밖에서 사진을 가져오는게.. 문제?
◦
egress 줄이는 방법 구글링
◦
정 안되면 storage를 외부로 옮겨야함 - aws, firebase,
•
gpt - 전세계의 모든 데이터를 학습해서 더이상학습할게없음..
•
프론트엔드는 가장 소통이 많은 직군(디자이너, 클라이언트, 백엔드 등등..)이기 때문에 ai가 대체할수없을것이다
egress 용량 잡자
•
이미지가 많기 때문에 어쩔 수 없다
•
유저가 업로드시의 이미지 용량제한을 걸어야함!
◦
5MB 정도
•
코드적인 문제는 아님.
•
유저테스트를 받아야할텐데 그럼 사용량이 더늘겠죠??
•
제한을 어느정도 걸자
•
egress는 스토리지에 저장, 삭제, 통신될때마다 오름
•
이미 올라간걸 불러오는것도 egress 문제가됨
•
이미지 용량이 큰걸 계속 불러오는게 문제
•
넣을때도문제 불러올때도 문제다
•
검색할때 계속 fetch ⇒ 실시간 검색말고 엔터 눌렀을때만 fetch되도록
•
채팅도 무한스크롤되게? 리버스 무한스크롤?
•
채팅
◦
채팅 내용을 보낼때마다 계속해서 가져오는 원인을 찾자
◦
웹소켓으로 한번 통신을 하고 DB에 넣는데, 리얼 타임은 중간에 무조건 db를 불러와야함
•
크롬에 콘솔이 안찎혀!!!!!!!!
◦
삭제 후 재설치..
◦
또안됨 ..ㅠㅠ
•
세트이기땜ㄴ에 아무리 콜을 방지해도 메세지를 보내도 리스폰스가옴
1.
Var let cont -> 호이스팅되지만 var는 언디파인드 let const 는 에러, var는 전역 let const는 블록
2.
호이스팅 -> 컴파일 할 때 함수 선언이 최상단으로 끌어올려지는 현상
3.
동기 비동기 -> 동기는 순서대로 일을 처리하는 것이고 비동기는 작업들을 동시에 진행하는 것으로 자바스크립트는 비동기적 실행을 promise나 async await를 사용하여 작업합니다
4.
브라우저의 동작 방식 -> 사용자가 URL을 입력하면 브라우저는 해당 URL로 요청을 보냅니다!
5.
GET POST -> GET은 사용자의 요청으로 서버에서 데이터를 받아오는 것으로, URL에 포함되어 전송됨으로 노출될 위험이 높기에 보안에 취약하고 POST는 클라이언트에서 서버로 데이터를 보내는 방식으로 HTTP의 본문에 데이터가 포함됨으로 URL에 노출되지않아서 비교적 보안성이 높습니다
6.
쿠키,세션,로컬 차이점 -> 세션과 로컬 스토리지는 JS에서 접근이 가능해 보안이 취약합니다 반면 쿠키는 HTTPOnly를 설정해주면 서버에서만 접근이 가능함으로 보안성이 뛰어납니다. 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있습니다. 하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거됩니다.
7.
클라이언트 렌더링(CSR),서버 렌더링(SSR) -> 클라이언트 렌더링은 초기 페이지 하이드레이션 이후에 추가적으로 동적으로 렌더링하는 경우이며 서버의 부하가 적은 대신 초기 렌더링이 오래걸리고 SEO가 좋지않습니다 반면 서버 렌더링은 모든 HTML을 서버에서 받아옴으로 서버에 부하는 높을수 있으나 로딩속도가 빠르고 SEO가 좋습니다
8.
TCP/UDP 7계층중 4계층 , 즉 전송계층에 해당합니다. TCP는 연결 지향형이며 데이터의 순서를 보장하고 흐름을 제어하여 신뢰도가 높습니다 반면 UDP는 경량 프로토콜이며 비연결 지향형이라 연결설정이없고 속도가 빠릅니다 다만 데이터를 전송하는데 초점을 맞췄으므로 TCP에 비해 불안전한 데이터를 전송합니다
9.
Http, https -> HTTP는 데이터를 암호화하지 않기 때문에 보안에 취약합니다 반면 HTTPS는 데이터를 암호화하고 클라이언트 서버간의 통신에서 인증서를 필요로합니다
10.
라이프 사이클 -> 함수,컴포넌트,시스템,객체등 어떤 소프트웨어 요소가 생성 업데이트 소멸 과정을 일컬는 말입니다
11.
라이프 사이클 메서드 -> 생성 → constructor : 컴포넌트 생성시 초기 설정을 해주는 메서드. componentDidMount : 마운트 된 후에 실행되는 메서드이며 데이터를 로딩하는데 사용됩니다
업데이트 → shouldComponentUpdate : 컴포넌트가 업데이트 될지 말지(리렌더링)를 결정하는 메소드입니다. componentDidUpdate: 업데이트 이후 실행되는 메서드이며 업데이트 이후 작업을 수행합니다.
소멸 → componentWillUnmount : 컴포넌트가 언마운트될 때 실행되는 함수이며 리소스 해제 정리등을 작업합니다.
12.
클래스형 함수형 컴포넌트 차이(react) : 클래스형 컴포넌트는 상태관리와 라이프사이클 메서드(위에 있는 메서드)를 사용할 수 있어서 복잡한 기능을 직접 구현 할 수 있습니다. 함수형 컴포넌트는 훅은 이용한 간접적인 상태관리와 라이프사이클을 관리 할 수 있어서 코드가 좀 더 간결하고 이해하기 쉬우며 짧습니다. 대신 만든 훅 틀안에서 벗어날 수 없다는 단점이 있습니다
13.
쓰로틀링 디바운싱 -> 쓰로틀링이란 일정 주기를 지정하여 그 주기마다 이벤트를 제한합니다. 디바운싱이란 연속적인 이벤트 호출이 있을경우 그것을 그룹화 하며 마지막 이벤트만 호출합니다. 둘 다 너무 많은 이벤트 호출을 방지한다는데에 의의가 있습니다
14.
자바스크립트 타입스크립트 -> 자바스크립트는 동적인 언어로 실행할 때 개발 과정이 빠르지만 실행할 때 타입이 결정되므로 오류가 생기기 쉽습니다. 반면 타입스크립트는 자바스크립트의 상위 개념으로 타입을 미리 지정해서 실행될 때 오류를 미리 잡아줄 수 있는 특징이 있습니다
15.
SEO -> Search Engine Optimization의 약자로 검색엔진이 HTML을 검색하고 기준에 맞는 HTML을 검색 결과에 높은 순위에 배치합니다. 기준으로는 기술적 SEO,콘텐츠 SEO,온페이지 SEO,오프페이지 SEO가 있습니다
16.
이미지 최적화 -> 이미지 최적화란 용량이 큰 이미지를 최적화하여 클라이언트 서버간에 소통을 할 때 좀 더 경량화하는 작업을 말합니다 로딩속도가 빨라지며 저장 공간이 늘어날 것 입니다. 이미지 압축, 적절한 해상도 설정, 지연 로딩 적용등이 있습니다
17.
프론트 엔드 개발 시 개발자 도구 사용 경험 -> 주로 console log를 찍어 데이터 페칭과 알고리즘을 활용할 때 쓰며 정말 도움이 되었던 부분은 수정을 한후 데이터를 보내고 받을때 네트워크 탭을 이용하여 네트워크 속도를 늦춘후에 데이터 보내고 받는 과정을 면밀히 보아 어떤부분이 문제인지 체크했습니다
18.
프론트엔드 성능 최적화 경험 -> useMemo : 복잡한 함수의 결과값을 메모리에 캐싱함으로 동일한 인자, 동일한 함수를 실행할 때에는 함수를 실행하는게아닌 함수의 결과값을 그대로 받아올수있습니다 useCallback : 함수 자체를 메모리에 캐싱하여 필터같은 부분에서 같은 함수를 계속해서 반복할 때 리렌더링시 함수를 재생성하지 않고 메모리에서 가져왔습니다
19.
자바스크립트 이벤트 루프 -> 싱글 스레드 언어인 자바스크립트를 비동기적으로 처리할 수 있게 콜 스택과 웹 API, 태스크 큐 사이에서 작업을 조정하는 역할을 합니다.
20.
Array , LinkedList ->array : 연속적인 메모리 공간에 요소를 순차대로 저장하여 인덱스를 통해 빠르게 접근할 수 있고 직접 수정도 가능합니다 하지만 불변성을 유지하기위해서 수정을 하려면 새 배열을 반환하는 방식이 좋습니다 불변성이 중요한 이유는 유지 보수성, 예측가능성 버그방지, 동시성 관련 문제방지등이 있습니다 LinkedLise : 노드가 데이터와 다음 노드에 대한 참조(링크)를 포함하고 있는 구조로, 요소가 메모리 상에 연속적으로 위치할 필요가 없습니다.
제가 정리해뒀는데 같이 공유하면 좋을거 같아서 써놓습니다 -태원
supabase storage Egress 용량 초과 문제 해결
1.
storage 이미지 업로드 시, 이미지 용량 제한 5MB 이하로 용량 제한하기 ⇒ 5MB 이상인 사진, gif 등 고용량 사진 업로드 방지하기 : 프로필 이미지 업로드시 / 클래스 이미지 업로드시 / 채팅 / 후기 이미지 업로드 시 수정
2.
검색하기 기능 ⇒ state 변경 될 때마다 호출 되는 부분 변경
3.
채팅 : 데이터 계속해서 불러오고 있는 부분 ⇒ 데이터 변할 때마다 map : 계속해서 렌더링 되고 있음… 데이터를 불러올 때 조건을 걸어야 함. ⇒ 얘는 문제 없음. 원래 다 한 번 콜 하는게 맞음.
⇒ 채팅 이미지 용량 제한만 걸기
4.
알림 기능 : notification ⇒ refetch 되는 부분 수정하기
To. 혜린님
++ 클래스 등록시, 이런 문구를 클래스 등록하기 페이지 어디다가 작성을 해 주면 좋을 것 같아요!! 클래스 디테일 페이지에서 닉네임이 왜 안 뜨지?라고 생각 할 수도 있을 듯 해서요!!
** 클래스 등록 시, 초기 작성한 강사명으로 클래스가 등록됩니다. 강사명을 다시 한 번 확인 해주세요.
- 클래스 등록할 때 오늘로부터 이전 날짜들은 disable 시키는게 좋을듯 합니당
데이피커에 disabledDays={{ before: new Date() }} 이부분만 넣어주시면 될거에요!!
To. 태원님
++ 클래스 디테일 페이지에서 강사 이름 뒤에 강사님 이라는 문구를 넣어주면 닉네임이 아닌 강사이름으로 뜨는구나 한 번 더 인지 할 수 있을 것 같습니다!
