TIL
# 211223 TIL ([React, tsx] useRef로 input에 focus하기)
장기현장실습 SNU 성문분석 이슈 원격 서버에 접속하기 클릭 시 input에 바로 focus 되도록, 접속 버튼을 클릭 했을 때도 input으로 focus되게 수정 input이 기본 html 태그가 아니라 부트스트랩 Form.Control 태그를 사용하고 있어서 focus() 함수를 바로 사용하진 못함 UseRef()를 사용해서 해당 DOM에 접근함 일반 HTML 요소와 같은 타입으로 만들어주기 위해 타입도 함께 선언함 const nameInput = useRef(null); setUrlInput(e.target.value)} onKeyPress={submitUrl} ref={nameInput} /> 모달이 열렸고(visible = true) focus할 input이 있을 때 focus 하도록 코드 추가..
# 211221 TIL ([React, tsx] 부트스트랩 UI 수정)
장기현장실습 SNU 성문분석 이슈 #50 N:N 분석(시각화) 기능 추가 이슈 진행중 card header의 버튼 크기 때문에 컴포넌트마다 header height가 맞지 않는 문제가 있었다. 부트스트랩을 사용하고 있기 때문에 상세 조절을 할 수 없었기 때문이다. 그래서 결국 card header의 높이를 모두 넓혀 맞추기로 했다. padding x값을 3에서 4로 바꿔주었다. 분석 결과 음성 등록 페이지의 전반적인 UI를 수정했다. 삭제 수정 버튼의 text를 제거하고 outline design으로 바꿨다. 그리고 음성 재생 버튼도 outline으로 통일감을 주었다. 모든 페이지의 버튼 컬러를 일치시켰다. 기본 값인 primary로 모두 바꾸고 분석하기만 info 값을 주어 다른 색으로 변경했다.
# 211220 TIL ([React, tsx] 체크박스 클릭 시 함수 실행)
장기현장실습 SNU 성문분석 이슈 #50 N:N 분석(시각화) 기능 추가 이슈 진행중 (x,y) 그래프 그릴 때 참고 데이터 같이보기 옵션 추가 아무 분석도 하지 않았을 경우에는 checkbox 보이지 않도록 구현 { analyzingResult ? ( ) : ( 분석 결과가 없습니다. ) } 처음 분석하기를 누르고 나온 그래프에는 참고 데이터 없는 그래프가 나오도록 isRef값을 false로 고정 dispatch(showScatterGraph(selectedVoices1.map(v => v.id), selectedVoices2.map(v => v.id), false)); checkbox를 클릭했을 때 e.target.checked 값을 받아와서 그래프 그리는 함수 매개변수(isRef)에 넣어줌 cons..
# 211210 TIL ([React, tsx] useMemo 사용해서 result 화면에 나타내기)
장기현장실습 SNU 성문분석 이슈 #50 N:N 분석(시각화) 기능 추가 이슈 진행중 N:N 분석의 유사도 결과 테이블 생성중 사용자가 선택한 음성 파일 명을 나타내고, 유사도를 보여주는 코드를 작성하고 있는 중이다. 첫번째로 선택한 음성파일들과 두번째로 선택한 음성파일들의 곱 만큼 결과가 생성되기 때문에 중복을 없애고 파일명을 나타내도록 했다. // SimilarManyVoicesTable.tsx export default function SimilarManyVoicesTable({ className, manyToManyResult } : Props): JSX.Element { const tableHead = useMemo(() => { let voice = [...manyToManyResult]; c..
# 211209 TIL ([Ruby, slim] 함수 매개변수 사용하여 쿼리하기)
장기현장실습 PLSnote 이슈 #2678 노트작성 버튼이 나타나는 곳을 더 확대하고자 합니다 이슈 진행중 맵/전략/세부전략 에서 새 노트 작성시 나올 프로젝트 리스트 코드 리팩토링 원래 이슈맵일때와 아닐 때의 함수를 따로 정의했었는데 이걸 하나로 합쳤다. # project.rb def self.has_project_of_detailed_strategy(detailed_strategy) if detailed_strategy.map.issue_map? where(id: detailed_strategy.issues.where(status: :open_issue).pluck(:project_id)) else where(id: detailed_strategy.plans.where(status: :open_pla..
# 211208 TIL ([React, tsx] type 마다 컴포넌트 내용 변경하기)
장기현장실습 PLSnote 이슈 #2678 노트작성 버튼이 나타나는 곳을 더 확대하고자 합니다 이슈 진행중 맵/전략/세부전략에서 새 노트 작성시 나올 프로젝트 리스트 중 하나의 오류가 있었다. Detailed_strategy_id=300 일 때 프로젝트 리스트가 5개가 나오는데 plan에서 간단히 보기로 확인해보면 7가지가 나오는 것이었다. 수정님께 여쭤보니까 페이지네이션할 때의 쿼리가 문제가 되어 잘못 나오는 거라고 하셔서 현재 코드의 문제는 없었다. SNU 성문분석 이슈 #50 N:N 분석(시각화) 기능 추가 이슈 진행중 N:N 분석 컴포넌트 type 수정 relations: string 이라는 타입을 주어 타입에 따라 컴포넌트가 다르게 나오도록 코드를 작성했었다. 그런데 기존에 analysisTyp..
# 211207 TIL ([Ruby, slim] link_to URL 연결하기, DB 데이터 쿼리 / [React, tsx] useState로 값 설정하기, type 마다 다른 UI 나오도록 수정)
장기현장실습 PLSnote 이슈 #2678 노트작성 버튼이 나타나는 곳을 더 확대하고자 합니다 이슈 진행중 맵/전략/세부전략 에서 새 노트 작성 버튼 클릭 시 link_to 수정 // activities/index.html - elsif @detailed_strategy.present? = link_to_if_with_disabled_tooltip @detailed_strategy.allow_new_note_to?(current_user), new_map_activity_path(@map, (@planable.present? ? {detailed_strategy_id: @detailed_strategy, "#{@planable.class.name.underscore}_id": @planable} : {d..
# 211206 TIL ([Ruby, slim] DB 데이터 쿼리, [React] route 연결, Link 사용하기)
장기현장실습 PLSnote 이슈 #2678 노트작성 버튼이 나타나는 곳을 더 확대하고자 합니다 이슈 진행중 맵/본부/팀 에서 새 노트작성시 나타날 프로젝트 리스트 쿼리오 (이슈맵 기준) 저번에 작성한 코드에서 오류가 있어서 한 줄 한 줄 콘솔에 입력해보며 코드를 수정했다. #- 팀의 프로젝트 리스트 중 새로운 이슈 생성 가능한 프로젝트 목록 def self.has_issue_project_of_team(team) # issue_data = []: 현재 선택된 팀의 이슈 리스트 (이슈 아이디) issue_data=[] # project_data = []: 선택된 팀의 이슈 리스트 중에 확인전 이슈의 프로젝트 아이디 project_data=[] team.issues.pluck(:id).uniq.each do..