본문 바로가기

Project Memoir/Hanium (2021)

(3)
2차 심사 결과,, 2차 심사결과, 아쉽게도 입선까지밖에 다다르지 못하였다..! 🥺 하지만, 초반에는 별로 친하지 않았던 팀원과 백앤드와 프론트앤드를 넘나들며 적으면 한달에 한두번, 많으면 10번 이상 만나가며 끝없는 회의와 코딩을 했던 경험은 너무 좋았던 것 같다. 그닥 실력이 출중하지 않은 내가 처음으로 전공관련 프로젝트에서 팀장이 되었는데, 이런 나와 함께 해주고 같이 맞춰온 팀원이 너무너무 고맙기만하다 ㅠ (입선으로 끝난게 괜히 미안한 마음이 들기도,,) 사실 12월까지 한이음 프로젝트는 계속 진행될 것이다. 아직 과제 결과물에 대한 유사도 분석 및 자동 채점 리포트 생성 부분을 다 하지 못했기 때문에..! 멘토님도 너무너무 좋으시고 우리의 실력과 열정이 사그러들지 않도록 이끌어주신 분이셔서 프로젝트가 이번달 말에서..
[Project] React | 재사용을 위한 폴더 정리 사실 이번 한이음 프로젝트에서는 프론트와 백을 동시에 4명이서 배워보자는 취지였기에, 폴더 구성 및 컴포넌트 설계 방식을 정하고 개발을 시작하기 보다는 그냥 구현할 곳을 분배하고 구현하기에 바빴던 것 같다. 어느정도 웹사이트 구현을 마치고, 오늘(2021/09/25) 멘토님과의 미팅에서 이제껏 작성한 코드와 폴더를 살펴보다가 멘토님이 이부분에 대해 이야기를 시작하셨다. 1️⃣ 폴더 구조 실제 현업에서의 리액트 폴더 구조는 다음과 같이 구성한다고 한다. 📁components : 컴포넌트 파일들이 위치하는 폴더 📁adapter : xhr(axios) + socket + websocket 등 📁store : redux 작업을 위한 폴더, 내부에 actions, reducers 폴더 존재 📁hooks : "us..
[PROJECT] React | Select Box의 Option 값 전달하기 일단 구현해야하는 화면부터 봐보자! 사진에서 보다시피, drop down 버튼을 누르면 TEAM1의 학생들, TEAM2의 학생들이 팀목록 안에 들어와야 한다! 그리고 이 데이터들은, 이런 형태! 일단 컴포넌트는 두개로 구성되어있다. P07_05.js : Select-Box의 값을 이벤트 객체로 받기 -> TeamList에 team 배열 전달하기 P07_TeamList.js : P07_05.js 로부터 props로 해당 team 배열 받아오고 그 안에 학생들 map으로 돌려서 보여주기 어떻게 구현했는지는 코드로 설명 P07_05.js 코드는 다음과 같다. import React, { useState } from "react"; import { useTeams } from "../../../component..