프로젝트8 [기획 프로젝트] Hire Higher - 외국인 노동자를 위한 구인구직 서비스 보호되어 있는 글 입니다. 2024. 8. 31. [백엔드 프로젝트] F!LB - AI가 알려주는 객관적인 감정인식 프로젝트 소개우리는 사용자의 일기를 ai가 분석해서 감정을 객관적으로 알려주는 서비스를 제작하였다.이 프로젝트로 해커톤에서 세종 테크노파크원장상을 수상하였다.위와 같이 회원가입을 하고 로그인을 하면사용자 별 달력이 뜬다. 달력의 색깔은 해당 날짜에 사용자가 작성한 일기의 감정을 나타낸다. 사용자가 일기를 쓰고 저장하면 위와 같이 일기의 전반적인 감정상태와 해당 일기에 대한 조언 그리고 통계자료가 나온다. 우리 서비스의 디자인은 정말 최고였다. 진짜 언제 봐도 너무 잘했다. 그리고 이걸 그대로 구현한 프론트도 너무너무 대단하다. 아이디어 도출우리의 주제는 현대인의 건강을 위한 서비스였다. 현대인의 건강을 위한 어플이면서, 사업성도 가진 서비스를 생각해내기가 조금 어려웠다. 수많은 회의 끝에 현대인이 자신.. 2024. 8. 30. 2024 동계 모각코 5회차 활동정리 함수 이름 바꾸기 데이터 수정하기 코드보기 함수 이름 바꾸기위와 같이 삭제를 의미하는 onDelete함수의 이름을 onRemove로 바꾸려고 한다. 이 때 함수 이름만 바꾸고, 전달하려는 prop이름은 그대로 두면 에러가 발생한다. diaryList에 전달할 prop인 onDelete가 없어졌기 때문이다. 따라서 밑에 prop부분도 바꾸어야 한다. 이에 따라 onDelete를 prop로 받는 컴포넌트들의 코드들도 바꿔주어야한다. 데이터 수정하기DiaryItem컴포넌트에서 위와 같이 수정하기 버튼을 만든다. 위와 같이 삭제하기 버튼을 누르면 onclick내의 함수가 수행되는데 이를 가독성이 좋게 하기 위해서 함수를 위에 따로 만들고자 한다. 그래서 위와 같이 handleRemove를 만들고 onClick에.. 2024. 1. 28. [React 기본 일기장 만들기] 데이터 삭제하기 코드보기 앞서 만든 state 배열에서 데이터를 삭제하는 기능을 구현할 것이다. 우선 삭제하기 버튼을 리스트 컴포넌트인 Diary.item에 만든다. 그 다음 App.js에 Delete함수를 추가한다. DiaryList도 위와 같이 수정한다. DiaryItem 컴포넌트를 호출 할 때 받은 onDelete를 추가한다. 이제 DiaryItem에서 삭제 버튼을 누르면 받은 함수가 호출되도록 한다. onDelete props를 받고, 삭제 버튼에 onClick 함수를 만든다. 만약 삭제버튼이 눌리면 정말 삭제하시겠습니까 문구가 뜨는데 이때 window.confirm을 사용하면 화면 상단에 확인 취소 버튼이 뜬다. 이때 삭제를 누르면 onDelete함수가 실해된다. 이제 App.js에서 리스트에서 받은 id의 데.. 2023. 8. 22. [React 기본 일기장 만들기] React에서 배열 사용하기2- 데이터 추가하기 코드 보기 리액트로 프로젝트를 할 때에는 항상 부모 자식간의 관계를 그림으로 표현해보아야 한다. 현재는 이러한 상태이다. 우리는 DiaryEditer에서 쓴 내용을 DiaryList에 추가를 해야 한다. 리액트에서는 같은 레벨에서 데이터를 주고 받을 수 없다. 그래서 위와 같이 상위에 state를 만들고, 이를 DiaryEditer에서 수정하고 DiaryList가 가져오는 방식을 사용할 것이다. editer 내용 저장하기 App.js에 들어가서 기존데이터를 주석처리한 후 data state를 만든다. 초기값은 빈 배열이다. 그 다음 onCreate함수를 만든다. 이 함수는 author, content, emotion을 매개변수로 받고 이를 data 배열에 추가한다. id는 쓸 때마다 하나씩 증가해야하므로.. 2023. 8. 19. [React 기본 일기장만들기] React에서 배열 사용하기 1- 리스트렌더링(조회) 코드 바로가기 이렇게 데이터들을 리스트로 화면에 보여주는 기능을 만들 것이다. 1. 새 파일 만들기 이렇게 새 파일을 만들고, return 값을 만든 후 이를 내보내는 코드를 작성한다. 화면에 보이게 하기 위해서 이렇게 App.js파일을 수정한다. 2.데이터 만들기 App.js에 리스트에 보여줄 데이터를 위와 같이 만든다. id는 데이터들의 고유 번호이고, 나머지는 배열 내의 요소들을 나타낸다. created_date에서 new Date().getTime()을 하면 현재 시간을 숫자형태로 리턴한다. 그 다음 prop로 위 값을 DiaryList에 전달한다. DiaryList에서 이렇게 props값을 전달받고, 전달받은 배열을 리스트형태로 출력한다. diaryList는 배열이니까 map함수를 사용하여 하나.. 2023. 8. 16. 이전 1 2 다음
