웹공부 (18) 썸네일형 리스트형 React에서 react-hook-form 사용하기 react-hook-form은 매우 간편하게 form을 생성 및 관리할 수 있는 모듈이다. 해당 사용법에 대해 배워보기 전에, 기존의 방법대로 간단한 form 생성을 구현해보고, 기존 코드를 react-hook-form 모듈을 사용해 대체하면 얼마나 간단해지는지 비교해보자. 아래와 같이 글자가 10자 이상인 todolist를 입력받아 submit하는 간단한 form을 만들어 보자. [ToDoList.tsx] 위와 같은 동작을 하는 form을 생성하기 위해서 todo value의 실시간 입력값을 저장하는 state와 setter함수, 글자수가 부족할 때의 에러메시지 출력값을 저장할 state와 setter 함수, onChange 함수, onSubmit 함수 등등 간단한 기능의 todo리스트 한줄을 생성하는.. React에서 Recoil로 상태관리하기 상태 관리 라이브러리 Recoil에 대해 학습해보자. Recoil: A state management library for React Recoil A state management library for React. recoiljs.org 서론 왜 State 관리가 필요한가? ->다크모드/라이트모드 스위치를 만들며 이해해보기 1) index.tsx 파일에 적용되어있는 themeProvider 옮기기 왜 index.tsx -> app.tsx로 옮겼나면, theme을 state로 관리하기 위해서다. -index.tsx에 있던 ThemeProvider를 App.js로 이전 -(theme.tsx) Theme = > lightTheme, darkTheme 두가지 버전으로 확장 //theme을 app.tsx에서의 s.. Spring - 정적 컨텐츠, MVC&템플릿 엔진, API 스프링 웹 개발 기초 개념 중 파일을 웹브라우저에 전달해주는 3가지 방식에 대해 정리해보았다. 📚목차📚 👉 1. 정적 컨텐츠 👉 2. MVC & 템플릿 엔진 👉 3. API 1. 정적 컨텐츠: 파일을 변환작업 없이 웹 브라우저에 전달해 주는 것. resources > static 폴더 하위에 원하는 파일을 넣으면, 정적파일이 그대로 반환이 됨. 단 여기에는 어떤 프로그래밍 통해 파일 변환을 수행할 수는 없음. https://www.baeldung.com/spring-mvc-static-resources 💻hello-spring.html💻 안녕하세요. 정적페이지 입니다. ✍ 정적 컨텐츠 동작과정 : 컨트롤러와 맵핑되는 게 없으면, resources > static으로 가서 맵핑되는 html파일을 찾아 렌더.. Spring 입문 - thymeleaf 템플릿 엔진 동작 -jdk 17 설치 -spring initializr에서 프로젝트 생성 (3.X 버전은 jdk 버전 17이상이어야 함.) intelliJ에서 프로젝트 열기(Gradle로 선택) *Gradle은 버전 설정하고 라이브러리 땡겨오는 것 ->build.gradle [라이브러리 살펴보기] Gradle, Maven같은 것들이 의존관계를 다 관리해줌. [정적 파일 동작 - 웹페이지 시작 화면] resources > static 폴더 밑에 index.html 파일 생성. index.html 파일은 웹페이지 시작화면에 로드되는 html파일이다. Hello hello "localhost:8080" 포트로 접속 시 index.html 파일이 렌더링된 페이지가 나옴. [프로그래밍 결과가 실행되는 화면 만들어보기] src > .. React에서 typescript 사용하기 https://www.typescriptlang.org/ JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org typesrcipt는 개발자가 할 수 있는 사소한 실수들을 코드 실행 전에 잡아주는 유용한 도구이다. 맛보기로 살펴보자면, const plus = (a, b)=> a+b;라는 함수가 있을 때 number끼리만 더하고 싶을 경우,.. React에서 styled components 사용하기 https://styled-components.com/ styled-components CSS for the Age styled-components.com styled components는 css 페이지를 따로 만들지 않고, javascript 안에서 편하게 스타일을 적용할 수 있게 해준다. css가 적용된 컴포넌트를 사용자 정의 이름으로 생성해 코드의 가독성을 높여준다. styled-component 설치 명령어(in terminal) npm i styled-components styled-component 사용법 styled-component를 설치했으면, 사용할 페이지에 import 해줘야 한다. import styled from "styled-components"; 1. 스타일 적용된 태그 생성하.. css flex속성에 관하여 https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com css flex속성을 공부하다 이해가 잘 되게 정리해놓은 좋은 블로그글이 있어서 기록해놓는다! 웹 개요 웹이란? 문서와 리소스를 공유 스트리밍 서비스, 이메일 웹은 케이블을 통해 전달되는 것 중 하나 Transfer Protocol: HTTP, Hypertext 소통이 이루어지는 규칙 웹서버: 웹을통해 들어오는 요청을 충족시킴 브라우저는 클라이언트일 수도 있고 서버일 수도 있다. request를 보내면, 브라우저가 해당 지침을 받아 웹페이지를 구축함. 브라우저는 지침을 이해하고 이것을 인간이 알아볼 수 있게 바꾸는 것. 프런트앤드/백엔드 *front end 요청을 보내면, google 서버에 도착함. *back end 요청을 받은 google 서버가 검색 결과가 무엇인지, 어떤 정보들을 제공할 지 응답을 구성함. -모든 웹페이지의 구성도구: HTML, CSS, JS ex) Purple(CSS: adject.. 이전 1 2 3 다음
