전체 글

[Carrot Market] #5 TAILWIND CLONING UI - 1

이제 Carrot Market에 필요한 UI들을 만들기 위한 Tailwind코드를 본격적으로 짜보겠습니다. Auth UI pages/enter.tsx import { useState } from "react"; type MethodType = "email" | "phone"; function cls(...classnames: string[]) { return classnames.join(" "); } export default function Enter() { const [method, setMethod] = useState("email"); const onEmailClick = () => setMethod("email"); const onPhoneClick = () => setMethod("phone"..

[Carrot-Market] #4 TAILWIND - 2

저번 Tailwind포스팅에서는 JS없이 구현할 수 있는 엄청난 기능들에 대해서 알아보았습니다. 이어서 엄청난 UI 패턴들에 대해서 알아보갰숩나더. ( 지금부터 습니다... 체 쓰겠습니다.. ) More Modifiers src/index.js import type { NextPage } from "next"; import tw from "tailwind-styled-components"; const Container = tw.div` flex flex-col space-y-5 bg-slate-400 py-20 px-20 flex min-h-screen `; const Home: NextPage = () => { return ( What is my fav. food. 김치 hi hi hi Lorem, i..

[Carrot-Market] #4 TAILWIND - 1

TailwindCss TailwindCss는 아주 크고, 대빵 큰 CSS파일이라고 보면 됩니다. 많은 클래스 네임을 가지고 있는 겁니다. 이를 가지고 우리는 아름다운 많은 것을 만드는 겁니다. 먼저 vscode에서 tailwind intelisence를 설치 해야지 개발에 수월하다. TailwindCss Utils 일단 기초적인 TailwindCss의 문법에 대해서 알아보겠다. 그리고 내가 알아낸 것인데, Tailwindcss도 styled-component처럼 작성할 수 있다. 바로 tailwind-styled-components를 깔면 된다. npm i -D tailwind-styled-components 그리고 아래와 같이 import해서 사용 가능하다. import tw from "tailwind..

[Carrot-Market] #3 SETUP

NextJS SetUp NextJS를 우선 typescript로 개발하기 위해 아래 명령어로 프로젝트를 생성하도록 하겠습니다. npx create-next-app@latest --ts 이 상태로 package.json을 가서 react18이 깔려 있는지 확인 후에, 17버전이 깔려있다면 rc로 다시 깔아주도록 합니다. TailwindCSS Setup npm install -D tailwindcss postcss autoprefixer 그 다음에 프로젝트 폴더에 postcss.config.js, tailwind.config.jsl가 생성되었는지 봅니다. tailwind.config.js module.exports = { content: [ "./pages/**/*.{js, jsx, ts, tsx}", "...

Data-Structure - Arrays and Structure

KMP Pattern Matching 이 KMP패턴 매칭 문제는 비교한 정보를 최대한 활용하자는 취지에서 나타난 알고리즘입니다. 먼저 pattern에 해당하는 failure함수를 작성해 주어야 합니다. failure 함수는 접두사를 활용합니다. 이는 maximum length - 1 of the prefix and suffix that matches in the partial patterns으로 정의됩니다. 즉 j = 4일 때 위의 예시에서 "abcab"인데 -> ab c ab로 나눌 수 있고 |ab| - 1은 1이기 때문에 failure[4] = 1이 됩니다. 비슷하게 j = 5일 때는 "abcabc"인데 -> abc abc로 나눌 수 있고 ( 겹치는 부분 허용 ) |abc| - 1은 2이기 때문에 f..

Data-Structure - Tree

Terminology Definition tree는 위와 같이 정의됩니다. root라는 특수한 노드가 있고 이 root라는 노드를 기준으로 disjoint한 Tree의 set으로 나누어 집니다. 이를 subtree라고 합니다. Representation of Trees 대게 list로 위와 같이 Child Node를나열해서 Tree를 표현할 수도 있습니다. 하지만 이는 일반적이지 않은 방법이고 아래와 같이 Left Child-Right Sibling Representation을 사용하기도 합니다. (underground yea~) Left Child-Right Sibling Representation 이와 같이 left-child는 leftmost child를 가리키고 right sibling필드는 이..

Data-Structure - Linked-List ( Application - 3 )

Equivalent Relations Equivalent Relation이란 symeetric, relfexive, transitive을 모두 다 만족하는 관계를 말합니다. 간단한 예시는 위와 같습니다. 이는 매우 중요한데, 그 이유는 equivalent relation이 signal net을 검증하기 때문입니다. equivalence를 결정하는 알고리즘은 아래와 같습니다. 2D array representation 위의 알고리즘을 구현하기 위해서는, 2차원 배열 pairs[n][m]이 사용되어야 합니다. 여기서 m은 related pairs의 개수고, n은 objects의 개수입니다. 하지만 이는 엄청난 공간 낭비를 할 수 있습니다. 그 이뉴능 아주 적은 배열의 값만이 사용될 수도 있기 때문입니다. 또..

Data-Structure - Linked-List( Application - 2 )

Available Space List (1) Available spcae list 또는 avail lsit는 우리가 새로운 node가 필요할 때 평가해서 그 때 그 떄 사용할 수 있습니다. 또한 처음에는 avail는 NULL로 초기화 됩니다. 우리는 node를 malloc()하거나, free()하는 것이 아니라, 아래서 볼 getNode()이나 retNode()를 사용하면 됩니다. 이는 getNode()메소드의 기본적인 작동 방식을 묘사한 것입니다. avail이 있다면 이 avail은 avail->link를 가리키게 하고 avail을 필요로 하는 node에게 avail을 주어주는 방식으로 작동됩니다. 이는 retNode()메소드의 기본적인 작동 방식을 묘사한 것입니다. node->link를 avail을 ..

Java Programming - Collection Framework

컬렉션 프레임워크 소개 애플리케이션을 개발하다 보면 다수의 객체를 저장해 두고 필요할 때마다 꺼내서 사용하는 경우가 많다. 만약 10개의 Product 객체를 저장해 두고, 필요할 때마다 하나씩 꺼내서 이용한다고 가정해봅시다. 어떻게 Product객체를 효율적으로 추가, 검색, 삭제할지 고민하게 되는데, 가장 간단한 방법은 배열을 이용하는 것입니다. 배열은 쉽게 생성하고 사용할 수 있지만, 저장할 수 있는 객체 수가 배열을 생성할 때 결정되기 때문에 불특정 다수의 객체를 저장하기에는 문제가 있습니다. 물론 배열의 크기를 크게 생성하면 되겠지만, 이것은 좋은 방법이 될 수 없습니다. 배열의 또다른 문제점은 객체를 삭제했을 때 해당 인덱스가 비게 되어 낱알이 듬성듬성 빠진 옥수수가 될 수 있습니다. 그렇게 ..

Data-Structure - Linked list ( Applications )

Polynomials 우리는 다음과 같은 polynomials를 구조체를 통해서 구현을 했었습니다. 근데 이는 linked-list를 통해서도 더욱 효율적이고 간편하게 만들 수 있습니다. 바로 이렇게 생긴 구조체와 자기참조 구조체를 통해서 linked-list를 구현하면 됩니다. data칸에 float형 coef(계수)와 int형 expon(지수)를 넣고 다음 linked-list를 가리킬 link를 만들어 주면 됩니다. 간단합니다!! 각각의 a, b다항식을 위와같이 linked-list로 표현을 해 주었습니다. 기본적인 추가 규칙은 구조체를 활용해서 간단히 구현했을때와 다른것이 없습니다. 그냥 expon(지수)를 비교해서 각각의 경우에 다르게 처리해 주면 끝입니다. 하지만 linked-list답게 포인..