4주차 (26) 썸네일형 리스트형 타입스크립트에서 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: 유니온 타.. 타입스크립트 - interface 안녕하세요, 역시나 못 썼던 4주차 아티클로 찾아온 웹 YB 김태욱입니다 이번 합동 세미나에서 처음으로 타입스크립트로 프로젝트를 진행했는데 가장 많이 마주했던 오류는 any타입 오류였습니다. 그만큼 타입스크립트에서 가장 기초가 되는 부분이 바로 타입 지정인데요, 이번 주차에서는 타입스크립트 interface에 대해서 작성해보도록 하겠습니다. - interface란?인터페이스 (Interface)는 타입 체크를 위해 사용된다. 인터페이스는 변수, 함수, 클래스에 사용할 수 있으며, 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제해 일관성을 유지하도록 한다. - interface 선언interface User { age: number; name: string;}//변수에 활용한 인터페이스const.. TanStack Query 집중공격 안녕하세요 웹 OB 임화랑입니다.이번 4주차 공유과제로는 앱잼에서 뿐만 아니라 앞으로의 다양한 프로젝트에서 거의 필수적으로 사용되는 react query로 알려져있는 TanStack Query에 대해 집중적으로 공부해보았습니다. 저도 지난 앱잼에서 대충 사용법만 아는 상태로 코드만 작성해봤지 어떤 원리로 동작하고, 다양한 옵션들에는 무엇이 있는지 등등 이해하고 사용하지 못하고 있다는것에 큰 아쉬움이 있었습니다. 그래서 이번 앱잼에서는 이를 이해하고 좀 더 다양한 방법으로 사용해보기 위해 미리 TanStack Query에 대해 공부해 보았습니다. https://wary-splash-64f.notion.site/TanStack-Query-154f4acbc8328030b228e8726a0a86dd Emotion CSS와 JSX Pragma 안녕하세요? YB 김채은입니다~! 제가 3주차 과제를 할 때는 스타일 컴포넌트 방식밖에 몰랐고, 심지어 파일 분리도 제대로 하지 못했던 상태라 코드가 상당히 가독성이 떨어졌었는데요ㅜㅜ 코드 리뷰를 하면서 한서OB님의 코드를 보고... 정말 감탄했습니다.. 🤩 수많은 이유가 있었지만 "html 구조가 명확하게 보여서 가독성이 좋았다는 점"에 꽂혀서 공부해 보니, emotion css 방식을 사용하셨더라구요! 이 방법을 사용하면 html 태그에 하나하나 이름을 지어줄 필요 없이, props로 스타일을 제어할 수 있다는 사실...ㅎㅎ (저는 3주차 때 변수 이름을 짓는 게 너무 힘들었어요.........) 그래서 4주차 때 바로. 사용해 보았는데요!! 도중에 발생했던 개인적인 트러블 슈팅을 간단하게 소개해 .. [React] 왜 TypeScript?? 그리고 interface VS type 안녕하세요. 웹 배영경입니다.이번 시간에는 타입스크립트를 쓰는 이유와 interface와 type의 차이점에 대해 알아보았습니다! 타입스크립트와 자바스크립트 비교우선, 타입스크립트와 자바스크립트의 가장 큰 차이는 타입스크립트는 정적 타입 언어이고, 자바스크립트는 동적 타입 언어라는 것. Type의 유무자바스크립트의 가장 큰 장점이자 단점은 변수나 객체의 타입을 지정하지 않는다는 점.타입스크립트는 이름에서부터 알 수 있듯이, 타입을 지정해줘야 한다는 점. 타입의 유무가 가장 먼저 떠올릴 수 있는 차이겠죠??? 자바스크립트에서 타입을 지정해주지 않는 점이 편리하다고 생각할 수 있지만,자바스크립트가 동작하면서 자신도 모르게 형변환이 된다던지, 예기치 못한 버그가 발생할 수 있다는 문제가 있다. 타입스크립트를 .. 왜 Axios를 사용하는가? Fetch와의 비교로 알아보는 장단점 안녕하세요 😘웹파트 OB 이예림입니다!저는 API를 붙인다! 하면 당연하게 Axios를 사용하곤 했는데요, 기본 제공되는 Fetch메서드가 아닌 당연하다는듯이 axios를 쓰는 저를 보고 성희OB가 본 주제를 추천해주어 공부해보게 되었습니다! 우리는 Axios와 Fetch를 사용하여 API 통신을 구현할 수 있습니다. 각각 고유한 장점과 특징을 가지고 있지만, 그 설계 철학에서 큰 차이를 보이는데요! 이번 글에서는 Axios와 Fetch의 주요 차이점을 간략히 살펴보고, 그 중에서도 에러 핸들링에 대해 딥다이브 해본 후, 마지막으로 장단점을 정리하여, 실제 프로젝트에서 어떤 상황에 더 적합한지 알아보겠습니다. 📌 Axios와 Fetch의 주요 차이점1️⃣ 기본 설정의 편의성Axiosimport ax.. [4주차] AXIOS 알아보기 안녕하세요 35기 YB 김린아입니다. 4주차 아티클은 4주차 과제를 하며 처음 접하게 된 AXIOS에 대해 작성해 보았습니다. 1. Axios란AXIOS는 JavaScript에서 HTTP 요청을 간단하게 처리할 수 있도록 도와주는 HTTP 클라이언트 라이브러리로, 주로 promise를 기반으로 하며 브라우저와 Node.js 환경에서 모두 사용할 수 있다. Axios는 코드가 직관적이고, 간결한 API를 제공하는 것이 특징이다. 2. Axios의 주요 기능간결한 APIAxios는 기본적으로 HTTP 요청을 axios.get, axios.post, axios.put, axios.delete 등 메서드를 통해 수행할 수 있어 RESTful API와 상호 작용하는 데 매우 유리하다. 자동 JSON 데이터 .. async/await 무엇일까? 안녕하세요 YB 최정완 입니다 비동기 처리와 관련있는 키워드 두 가지를 알아보아요 🤩 [들어가기]* Promise 객체란?Promise 객체는 JavaScript에서 비동기 작업의 성공 여부와 결과를 나타내는 객체이다.주로 비동기 작업이 완료되었을 때 그 결과를 처리하거나, 오류가 발생했을 때 그 오류를 처리하기 위해 사용된다. Promise 객체는 총 세 가지의 상태를 갖고 있습니다. 대기 (Pending): 초기 상태로, 아직 결과가 없고 작업이 진행 중이다.성공 (Fulfilled): 비동기 작업이 성공적으로 완료된 상태이다. -> 작업의 결과 사용 가능 실패 (Rejected): 비동기 작업이 실패한 상태이다. -> 작업 중 발생한 오류 사용 가능 * 비동기 작업이란?Q: 왜 필요한가?A:.. 이전 1 2 3 4 다음