본문 바로가기

분류 전체보기228

축구팀 관리 프로젝트 23일차 - 리엑트 반응형으로 화면 비율 고정 축구팀 관리 프로젝트 23일차 - 리엑트 반응형으로 화면 비율 고정 리엑트로 웹프로젝트 개발하면서 화면의 페이지 비율 변경시 만들어놓은 몇몇 컴포넌트들이 깨지는 현상을 발견하게 되었습니다. 이를 해결하기 위해 다양한 방법을 찾아보았습니다. 리엑트 반응형으로 화면 비율 고정하는법 [React] 반응형으로 화면 비율 고정하기: 화면 크기가 변해도 해상도 유지하기 React로 게임 형식의 웹 프로젝트를 개발하면서 웹 페이지 반응형으로 고정 비율로만 화면이 보이게 하는 기능을 개발했다.이 기능을 개발하게 된 이유는 사실 작년에 비슷한 게임 형식의 웹 페 velog.io 위 페이지에서 많은 인사이트를 만날 수 있었습니다. 페이지에선 아래처럼 화면을 일정 비율로 조정하는 모듈을 만들어 사용하도록 하였습니다. imp.. 2024. 2. 4.
축구팀 관리 프로젝트 22일차 - 중간발표 끝, SQL 인젝션 해결방안 축구팀 관리 프로젝트 22일차 - 중간발표 끝, SQL 인젝션 해결방안 프로젝트 중간발표를 마쳤습니다. 발표전 리허설과 함께 발표자 외에도 각자 구현한 기능에 대한 질문을 대응하기 위한 준비를 철저히 한 덕분에 발표 후 여러 질문에도 적절히 대답할 수 있었습니다. 간략한 발표 소개와 함께 필자가 작성한 부분의 지적사항 및 개선방안에 대해 작성해보겠습니다. 중간발표를 마치고 3주간 작업한 내용에 대해 발표를 마쳤습니다. 발표자는 팀원이 하였으나 질문시 본인이 맡은 파트의 질문이 오면 그에 대해 답을 하기로 했습니다. 신기하게도 팀원 전부 한가지씩 질문을 받게 되었고, 그에 대한 답안도 적절히 대응할 수 있었습니다. SQL 인젝션 이슈 발생 필자는 typeORM에서 Raw Query 작성시 SQL 인젝션 이.. 2024. 2. 3.
축구팀 관리 프로젝트 21일차 - 추천 알고리즘? 백엔드로 가기 위해선 축구팀 관리 프로젝트 21일차 - 추천 알고리즘? 백엔드로 가기 위해선 중간발표 하루 앞둔 날, 튜터님과의 면담을 가졌습니다. 이번 면담 전에는 각자 기본 기능 외에 더욱 심화적인 기술을 구상해오라는 숙제가 있었습니다. 필자가 가지고간 기술 소개와 그에 따른 사전조사 및 고민에 대해 아래 기록해두려 합니다. 축구 포메이션 화면을 보다가 며칠 전부터 심화적인 기술에 대해 고민을 했었습니다. 주제가 축구팀 관리이다 보니 대용량 데이터 처리는 프로젝트 흐름상 어려웠습니다. 게다가 필자가 맡은 부분은 경기 예약, 경기 일정, 경기 포메이션 설정 이었습니다. 이에 관하여 심화적인 기술을 고민해보았습니다. 축구에 관한 대용량 데이터를 만들기 위해 해외 api를 가져와서 데이터 처리를 해볼까. 해외 축구 정보 API.. 2024. 2. 2.
축구팀 관리 프로젝트 20일차 - dataSource.query 사용, 부하테스트 축구팀 관리 프로젝트 20일차 - dataSource.query 사용, 부하테스트 벌써 프로젝트 진행한지 3주나 지났습니다. 시간이 어떻게 지나갔는지도 모를만큼 순식간에 3주를 바라보게 되었습니다. 며칠 뒤면 중간발표 기간이라 그 때까지의 기능 구현을 위해 개발에 몰두 중입니다. 그 와중에 테스트할 건 많아서 오늘 작업한 것과 부하테스트를 위한 사전조사를 했습니다. 전술 화면 계속 작업 중 축구팀 관리 프로젝트 19일차 - jest로 dummy data 생성 중, 사용법 축구팀 관리 프로젝트 19일차 - jest로 dummy data 생성 중, 사용법 jest로 코드 테스트 및 더미 데이터를 만드는 로직을 작성 중입니다. 제목이 만드는 중이라는 건 아직 다 못 만들었다는 뜻입니다. lemonlog.tis.. 2024. 2. 1.
축구팀 관리 프로젝트 19일차 - jest로 dummy data 생성 중, 사용법 축구팀 관리 프로젝트 19일차 - jest로 dummy data 생성 중, 사용법 jest로 코드 테스트 및 더미 데이터를 만드는 로직을 작성 중입니다. 제목이 만드는 중이라는 건 아직 다 못 만들었다는 뜻입니다. 기록을 빠르게 마무리하고 다시 못다한 로직은 마무리할 계획입니다. jest의 기본개념과 간단하게 dummy data 만드는 법에 대해 소개하겠습니다. jest란 Jest By ensuring your tests have unique global state, Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on .. 2024. 1. 31.
축구팀 관리 프로젝트 18일차 - RDS 다시 공부, Storage Auto Scaling 축구팀 관리 프로젝트 18일차 - RDS 다시 공부, Storage Auto Scaling 면접 준비에 프로젝트 개발에 바쁜 시간이지만 하면 할수록 모르는 것이 많다는걸 느끼기에 그 속에서 강의도 듣기 시작했습니다. 오늘은 RDS에 대해 공부한 기록과 오늘 작업한 내용들에 대해 작성하려 합니다. 전술화면 수정 및 삭제 백엔드까지 구현 축구팀 관리프로젝트 17일차 - 전술 화면 조회 및 저장 개발 중 축구팀 관리 프로젝트 17일차 - 전술 화면 조회 및 저장 개발 중 조회와 저장만 잘 구현하면 되겠지 싶은 전술 페이지였는데 코드 작성하고 보니 생각보가 고려해야 할 점이 많았습니다. 어찌저 lemonlog.tistory.com 전날 작업한 기록입니다 전날 화면 구현은 어느정도 되었으나 저장시 오류난 점과 포.. 2024. 1. 30.
축구팀 관리프로젝트 17일차 - 전술 화면 조회 및 저장 개발 중 축구팀 관리 프로젝트 17일차 - 전술 화면 조회 및 저장 개발 중 조회와 저장만 잘 구현하면 되겠지 싶은 전술 페이지였는데 코드 작성하고 보니 생각보가 고려해야 할 점이 많았습니다. 어찌저찌 API 개발과 리엑트와의 연동은 되었지만 아직도 수정해야할 곳이 많이 보입니다. 축구팀 관리 프로젝트 16일차 - 대용량 트래픽을 처리하는 두가지 방법 축구팀 관리 프로젝트 16일차 - 대용량 트래픽을 처리하는 두가지 방법 축구팀 관리 프로젝트를 진행한지도 2주가 지나고 있습니다. 이동안 대략적인 API 설계와 화면이 나타나고 있습니다. 다음 lemonlog.tistory.com 전날 작업한 기록입니다 포메이션 및 포지션 저장 날 조금 풀린 일요일 오후부터 작업을 시작했습니다. 오늘의 목표는 '전술 화면 백엔드 작.. 2024. 1. 29.
축구팀 관리 프로젝트 16일차 - 대용량 트래픽을 처리하는 두가지 방법 축구팀 관리 프로젝트 16일차 - 대용량 트래픽을 처리하는 두가지 방법 축구팀 관리 프로젝트를 진행한지도 2주가 지나고 있습니다. 이동안 대략적인 API 설계와 화면이 나타나고 있습니다. 다음주 중에는 최대한 만들어진 화면을 연결하고 서비스가 정상동작하는지 테스트하는데 많은 시간을 쓸 것 같습니다. 프로젝트의 서비스 기능은 어느정도 윤곽을 잡고 있지만 한가지 중요한 점을 놓치고 있었습니다. 바로 프로젝트의 '챌린지'적인 요소가 빠졌다는 점입니다. 개인별 기록이 저장 안된 이유 축구팀 관리 프로젝트 15일차 - 경기 후 기록 등록하는 로직 수정 축구팀 관리 프로젝트 15일차 - 경기 후 기록 등록하는 로직 오늘 한 일은 경기 후 기록 등록하는 저장 로직을 수정했습니다. 기존 저장 방식을 다시 확인해보니 중.. 2024. 1. 28.
축구팀 관리 프로젝트 15일차 - 경기 후 기록 등록하는 로직 수정 축구팀 관리 프로젝트 15일차 - 경기 후 기록 등록하는 로직 오늘 한 일은 경기 후 기록 등록하는 저장 로직을 수정했습니다. 기존 저장 방식을 다시 확인해보니 중복되는 부분이 있었습니다. 그래서 수정하는 작업을 하였고, 원래는 이 작업 끝나고 못다한 프론트 작업을 하려했으나 생각보다 이 수정하는 부분에 시간을 쓰게 되었습니다. 경기 후 기록 등록 수정 두 팀의 축구 경기가 끝나면 기록을 등록할 수 있습니다. 기록에는 팀별 기록, 선수별 기록 두가지가 있습니다. 순서는 그림처럼 팀 결과를 등록하고, 그 후 선수별 결과 기록을 할 수 있도록 기획하였습니다. 기존 팀 결과 기록시 API 요청을 위해 받는 body 값 중에서 득점, 어시스트 같은 값들을 다음과 같이 받고 있었습니다. "goals": "[{'p.. 2024. 1. 27.

티스토리툴바