현서의 개발 일지📚

[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..