본문 바로가기

분류 전체보기111

[React] React란? JSX 문법 정리하기 React가 무엇인지 알아보며제대로 사용하기 위해 알아야 할JSX 문법을 공부해보자! 1. 리액트(React)란?SPA를 위한 자바스크립트 라이브러리이며, 2013년 메타(구 페이스북)에서 공개했다.라이브러리란, 프로그래밍에서 자주 사용되는 코드 묶음을 모아놓은 것으로 새로운 코드를 작성하지 않고도 특정 기능을 쉽게 재사용할 수 있도록 돕는 도구이다.SPA(Single Page Application, 단일 페이지 애플리케이션)는 HTML, CSS, JavsScript를 최초 1회만 로드하고, 이후에는 자바스크립트 파일을 통해 DOM 또는 HTML 파일을 조작하는 방식을 가지고 있다. (빠르다)과거에는 페이지 이동을 하게 되면 HTML, CSS, Javascript 파일을 서버와 주고받는 통신을 해야.. 2025. 10. 23.

[Spring, React] 👑 VIP 초대장 만들기 💌 어떻게 만들지 구상해보기. 연말을 맞이하여VIP 등급 이상 고객분들께초대장을 보내려고 한다!어떻게 만들지 구상해 보자. 1. 구상화면 - 고객고객님이 접속할 화면고객은 해당 페이지에서 미리 받은 비밀번호 4자리를 입력한다. 그러면 고객의 등급에 맞는 페이지로 이동한다. 등급은 총 3개로 되어있다. VIP, VVIP, DIAMOND 코드 성공 화면고객이 제대로 된 코드를 입력할 경우, 고객의 이름이 표시되면서 페이지로 이동한다. 코드 실패 화면코드에 실패하게 되면 코드를 다시 확인해 달라는 문구가 하단에 배치된다. - 관리자로그인 화면id에 따라 관리자의 권한이 달라진다. VIP 명단 관리 예시 명단의 개수는 30명으로 잡았으며 VIP 10명, VVIP 10명, DIAMOND 10명이 된다. 명단 추가add 버.. 2025. 10. 21.

[React] http://localhost:5173/ 초기 화면을 분석해보자. 참고로 React에 대해서 잘 모릅니다.아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다! 초기 화면과 코드를 보고어떻게 동작하는지 분석해보자! 1. 화면 화면을 살펴보면, Vite와 React 아이콘 이미지가 있다. 이때 React 아이콘 이미지는 빙글빙글 회전한다. 그리고 count is 0 버튼을 누르면 0이 점점 올라가는 걸 볼 수 있다. 2. 파일전체 파일 jsx와 css의 차이점jsx는 화면 구조와 로직을 담당한다. 어떻게 배열할건지 그리고 어떻게 동작할건지 설정하는 부분인 jsx 파일이다. css는 외형을 꾸미는 설정을 한다. 색상, 여백, 폰트 등을 담당한다.Vue를 먼저 사용한 입장에서 알아보니, script와 template가 jsx 파일을 담당하고 style.. 2025. 10. 13.

[Vite+React] WebStorm으로 React 설정하고 hello React 글씨를 화면에 출력하기. 참고로 React에 대해서 잘 모릅니다.아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다! React로 hello,React를화면에 띄워보자. 1. 프로젝트 생성하기 □ Vite로 설정하기 □ helloreact 이름 작성하기 □ Template에서 react 설정하기. □ rolldown-vite [ No ] 라고 선택하기 · rolldown: Vite의 롤업/ESBuild 자리를 대체할 예정인 Rust 번들러(Rolldown) 기반의 실험 패키지이다. · 안정/호환성이 더 중요하거나 처음 학습하는 경우→ No · 새로운 것 테스트·빌드속도 체감이 목표 → Yes □ Install with npm and start now?에서 [ No ]를 선택한다. · 잘 모르겠는데 여기서.. 2025. 10. 4.

[Spring, Vue.js] 카카오 간편 로그인 만들기④ - 사용자 정보 조회해서 닉네임 읽어오기 (REST API) [Spring, Vue.js] [Spring, Vue.js] 카카오 간편 로그인 만들기③ - Spring으로 토큰 교환하기 (REST API)[Spring, Vue.js] 카카오 간편 로그인 만들기② - Vue로 프론트엔드 작성하기 (REST API)[Spring,Vue.js] 카카오 간편 로그인 만들기 ① - 구조와 흐름 파악하고 카카오 디벨로퍼스 설정하기카카오 간편 로그post-this.tistory.com 카카오에게 토큰을 받아왔다.받아온 토큰으로 사용자의 정보를 읽어오자! 1. 화면로그인 성공 메인화면(닉네임 O) 2. 전체 코드package 여러분걸로 넣으세요 &_&import org.springframework.beans.factory.annotation.Value;im.. 2025. 9. 30.

[Spring, Vue.js] [Spring, Vue.js] 카카오 간편 로그인 만들기③ - Spring으로 토큰 교환하기 (REST API) [Spring, Vue.js] 카카오 간편 로그인 만들기② - Vue로 프론트엔드 작성하기 (REST API)[Spring,Vue.js] 카카오 간편 로그인 만들기 ① - 구조와 흐름 파악하고 카카오 디벨로퍼스 설정하기카카오 간편 로그인을 만들어보자!먼저 어떻게 만들어야하는지 구조와 흐름을 파악하고카카오post-this.tistory.com 프론트엔드까지 작성했다.이제 백엔드로 넘어와서 토큰 교환까지 만들어보자! 1. 화면로그인 성공 메인화면 (닉네임 O) 2. 전체 코드package 여러분걸로 넣으세요 &_&import org.springframework.beans.factory.annotation.Value;import org.springframework.http.*;im.. 2025. 9. 28.

이전 1 2 3 4 ··· 19 다음

티스토리툴바