본문 바로가기

분류 전체보기

 (200)
[week4] 상호작용성 더하기 - State 업데이트 큐, 객체 state 업데이트하기, 배열 state 업데이트하기 안녕하세요~!웹파트 YB 한수정입니다.벌써 4주차네요. 해야 하는 것도 하고 싶은 것도 너무 많아 바쁜 요즘입니당...이번 글에서는 ‘상호작용성 더하기’에서 다룬 내용 중 State 업데이트 큐, 객체 state 업데이트하기, 배열 state 업데이트하기를 읽어보고, 그 중에서도 객체 state 업데이트에 대해 차근차근 같이 알아보려고 합니다! 완전히 저의 눈높이에서 한줄한줄 찾아보며 정리하는 아티클이라 편하게 보셔도 돼요! 객체 State 업데이트하기State는 객체를 포함한 모든 종류의 자바스크립트 값을 가질 수 있습니다.React의 state는 객체, 배열, 숫자, 문자열, 불리언 등 모든 자바스크립트 값을 저장할 수 있습니다.예를 들어, const [x, setX] = useState(0);에서 ..
[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..
[week 03] this is me 위대한 쇼맨 this is me 노래 아시나요? 한 번 듣고 가시죠  3주차 자스핑에서는 먼저 this를 알아보겠습니당. this 키워드📌 객체는 프로퍼티(상태) + 메서드(동작)를 하나의 논리적인 단위로 묶은 복합적인 자료구조메서드(동작)는 자신이 속한 객체의 프로퍼티(상태)를 참조하고 변경할 수 있어야 한다.이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.◽ 객체 리터럴 방식으로 생성한 객체의 경우해당 방식은 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.const study = { name: javacript; // 프로퍼티 : 객체 고유의 상태 데이터 getName(){ // 이 메서드..
[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:..
[week3] this is .. 안녕하세요 ❕ 물결웹팟 OB 박채연입니다 😋  이번주 자스핑에서 다룰 주제는 자바스크립트의 this / callback / closure 인데요,그 중에서도 저는 정말 생소했던 개념인 this, closure 에 대해 정리해봤습니다! 정말 어렵고 헷갈리는 개념들이라 자스에 정말 deep dive 할 수 있었던 시간이었습니다 .. 💨 🍀 Thisthis는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다.자바스크립트의 경우, 다른 언어와 조금 다르게 동작한다고 하는데요!자바스크립트에선, 함수가 호출될 때 this가 결정되기 때문입니다. 함수를 호출하는 방식에 따라 this가 가리키는 대상이 달라진다는 것은,함수를 어떤 식으로 호출했느냐에 따라 어떻게 가리킬 대상을 정하는지..
[week 3] 콜백함수 , this , 클로저 안녕하세요 YB 김고은입니다. 이번 주차는 콜백함수 (12강 _ 12.7.4)  / this (342 ~ 354) / 클로저 (389 ~ 413)를 다뤄보고자 합니다.이번 주차도 마찬가지로 내용 정리를 중점으로, 약간의 호기심을 해결해나가는 형식으로 아티클 작성해보겠습니다!콜백 함수 콜백 함수(callback function)란 함수 매개변수를 통해 함수의 내부로 전달되는 함수를 말한다.한편, 함수의 외부에서 콜백함수를 전달받은 함수를 고차함수(Higher-Order Function) 라고 한다.  콜백함수는 고차함수에 전달되어 핼퍼 함수의 역할을 한다. 이때의 콜백함수는 함수외부에서 고차함수 내부로 주입되기 때문에 자유롭게 교체될 수 있다는 장점이 있다. 이때, 고차 함수는 콜백함수를 자신의 일부분을 ..

티스토리툴바