e7e

faker-js 한국어가 갑자기 안되서 문서를 뒤적이니, 말도 없이 locale 세팅이 조금 바뀌었당.내용을 들여다 보니, 왜 바꾸었는지 나름 이해가 되고, 칭찬할만 하당.~~이전 방식을 모르는 사람은 그냥 새 방식에 적용하면 그만이당. ~~ (^-^) https://fakerjs.dev/ 위 faker-js를 활용하여 아래 그림과 같이 필요한 갯수의 랜덤한 데이터를 맹글려 한다치면 아래와 같은 소스가 필요할 것이다.(주석을 잘 참고하길....)faker-js 사용법은 너무나 쉬워서 괘니 공부가 되도록 table 만드는 소스를조금 있어 보이게 header 들어가는 부분에 json의 key값을 이용하고,그것을 한글화 하는 부분도  일부러 넣어 보았당.  도움이 되었으면 하는 바램이당. faker.helpe..

자바스크립트 2024. 10. 24. 22:28

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