본문 바로가기

전체 글

반응형에 대한 문제 태그를 했을 때 현재 이 부분에서 ClientRect를 이용해서 이미지의 x,y좌표를 따와서 const handleImageClick = (event: React.MouseEvent) => { if (addTagMode) { // 이미지를 정해서 해당 이미지에서만 Tag가 찍힘 const image = event.currentTarget; const imageRect = image.getBoundingClientRect(); const x = event.clientX - imageRect.left; const y = event.clientY - imageRect.top; // 이미 값을 가지고 있는 태그 중 마지막에 값을 가지지 않은 태그의 인덱스를 찾음 const lastEmptyTagIndex = t.. 더보기
내일 배움 캠프 23_09_01 TIL 오늘 CS 배운것을 작성해 둔다 4. NoSQL 4-1. 특징 -NoSQL이라고도 부르며, Not Only SQL의 줄임말이다 -이는 곧 SQL뿐만 아니라 다른 여러 장점을 가지고 있다는 소리이다. -기존의 관계형 DB의 한계를 뛰어넘기 위해 만들어진 새로운 형태의 DB라서, 관계형 DB보다 더 융통성 있는 데이터 모델을 사용하며, 데이터의 저장 및 검색에 특화된 매커니즘을 제공한다 -NoSQL은 대부분 분산 환경에서의 데이터 처리를 더욱 빠르게 하기 위해 개발되었다. 4-2 종류 MongoDB - MongoDB에서 제작 방식은 문서, 운영체제는 Unix, Linux, Windows,Mac 에서 지원 오픈 소스이며 분산처리에 적합하다 Redis - Redis Labs에서 제작 Key-Value방식 Uni.. 더보기
내일 배움 캠프 23_08_31 TIL 오늘자 CS 공부한 것을 기록해 둔다 DBMS의 기능과 종류 1.DBMS 용어 튜플(Tuple) 1.테이블에서 행을 의미한다. 2.같은 말로는 레코드(Record)혹은 로우(Row)라고도 부른다 3.튜플은 릴레이션에서 중복되는 값을 가질 수 없다. 튜플의 수는 카디날리티 라고 한다. 어트리뷰트(Atrribute) 1.테이블에서 열을 의미한다. 2.같은 말로 칼럼(Column)이라고도 부른다 3.어트리뷰트의 수를 의미하는 단어는 디그리(Degree)라고 한다. 릴레이션(Relation = Table) 1.관계형 DB에서 정보를 구분하여 저장하는 기본 단위 2.ex. 유저 정보-> 유저 테이블, 게시글정보->게시글 테이블 키(Key) 1.테이블에서 행의 식별자로 이용되는 테이블의 열을 의미한다.(ex.유저I.. 더보기
내일 배움 캠프 23_08_30 TIL 오늘은 프로젝트에서 스와이퍼를 구현해보았다 import React, { useState } from 'react'; import styled from 'styled-components'; import { Tag } from 'src/types/types'; import { TagImageProps } from 'src/types/types'; import { ReactComponent as TagIcon } from 'src/components/ImageTag/svg/TagIcon.svg'; import SwiperCore, { Navigation, Scrollbar } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; import '.. 더보기
내일 배움 캠프 23_08_29 TIL CS 공부 기록용 2.데이터베이스 유형 2-1 관계형 데이터 베이스 (SQL) -관계형 데이터 베이스 요약 1.동일한 구조(릴레이션)의 관점에서 모든 데이터를 논리적으로 구성 2.선언적인 질의어를 통한 데이터 접근을 제공 3.응용 프로그램들은 데이터베이스 내의 레코드들의 어떠한 순서와도 무관하게 작성된다. 4.사용자는 원하는 데이터(What)만 명시하고, 어떻게 이 데이터를 찾을 것인가는 명시할 필요가 없다 5.관계 데이터 모델을 지금까지 제안된 데이터 모델들 중에서 가장 개념이 단순한 데이터 모델이다 관계형 DB의 특징 -바탕이 되는 데이터 구조로서 간단한 테이블(릴레이션)을 사용한다. -중첩된 복잡한 구조가 없다 -숙련되지 않은 사용자도 쉽게 이해할 수 있다. -표준 데이터베이스 응용에 대해 좋은 성.. 더보기
내일 배움 캠프 23_08_28 TIL 오늘은 지난주에 이어서 각 태그들의 코드들을 적중시키고 잔 버그들을 잡는 작업을 진행하고 CSS 위주로 진행을 하였다 // AddImageTagComponent.tsx import React, { useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; import ImageTag from './ImageTag'; import { atom, useAtom } from 'jotai'; import { ImageTagPropsToAddImageComponent, Tag } from 'src/types/types'; export const contentsAtom = atom({}); export const tagsDataAtom = atom({}); con.. 더보기
내일 배움 캠프 23_08_25 TIL 이미지를 선택하고 생성하는 기능을 컴포넌트로 만들어서 하고있는데 어찌저찌 여러 이미지들을 생성하고 안에 태그를 찍고 불러와서 보이는것 까지는 성공을 했는데 이게 조금 정석이 아니라 다르게 구현해 놓은것이라 문제가 될 것 같지만 우선 기록을 위해 써놓아본다. import React, { useState } from 'react'; import ImageTag from './ImageTag'; import { Tag, Data } from 'src/types/types'; import PostWriteInput from '../post/PostWriteInput'; interface AddImageTagComponentProps { onTagsAndResultsChange: (tags: Tag[], sear.. 더보기
내일 배움 캠프 23_08_24 TIL 오늘은 어제에 이어서 이미지 태그하는 기능을 컴포넌트로 나눠서 버튼을 하나 만들어서 그 버튼을 클릭할 때마다 이미지 태그 컴포넌트가 실행이 되어서 여러개의 사진에 각각 독립적인 태그를 넣어서 저장할 수 있도록 구현하는 코드를 연구해보았다 좀 더 재사용성을 높이기 위해서 import React, { useState } from 'react'; import supabase from 'src/lib/supabaseClient'; import { Data } from 'src/types/types'; import { SearchProps } from 'src/types/types'; const Search: React.FC = ({ onSearchResultSelect }) => { const [searchKe.. 더보기

티스토리툴바