All Day Tired

코딩하는 누나 강의 듣고 정리한 글입니다. state가 변하면 UI를 바꾼다state 형태는 아래와 같다.const [변수, setState] = useState(초기값);state값을 변경하기 위해서는 setState 함수를 통해서 바꿔야한다 state가 바뀌면 UI가 랜더링 됨 그래서 setState 함수를 실행한다고 바로 실행되지 않고 비동기적으로 실행이 됨 setState 함수를 감싼 함수가 끝나야 setState가 실행된다 코드와 함께 설명하면import { useState } from 'react'import './App.css'function App() { const [count, setCount] = useState(0); const increase = () => { setCoun..

코딩하는 누나 강의를 듣고 정리하는 글 입니다. url을 넘길 때 많은 정보를 넘기곤 한다.http://www.yj-dev.com/history 이런식으로 pathVariable로 history라는 정보를 넘기던가http://www.yj-dev.com?id=1&num=23 이런식으로 쿼리파라미터로 id와 num이라는 정보를 넘기던가 먼저 pathVariable을 하려면 history같은 값은 변해야하는 값인데 Router에 어떻게 지정을 해줘야할까?mport { useState } from 'react'import './App.css'import PageA from './page/PageA'import { Routes, Route, Navigate } from 'react-router-dom'//imp..

코딩하는 누나 강의를 들으면서 정리하는 글 입니다! 보통 웹사이트를 보면 여러 페이지를 이동하면서 사용하게 되는데 이 때 리액트에서 필요한 것이 Router Router를 사용하기 위해서는 가장 먼저 리액트 프로젝트에 Router를 설치하는 것이다.아래 명령어를 터미널에 치면 Router 6버전이 설치 된다.npm install react-router-dom@6 그럼 진짜로 Router를 사용해주기 위해서는 main.jsx 파일에서 BrowserRouter를 사용해주자import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import './index.css'import App from './App.jsx'import {..

리액트 첨 해보는데 진심 개빡침난 이걸 왜 쓰는지 모르겠다... swiper 쓰는데도 구글링으로 나온 글 다 하라는대로 했는데몽땅 다 안돼서 개빡쳤음 진심 레알...이걸로 2시간 삽질함 거지같아 일단 나는 swiper 9.3.2 버전을 사용했다. 1. npm으로 swiper 다운로드 하기나는 인텔리제이를 사용하고 있어서 인텔리제이 터미널에 가서npm install swiper@9.3.2명령어로 swiper 9.3.2 버전을 다운로드 했다.확인하려면 리액트 다운 받은 디렉토리에 package.json을 보면 swiper 몇버전을 받았는지 알 수 있고node_modules에 swiper 디렉토리가 있는 것을 확인할 수 있다. 2. 필요한 기능들 import 하기나는 아래와 같이 import 했다.import..

조금 찡찡거리자면...로딩이미지가 사업단에서 기본적으로 설정한게 있는데그걸 하필 내가 만든 페이지 중 특정 부분에서만 다른 이미지로 바꾸고 싶다 함...그래 어찌저찌 이미지는 바꿈... 근데 여기도 또 문제가 터졌으니...내 로딩바는 단계별로 진행순서를 알려주는 gif파일인데예를 들어 여러개 리스트 중 한 개씩 클릭하는데 처음껀 제대로 로딩 gif이미지가 처음부터 잘 나옴...근데 두번, 세번, 네번 누를때 로딩이미지가 로딩 끝낸 직전 이미지부터 모이는 것...즉, 처음 클릭 -> 로딩이미지가 '조회하고있습니다' 보여주고 '조회를 마쳤습니다' 여기서 끝났다면 -> 다음 클릭 -> 로딩이미지는 '조회를 마쳤습니다' 여기서 부터 보여는 것....아 진짜 돌겠네...그러나 해결 완.... 문제gif로 사용한 ..

아 진짜 5시 반 넘어서 수정해달라고 한 공무원이나 그걸 시키는 상사... 매우 빡쳤다... 문제상황넥사크로 환경파일(environment.xml)에 loadingimage에 설정된 로딩이미지를 특정 화면에서만 다른 이미지로 변경하고 싶음특정 트랜젝션을 태울 경우만 로딩이미지 변경되었으면 함 진짜... 엄청 찾아봄... 다른 회사분한테도 물어보고 구글링해보고 ai한테도 물어보고...하지만 답은 가이드에 있었다...넥사크로 가이드에서 loadingimage를 검색하면Description에서 "데이터 로딩 시 화면에 표시될 이미지를 설정하는 속성입니다." 라고 써있다.설정!!!! 그럼 이미지 변경도 되겠구나 싶어서 활용 해결해당 화면 script에서 트랜젝션 function을 태우기 직전에nexacro.ge..

진짜 너무너무너무너무너무 빡쳐서 남김... col0              col1row0 row1 row2row3('그리드 원본'이라 칭함) 그리드를 만들 때 그리드 형태는 저런식으로 밑에 2줄만 병합하고 row0의 row size는 0으로 안보이게 처리함즉, 아래와 같은 그리드 형태가 됨(row0은 row size가 0이라서 안보이게 됨)col0              col1row1 row2row3('그리드 수정'이라 칭함) 시나리오사용자가 input(edit사용)에 질문을 입력하고 [검색] 버튼을 누르면사용자가 입력한 질문이 (col1, row0)에 써지면서 row0의 높이를 늘린다.그리고 나머지 subrow(row1, row2, row3)들의 높이를 0으로 처리해서 안보이게 처리  (여기까지가 ..

프로젝트를 하는데 특정글자만 태그를 써서 폰트컬러를 변경해야했다.그런데 그리드에 cell에서 displaytype을 decoratetext로 변경하고 text에 썼더니계속 가운데 정렬로만 됨....대환장 파티...하다하다 안되서 투비소프트에 질문 남김...근데 어이없는 답변... 그리고 심지어 왼쪽 정렬이 됨...;;; 넥사크로 component에 property설정을 변경했는데 설정이 안 먹을 경우 다시 설정을 변경했다가 저장 후 원래 하려던 설정으로 변경하고 다시 저장 내 경우에grid 특정 cell에서 displaytype을 decoratetext로 변경 후 아래쪽 Style에 textAlign가 left였지만 계속 가운데 정렬로 됨그래서 textAlign를 center로 변경 후 다시 left로..

후임 질문 들어와서 봐주는데 numberformatexception이 남코드를 보는데 뭐지 jstl도 잘썼는데;;;그리고 jstl로 foreach 돌리면 잘 나온다해서 ??? 왜임;;;; 이러면서 다시 자세히 코드를 보니까 목록 한행 클릭 -> 상세 가는데 일련번호로 상세내용을 db에서 조회이걸 보통 1개만 가져오니까 Map으로 썼을거라 생각했는데list를 써서 가져온 것이 화근...;;;; 1건을 조회하더라도 list형으로 담아왔으면 jsp에서는 foreach문을 써줘야한다.안써주면 저렇게 numberformatexception 남 보통 list써서 가져올 생각을 안하기야 하겠지만...

오늘은 div content가 여러 줄일 때... 이 나올 수 있도록 하는 방법에 대해서 포스팅해볼게요! 학원 html/css 평가에서 여러 줄일 때... 이 나왔었는데 유용할 거 같아서 남겨봅니다. 이런 식으로 마지막 줄에 ...이 나오도록 하는 방법입니다. html구조는 아주 간단히만 할게요. 요조가 낭독하는 조해진 작가의 "산책자의 행복"은 "EBS 아이돌이 읽다, 마음을 잇다"라는 아이돌의 낭독과 기부가 결합된 프로젝트 참여 작품입니다. 요조가 낭독하는 조해진 작가의 "산책자의 행복"은 "EBS 아이돌이 읽다, 마음을 잇다"라는 아이돌의 낭독과 기부가 결합된 프로젝트 참여 작품입니다. 이런식으로 긴 content를 가진 div에 css를 넣어줍니다. section #topTextContainer ..