개발새발

1. 개발환경 React로 페이지 구현 SpringBoot로 서버 구현 2. 기존 코드 import React, { useState, useEffect } from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import axios from 'axios'; import User from './UserList'; import SignUp from './SignUp'; import Login from './Login'; function App() { const [userEmail, setUserEmail] = useState(''); const [isAuthenticated, setIsAuth..

React에는 컴포넌트 간 데이터를 전달하는 대표적인 방법이 두 가지가 있는데, 그 중 하나가 바로 props props는 데이터를 간편하게 넘기고 받을 수 있다는 장점이 있지만 어떤 상황에서는 굉장히 큰 문제가 된다 1. 컴포넌트 트리 구조가 굉장히 복잡하고 깊을 경우 2. 위의 상황에서 자식 컴포넌트로 데이터를 전달하는 경우 소규모의 리액트 앱이라든지, 혹은 데이터 전달을 원하는 자식 컴포넌트가 부모 컴포넌트 바로 밑에 존재한다면 별 문제는 되지 않을 것이다. 하지만 자식의, 자식의, 자식의, 자식의, 자식의, ... , 자식의 컴포넌트에게 데이터를 전달 할 때는 어떻게 할 것인가? 컴포넌트 전체에 공통적으로 필요한 데이터가 존재할 경우에는 어떻게 할 것인가? 이를테면 현재 로그인 된 사용자 정보, ..

원하는 워크스페이스 내에서 터미널 실행 mkdir 폴더명 (혹은 그냥 직접 만들기) 폴더 client, server 만들고 mkdir server npx create-react-app client 1) client 폴더 들어가서 npm i axios 2) server 폴더 들어가서 npm init (package.json 생성) : package 세팅 npm i oracledb express (package.json 내에 express, oracledb 설치 확인 가능) npm i cors server.js 작성 완료 후 server에서 npm start실행해서 테스트 > Server 시작 : http://localhost:5000 백엔드 연결 확인 되면 client 실행 npm start

1. Node.js 설치 LTS로 다운로드 (업데이트가 잦지 않은 대신 안정성이 높음) 다운로드 완료하면 cmd에서 npm -v 명령어로 버전확인 2. React 개발 환경 설정 작업을 진행할 workspace 경로에서 cmd 실행 > npx react-create-app 폴더명 만약 'ERR! A complete log of this run can be found in' 경고문이 뜰 경우 > User\user1\AppData\Roaming에 새폴더로 npm 생성 (혹은 npm install -g npm) npm 폴더 생성 후 다시 workspace 경로로 돌아와서 > npm cache clean --force > npm cache verify > npx create-react-app 폴더명 Happy ..

1. 어떤 프로그램을 만들 것인가? 메인화면에서 팝업창으로 이동해 사진을 선택하면 메인화면에 사진이 업로드 되는 프로그램 (마치라잌 프로필사진 변경) 2. 어떻게 구현할 것인가? 메인화면에서 '사진변경' 버튼을 누르면 팝업창이 활성화 된다 팝업창 내에서 파일선택을 가능하게 하고, 선택한 사진의 썸네일을 확인한다 팝업창 내에서 저장 버튼을 누르면 메인화면에 저장이 된다 3. 코드를 만들어보자! 0) 메인화면 구현 이미지 이미지추가 태그에 저장한 이미지를 추가할 예정이다 아래부터는 쭉 JavaScript 1) 이미지추가 버튼을 클릭했을 때 새 창 띄우기 id=add-post document.getElementById('add-post').addEventListener('click',()=>{ const po..

1. 어떤 프로그램을 만들 것인가? 외부 페이지에서 작성한 글이메인 페이지에 업로드 되는 프로그램 2. 어떻게 구현할 것인가? 메인페이지에서 글쓰기 버튼을 누르면 글을 작성하는 페이지로 이동한다 이동한 페이지에서 원하는 글을 쓰고, 작성완료 버튼을 누르면 ① localStorage에 작성한 글이 저장되고 ② 저장된 정보가 메인페이지에 업로드 된다 ③ 그리고 메인페이지로 자동 이동 코드를 작성해보자! 일단 페이지 구조를 먼저 짜봅시다 1. 게시판 페이지 (post-main.html) 참고로 css코드는 따로 파일을 만들어서 적용했습니다 게시판 글쓰기 2. 게시글 작성 페이지 (create-post.html) 게시글 작성 작성완료 ~~~여기서부터는 JavaScript~~~ post-main.html : 글쓰..

배웠던 CSS코드를 다시 공부하는 도중.. 눈에 띈 첫 줄 대체 이게 뭐였더라... 있어도 그만 없어도 그만일 것같은데..해서 알아보고 쓰는 글~ 그러니까 이게 뭔가 했더니 내가 지정한 요소의 크기 범위를 지정해주는 것이었다. 웹 브라우저에서 F12를 누르면 나오는 이 창의 맨 아래 알록달록한 그림을 통해 알아보자 box-sizing은 아래의 두 가지 속성을 가질 수 있는데, content-box border-box 각각이 가지는 의미는 다음과 같다 1. content-box 요소 그 자체의 사이즈로 크기가 지정됨 예를들어 내가 태그를 통해 어떤 요소의 사이즈를 아래와 같이 지정했다고 가정하자 width: 200px; height: 100px; 만약 이에 대해 box-sizing: content-box를..