공부 63

[Next.js] Fetch POST body에 json 형태로 데이터 주고받기 (json형 / object형 차이)

Next.js Fetch POST body에 json 형태로 데이터 주고받기 (json형 / object형 차이) 1. Fetch POST body에 JSON 형태로 데이터 전송 - JSON.stringify() 사용 - headers 를 입력/생략 하느냐에 따라 서버에서 값 받을 때 처리하는 방식이 다름 (3번 참고) fetch('/api/comment/new', {method:'POST' , headers: {"Content-Type": "application/json",} //이거 안쓰니깐 서버에서 json으로 인식을 못함 , body : JSON.stringify({comment: comment, _id: props._id}) }) 2. json형 / object형 차이점 // json형태 // ..

[SQL] 특정 컬럼의 첫번째 값만 가져오는 쿼리 (제일 최신 날짜의 값만 가져오는 쿼리)

[SQL] 특정 컬럼의 첫번째 값만 가져오는 쿼리 (제일 최신 날짜의 값만 가져오는 쿼리) #Oracle #Tibero -- 특정 컬럼의 첫번째 값만 가져오는 쿼리 (제일 최신 날짜의 값만 가져오는 쿼리) SELECT P_NO, S_NO, S_DATE, RESULT FROM ( SELECT P_NO, S_NO, S_DATE, RESULT , ROW_NUMBER() OVER(PARTITION BY P_NO ORDER BY S_DATE DESC, RESULT ASC) AS rn -- P_NO 별로 S_DATE 내림차순, RESULT 오름차순으로 정렬 FROM TAB1 WHERE 1=1 AND S_DATE

[React] map함수 + 화살표함수 사용할시 return 생략하는 법 (MAP, ARROW, JSX)

[React] map함수 + 화살표함수 사용할시 return 생략하는 법 (MAP, ARROW, JSX) 1. 기본 문법 //리액트 문법 JSX를 사용해야 함 상품목록 { prd.map((elm, i)=>{ return( {elm.menuName} ${elm.price} ) }) } 2. return 생략하는 문법 - 화살표 함수 안에 중괄호{} 지우고 - return 지움, 소괄호() 는 남겨둠 //Return 생략하는 방법 상품목록 { prd.map((elm, i)=>//중괄호 지우고 (//return 지움 {elm.menuName} ${elm.price} ) ) } 화살표함수는 워낙 생략할 수 있는 방법이 많아서 헷갈린다.. 이게 왜 됨? 하는게 많음 ㅋㅋ

[React] css div 안에서 빙글빙글 돌아가는 이미지

리액트로 피클플러스 클론코딩 해보려고 했는데, div 안에서 빙글빙글 도는 이미지 발견! 너무 이뻐보여서 어떻게 구현해야하나 생각했었는데,, 이미 리액트 기본 샘플 페이지에 이미지가 빙글빙글 도는 것이 아닌가!? 바로 힌트 얻어서 css 삽질해가면서 만들어봤다. css는 야매로 배워서 맨날 사용하려면 까먹는다. 나중에 참고해서 써야징 App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. ); } export default App; App.css .App { text-align: center; } .App-logo { position: relati..

[React] 깃허브 페이지(gh-pages)에 배포 하기

깃허브 페이지(gh-pages)에 배포 하기 1. gh-pages 설치 npm i gh-pages 2. 빌드 말기 (=브라우저가 이해할수 있는 코드로 최적화) npm run build - build 폴더 생성이 되고 - 이제 build 폴더를 github 페이지에 push 해야함 3. package.json 막줄에 홈페이지 주소 추가 "homepage": "https://[깃허브 아이디].github.io/movie-app/[깃허브 레파지토리 명]" 4. package.json에 배포 script 추가 "deploy": "gh-pages -d build", //빌드 한것(build폴더)을 gh-page에 배포해라 "predeploy": "npm run build" //배포 전에 빌드를 해라 -predep..

★★ React Hooks 정리잘 된 링크 (useEffect, useRef) ★★

1. useEffect https://cocoon1787.tistory.com/796 [React] 리액트 Hooks : useEffect() 함수 사용법 🚀 useEffect()란? useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook입니다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되 cocoon1787.tistory.com 2. useRef https://itprogramming119.tistory.com/entry/React-useRef-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C [React] useRe..

[React] React state안에 state 넣기

React state안에 state 넣기 *State 구조 - input 이라는 오브젝트형 state를 - objectives 라는 배열형 state에 넣는 구조 예시) objectives = [ {"objectiveName":"테스트","objectiveDate":"2022-12-20T15:00:00.000Z","challengeList":"공란","id":1}, {"objectiveName":"해물파전","objectiveDate":"2022-12-19T15:00:00.000Z","challengeList":"dzfwafeq","id":2} ] const [input, setInput] = useState({ //input 입력 값 상태 -> 오브젝트형 objectiveName: '', objecti..

자바스크립트 날짜 포맷 Intl.DateTimeFormat

자바스크립트 날짜 포맷 Intl.DateTimeFormat new Intl.DateTimeFormat("ko", { dateStyle: 'full' }).format(new Date()) // '2022년 11월 28일 월요일' new Intl.DateTimeFormat("ko", { dateStyle: 'full' , timeStyle: 'medium'}).format(new Date()) //'2022년 11월 28일 월요일 오후 6:42:50' *참고 자료 https://www.daleseo.com/js-intl-api/ 자바스크립트의 Intl API Engineering Blog by Dale Seo www.daleseo.com https://youtu.be/4YnKQrPMTNU

공부/JavaScript 2022.11.28

[React] [리액트 에러 해결] Uncaught Error: Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead.

[리액트 에러 해결] Uncaught Error: Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead. react-datepicker를 사용해서 날짜를 받아오는 중에 마주한 에러.. 진짜 얘때문에 얼마나 골머리를 썻는지 ㅋㅋㅋ * 에러 발생 상황: react-datepicker를 사용해서 날짜를 받아 state 저장 후 다른 컴포넌트로 보내려고 함 분명 state까지 잘 저장이 되었는데, 다른 컴포넌트에서 출력하려니깐 에러가 남 * 에러 내용 : Uncaught Error: Objects are not valid as a..

[React] React 버튼 클릭 시 스크롤 이동 예제(useRef)

React 버튼 클릭 시 스크롤 이동하는 방법 (useRef) - useRef 훅을 이용 - useRef : 특정 DOM을 가리킬 때 사용하는 Hook함수 import React, { useRef } from 'react'; import styled from 'styled-components'; function App() { /* 스크롤 이동 */ const inputForm = useRef(); //특정 DOM을 가리킬 때 사용하는 Hook함수, SecondDiv에 적용 const onMoveToForm = () => { inputForm.current.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; return ( 버튼을 누르면 아래로 이동합니..


반응형