물결웨비의 최신 아티클 ❤️🔥
-
4주차
타입스크립트에서 type과 interface의 차이점에 대해 알아보자
typescript의 type과 interfaces는 비슷한 역할을 하지만 몇 가지 중요한 차이점이 있습니다. 이 글에서는 type과 interface의 특징과 차이점을 비교하여 언제 어떤 것을 사용하면 좋을지 살펴보겠습니다!1. 기본 정의와 사용typetype은 typescript의 타입 별칭을 정의하는 키워드입니다. 기본적으로 어떤 타입이든 별칭을 붙여 사용할 수 있습니다.type Point = { x: number; y: number;};interfaceinterface는 객체 타입을 정의할 때 주로 사용됩니다. 클래스와의 호환성 덕분에 객체 지향 스타일의 코드에서 유용합니다.interface Point { x: number; y: number;}2. 주요 차이점확장 방식type: 유니온 타..
-
리액트 심화 스터디
[Week 8] Jest, React Testing Library
TDD(Test Driven Development: 테스트 주도 개발)TDD는 개발자가 새로운 기능이나 함수에 대한 테스트 케이스를 먼저 작성하고, 그 테스트를 통과하기 위한 최소한의 코드를 작성하는 개발 기법이다. 이 방법론은 코드의 기능에 초점을 맞추며, 개발자의 관점에서 테스트 케이스를 작성한다.실패하는 테스트 작성: 구현할 기능에 대한 테스트 케이스를 작성하여 초기 상태에서 테스트가 실패하도록 만든다.테스트를 통과하도록 수정: 작성한 테스트를 통과시키기 위해 필요한 최소한의 코드를 구현한다.리팩토링: 통과한 테스트를 기반으로 코드의 품질을 개선하고 가독성을 높인다.BDD(Behavior Driven Development: 행동 주도 개발)BDD는 TDD에서 파생된 개발 방법론으로, 테스트 케이스 ..
-
호기심스
[week 8] Web Vitals & Lighthouse
https://toothsome-coaster-0a4.notion.site/week-8-Web-Vitals-Lighthouse-15d28dd31db08095b001d45b6e191049?pvs=4 [week 8] Web Vitals & Lighthouse | Notion🖥️ Web Vitalstoothsome-coaster-0a4.notion.site 안녕하세요! 웹 YB 김가현입니다 ~Web Vitals & Lighthouse에 대해 정리한 노션 글 첨부합니다 !이따봐욧
-
4주차
타입스크립트 - interface
안녕하세요, 역시나 못 썼던 4주차 아티클로 찾아온 웹 YB 김태욱입니다 이번 합동 세미나에서 처음으로 타입스크립트로 프로젝트를 진행했는데 가장 많이 마주했던 오류는 any타입 오류였습니다. 그만큼 타입스크립트에서 가장 기초가 되는 부분이 바로 타입 지정인데요, 이번 주차에서는 타입스크립트 interface에 대해서 작성해보도록 하겠습니다. - interface란?인터페이스 (Interface)는 타입 체크를 위해 사용된다. 인터페이스는 변수, 함수, 클래스에 사용할 수 있으며, 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제해 일관성을 유지하도록 한다. - interface 선언interface User { age: number; name: string;}//변수에 활용한 인터페이스const..
-
호기심스
[ Week 07 ] ♻️ 데이터 페칭 SSR
안녕하세요 ! 웹파트 YB 김민정입니다.이번에 데이터페칭 SSR 을 맡았는데요 SSR 을 검색하면 죄다 Next.js 에 대한 이야기 뿐이더라구요.사실 Next.js 는 SSR 를 비롯한 4가지 렌더링 기법을 사용한다는 것을 알고 계셨나요?!!그래서 SSR = Next.js 가 되는 것에 살짝 의구심이 생겨서Next.js 를 제외하고 설명해보고 싶었습니다,,그래도 뺄 순 없었어요..... 열심히 정리했으니 참고해주시구 화요일에 보아요🥺🥺 https://vi-olet.notion.site/SSR-15c5981b4f4580789dece81f199a64e5?pvs=4
-
4주차
TanStack Query 집중공격
안녕하세요 웹 OB 임화랑입니다.이번 4주차 공유과제로는 앱잼에서 뿐만 아니라 앞으로의 다양한 프로젝트에서 거의 필수적으로 사용되는 react query로 알려져있는 TanStack Query에 대해 집중적으로 공부해보았습니다. 저도 지난 앱잼에서 대충 사용법만 아는 상태로 코드만 작성해봤지 어떤 원리로 동작하고, 다양한 옵션들에는 무엇이 있는지 등등 이해하고 사용하지 못하고 있다는것에 큰 아쉬움이 있었습니다. 그래서 이번 앱잼에서는 이를 이해하고 좀 더 다양한 방법으로 사용해보기 위해 미리 TanStack Query에 대해 공부해 보았습니다. https://wary-splash-64f.notion.site/TanStack-Query-154f4acbc8328030b228e8726a0a86dd
-
자스핑
[week 06] 이벤트의 모든 것 🎪
안녕하세요! 물결웹팟 🌊 오비 박채연입니다 😋❕ 이번주 자스핑 주제는 이벤트 전파 및 제어, 디바운스와 스로틀에 대해서 공부하는 시간을 가져봤는데요!그냥 버튼에 클릭 이벤트 주고 .. 인풋에 체인지 이벤트 주고! 늘 습관처럼 해왔던 건데이걸 깊게 파보니까 또 캡처링 버블링 .. 전파.. 위임.. 등 정말 복잡한 내용이 많았읍니다 ,,이번주도 모두모두 파이팅 💪🏻 https://chaeneey.notion.site/597f4dbb63064076b2be8d70c560e6e0?pvs=4 디바운스과 스로틀 | Notion디바운스와 스로틀chaeneey.notion.site https://chaeneey.notion.site/159de3f57d0e801580e0da34bcd7d54c?pvs=4 이벤..
-
자스핑
[Week 06] 이벤트 전파 및 이벤트 제어 & 디바운스와 스로틀
이번시간에는 이벤트 & 디바운스와 스로틀에 대해 알아보았습니다! 때마침 지난번에 작성한 이벤트 전파, 이벤트 위임과 관련된 내용도 참고해보시면 좋을 것 같습니당ㅎㅎhttps://wave-web.tistory.com/41 [JavaScript] 이벤트위임안녕하세요 웹파트 배영경입니다🤗이번에는 자바스크립트의 이벤트위임에 대해 알아보았습니다! 2주차 과제를 구현할 때 각 체크박스마다 이벤트 리스너를 개별적으로 등록하는 방식을 사용wave-web.tistory.com https://harsh-lunge-188.notion.site/1582ba38c2418036855dcbd0a4be8c72?pvs=4 이벤트 전파 및 이벤트 제어 & 디바운스와 스로틀 | Notion40장 이벤트harsh-lunge-188.not..
-
자스핑
[week 06] 이벤트 전파 및 이벤트 제어 & 디바운스와 스로틀
안녕하세요호 웹 YB 김고은입니다. 이번주는 자바스크립트 딥다이브가 아닌 특별한 주제로 아티클을 작성하게 되었습니다. 이벤트 전파 및 이벤트 제어와 디바운스 그리고 스로틀을 다루고자 하는데, 기존과 달리 개념 위주보다는 예제와 함께 설명하면서 어떤식으로 이걸 활용해볼 수 있는지를 중심으로 이번주차 정리해보겠습니다. 이벤트 전파 및 이벤트 제어이벤트 전파는 다음 2가지 양상으로 발생되게 됩니다. ☑️ 이벤트 버블링 (event bubbling) & 캡처링 (capturing)이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상 (마치 물속에서 거품이 위로 올라가는 듯해서 ..
-
리액트 심화 스터디
🏄♀️ 리심스 7주차 - Concurrent Mode
Concurrent Mode와 Suspense는 데이터 로딩과 UI 렌더링의 효율을 높이고 사용자 경험을 개선하기 위해 리액트 최신 버전에 새롭게 도입된 기능이다.Concurrent Mode동시성(Concurrency)이란?여러 작업을 작은 단위로 나눈 뒤 그 작업들 간의 우선순위를 정하고 작업을 번갈아 수행하는 것.👉 실질적으로는 하나에 한 번의 작업을 처리하는 것이나, 빠른 작업 간의 전환으로 인해 하나의 시스템이 여러 작업을 동시에 처리하는 것처럼 보이게 한다. 리액트에서의 동시성 (Concurent Mode) 자바스크립트는 싱글 스레드 언어로, 하나의 작업이 실행되는 동안 다른 작업은 block된다. 기존 렌더링은 동기적 처리로 이루어졌으며, 리액트가 렌더링 작업을 시작하면 중간에 중단할 수..
