본문 바로가기

전체 글399

[pfp nft 만들기] 넘무 기여운 나만의 pfp nft 만들어보깅 >.< pfp를 파악할 일이 생겨 코드 파악할겸 pfp만드는거 테스트 해봤는데 넘무 기여워서 작업하다가 피식한 즐거웟던 작업 ㅎㅎ 1. 피그마로 부품(?)들을 제작해주기 ** 진짜 진짜 중요한건 뒷배경 투명색으로 해주는거 (안그럼 겹쳐서 만들어야하는 작업이 안됌) 2. config.js에서 내가 원하는 대로 수정해주기 const layerConfigurations = [ { // 원하는 생성 개수 growEditionSizeTo: 10, layersOrder: [ { name: "Mouth" }, { name: "Background" }, { name: "Head" }, { name: "Eye" }, ], }, ]; 3. 파일명은 아래처럼 작성해줘야 됌 ex) back1#100.png -> 파일명#확률 (한마디.. 2023. 8. 28.
[스프링부트] 뷰단 건드릴 때마다 빌드하는거 넘무 싫어서 dev-tools 설정하면서 애먹었던 일 뷰단 건드릴때마다 다시 서버를 껐다 켰었는데... 리액트나 프론트 작업할 때처럼 커멘드 + s 하면 좀 알아서 새로고침 됏으면 좋겠는데 스프링부트 뷰단은 진짜 여러모로 프론트 작업하기 너무 힘든 환경인듯 ㅠ 아무튼 더 이상 미룰 수 없다 싶어서 적용하고만 스프링부트 데브툴즈 ㅎㅅㅎ 구글링해서 나온대로 이것저것 설정하는데... 왜 나는 ....웨지감자 나는.... Run/Debug Configurations - Modify options에 스프링부트가 없는건데........... 남들이 한 거에 다른 점 하나는 이거 설정을 못하고 있었던건데... 난 항상 이렇게 뭔가 해결이 안될때 진짜 이상하게(?) 계속 놓지만 않고 잡고 있으면 해결책이 요상한 방법으로라도 나오는 것 같다 마치 해결요정이 날 인도하는 것.. 2023. 8. 22.
[Next.js] 코드 스플리팅 next.js에서 를 사용하면 전체 페이지를 로드하지 않고 (리액트 SPA 특성 유지되면서) client-side-navigation으로 작동 => 대신 링크로 태우면 새로고침 됌 Next.js는 자동으로 코드 스플리팅을 해줘서 각 페이지에 필요한 항목만을 로드함 * 코드 스플리팅? 페이지가 /main, /about, /post 이렇게 세 가지 페이지로 이루어진 SPA를 개발한다고 할 때 /main 페이지를 들어가는 동안 /about이나 /post 페이지 정보는 사용자에게 필요하지 않을 확률이 높다. 그러한 파일들을 분리하여 지금 사용자에게 필요한 파일만 불러올 수가 있다면 로딩도 빠르게 이루어지고 트래픽도 줄어 사용자 경험이 좋아질 수가 있다. 이와 같이 더 나은 사용자 경험을 위해 코드를 비동기적으로.. 2023. 7. 22.
react-modal: App element is not defined. / 리액트 모달쓰면서 만난 에러 Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting `ariaHideApp={false}`. 콘솔창을 제대로 확인을 안햇어서 그런지 회원가입 폼 만들다가 만난 에러 ㅇㅅㅇ 모달... 굳이 라이브러리 왜썻나 싶은뎅 (직접 짠걸로 리팩해야겟다) 아무튼 만낫던 에러는 적깅 ㅇ_ 2023. 7. 18.
[java] 자바의 인터페이스 자바에서는 클래스를 통한 다중상속을 지원하지 않는다. 하지만 다중 상속의 이점을 버릴 수 없기에 자바에서는 인터페이스 라는 것을 통해 다중 상속을 지원한다. 인터페이스란 다른 클래스를 작성할 때 기본이 되는 틀을 제공하면서, 다른 클래스 사이의 중간 매개 역할까지 담당하는 일종의 추상 클래스를 의미한다. 추상 클래스는 추상 메소드 뿐 아니라 생성자, 필드, 일반 메소드도 포함할 수 있다. 하지만 인터페이스는 오로지 추상메소드와 상수만을 포함한다. 접근제어자 interface 인터페이스이름{ public static final 타입 상수이름 = 값 ; ... public abstract 메소드이름(매개변수목록); ... } 2023. 7. 9.
파일선택을 클릭하면 파일창이 2번 실행됐던 이유? / 이벤트 버블링 "파일 선택" 기능을 커스텀된 UI로 사용하고 싶어 아래와 같이 코드를 작성했는데 .... { console.log('파일선택 클릭 '); fileInputRef.current?.click(); }} > 파일 선택 왠걸 "파일선택"을 클릭하면 파일 탐색기(?) 파일 선택하는 창이 처음 실행이 되고 사진을 선택하니 한번 더 파일선택 창이 열리는게 아닌가 진짜 감이 안와서 (순간 리액트 strict모드인가 했는데 그건 아니었음) 원인을 찾아보니 바로바로 이론적으로(?)만 듣고 체감한적은 없던 "이벤트 버블링"에 따라 발생한 현상이었다. 클릭 이벤트가 onClick 핸들러를 통해 실행되는동안 해당 요소의 부모 요소들한테도 전달이 되어갔던 것!!! 따라서 이벤트 버블링을 막기 위해 stopPropagation(.. 2023. 7. 7.