til46 SVN 기초 svn 기본1. 저장소에서 파일 가져오기 checkoutsvn 저장소에서 로컬로 파일을 처음 가져올 때 사용svn checkout 2. 파일 상태 확인 status현재 작업 중인 파일의 변경 사항을 확인할 수 있다.(수정된 파일, 추가된 파일, 삭제된 파일 등등)svn status 3. 파일 업데이트 update다른 팀원이 저장소에 커밋한 최신 변경 사항을 로컬에 작업 중인 복사본에 반영할 때 사용svn update 4. 파일 추가 add새로운 파일을 추가했을 경우 사용하여 추가svn add 5. 파일 삭제 delete파일을 삭제할 때 svn 명령어를 사용해서 삭제, 추가도 svn 명령어를 사용하여 작업하는 게 좋음svn delete 6. 변경 사항 커밋 commit로컬에서 수정한 내용을 저장소에 .. 2024. 9. 12. [react/nextjs] 데이터가 있는지 판단 후 insert 또는 update 음악 추천 리스트에서 + 추가 버튼을 누르면 현재 유저의 재생 목록 테이블에 데이터가 추가되어야 하는데 고려해야 할 부분이 있다. 데이터가 있는지 판단하는 이유는 재생 목록에 추가하는 노래 id를 배열에 담기 때문에 한 번이라도 노래를 추가하여 재생한 적이 없다면 재생목록 테이블에 유저의 현재 재생 목록은 없다. (재생 목록 데이터가 있어야 그 데이터의 노래 컬럼에 배열로 재생할 노래를 담을 수 있다) 그렇기 때문에 먼저 이 유저가 현재 재생 목록을 가졌는지 판단 후 insert 또는 update를 해야 한다. 사실 회원가입 할 때 유저의 현재 재생 목록을 가지도록 재생 목록 테이블에 빈 값으로 insert를 하는 건 어떨지 고민도 했다. 만약 이 방법으로 한다면 추가할 때마다 재생 목록이 있는지 판단하.. 2024. 4. 5. 리액트로 슬라이드 만들기 2 + typescript 슬라이드의 늪에 빠진 나... 하하 즐겁다. 더 제대로 만들었다면 더 즐거웠을 텐데...? 어쨌든 리액트로 슬라이드 만들기 시작~ 생각한 로직 슬라이더 안의 요소의 사이즈에 기반하여 이동한다. 다음/이전 버튼을 누르면 슬라이드 요소를 감싸는 박스를 이동시킨다. 위치가 0이면 이전 버튼 미노출 슬라이드 요소를 감싸는 박스의 사이즈가 위치 값이랑 같으면 미노출(하지만 이 부분은 개선이 필요..) 작업 설명 현재 슬라이드의 위치를 담을 state를 만든다. const [position, setPosition] = useState(0); 슬라이드로 이동할 값을 정한다. 354 부분은 슬라이드 요소 1개의 가로 사이즈이고, 16은 오른쪽 마진의 값이다. 값을 합해서 370이라고 해도 되지만 각 값의 구분을 위해 .. 2024. 4. 4. 리액트로 슬라이드 만들기 + typescript 이번 팀플에서 맡은 페이지에 슬라이드 파티가 시작됐다. 전부 라이브러리 없이 구현하려니 신나네?(정말... 신나..)어쨌든.. 그렇게 시작된 리액트로 슬라이드 만들기시작합니도~ 슬라이드 만들기지만 정말 별 기능이 없는 간단한 슬라이드이다. 근데 이건 뭔가 슬라이드 느낌이 나지 않아서 곧 옆으로 넘어가는 슬라이드로 다시 작업할 예정이지만, 첫 슬라이드 작업이라서 기록에 남겨본다. fade 되는 슬라이드를 구현하려 했지만, 지금은 display block/none으로 동작하는 슬라이드이다.곧.. fade도 도전! 생각한 로직useState를 만들어서 현재 슬라이드의 index 관리다음 버튼을 누르면 state + 1, 이전 버튼을 누르면 state - 1을 해서 배너의 index와 state 값이 같으면 배.. 2024. 4. 3. nextjs 외부 이미지를 사용할 때 / Invalid src prop (이미지주소~) on `next/image`, hostname "호스트명~" is not configured under images in your `next.config.js` 문제 상황 유저의 썸네일이 supabase stoage에 저장되어 있는데, 불러오려니 에러가 발생했다. Error: Invalid src prop (https://lukvbpxaabobwpzkacow.supabase.co/storage/v1/object/public/userThumbnail/screen.png?t=2024-04-02T10%3A26%3A52.780Z) on `next/image`, hostname "lukvbpxaabobwpzkacow.supabase.co" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-hos.. 2024. 4. 3. 최종 프로젝트 Day6 아아 4/2일 일지인데, 시간이 지나가버렸다....ㅜ 오늘부터는 본격 개발에 들어갔다. 이번 팀플에서는 깃의 이슈, 프로젝트, 마일스톤을 적극 활용하기로 해서 열심히 배우면서 사용 중이다. 이슈는 그래도 프로젝트와 마일스톤에 비해서는 많이 써봤는데, 프로젝트와 마일스톤은 많이 사용해보지 않아서 개발만큼 걱정되는 부분이었다. ㅋㅋㅋ (몇 시간 해봤다고 좀 익숙해진 것 같기도?) 지금은 나름 팀원분들께 물어도 보고 검색도 하면서 사용하고 있다. 우리 팀은 크게 맡은 페이지? 또는 컴포넌트 별로 프로젝트를 만들어서 관리하고 있다. 하나의 프로젝트를 파서 모두가 사용할 수도 있지만, 이렇게 관리하면 더 개발하는 영역에 대해서 쉽게 볼 수 있어서 관리가 좋다고 한다. 일단은 한 개의 기능에 집중하고 있어서 이슈는.. 2024. 4. 3. [typescript] 교차 타입 Intersection Type 교차 타입 교차 타입(Intersction Type)은 & 기호를 사용하여 여러 타입을 조합하여 하나의 타입으로 만들 수 있다. 객체의 경우 조합한 모든 타입을 가져야하고 하나라도 없을 경우 에러가 발생한다. type Color = { code : string; } type Animal = { name: string; } type Cow = Color & Animal; const brownCor : Cow = { name:'ddd', code:'#693f00' } Color 의 code 타입과 Animal의 name 타입을 조합하여 Cow 타입을 만들었다. 객체가 아닌 경우 객체가 아닌 경우에도 사용할 수 있는데, 공통된 타입으로 판단한다. type T1 = string | number; type T2 .. 2024. 4. 1. react/typescript input checkbox 전체 선택 구현 그동안 프로젝트 진행하면서 구현한 적이 없어서 이번에 연습 삼아 구현하게 되었다. 기능 1. 전체 선택 클릭 시 다른 체크박스 전체 선택/해제 2. 전체 선택 상태에서 다른 체크박스 해제 시 전체 선택 부분도 선택 해제 3. 체크박스 재사용 가능하도록 컴포넌트로 분리 Checkbox 컴포넌트 / Checkbox.tsx 재사용 가능하도록 props를 내려줬다. import React from "react"; const Checkbox = ({ title, name, checked, onChange }: { title: string; name: string; checked: boolean; onChange: React.ChangeEventHandler }) => { return ( {title} ); }; .. 2024. 3. 29. 이전 1 2 3 4 ··· 6 다음 반응형
