구버전
-
프로젝트를 시작하며..구버전/Next.js로 TodoList 만들기 2024. 11. 4. 17:17
7월에 구름톤을 수료한 후 매너리즘에 빠지고 무기력해진 스스로를 발견하게 되었다. 프로젝트를 하면서 재밌고 즐거웠던 개발에 대한 공부는 뒷전으로 하고 집에서 누워있고 잠이 많아지고 스스로 무기력해진 모습에 화가 났지만 아무것도 하지 않았다...주변 사람들의 발전과 함께 스마트해지겠다는 다짐은 구겨서 서랍 속에 넣어버렸고 스스로에게 불만만 품은 채로 점점 더 나빠지기만했다.이번 프로젝트는 1~2달 기간동안 Next.js를 자신감 있게 사용할 수 있을만큼 내가 뒤쳐진만큼의 개발에 대한 실무능력을 끌어올리는데 중점이 있다. 전체적인 기록물이며, 중간중간 지식에 대한 내용 혹은 Article로 만들면 좋은 내용을 주로 기입할 예정이다. 힘내보자!! 0일차.... 다짐하기supabase 강의 듣고 todolist..
-
[CS Study] 실시간 업데이트 기법(웹소켓과 SSE)구버전/CS Study 2024. 6. 18. 16:36
개요1. 실시간 업데이트 기법2. SSE(Server-Sent-Event)란?3.웹소켓이란? ✅ 실시간 업데이트 알람 기능과 채팅 기능 등 실시간으로 백엔드에서 정보를 받아서 클라이언트에 나타내야하는 기능들이 많아진 근래의 애플리케이션에서는 기존의 HTTP 통신만으로는 실시간성을 보장하기 힘들고 효율적이지 못한 부분이 생기게 되었다. 실시간 업데이트를 위해 사용되는 다양한 기법과 우리가 주로 사용하고 있는 SSE 및 웹소켓에 대해 알아보자! 📦 폴링(Polling)클라이언트가 일정 주기로 서버에 필요한 데이터를 요청하는 방식으로 가장 쉽지만 데이터의 변경 유무에 관계 없이 계속 요청을 보내 서버에 부담을 주며, 주기가 짧아질수록 부담이 가증된다.(요청과 응답이 1대1로 이루어짐)주기적인 데이터 요청은 ..
-
[CSS] 미디어 쿼리와 문제점구버전/CSS 2024. 6. 8. 13:25
개요1. 미디어 쿼리2. 다양한 CSS 기술3. 컨테이너 쿼리 최근 몇년간 출시된 많은 CSS의 기능들은 특정 조건에서 적용되도록하는 모습을 보이고 있으며 이러한 상당수는 반응형 디자인과 직접적인 관계가 많은 것들이 있다. 이러한 부분에서 미디어 쿼리는 반응형 레이아웃에서 중요하게 여겨지지만 이러한 새롭게 출시된 CSS와 함께 사용함으로써 더욱 효과적으로 반응형 디자인을 할 수 있다고 한다. ✅ 미디어 쿼리 (Media Query) 📦 미디어 쿼리(Media Query)란?CSS의 일부 기능으로 미디어 유형 혹은 특정 장치의 특성에 따라 스타일을 조건부로 적용하는 기능을 뜻한다. 이를통해 다양한 미디어 유형과 다양한 장치에 맞춤으로 스타일과 레이아웃을 조정할 수 있고 이러한 반응형 디자인은 더 나은 ..
-
[React-Hook-Form] FormData 관리하기구버전/React 2024. 5. 29. 23:45
개요1. 왜 사용해야하는가?2. 주요 함수 간단 정리3. React-Hook-Form 사용법? ✅ Why? 📦 제어 vs 비제어 컴포넌트→ 제어 컴포넌트React에 의해 값이 제어되는 입력 폼 엘리먼트를 뜻하며, 일반적으로 state를 통해서 input값을 받아올 때의 상태를 말한다.실시간으로 값이 동기화되므로 값의 변화에 따라서 리랜더링이발생한다.사용자의 입력 폼이 늘어날수록 랜더링되는 요소가 늘어나 불필요한 연산이 발생한다.유지보수에 힘들고 유효성 검사까지 진행한다면 코드가 매우 길어져 가독성이 나빠진다.const [value, setValue] = useState(""); setValue(e.target.value)}/> → 비제어 컴포넌트React에 의해 값이 제어되지 않는 엘리먼트를 뜻하며,..