프로젝트 일지 (15) 썸네일형 리스트형 [🐾 일지] SpringBoot 3.x.x + mariadb 연동 환경설정(docker) 항상 MySQL workbench만 사용하다가 한번 워크벤치 설정을 잘못하는 바람에 모든 권한에 막아져버렸다...ㅎ docker에 mariadb를 사용해서 연동하게 된 계기랄까. 결과적으로 이제 MySQL보다 mariadb 가 훨씬 편해졌다 프로젝트 설정 시에 데이터베이스 구축할 때 mariadb 데이터베이스 설정하는 방법에 대한 포스트이다. 팀원한테 정리 잘했다고 칭찬받음 뿌-듯 ✓ [조건] docker는 설치가 되어 있어야 합니다! 1. cmd or terminal에서 최신버전 mariadb 설치 docker pull mariadb:latest 2. 도커 이미지 확인 → 아래 노란색 네모와 같이 나타나면 성공! docker search images 3. 도커 컨테이너 생성 및 실행 우리 팀은 mysq.. [🐾 일지] object references an unsaved transient instance - save the transient instance before flushing Station과 Video는 1:1 연관관계를 가지고 있다. 1. 프론트에서 video file과 station 정보들 입력받기 2. video를 데이터베이스에 저장 3. station의 정보를 저장하면서 video도 함께 저장해줌 이것이었는데 하다보니 오류가 났다. Station은 video_id를 FK로 참조하고 있는데 video를 저장하지 않은 상태에서 참조하려다 보니 발생한 문제였다. 🍎 해결방법 @OneToOne → @OneToOne(cascade = CascadeType.ALL) 위와 같이 바꿔주어 영속성 전이 설정을 해준다. Station이 저장될 때 Video도 함께 저장을 해주는 것이다. StackOverflow에서 찾아보니깐 나중에 삭제할 때 문제가 될 수도 있다고 하는데 @ManyTo.. [🐾일지: JPA ] JPA date 에 default now() 넣기 엔티티 컬럼을 작성하다가 생성일자 같은 컬럼명을 작성할 일이 생겼다. 1. Application 클래스에 @EnableJpaAuditing을 추가한다 → 나는 Application 에 넣었지만 필요하다면 @Configuration 클래스와 함께 사용해도 된다 @EnableJpaAuditing @SpringBootApplication public class StackersApplication { public static void main(String[] args) { SpringApplication.run(StackersApplication.class, args); } } 🍒 EnableJpaAuditing Enable + Jpa + Auditing : Jpa "감시"를 가능하게 함 시간에 대해 자동으로 .. [🐾 일지] 리액트 스크롤 달력 만들기 프로젝트 TODO LIST 기능을 위해 만든 캘린더이다. 기능은 다음과 같다. 1. 오늘이 포함되어 있는 년도(2022)만의 1월부터 12월까지의 달력을 스크롤로 보여줌 2. 맨 위의 오늘 날짜를 클릭할 경우, 해당 월의 달력으로 이동함 3. 맨 처음 보여줄 때에는 오늘 날짜의 달력이 가운데에 보여짐(1월부터 X) 시작! 이전 포스트와 비슷한 부분이 많으니 먼저 보고 오는 것이 좋을 것 같다. 2022.06.01 - [프로젝트 일지] - [🐾 일지] 리액트 달력 만들기 [🐾 일지] 리액트 달력 만들기 프로젝트에서 그림 일기를 달력으로 보여주는 기능이 필요해서 달력을 제작하게 되었다. 라이브러리를 사용해도 되지만 달력의 셀 안에 이미지를 넣어야 하기 때문에 직접 그리기로 했다. 그럼 sennieworld... [🐾 일지]띠용 Textarea와 한 바보의 이야기 줄바꿈이 있는 input이 필요해서 textarea로 작성을 했는데..? 흠..? 👇🏻 내 textArea의 onChange 함수 export const Content = (props: { setContent: Dispatch; }) => { var [sentence, setSentence] = useState(''); const handleWriting = (e: any) => { setSentence((sentence += e.target.value)); props.setContent(sentence); }; return ( ); }; 바보같은 코드를 썼다. 왜 저런 코드를 썼을까? 심히 반성이 필요할 듯. export const Content = (props: { content: string; se.. [🐾 일지] 리액트 달력 만들기 프로젝트에서 그림 일기를 달력으로 보여주는 기능이 필요해서 달력을 제작하게 되었다. 라이브러리를 사용해도 되지만 달력의 셀 안에 이미지를 넣어야 하기 때문에 직접 그리기로 했다. 그럼 시작! ↓ 스크롤 달력은 아래에 2022.06.27 - [프로젝트 일지] - [🐾 일지] 리액트 스크롤 달력 만들기 [🐾 일지] 리액트 스크롤 달력 만들기 하이... 블로그 오랜만... 한 4일 동안 인생 첫 면접(심지어 취업도 아니고 교육 면접...)에 멘탈도 털리고 누가 봐도 불합격을 치르고 와서 정신줄 놓고 지내고 있었다..ㅎ 면까몰이지만...아니 제 sennieworld.tistory.com 0️⃣ 뼈대 만들기 1️⃣ header 만들기 (오늘 날짜, 달력 이동 아이콘) header를 div 안에 직접 작성하지 않고.. [💡 일지] RESTful API Design # 인트로 : 중요한 내용 아님 더보기 나는 변수 네이밍에 꽤 많은 시간과 관심을 들이는 편이다. 1. 협업을 할 때 나를 제외한 다른 사람도 알아챌 수 있어야 하며 2. 서비스 전체 틀 구조에서의 통일성을 가져야 한다는 이유 때문이다. 현재 프로젝트는 프론트엔드를 혼자 해서 별 상관이 없지만, 백엔드에서 주는 api url 과 변수명에 조금의 혼돈이 왔다. 약간 혼자 예민보스인 부분...이걸 말씀드릴까 하다가 나는 백엔드 지식 0이라 무작정 말씀드릴 순 없어서 공부를 하고 제안을 해보기로 했다. 오히려 좋아 내가 어제 밤에 따끈따끈하게 전달받은 url 이다. 한눈에 보기에도 알아차리기 어려우며 프론트에게 혼란을 준다. 변수명은 영어의 뜻과 맞지 않는 변수가 가끔 보인다. 데이터베이스가 완전히 구축되기 .. [💡 일지] 프로젝트 명, 로고, 색상, 이미지 참조에 도움이 되는 것들 나는 눈에 보일 수 있게 형상화하는 것이 이해에 도움이 된다고 생각하는 사람이다. 미술적, 시각적 요소의 디자인을 배운 적은 없지만, ZERO 의 안목을 가지고 있다고 생각하지는 않는다. 지금 하고 있는 토이 프로젝트의 주제는 반려견의 일상을 특별하게 기록하는, 반려견 다이어리 이다. 혼자 하고 있는 것은 아니고 👩🏻💻(나, 프론트엔드)+👩🏻💻(토끼, 백엔드) 이렇게 두명이 캠퍼스픽에서 만나 진행하고 있다. 내가 제시한 주제이기에 내 머리속에는 어떤 서비스를 하고 싶다는 것이 어느 정도 정돈되어 있었다. 문제는 토끼에게 내가 생각하는 컨셉을 정확하게 설명하는 것이었다. 어떤 기능의 서비스를 할 것인지는 그 이후에 논의할 일이었다. 내가 '생각'하는 컨셉을 정확하게 '전달'하기 위해서는 내 자신에게도 .. [🐾일지] Axios get 401 Unauthorized ERROR (Request failed with status code 401) 아주 간단한 오류로 대략 72시간을 날린 사람? 오늘부터 공식 바보로 명명하겠,,, 하루라도 오류가 안나면 가시가 돋는 내 콘솔. 두구두구두구 오늘의 오류는? 로그인 쿠키 관련 get 401번 에러..ㅎ Flow 는 다음과 같다 1️⃣ [로그인 화면] 로그인(POST) -> {success: true, token: '...', email: '...'} 반환 2️⃣ [홈 화면] Auth 가져오기(GET) -> {유저 정보} 반환 -> 유저 정보 이용 3️⃣ [홈 화면] 로그아웃(GET) 맨 처음에는 react-cookie 라이브러리를 이용해서 로그인 시에 반환된 token을 쿠키에 저장한 후 쓰려고 했다. 저번 프로젝트에서는 그렇게 했기 때문이다. 쿠키에 저장한 토큰을 get headers Authoriz.. [🐾일지] Axios Network Error (Failed to load resource: net::ERR_CONNECTION_REFUSED) 프로젝트 서버 연결할 때 무조건 한 번은 눈에 보이는 에러다. 에러 주저리가 너무 길어서 읽을 염두도 안 나는... 그런 에러다. 👇🏻 에러 풀 소개 Access to XMLHttpRequest at 'http://localhost:3000/api/user/login' from origin 'http://localhost:5000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the reque.. [🐾 일지] 리액트 프로젝트 회원가입 서버 연결 (Axios 400번 에러) 원래 fetch()를 썼었으나 axios를 많이 쓴다고 해서 처음으로 사용하게 되었다. axios 공식문서를 보고 처음에 호기롭게 시도했으나 콘솔에 가득한 빨간줄...프로젝트 생명이 위험함 제일 많이 났던 400번 에러에 대해 작성해보려고 한다. 일단, 내가 하는 프로젝트는 회원가입 로직이 조금 복잡하다. 사실 복잡하지 않은데 처음해봐서 복잡하게 느껴졌다. [로직] step 1 회원가입시 보내는 정보 url method data (body) http://localhost:3000/api/user/create post nickName, email, pw, profilePicture, location 회원가입 서버 연결 시 반환된 상태와 메세지에 따른 다음 수행작업 status message next ste.. [🐾 일지:리액트] react-carousel 패키지 없이 애니메이션 구현하기 { # 인트로 } 프로젝트 UI를 피그마로 디자인한 후 대망의 개발을 시작했다. 맨 처음 about 페이지의 컴포넌트들을 아래와 같이 구현하려면 4가지를 생각해야 한다. ⓵ >,, { const pageSlider = [ { id: 1, component: }, { id: 2, component: }, { id: 3, component: }, ]; return ( ); }; export default Main; Aside 안의 페이지 이동 버튼은 Pagination 컴포넌트로 분리하였고 Content에 carousel 될 페이지도 각각.. [🐾 일지] 리액트에서 <img> 경로가 안 불러와질 때... 가끔씩 개발을 하다보면 가장 기본적인 단계에서 태그가 안 보이거나 적용이 안 되거나 하는 경우가 있다. 고구마 이만 이천개정도를 물 없이 먹는 답답함에 비례하는... ⚈ ̫ ⚈ 아니 오늘은 갑자기 태그에 src 경로 설정에 파일이 분명 있는데! 안 불러와지는 것이었다..ㅎ 드디어 세상에서 가장 멍청한 사람이 된 것인가 싶었지만 다양한 방법을 시도해봤다. 1. 태그 src 상대경로, 절대경로 다 해보기 2. image 폴더를 바로 하위로 옮겨보기 3. 로 해서 background-image로 넣기 아니 근데 다 안되네... 싶을 때 뜻하지 않게 되버렸다. import Image from 'layouts/About/logo-design.png'; const logo = ; const Header = () =.. [🐾 일지] create-react-app에서 전체 화면 css 주는 법 이제 개발을 슬슬 시작하려고 해서 css로 영역 확인 좀 하려고 했더니;; 내 프로젝트는 전체 페이지를 써야 되는데... 이게... 안 된다? 인터넷을 급하게 찾아보니 1. width:100vw; height:100vh; 2. width:100%; height:100%; 이거 두 개 중에 하나라 vw, vh를 먼저 사용해봤더니 되긴 하는데 이 놈의 스크롤... 부랴부랴 %로 바꿨는데 안 된다..ʕ•̠͡•ʔ ? create-react-app으로 프로젝트를 하게 되면, 생성이 되어 있던 index.html 의 html, body를 먼저 width, height: 100%로 설정을 해 주고 나서 해당되는 컴포넌트의 css를 100%로 하면 될 줄 알았다. 근데 왠 걸... 내 App.js 파일은 아래와 같았다.. [🐾 일지] react-router-dom v6 내가 작년 12월에 팀플 할 때까지만 해도 이게 잘 먹혔다. 역시나 react-router-dom을 설치한 뒤에 저렇게 쓰니깐.. 안되네..? (◕‿◕) 로 embed를 안 해주어서 그런가 하고 공식 문서를 찾아보니 역시나 프로그래밍 세상은 너무나 빨리 변한다. 조금만 관심갖지 않으면 바로 나가리 ʕ •ᴥ•ʔ react-router-dom@v6 에서는 저 방법이 먹히지 않고 다음과 같이 해 주어야 한다. 내가 깨달은 것들 ✅ 꼭 있어야 함 ✅ component -> element 이거 말고 공식문서를 돌아다녀 보니 눈에 띄게 바뀐 것들만 아래에 정리해보도록 하겠다. 공식문서 증후군 있는 당신들을 대신 내가 후훗 ✓ 태그 안에 태그 사용 X -> 를 를 랜더링해서 사용해야 한다. # v5 # v6 }/> .. 이전 1 다음
