프론트엔드 8

[Portfolio] 커뮤니티 기반 크라우드 펀딩 사이트

🔹프로젝트 기간2024.08.14 - 2024.08.29 (2주) 🔹프로젝트 주제커뮤니티 중심 크라우드 펀딩 사이트 🔹담당 역할문서 총괄(수행 계획서, 요구사항 분석서)노션 회의 기록펀딩 페이지 리뷰 페이지🔹사용 기술 환경react, javascript, java, oracle, tomcat, node.js, spring boot, eclipse, DBeaver 💭프로젝트에서 배운 점개발 시작 후 가장 어렵게 느껴졌던 프론트와 백엔드 그리고 데이터베이스 연결 구조였습니다. 가시적으로 보이는 것이 아니기 때문에 막연하게만 느껴졌었고, 명쾌한 이해가 잘 되지 않았던 상태였습니다. 이 프로젝트를 진행하면서 프론트엔드와 백엔드 그리고 데이터베이스 연결 구조와 각 역할에 대해 배울 수 있었고 그 부분이 ..

Project/javachip 2024.11.25

[2nd Project] 자바스크립트와 JSP로 챗봇 만들기

사람의 욕심은 끝이 없고~ 계속 볼수록 수정사항이 생기는 CSS 네 마이페이지 홈이구여! 네비바 누르면 각 탭으로 이동되게 해놨습니다. 근데 페이지가 너무 정적이라서 촌스러워가지고 이거 어떻게 해야하나 고민하던 중 챗봇을 하면 어떨까 생각했다.  숙슉 말풍선이 나오니까 꽤 동적인 요소이고, 자바스크립트로 충분히 구현이 가능하다니까 3시간 잡고 해봤다. 지선생님과 함께 자바스크립트 공부를 하면서 했기 때문에 더디고 조금 시간이 걸렸다. 아 마이페이지 닉네임이 왜 일론머스크냐고요?일론머스크가 되고 싶어하는 ...염소의 영감을 잔뜩 받았어요(ㅋㅋㅋㅋ)무튼 완성본 먼저    이렇게 해당 카테고리를 누르면하위 컨텐츠가 나오고 해당하는 질문을 클릭해서 답변을 볼 수 있다.    코드 리뷰를 해보겠습니다.  🩰se..

Project/javachip 2024.10.26

[Java]JDBC와 DAO, DTO 코드 흐름 읽어보기

처음 스트링 부트를 사용해서 DB와 연결 작업을 할 때 필요한 파일이 참 많았다.DTO, DAO, Controller, Service, Mapper ... 흐름과 순서를 익혀서 겨우 겨우 작업을 했지만지금도 100% 완벽히 이해했다고 하기엔 부족함이 많다. 이번엔 Servlet과 JSP로 웹 개발을 하기 때문에 DB연결 방식을 정확히 짚고 넘어가고자 복습하는 시간을 가져보려고 한다.나는 전체적인 코드 흐름이 어떻게 흘러가는 지 이해하고 싶어그 부분에 중점을 두었다!!!!!   🧩JDBC 자바에서 데이터 베이스에 접속할 수 있도록 하는 java apiSQL문을 실행할 수 있게 해주는 함수 호출 인터페이스DBMS가 달라지더라도 동일한 API를 사용하게 해주기 때문에 Driver와 URL만 수정하면 됨 (D..

[2nd Project] ¹시작

1차 프로젝트가 끝나고 일주일 2차 프로젝트에 대한 공지가 내려왔다.  (웅성웅성) 조장은 누가할래? 2차 프로젝트 조장은 제가..하겠슴다!(사실 망설여씀다..왜냐면 너무 지쳐있었고요.. 내가 조장을 할 수 있는 역량이 될까..더 열심히 할 자신은 있으나, 더 잘 할 자신은 없었다..) 그러나 이왕 하기로 한 거 진-짜 잘 할거고, 스스로 트리거가 되도록.. 노력하자 마음 먹었다.나? 마음 먹으면 다 한다고 2차 주제는 >  자료조사를 해보니까 공공데이터가 생각보다 재밌는 놈이었다.공공데이터포탈여기서 보면 카테고리 별로 세분화도 잘 되어있고, 진짜 활용만 잘 한다면야 풍부한 자료와 소스로 걸작이 탄생할 것 같았다. '공공데이터'라는 말에 살짝~흠칫 했는데 칸카에루 이라나이준비하면서 꼭 써보고 싶어졌다. ..

Project/javachip 2024.09.18

[react] Props 낱낱이 파헤치기

오늘은 기분이 좋다. 왜냐면 어제 진~ㅉㅏ 많이 먹었는데 먹고 누워서 책 읽고 핸드폰 하다 디비 자니까 행복했다.먹고 싶었던 500kcal가 넘는 아주 맛있는 과자를 혼자 다 먹었다.(마라탕, 밥 두공기, 제육볶음, 강된장, 온갖 쌈, 과자, 아이스크림 ...내 혈당은 누가 막아주지?)그런데 오늘도 많이 먹을거라서 기분이가  좋다.기운이 딸려서 먹고 힘 좀 내야겠어! 무튼 오늘 공부한 props를 정리해보겠다. ('초보자를 위한 리액트200제'를 통해 공부한 내용을 복기하는 시간입니다.모든 내용과 코드는 위 책을 통해서 적었습니다!)   🧚‍♂️Props?props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용한다.특이점은 props를 전달받은 자식 컴포넌트에서는 데이터 수정 X그래서 데이..

[react] Component와 Component의 라이프 사이클(Lifecycle)

리액트를 처음 접했을 때 컴포넌트가 뭐지?라는 생각을 했다. 컴포넌트가 정확히 무엇인지 모른채로 프로젝트를 진행했고, 컴포넌트를 어깨 너머로 감만 잡고 넘어갔던 것 같다.리액트를 너무 잘하고 싶어서, 기반을 단단하게 다지려고 처음부터 하려고 한다. 리액트! 기다려 너. 내가 잡아 버린다!어렵지만 재밌어 리액트 혼내줄거야!    Component리액트는 화면에서 Ul 요소를 구분할 때 '컴포넌트'라는 단위를 사용한다.리액트에서 앱을 이루는 작은 조각이라고 볼 수 있다!   Component의 구성요소1. Property(props)부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터.property값은 자식 컴포넌트에서 수정 불가 2.state컴포넌트의 상태를 저장하고 수정 가능한 데이터 3. context부..

[맛집 지도앱] 오류와의 싸움1<Error: EMFILE: too many open files, watch>

"풍부한 포트폴리오를 위해서 2차 프로젝트 전까지 사이드 프로젝트를 해야겠다. "라고 다짐했다.다소 실행력이 있는 편으로 척척 진행되었다. with 영순언니 일요일 11시 강의를 처음 들었다. 개발환경 셋팅은 강의가 10분 정도 되길래 가볍게 시작했지만, 현재 오후 6시...이제 막 개발 환경 셋팅을 마쳤다.나는 무엇을 간과했는가?!!!! 너무 배고프고 눈이 흐리멍텅 해졌다. 아무튼 오류 해결했다.이걸 한 번 기록을 해보고자 허기진 배를 웅크리며.. 글을 적는닷. 간단하게 소개를 하자면 react-native를 활용하여 맛집 지도앱을 만든다. 학원에는 윈도우로 개발을 하다보니 맥 환경에는 낯설기도 하다.   아무튼! 내가 마주한 오류.Error: EMFILE: too many open files, wat..

Project/SideProject 2024.09.08

[react]Map()함수

리액트 까막눈인 나도 보이는 map()함수의 중요성...아주 많이 사용되는 것 같다.나에겐 너무도 어려운 Map()..함수! 오늘로 너 정복한다.  >  ( •_•)>⌐■-■  🪐 Map() 함수의 정의 map() JavaScript의 배열 메서드 중 하나로, 반복되는 컴포넌트를 렌더링하기 위해 사용된다.배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열 혹은 리스트를 생성한다.   react의 jsx에서는 if문과 같이 for문을 사용할 수 없어서, 반복문을 사용하려면  map함수를 써야한다!    🌌Map()함수 기본 구조const newArray = array.map((currentValue, index, array) => {                    return newVal..