전체 글 (85) 썸네일형 리스트형 css를 다루면서 정리하기 - 1 기초적인 CSS는 어느정도 다룰 수 있지만, CSS에서 제공하는 애니메이션이나 요소를 지정하는 효율적인 방법에 대해서는 그다지 다루지 않았었다. 최근 Chzzk 플랫폼의 커스텀 오버레이 채팅창을 만지며 배우게 된 부분을 정리하고 가려고 한다. 1. 태그태그의 경우 아무것도 붙이지 않고 호출한다body { font-family: var(--custom-font-family, "GangwonEduPowerExtraBoldA");} 2. 클래스 ( Class )기본적으로 Class를 지정할땐 .class 를 사용한다. //이 경우 css에서는 .live_overlay_item live_overlay_message 로 호출한다.// 3. 아이디( ID )id의 경우에는 #id를 사용한다.#chatBox { .. 최종 프로젝트를 마치며 3월 20일부터 한 달이 조금 넘는 시간동안 글이 작성되지 않았던 이유는,다름이 아닌 최종프로젝트에 몰입하기 위해서였다. https://owl-link.vercel.app/ OWL Link그래서 우리, 언제 어디서 만나는 거야owl-link.vercel.app최종프로젝트우리는 최종프로젝트에서 기존의 프로젝트를 발전시키는 것으로 방향성을 정했다.when to meet에서 영감을 얻은 where we meet거기서 디벨롭한 OWL-LiNK가 최종프로젝트의 이름이었다. 프로젝트의 기획우리는 조금 더 많은 기술을 시도해보고자 했다. 기존의 장소를 픽하는 방향성에서, 일정을 추가하여 관리할 수 있는 시스템을 구상했다.그리고 지도라는 소재를 잡은 순간 모바일에서의 사용성을 고려하고자 하였고, 자연스럽게 PWA까지 .. 2024.3.20 기록 ( supabase 의 datafetch) 이전 문제였던 \r\n + 로 가득 찼던 문제는 해결되었다. json파일 내부에서 string타입으로 가져올 경우 줄바꿈을 표현하는 방식이었기 때문이다. 그리고 DB에 큰 수정이 있었는데, ERD의 구성은 다음과 같이 정해졌다. 프론트와는 다른 몇 가지 룰이 있었다. 첫 번째, 카멜케이스가 아닌 스네이크 케이스로 작성한다. 두 번째, 외래 키(foreign key) 로 작성 된 부분은 단수처리하여 연결한다 (user_profile_id) 세 번째, 테이블과 같은 이름은 생략한다. 이 정도로 이름을 잘 짓는 방법과 타입을 미리 정해주는 방식이 조금 더 새로웠고 아이디는 현재 유니크한 값을 가지게 하기 위하여 UUID를 사용했지만, 실제로는 int, uint long으로 사용한다고 한다. 이제 외래키를 엮어.. 2024.3.19 기록 ( supabase의 데이터 구조 ) 어제부터 진행했던 supabase의 데이터 테이블에 있어서 몇가지 문제가 존재했다. 1. 데이터와 데이터가 서로 연관이 있다면, 어떤 방식으로 연결해야하는지 [ { "challengesId" : "1", "active" : true, "status" : [ { "date" : 03-19, "isDone" : true }, { "date" : 03-20, "isDone" : true } ], }, { "challengesId" : "2", "active" : true, "status" : [ { "date" : 03-19, "isDone" : true }, { "date" : 03-20, "isDone" : true } ], } ] 현재 이런방식을 통해, 활성화된 데이터와, 해당 데이터의 값들을 기록하고있.. 2024.3.18 기록 (supabase의 사용) next.js와 supabase를 이용한 프로젝트를 진행중이다. 문제는 supabase가 기존에 사용하는 firebase와의 차이점이 존재한다는 점과, 공식문서가 영문이라 조금 더디다는 점에 있었다. 이것 저것 영상을 찾아보여 알게 된 점은 생각보다 처음 정해주면 그 다음부터는 아주 안정적으로 운영할 수 있는 시스템이라는 점이었다. CRUD를 진행하는 API 문서들만 정리를 먼저 해봤다. 이제 테이블을 작성하고 올바르게 데이터를 가져오는 방법으로 진행을 해야한다. 2024.3.15 기록 (glitch와 vercel을 이용한 배포) 글리치(glitch) 와 버셀 (vercel)을 이용하여 배포를 하는 과정은 두 가지 과정이 존재한다. 1. 환경변수 설정 기존에 Json-server 를 이용한 라우터를 주소로 잡았다면, 글리치의 배포주소로 변경해주어야 한다. 2. 버셀 배포 과정 vercel로 배포를 진행한다. 만약 환경변수를 사용했다면, 배포 전에 환경변수를 입력하는 과정을 거쳐준다. 3. 라우트 핸들러 만약 라우트 핸들러를 이용했다면, 추후 배포된 도메인으로 환경변수 내의 주소를 변경해준다. 최종적으로, 글리치의 배포주소와, 버셀의 배포주소로 localhost주소를 변경해주면 깔끔하게 완성된다. 2024.3.14 기록 (streaming SSR) 서스펜스(Suspense)를 이용하여 기존에 페이지가 로딩되는 부분을 대처하는 방법을 배운 적이 있다. try/ catch를 이용한 에러 상태를 대신하여 처리하는 방식이다. 서버 사이드 랜더링(SSR)에서도 이 서스펜스를 통해 비동기 렌더링을 진행할 수 있다. 사용법은 간단하다, 기존에 서스펜스를 사용하며, 서버컴포넌트를 사이에 두면 된다 이렇게 되면 비동기 통신이 가능해지기때문에 서버와 프라우저간의 간극이 굉장히 많이 줄어들게 된다. 이렇게 되면 UX가 향상되게 된다 Streaming Server-Side Rendering Generate HTML to be rendered on the server in response to a user request www.patterns.dev 2024.3.13 기록 (NextJS에서 useRouter를 사용해보자) 2. Router와 useRouter의 차이 nextjs에서는 next/router라는 자체 패키지에 둘 모두를 제공 Router는 항상 최신 상태를 가지고 useRouter는 리액트의 라이프 사이클에 따라 상태를 업데이트한다. Router는 클래스형, 함수형 컴포넌트에서 모두 사용 가능 Router를 추가 할 경우 두 개의 Router를 추천해주는데 각각 클래스형, 함수형임 useRouter는 함수형 컴포넌트의 라이프사이클(life cycle)에 따라서 사용한다. 그렇기 때문에 nextJS에서는 useRouter를 권장한다. state와 hook에 맞춰서 동작을 에측하기 쉬워지기 때문임. 실제로 useRouter와 Router의 형태는 동일하다. 언제 씀? Router는 전역 객체이기 때문에 리액트 외.. 이전 1 2 3 4 ··· 11 다음 목록 더보기
