기록창고

1. 개요 노마드코더의 Maker 마스터클래스 강의 중, 특정 product의 overview와 review를 보여주는 페이지를 만드는 영상을 본 후, layout이라는 꽤나 괜찮은 기능이 있어서 기록하려 한다. // app/routes.ts...prefix("/:productId", [ index("features/products/pages/product-redirect-page.tsx"), route("/overview", "features/products/pages/product-overview-page.tsx"), ...prefix("/reviews", [ index("features/products/pages/product-reviews-page.tsx")..

최근, 개인적인 일 때문에 오랜만에 노마드코더 강의를 들었다. 강의를 듣다 보니, 기존에 놓쳤던 타입 추론 방식의 편리함을 다시금 깨달아서 간단히 정리하려 한다. 1. 상황// app.routes.tsimport { type RouteConfig, index, prefix, route,} from "@react-router/dev/routes";export default [ index("common/pages/home-page.tsx"), ...prefix("products", [ index("features/products/pages/products-page.tsx"), ...prefix("leaderboards", [ index("features/products/page..

백준의 4949번 균형잡힌 세상이라는 문제를 풀려고 했는데, 대략 아래와 같은 형식으로 여러 줄 입력이 주어졌다. So when I die (the [first] I will see in (heaven) is a score list). [ first in ] ( first out ). Half Moon tonight (At least it is better than no Moon at all]. A rope may form )( a trail in a maze. Help( I[m being held prisoner in a fortune cookie factory)]. ([ (([( [ ] ) ( ) (( ))] )) ]). . . 문제의 입력 조건은 다음과 같았다.각 문자열은 마지막 글자를 제외하고..

1. 개요 Explore all products →; // routes.tsimport { type RouteConfig, index, prefix, route,} from "@react-router/dev/routes";export default [ index("common/pages/home-page.tsx"), ...prefix("products", [ index("features/products/pages/products-page.tsx"), ...prefix("leaderboards", [ index("features/products/pages/leaderboard-page.tsx"), route( "/daily/:year/:mont..

1. 개요 이번에 CORS 에러를 오랜만에 보았다. 그래서 이를 해결하기 위해 HTTP 헤더 부분을 보았는데 Header Field 부분이 너무 헷갈렸다. 그래서 구글링을 통해 HTTP 헤더, CORS 에러에 대해 다시 복습한 후, 핵심 내용이라 생각되는 것들만 정리하였다. 자세한 내용들은 구글링을 통해서 쉽게 확인할 수 있기도 하고, 간단하게 정리한 내용들을 틈틈이 보면서 기억을 되살리기 위해서 간단하게 정리하였다. 2. HTTP 헤더란 HTTP 헤더란 클라이언트 서버가 HTTP 요청 및 응답에서 추가적인 정보를 주고 받기 위해 사용하는 메타데이터이다. 각 헤더는 이름과 값의 쌍으로 구성되며 요청이나 응답의 본문(body)과는 별도로 전송된다. 그리고 헤더는 용도에 따라 다음과 같이 분류된다.Gener..

1. 개요 공부를 하면서 shadcn을 이용해보았는데, 여기서 asChild와 navigationMenuTriggerStyle이라는 것을 알게 되었다. 이것들이 묘하게 기억에 남아서 간단하게 기록해보려고 한다. 2. asChild asChild는 Radix UI 기반 컴포넌트(예: NavigationMenuLink)에서 사용되는 특수 prop이다. shadcn/ui도 Radix UI를 기반으로 만들어져 이 prop을 지원한다고 한다. 이 prop이 하는 역할은 다음과 같다.기본적으로 Radix UI 컴포넌트는 또는 등 자체 태그로 렌더링되는데, asChild를 쓰면 내가 원하는 태그(, 등)를 대신 쓰게 한다.내부적으로는 Slot이라는 개념을 활용한다고 한다. 2-1. asChild 예시import..

1. 개요 이번에는 python과 javascript로 SQL을 이용하는 방법을 간단히 배워보았다. 그래서 이를 기록해보려고 한다. 2. Python에서 SQLite 사용하기2-1. 기본 흐름# 1. DB 연결conn = sqlite3.connect("users.db")# 2. 커서(Cursor) 가져오기cur = conn.cursor()# 3. 쿼리 실행cur.execute("SELECT * FROM users")# 4. 결과 가져오기res = cur.execute("SELECT * FROM users")all_movies = res.fetchall()# 5. DB 반영conn.commit()# 6. DB 연결 종료conn.close()결과 가져오기fetchall(): 결과를 전부 가져옴fetchman..

1. Redis란Redis는 인메모리 데이터베이스로, 다양한 자료구조를 key-value 형태로 저장할 수 있다. 캐시, 세션, 랭킹 시스템, 실시간 처리 등에 보다 적합하다. 2. String (문자열) 가장 기본적인 자료형으로 숫자, 문자열 모두 저장이 가능하다. TTL(만료 시간), 조건부 저장(NX, XX) 등 다양한 옵션이 있다. 2-1. 주요 명령어SET key value # 값 설정 (기존 값 덮어씀)GET key # 값 조회DEL key # 삭제MSET k1 v1 k2 v2 ... # 여러 key에 값 설정MGET k1 k2 ... ..