#04 React vs Next 학습 개발하기

학습 데이터 생성하기...

React 학습 데이터 일부

 

첫번째 목표인 비교를 끝내고.. 공부를 하기위해 정리하는 React의 문법 또는 사용법입니다.

지금 위 사진은 데이터의 일부입니다. (데이터 구조가 왜저래? 라고 보실테지만..)

 

 

해당화면 처럼 만들기 위하여 저런 데이터 구조를 만들었습니다...🥲

학습을 할건데 딸랑 텍스트만 주르륵 쓰여져 있으면 이상할거 같단 생각에

"react-syntax-highlighter": "^15.6.1"

코드에 코드블럭을? 사용할 수 있게 해주는 라이브러리를 사용 했습니다.

그러면 실제로 학습하는 느낌이(..?) 더 날거라고 생각합니다!

데이터의 한계가 너무나도 많고 제가 배우는 입장으로서 적는거 자체가 이상하지만

초보자가 쓰고 있다고 생각하시고 읽어봐주셨으면 좋겠습니다..

실제로 내용도 초보자가 봐도 더 어려울 수 있다고 생각도 합니다 왜냐하면 저는 초보자 이기에 쉽게 풀어 낼 방법을 어렵게 생각 할수도

있습니다..

 

code: {

title: 'JSX 기본 문법',

language: 'jsx',

snippet: `// JSX 사용 예시

function Greeting({ name, age }) {

return (

<div className="greeting">

<h1>안녕하세요, {name}님!</h1>

{age && <p>당신은 {age}세입니다.</p>}

<ul>

{['사과', '바나나', '오렌지'].map(fruit => (

<li key={fruit}>{fruit}</li>

))}

</ul>

<img src="avatar.png" alt="프로필 이미지" />

</div>

);

}`,

},

 

제가 조금더 숙련이되고 능숙함이 올라감에 따라 컨텐츠는 지속적으로 업데이트 할 예정입니다..
계속 지켜봐주세요 🥊