전체 글 208

[React] 타입스크립트 옵셔널 체이닝, 옵셔널 , 함수형 업데이트, props 전달 등등 메모

복습겸 내가 보기 편하기 위한 기록.. 큰건은 아니고 이번에 기존 돌아가고 있는 Next.js, Typescript 프로젝트에 기능 추가를 하였는데 그 과정에서 기록 해두고자 하는게 몇가지 있어서 짧게 포스팅 하려한다. 1. 옵셔널 체이닝 `?.` undefined 오류 방지를 위해 쓰인다. 웬만한 undefined 오류에는 물음표가 직빵이다 .. 다른곳에서도 그렇고 ref 로 가져온 current 에 eventListener 에서도 오류 나던걸 옵셔널 체이닝으로 아래와 같이 해결하였다 childRef?.current?.removeEventListener('scroll', catchEventScroll); 타입스크립트가 이건 편한듯 .. 2. 논널 어썰쎤 오퍼레이터 (Non-null Assertion O..

IT/React.js 2024.01.04

[React] 열고닫는 메뉴 , 메롱하는 메뉴, 다중 useState 관리

위 와 같은 기능을 만든다고 칩시다. 원래 css 이쁘게 tailwind 로 잡혀있는데 포스팅 하느라 다 빼서 없어보이는 점 양해부탁드립니다. 말이 메롱이지 , 열고닫는 메뉴, 혹은 클릭 했을때 해당 현상을 유지하는 식은 웹 사이트에서 흔히 사용되는 기능인데 근데 이 간단한걸 리액트 스럽게 반영하려니 살짝 뇌 정지가 왔어서 (jQuery 만 사용하던 응빱이라..) 복습겸, 기록겸, 남겨둡니다. 물론 아래 처럼 열고 닫는 상태들을 관리 할 수도 있겠지만 가오가 있지 다중 상태 관리로 진행합니다. const [부모1, set부모1] = useState(false); const [부모2, set부모2] = useState(false); const [부모3, set부모3] = useState(false); 다중..

IT/React.js 2023.12.31

[React] input checkbox 색깔 바꾸기, 커스텀 체크박스

굳이 리액트에 한정 되있진 않지만 리액트 프로젝트에서 사용 했으므로 기록 해두고자 진행하는 포스팅이다. input checkbox 가 파란색이 디폴트인데 색을 다르게 해야한다고 퍼블리싱 요청이 와서 간만에 바꿔봤다 className 에서 눈치 채신분들도 계시겠지만 Tailwind 도 같이 사용중이다. 알맹이는 filterCheckbox 에 있다 background-color 로 내가 원하는 색깔 지정 가능하고, background image 안에 viewBox 값을 조정해서 화살표 위치 및 크기 조정 가능하다. .filterCheckbox{ appearance: none; width: 18px; height: 18px; border: 1px solid rgba(158, 158, 158, 1); borde..

IT/React.js 2023.12.31

docker php-nginx 404 에러

docker 를 또 간만에 사용하게되어서 윈도우 도커에 php-nginx 이미지를 다운받고 가동시켰는데 404 에러가 떴다. 보통 docker 를 사용하지않고 그냥 로컬에서 nginx 를 깔게되면 아마 /etc/share/nginx/nginx.conf 여기에 모든 설정이 다 있을텐데 docker 로 돌렸을 경우에 conf 파일이 여기저기 찢어져있다. 여튼 conf 에 설정되있는 경로와 php 및 html 파일들이 없어서 나오는 에러다. 도커로 돌렸을 경우 우리가 흔히 생각하는 nginx.conf 파일은 /opt/docker/etc/ngnix 폴더 아래에 있다. # vi /opt/docker/etc/nginx/vhost.conf server { listen 80 default_server; listen [..

IT/Docker 2023.12.10

[Ionic] 안드로이드 스튜디오 웹앱 console.log 확인 하는 방법

Next.js 를 아이오닉으로 감싸서 안드로이드 앱을 끄적끄적 하고있는데 지도가 계속 안나와서 콘솔에 어떻게 찍히는지 좀 보고싶어서 찾다가 기록하게 되었음 방법은 두가지가 있는데 일단 첫번째는 여기저기 많은 포스팅에서도 볼 수 있었는데 난 이렇게 안했음 자바랑 별로 안친해서 ㅎㅎ; 자꾸 WebView webView = findViewById(R.id.mwebview); 이쪽에서 오류난다고 어쩌고해서 골치 아파서 재낌 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView webView = findVi..

IT/잡다구리 2023.11.26

[JPA] jpa 세팅 관련 오류 정리 HHH000318 , HHH000204

아래 오류에서 보다시피 난 jdk 17 버전 사용중이다. JPA 세팅을 진행하는데 아래와 같은 오류 발생 "C:\Program Files\Java\jdk-17\bin\java.exe" "-javaagent:C:\Program Files\JetBrains\IntelliJ IDEA 2022.3\lib\idea_rt.jar=3238:C:\Program Files\JetBrains\IntelliJ IDEA 2022.3\bin" -Dfile.encoding=UTF-8 -classpath C:\web_developer\java\hellojpa\target\classes;C:\Users\bugki\.m2\repository\org\hibernate\hibernate-entitymanager\5.3.10.Final\h..

IT/JAVA 2023.10.29

[Docker] PHP Laravel 9.x 설치하기 feat.window 10

윈도우에 Docker 를 사용하여 Laravel 9.x 컨테이너를 설치하려고했다. 언제나 그렇듯 한번에 되지않는다. Window10 환경이었고 Docker Desktop 은 이미 설치되어있다는 가정하에 진행한다. 아 물론 최신버전으로 되있어야 잘된다. 이 점은 유의하자! curl -s "https://laravel.build/example-app?with=mysql,redis" | bash cmd 창에서 프로젝트 생성하고싶은곳에 가서 저렇게 'example-app' 에 내가 원하는 이름 기재하고 엔터치면 프로젝트가 생성됨과 동시에 Laravel docker image 가 생성이 되야한다. 참고로 위 명령어 git bash 에서 실행하면 opt 뭐시기 에러 뜨면서 안되니까 CMD 창에서 실행하는게 정신건강..

IT/Docker 2023.10.24

[Next.js] 렌더링 된 화면에서 줄바꿈이 되지않을때 ~!

HTML5, CSS 단이었다면 되게 간단히 생각했을법도 한데 괜히 Next.js 가 엮여있어서 생각이 안났다는 핑계를 대본다 .. 여튼 포트폴리오를 만들고 있는데 굳이 DB 까지 연동할 필요는 없을것 같아서 그냥 component 각 폴더에 ___data.tsx 형식으로 데이터를 다 넣어줘서 불러오는 식으로 꾸며주고있다. #/component/Project/projectData.tsx import { Project } from "@/types/project"; const projectData: Project[] = [ { id: 1, title: "뱀팔이", paragraph: `국내 희귀애완동물 샵 및 병원을 한곳에서 볼 수 있는 뱀팔이 웹 사이트 제작 한칸띄어쓰기를 어떻게 넣을수 있을까? 왜 안될까?..

IT/React.js 2023.10.18

Git 원격 저장소 branch 다중 삭제 명령어 정리

git 로컬 저장소에서 git bash 와 같은 커맨드 창 키고 ~ git 원격 origin 저장소 branch list 확인 git ls-remote --heads origin 결과값 예시 다중 브랜치 삭제 명령어 git push origin [브랜치명1] [브랜치명2] ex) git push origin --delete refs/heads/dev_ltw_7144 refs/heads/dev_ltw_7204 혹시 브랜치에 특수문자 들어갔을경우 따옴표로 감싸서 진행 git push origin --delete "refs/heads/dev_ltw_(아힝흥헹힝)" 처음에 아래와 같이 진행하면 삭제 될줄알았으나 진행 안됐음 앞에 refs/heds/[브랜치명] 붙이니까 정상적으로 삭제됌 git push origi..

IT/잡다구리 2023.09.21

[PHP] 보육정보공개API 연동 작업 후기 (시군구코드 mysql INSERT 문 첨부) , TRUNCATE, BULKINSERT, CRONTAB

사내에서 보유중인 데이터와 , 공개API 를 매칭하는 작업을 하였다. 아래 링크에서 API 에 대한 설명 및 메뉴얼을 볼 수 있다. https://info.childcare.go.kr/info/oais/introduction/Intro.jsp 공개 API 개요 < 보육정보공개 API 소개 < 보육정보공개 API < 어린이집정보공개포털 ※ API[Application Program Interface] : 인터넷 이용자가 일방적으로 웹 검색 결과 및 사용자인터페이스(UI) 등을 제공받는 데 그치지 않고 직접 응용 프로그램과 서비스를 개발할 수 있도록 공개된 info.childcare.go.kr 회원가입은 필수이며, 개발계정 신청 및 심의가 있고 심의는 넉넉하게 하루정도 걸린다고 보면된다. 처음에 테스트 키로..

IT/잡다구리 2023.07.22
300x250