오늘은 수동으로 웹사이트를 빌드하고 배포를 해보자! 기획 업무를 했을때 빌드 했어? 배포해! 라는 말을 정말 많이 들었는데 , 빌드와 배포가 뭔지 부터 알아보자 🤔 📝 빌드 : 컴파일된 코드를 실제 실행할 수 있는 상태로 만드는 일 📝 배포 : 빌드가 완성된 실행 가능한 파일을 사용자가 접근할 수 있는 환경에 배치시키는 일 💡 jar (Java ARchive) : JAVA 어플리케이션이 동작할 수 있도록 자바 프로젝트를 압축한 파일 ( class 와 같은 JAVA 리소스와 속성 파일, 라이브러리 등 이 포함되어 있음) 💡 war (Web application ARchive) : servlet/jsp 컨테이너에 배치할 수 있는 웹 어플리케이션 압축 파일 ( JSP, SERVLET, JAR, CLASS, X..
ON
오늘은 아이디중복 검사를 진행해보자. 관련되어 이전 내용을 참고 하고 싶다면 아래 포스팅을 확인하고 오자 [ React ] 회원가입 구현 ① 이번 시간은 이전시간에 했던 TodoList를 좀 더 업그레이드 시켜보자! Spring을 이용해서 BACK단을 구성해볼거고, React를 이용해서 Front 화면을 구현해보자. 이전에 했던 내용이 기억이 안나거나 실습 jnaa.tistory.com [ React ] 회원가입 ( 로그인 / 로그아웃 ) ② 오늘은 이어서, 회원가입 시 로그인 / 로그아웃 및 아이디 중복 검사를 구현해보자 먼저 로그인/ 로그아웃 먼저 구현하기로 하자 [ React ] 회원가입 구현 ① 이번 시간은 이전시간에 했던 TodoList를 jnaa.tistory.com 📚 React 📘 App...
오늘은 이어서, 회원가입 시 로그인 / 로그아웃 및 아이디 중복 검사를 구현해보자 먼저 로그인/ 로그아웃 먼저 구현하기로 하자 [ React ] 회원가입 구현 ① 이번 시간은 이전시간에 했던 TodoList를 좀 더 업그레이드 시켜보자! Spring을 이용해서 BACK단을 구성해볼거고, React를 이용해서 Front 화면을 구현해보자. 이전에 했던 내용이 기억이 안나거나 실습 jnaa.tistory.com 📚 React 📘 App.js import React, { useState, createContext } from 'react'; import './App.css'; import SignupContainer from './Signup'; import Login from './Login'; export..
React를 공부하다가 REST API를 처음 접해서 찾아보다보니 면접에도 많이 나온다고 해서 정리를 해보기로 했다. 간단하게 REST를 기반으로 만들어진 API를 의미 한다고 하는데 그럼 API가 뭔지 부터 공부하고 가자 🤔 API 란 ? 소통할 수 있는 창구 a소프트웨어가 b라는 소프트웨어로부터 지정된 형식으로 요청,명령을 받을 수 있는 수단 더 쉽게 말해보면, 어떤 학원에 정보를 알고 싶다! 그럼 약속된 형식이 있어야지 정보를 주고 받고 할 수 있다! 이게 바로 API이다 ! API는 알아봤는데 그럼 REST는 무엇일까 ? 🤔 REST 란 ? HTTP URI을 통해 자원을 명시하고 HTTP Method(POST,GET,PUT,DELETE,PATCH)를 통해 해당 자원(URI)에 대한 CRUD를 적용..
이번 시간은 이전시간에 했던 TodoList를 좀 더 업그레이드 시켜보자! Spring을 이용해서 BACK단을 구성해볼거고, React를 이용해서 Front 화면을 구현해보자. 이전에 했던 내용이 기억이 안나거나 실습하고 싶다면 아래 포스팅을 확인해보자! [ React ] TodeList 실습하기 ⑤ 오늘은 TodoList를 만들어 볼 것이다. 내가 할일을 작성하고 추가하면, 아래와 같이 체크박스로 나타나는 형태로 만들어주고 완료를 했을때 오른쪽과 같은 화면을 만들어보자 📘 APP.js 1. components jnaa.tistory.com 🤔 실습하기 앞서 세팅하기 ① 터미널에 npx create-react-app todo-list : todo-list 폴더를 생성해준다. ② DB 세팅 ③ Spring..
📝 Context API 이란 ? Context API는 React 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 방법을 제공합니다. 이를 통해 중첩된 구조에서 데이터를 전달하는 데 있어서 불필요한 props drilling을 방지 할 수 있습니다. 부모 자식1 자식2 자식3 자식4 자식5가 있다면 자식5만 값을 가지고 싶은데, 자식1 ~ 자식5까지 모두 받아야하기 때문에 매우 불필요하기때문에 context api를 이용하자 🤔 Context API 사용하기 contexts폴더에 새로운 js 만들기 createContext 함수사용해서 객체 만들기 이후 Context.Provider 컴포넌트를 이용해서 데이터 전달 데이터는 Provider는 value prop을 이용 이 개념을 가지고 오늘 만들어 볼 ..
오늘은 TodoList를 만들어 볼 것이다. 내가 할일을 작성하고 추가하면, 아래와 같이 체크박스로 나타나는 형태로 만들어주고 완료를 했을때 오른쪽과 같은 화면을 만들어보자 📘 APP.js 1. components 폴더의 components/R05_todolist1.js를 사용 import TodoList1 from './components/R05_todolist1'; 2. TodoList1으로 불러오기 function App() { return ( {/* R05_todoList1 */} ); } export default App; 📘 R05_todolist1.js const TodeList1 = () => { // 할일을 저장할 변수 // -> 상태가 변하면 컴포넌트 (TodeList1)을 리랜더링 c..
🤔💬 props - 금수저 부모 - 부모가 자식한테 값을 준다 ! 쉽게 생각하고 싶어 '금수저부모'라고 생각하기로 했다. 🤔💬 state lifting up - 자수성가 ❗ 자식이 부모한테 값을 전달 할 수 있도록 하는 것이다 ! (자식 값이 변함으로서 부모가 값이 바뀐다!) React에서는 상위 컴포넌트가 하위 컴포넌트의 상태를 직접 변경할 수 없습니다. 따라서 React에서는 하위 컴포넌트에서 발생한 이벤트를 상위 컴포넌트에서 처리하도록 하는 상태 끌어올리기 패턴을 사용합니다. prop와 다르게 자식이 부모한테 값을 주니 ! '자수성가' 라고 생각하기로 했다. 📘 APP.js 1. 서버 연결을 위해 APP.js에 import 해주고, import 해줄때 별칭을 넣어준다. /* import logo f..
