토시오 code 토시오 code

메인 프로젝트 8, 9일 차는 상세페이지를 작업했다.여기는 내가 디자인 했기때문에 어떤 구조로 작성할지 쉽게 생각할 수 있었다. 배경이 일단 어둡고 최상단에 백드롭 이미지가 어둡기때문에 이상해 보이지 않는데 이게 과연 라이트모드에서는 어떨지 잘 모르겠다.또 백드롭 이미지의 사이즈가 1280인데 화면이 더 넓었을때 어떻게 처리해야 할지 고민이 됐다. 100%로 늘리면 이미지가 너무 깨질 듯하고 피그마에서 4배로 뽑아와서 사용하기에는 높이가 너비의 비율에 맞춰 너무 높아져버리기 때문에 최상의 컨디션을 유지하는 방식이 어떤 건지 잘 모르겠다. 그리고 처음에는 그냥 퍼블리싱을 하는 방식으로 했었는데 백엔드분들과 소통을 할 때 어떤 데이터를 받아야 할 지 미리 알아두면 좋을 것 같아서 더미데이터를 직접 작성해서 ..

오늘은 마이페이지에 대한 화면을 구현했다. 개인정보수정마이메뉴에 대한 부분은 react의 useSearchParams // 개인정보수정를 사용했다.이유는 사용자가  찜 목록 메뉴를 선택했을때 새로고침시 찜 목록 페이지에 머물러 있을 수 있도록 하기 위함이다. 하단의 파일변경에 대한 부분은 input file을 사용했고 사용자가 설정을 변경할 수 있는 걸 알려주기 위해 기어 아이콘을 넣어 커스텀을 진행했다. 사용자가 프로필 사진을 클릭하면 이미지 업로드 창이 실행되고 이미지 선택 시 프로필 사진이 바뀐다. 예매/취소 내역여러곳에서 쓰이는 영화 정보에 대한 카드 UI는 컴포넌트로 만들었다. 마이페이지에만 세 곳에 들어가는데 이게 styled-components와 같이 쓰다 보니 처음에 어떻게 해야 할지 막막..

2024.10.10일 메인프로젝트가 시작됐다.백엔드는 5명 프론트는 3명 팀이 결정됐고 프로젝트 주제로는 영화 간편 예매 사이트를 만들기로 했다. 요구사항 정의서백엔드분들이랑 미팅을 하면서 같이 작성했는데 솔직히 어떤 기능을 만들지이 기능은 협업하에 가능한 건지 가능하다면 내가 구현을 할 수 있는지 아무 말 없이 멍하니 지켜본 시간이 많았던 거 같다. 디자인피그마 강의를  실시간으로 속성만 2시간만 진행했었는데 짧은 시간 동안 배우다 보니 진도는 너무 빨랐고 강사님 말도 너무 빨라서 따라갈 수 없었다.frame과 group을 어떤 때에 설정해야 하는지 의문이었고 여백을 주는 방법이며 각각의 레이어들과의 연관성 때문에 이리 틀어지고 저리 틀어지는 상황이라 정말 주먹구구식 디자인을 했던 거 같다. 플로우차트..

오늘은 리액트로 투두리스트를 만들어 보려고 한다. 1. HTML 작성HTML을 작성해서 전체적인 구조 잡기기능을 넣기 위해 HTML코드에 추가/삭제/수정 버튼을 넣었고 완료 기능을 구현하기 위해 타이틀 앞에 체크박스를 넣었다. To-Do-List 🍖 {/* form 영역 */} 추가 {/* To-Do-List 영역 */} 타이틀1 수정 삭제 ..

1. Interface타입스크립트의 interface는 객체의 구조를 정의하는 데 사용한다.1-1. 기본적인 인터페이스interface User { name: string; age: number;}const user: User = { name: "Alice", age: 30,}; 1-2. 선택적 속성interface Product { id: number; name: string; price?: number; // 선택적 속성}const product: Product = { id: 1, name: "Laptop", // price는 선택적이므로 생략 가능}; 1-3. 읽기 전용 속성interface Book { readonly title: string; author: string;}c..

타입스크립트는 여러 가지 개념과 구조를 지원하며, 이를 통해 다양한 방식으로 코드를 작성할 수 있다. 1. 기본타입1-1. number : 숫자 값을 표현let age: number = 30; 1-2. string : 문자열 값을 표현let name: string = "Alice"; 1-3. boolean : true 또는 false 값을 표현let isActive: boolean = true; 1-4. null : null 값을 나타낸다.let n: null = null; 1-5. undefined : 값이 정의되지 않은 상태를 나타낸다.let u: undefined = undefined; 1-6. void : 함수의 반환값이 없음을 나타낸다.function logMessage(message: stri..

Git은 소스 코드를 버전 관리하기 위한 강력한 도구이다. 그중에서도 효과적인 브랜치 전략은 팀의 협업과 코드 품질 향상에 큰 영향을 미친다. 이번 포스팅에서는 Git 브랜치 전략의 주요 개념과 인기 있는 접근 방식에 대해 알아보자. 1. 브랜치의 중요성브랜치는 코드의 독립적인 작업 공간을 제공한다. 이를 통해 여러 개발자가 동시에 작업할 수 있으며, 새로운 기능 개발, 버그 수정, 실험 등을 안전하게 진행할 수 있다. 2. 주요 브랜치 전략2-1 Git FlowGit Flow는 프랑스 개발자 Vincent Driessen이 제안한 브랜치 관리 전략이다. 주로 다음과 같은 브랜치를 사용한다.main: 배포 가능한 상태의 코드가 유지되는 브랜치develop: 다음 배포 버전 개발을 위한 브랜치feature..

ORM(Object-Relational Mapping)이란?ORM(Object-Relational Mapping)은 객체 지향 프로그래밍 언어와 관계형 데이터베이스 간의 불일치를 해결하기 위해 사용되는 기술이다. ORM을 사용하면 프로그래머는 데이터베이스와 상호 작용할 때 SQL 쿼리 대신 객체 지향의 개념을 사용하여 데이터를 처리할 수 있다. 이는 객체와 데이터베이스 테이블 간의 매핑을 자동으로 수행해 주며, 코드의 복잡성을 줄이고 생산성을 높여준다.ORM을 활용하면 데이터베이스의 테이블과 애플리케이션의 클래스 간의 매핑을 정의할 수 있다. 예를 들어, 애플리케이션에서 사용되는 객체가 데이터베이스의 행(Row)에 대응하고, 객체의 속성(Property)이 데이터베이스의 열(Column)에 대응한다. O..