e7e

2024.10.10 - [React] - React(리액트) 티키타카 14 (useEffect Hook + fetch )글에서 우리가 설치한   json-server는  미처 눈치 못챘겠지만  Restful 서버당. Restful이란 url이 아닌 클라이언트로 부터 온 메소드가 무엇인가? 에 따라서버 동작이 결정되는 것인데, 강제는 아니고 써보니  명확하고 좋아서 모두 그렇게 쓰는관례당. 규모가 커졌을 때 프론트 와 백엔드를 나누어 작업할 때도 그렇게 좋당. 아래가 가장 일반적 메소드 사용 관례당.(참고로 form태그는 get과 post만 지원한당)모두 지원하는 것은 AJAX당 (아래 이외에도 patch등등 더 있당.)GET 은 조회, POST는 생성, PUT은 수정, DELETE는 삭제  json-se..

React 2024. 10. 15. 23:53

2024.10.09 - [React] - React(리액트) 티키타카 13 (useEffect Hook )까지도 벌써 읽었다면, 당신은 정말 대단하당. React와 오해없이 기꺼이 친구가 될꺼이당. 이번시간엔 useEffect를 어케 쓰는지 쪼메 더 써보장.(헉 마치 수업인듯... 왠지 하품 남...)프론트 프레임워크들은 기본적으로  CSR(Client Side Rendering)기반 SPA(Single Page Application)를 법의 허락없이 감히 강요한다 하였당.SPA를 구현하려면 AJAX 사용은  어쩔 수 없당. (금수저는 하루만에 AJAX다린이 되었당!) AJAX를 써보려니  당근빠따 Restful 서버의 필요가 또 어쩔 수 없당.누군가는 여기서 Spring Boot를 기대할 수도 있당. ..

React 2024. 10. 13. 16:34

2024.10.03 - [React] - React(리액트) 티키타카 12 (useRef Hook )까지 아니 벌써 다 읽었다면, 어찌 훌륭하다 아니 할 수 없지 아니하당. 12(12개월)는 소우주를 60(환갑)은 대우주를 경험한 것이니, 이제당신의 손가락은  뇌의  간헐적 도움만으로도 화면을 지배할 느끼미를 가진당. 보통 사이드효과라 불리는 useEffect 훅(Hook)을 훅하고 알아보장.혀에 미리 잼을 바른 다음에 빵을 먹는 듯한 재미가 쏠2개당.(쏠쏠) Counter3.jsximport { useEffect, useState } from "react";import MyButton from "./MyButton";function Counter3() { const [count, setCount] =..

React 2024. 10. 9. 17:51

2024.10.03 - [React] - React(리액트) 티키타카 11 ( useState Hook)에서 hook(훅) 느끼미 훅 들어왔음을 잊을 수 없당.useState로 사용한 값이 바뀌면 다시 그려진다(re-rendering)는 건 잊지말장. 오늘은 useRef 훅(hook)에 대해 알아 볼건뎅, 고것만 하면 너무 쉬우닝.styled-components란 잼난 것을 쪼메 같이 섞어서 비벼먹장!cmd(터미널) 에서 아래 명령어로 먼저 styled-components 모듈을 설치하당.npm install styled-components MyButton.jsximport styled from "styled-components";const MyButton = styled.button` color: #..

React 2024. 10. 8. 20:43

2024.10.03 - [React] - React(리액트) 티키타카 10 (레이아웃, children )까지 읽었다면, 아마 불현듯 머릿속에 머얌 정작 화면 만들기만 하공이벤트등 알짜는 아직 업쟈녀~~ 라는 공격적 응원이 생길만 하당. 맞당. 이제  저 유명한 거의 모든 React책이나, 사이트등에서 맹그는 카운터 예제를조금 더 심플하게 맹글어 볼 때가 되었당.  중요한 부분이니 고도로 집중하여 보장. 아래 코드를 작성해 보장. (풀린 눈 말고,조금은 집중된 눈으로 코드를 읽자) Counter.css.counter { width:70%; min-width:300px; border:5px groove orange; margin:50px auto;}.counter > h2 { c..

React 2024. 10. 7. 20:23

2024.10.02 - [React] - React(리액트) 티키타카 9 ( Props 구조 분해 )까지 읽었다면 , 웹 프로그램을 해본 경험이 있는 사람은 조금이나마 느끼미란 게 분명 있었을 거당. (없다면 당신은 프론트 경험이 없는 거나 마찬가징..) 오늘은 좀 쉬운 걸  해보려 한당. 레이아웃이당.CSS  지식만 조금 있다면, CSS 특성상 시간이 조금 걸릴뿐 이해는 껌이당. 기존 껀 지저분해졌으닝... 새로 시작하는 마음으로  새롭게 시작해 보장.REACTSTUDY 폴더에서 복습겸 새로 프로젝트를 만들고, 개발 서버를 구동하장.npm create vite@latesteProject name: rlayoutSelect a framework: ReactSelect a variant: JavaScrip..

React 2024. 10. 6. 19:22

2024.10.02 - [React] - React(리액트) 티키타카 8 ( Props 이해 사용 )를 읽고 머얌  쉽네 라고 생각했다면 미안하당 그건 아니당.아직 험준한 산 근처에도 가지 않았당. (이건 나의 오버액션이당!~~ 👀) 깜 ! 깜! 캬무륵~ 캬무륵~ 캬무륵! 외쳐보장...  머징 왠지 히미하지만 히미난당. 또 달려 보장. 인생 마라톤 피니시 라인은  인정하고 싶지 않지만 내 존재가 사라지고 잊혀지는 거당. 급할 꺼 없당. 차분히 때론 쉬면서 가장.    Container.jsx 를 아래 처럼 배열 map 메소드를 이용 리팩토링 해보장import "./Container.css";import Friend from "./Friend";function Container() { // 데이터가 이..

React 2024. 10. 3. 13:11

2024.10.01 - [React] - React(리액트) 티키타카 7 (블락 기호 {} 사용)까지 읽고 왔다면, 그랬다면 아니 반갑지 아니 할 만큼 반값이당. 반값이라니 듣기만 해도 에너지가 분출된당. 그럼 달려서 소비하장 준비를 위해 아래 파일들을 복사/붙여넣기로 src 폴더에 맹글장.[ 깊이는 아니더라도 눈으로 대략 의미 파악 정도는  하는 걸롱! ] Friend.css.friend { box-sizing: border-box; width: 150px; height: 250px; border: 5px groove blueviolet; display: inline-block; text-align: center; font-size: 1.5em; } h5 { ..

React 2024. 10. 2. 20:52