-
*웹사이트 만들기 & 토이 프로젝트
[Spring Data JPA & React.js] 프로젝트 하기
국비기간에 만든 사이드 프로젝트를 회상하며 작성해보는 게시물 입니다. React.js + Spring Data JPA를 연동한 게시판 프로젝트 개발환경 : OS : window10 IDE : VSCode, IntelliJ Language : Java, Javascript FrintEnd : HTML / CSS, React.js BackEnd : Spring Boot(Gradle), Spring Data JPA DB : MySQL 도메인 먼저 생성하고, html, css, js Controller + Service + Respotoriy로 각 js(페이지) 접속 가능한지 확인 로그인 절차 진행 (OAuth 제외 일반 회원 부터 체크 -> 보안 적용 후 OAuth 적용 시키기) 로그인 시 사용자의 비밀번호를..
-
*웹사이트 만들기 & 토이 프로젝트
[React, node.js] 2차 프로젝트 Trello만들기
1차 프로젝트가 끝나고 만들고 싶은 프로젝트가 있어서 개인프로젝트로 준비. 어떠한 불편사항이 있어서 만드는가? 디자인을 전공 했을 때 여러 자료를 따로 가지고와서 정리하는게 힘들었는데 한 공간에서 뭔하는 자료 검색과 영상을 가져와서 메모를 하면 효율적으로 관리를 할 수 있겠다 싶어 만들어 보았습니다. 이미지 검색과, 유튜브 검색이 있는 칸반보드. # communication Figma, Git # Fron-EndReact # Back-endNode.js
-
공부 기록
[react] todolist 만들기 컴포넌트 나누고, 이벤트 핸들러 주기
큰 컴포넌트와 작은 컴포넌트로 나누기 큰 컴포넌트는 TodoList테두리 부분 - 빨간색 선 작은 컴포넌트는 추가되는 아이템 부분 - 검은색 선 어떤 기능이 있나? 1. input창이 있고, 버튼이 있다. 2. 인풋창에 값을 입력하고 버튼을 클릭하면 아이템이 추가가된다. 3. 아이템 삭제버튼을 누르면 삭제가 가능하다. function App() { const [inputValue,setInputValue] = useState(''); const [todoList,setTodoList] = useState([]); const addItem = () => { console.log("요기", inputValue) // 새로운 인풋벨루 setTodoList([...todoList, inputValue]) // ..
-
React 스터디
[React] 스터디 1회차 현직 개발자와 함께 공부
프론트앤드를 하고 싶었는데 국비 수업을 들어와서 길을 많이 잃은거 같다. 다시 멘탈을 잡을라고 스터디도 하고 여기저기 뛰어 다니면서 현직개발자 중에 중심을 잡을 수 있는 분을 만났다 ㅠㅠ (갈피를 잃었는데 지쳐있던터라.....그래도 집중하려고 노력했다) 같이 스터디 하면서 궁금한 점이나 타입스크립트 next.js 등등 왜 쓰는지 칠판에 정리해 주면서 설명해줬다. 1. next.js를 왜 쓰는가? - 고객 유입을 위한 SEO 최적의 리액트 프레임워크이기 때문에 고객의 유입이 많아져야 하는 스타트업의 회사가 이 프래임 워크를 많이 사용한다고 한다. 리액트로도 안되는건 아니다 그래서 섞어서 쓰는것. 스타트업일 아닐경우에는 고객을 상대하는게 아니기 떄문이기도하고 기존의 레거시도 유지보수 해야하기 때문에 next..
-
*JAVASCRIPT
[JS] Intersection Observer API의 사용법과 활용방법(코드 있음)
바닐라 자바스크립트로 좌표값을 찍어서 효과를 주려고 할 때마다 효과를 주려는 높이를 콘솔로 찍어서 높이를 재는게 너무 불편해서 Intersection Observer API를 활용하여 편하게 구현하였다. 아래 코드를 보면 효과를 주고싶은 높이와 윈도우의 자표를 찍어 번거롭게 구현을 하였는데 Intersection Observer API를 쓰면 더 쉽게 효과를 줄 수 있다. const header = document.querySelector('.header'); const headerHeight = header.getBoundingClientRect().height;// getBoundingClientRect 높이를 반환해주는 함수임 document.addEventListener('scroll', () =..
-
*웹사이트 만들기 & 토이 프로젝트
unsplash API를 활용해서 이미지 검색 어플리케이션 만들기
국비 프론트 수업 중 API를 불러와서 웹사이트를 만드는 과제를 주셨는데 한번도 해본 적이 없어서 많이 어려웠다. 이 이미지 API의 장점은 url을 불러오지 않아도 검색만으로 불러올 수 있고 용량을 확 줄일 수 있다는 장점이다. $(document).ready(() => { $("#search-form").submit((e) => { const perPage =20; // 예: 20개의 항목을 가져옴 let searchText = $("#photo").val(); let responseContainer = $("#img-thumbnail");// 결과창을 저장하기 위한 컨테이너 let userApi = `Ypo4TFbTd4iHDksg9sNx7CyyPNF7f4fly2xQ_orZb7o` let url = ..