[React] 클래스, 함수, 화살표 함수 컴포넌트와 children 활용법 완벽 정리🚀
·
React
🔑토끼와 거북이에서 "거북이"가 되자💡 클래스 컴포넌트 Class Component📃 클래스형 컴포넌트는 React에서 Component를 상속하여 정의된 컴포넌트입니다. 구조화된 객체 형태로 this를 통해 다양한 속성과 메서드를 사용할 수 있습니다.💻MyComponentClass.jsimport React, { Component } from 'react'class MyComponentClass extends Component { render() { console.log(this) // this는 컴포넌트 인스턴스를 가리킵니다 const { name, age } = this.props return ( 안녕하세요 제 이름은 {name}입니다 나..
[LG CNS AM CAMP 1기]- [React] JSX Deep Dive 쉽게 이해하기
·
LG CNS AM CAMP 1기
🔑일단 의자에 앉아있자... 멍도 의자에서 때리자...💡 JSX에서는 하나의 부모 요소만 반환 가능하다📃 React에서는 다양한 컴포넌트를 조합해서 사용할 때, 각 컴포넌트에서 return하는 요소는 반드시 하나의 부모 요소여야 한다는 점에 유의해야 합니다💻오류 발생// 동일한 레벨에 여러 개의 요소를 반환하면 오류가 발생합니다.function App() { return ( React 요소 알아보기 React 컴포넌트의 return은 하나의 부모 요소만 반환해야 합니다. );}export default App;⬆️ JSX에서는 하나의 부모 요소만 반환할 수 있습니다. 위 예시처럼 여러 개의 요소가 동일한 레벨에서 반환되면 오류가 발생합니다.💻해결 방법 1 Fragmentfuncti..
Axios 라이브러리 쉽게 이해하기 GET, POST, Interceptors
·
JavaScript
🔑잠은 죽어서 자자💡 Axios에서 GET, POST📃 axios는 JavaScript 환경에서 서버와의 HTTP 요청 및 응답을 처리하는 데 널리 사용되는 Promise 기반의 HTTP 클라이언트 라이브러리입니다 💻Get requestaxios.get("https://jsonplaceholder.typicode.com/posts") .then(res => { console.log(res.data) // 성공적으로 받은 데이터 }) .catch(err => { console.log(err) // 에러 처리 })⬆️ GET 메서드는 데이터를 요청할 URL을 입력한 뒤, .then을 통해 서버에서 받아온 데이터를 처리하거나, .catch를 통해 에러를 처리합니다 💻Post requ..
[Javascript] 코딩 입문 트레이닝 String.fromCharCode, sort(), Math.floor()
·
JavaScript
🔑 Proverbs 16:9💡 String.fromCharCode 함수📃 자바스크립트를 배우다가 마주친 char 관련 문제인데, 알고 있어야할 것 같아서 정리합니다💻CODEfunction solution(age) { return String(age).split('') .map(i => String.fromCharCode(97 + Number(i))) .join("");}⬆️ 이 문제의 핵심은 String.fromCharCode 메서드라고 생각하고, 문자열 값을 Char로 변환시키는 메서드 입니다. 괄호안에 97을 추가적으로 더해주는 이유는 97이 ASCII코드로 'a'이기 때문입니다. 대문자 'A' 의 ASCII 코드 : 65소문자 'a' 의 ASCII 코드 : 97 💡..