코딩이 모래?

고정 헤더 영역

글 제목

메뉴 레이어

코딩이 모래?

메뉴 리스트

  • 홈
  • 태그
  • 방명록
  • 분류 전체보기 (90)
    • Node.js (3)
    • React (23)
      • Next (9)
      • 네이버 클론 (3)
      • 당근마켓 클론 (3)
      • 넷플릭스 클론 (6)
    • Javascript (9)
    • 백준 풀이 (0)
    • 알고리즘 (1)
    • c++ (4)
    • Python (1)
    • 프로젝트 정리 (10)
      • 모현에서 모먹지 (4)
      • 대충 (3)
    • AI (16)
홈태그방명록
  • Node.js 3
  • React 23
    • Next 9
    • 네이버 클론 3
    • 당근마켓 클론 3
    • 넷플릭스 클론 6
  • Javascript 9
  • 백준 풀이 0
  • 알고리즘 1
  • c++ 4
  • Python 1
  • 프로젝트 정리 10
    • 모현에서 모먹지 4
    • 대충 3
  • AI 16

검색 레이어

코딩이 모래?

검색 영역

컨텐츠 검색

분류 전체보기

  • Storybook에 tailwindcss 적용하기

    2024.10.08 by 래모

  • [Node.js] Express로 간단한 API 서버 만들어보기

    2024.07.22 by 래모

  • [Node.js] 라우터 만들기

    2024.07.21 by 래모

  • [Node.js] Node.js 입문!!

    2024.07.12 by 래모

  • [NEXT.js (ver 14)] Server action(useFormStatus, useActionState

    2024.07.10 by 래모

  • [NEXT.js (ver 14)] Next가 Component를 렌더링 하는 방식

    2024.07.08 by 래모

  • [NEXT.js (ver 14)] 시작 및 기본파일

    2024.03.18 by 래모

  • [혼자 공부하는 머신러닝+딮러닝] 트리 알고리즘 - 교차 검증과 그리드 서치

    2023.11.06 by 래모

Storybook에 tailwindcss 적용하기

이제 tailwind없이는 css 구성을 못 해버리는 지경에 와버린 나...storybook을 사용하면서도 tailwind를 사용하고 싶었는데 버튼 자체의 className에 tailwind를 적용하니 아래와 같이 적용되지 않았다 반면 일반 컴포넌트에 버튼을 불러와 사용해보니 아래와 같이 잘 적용된 모습! 참고로 이때 코드는 아래와 같다// App.tsximport { Button } from "./components/Button"function App() { return ( )}export default App//components/Button.tsximport React from 'react';export interface ButtonProps { primary?: bo..

React 2024. 10. 8. 14:29

[Node.js] Express로 간단한 API 서버 만들어보기

본 게시물은 [Node.js 백엔드 개발자 되기 ]도서를 보고 작성되었습니다.express 설치npm i expressyarn add express  express 실행! express도 require("express")로 불러오고app = epxress()를 통해 사용된다 express로 간단한 API를 만들어보자!경로HTTP 메서드설명/get게시판 목록을 가져옴/postspost게시판에 글을 쓴다글은 id, title, name, text, createdDT로 구성/posts/:iddelete게시글 아이디가 id인 글 삭제    const express = require("express");const app = express()let posts = [] // 게시글 리스트로 사용할 posts에 빈 리..

Node.js 2024. 7. 22. 13:20

[Node.js] 라우터 만들기

본 게시물은 [Node.js 백엔드 개발자 되기 ]도서를 보고 작성되었습니다.  라우터 만들기URL의 pathname 에 있는 정보를 활용하는 라우터를 만들어보자! const http = require("http");const url = require("url"); // url 모듈 로딩http.createServer((req, res) => { const path = url.parse(req.url, true).pathname; // 패스명 할당 res.setHeader("Content-Type", "text/html"); if (path === "/user") { // user 결과값 설정 res.end("[user] name : juhui , age : 25") }..

Node.js 2024. 7. 21. 15:12

[Node.js] Node.js 입문!!

프론트엔드 공부하면서 Node도 해야지 해야지 하다가드디어 공부 시작!! 풀스택 가보자고Node.js: 서버 측 자바스크립트 런타임 환경 Node.js V8 자바스크립트 엔진과 libuv 및 C/C++에 의존성을 가진 자바스크립트 런타임이다 일단 런타임은 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻한다. V8은 자바스크립트 코드를 실행하도록 해주고libuv는 이벤트 루프 및 운영체제 계층 기능을 사용하다록 API를 제공한다. 쉽게 말해 Node는 자바스크립트 코드 실행에 필요한 런타임으로 V8엔진을 사용하고, 자바스크립트 런타임에 필요한 이벤트 루프 및 운영체제 시스템 API를 사용하는데는 libuv 라이브러리를 사용한다는 뜻이다.   기본 코드 살펴보기const http = require(..

Node.js 2024. 7. 12. 15:58

[NEXT.js (ver 14)] Server action(useFormStatus, useActionState

기존 NEXT에선 react-hook-form을 사용했었는데현재는 서버 액션으로 쉽게 바꿀 수 있다 ! 어떻게 하는지 살펴보자 Server Action사실 너무너무너무 간단하다 기존 form 태그에 action으로 함수를 전달해주면 된다import Button from "@/components/Button";import Input from "@/components/Input";const Login = () => { const handleForm = async (formData: FormData) => { "use server" console.log(formData) } return ( 안녕하세요! ..

React/Next 2024. 7. 10. 18:16

[NEXT.js (ver 14)] Next가 Component를 렌더링 하는 방식

NEXT.js 14버전에서는 hook을 사용하기 위해 상단에 use client를 사용해 주어야 한다.왜 이런 사용이 필요할까? 이것을 이해하려면 next가 컴포넌트를 렌더링 하는 방식을 알아야 한다.그전에 기본 리액트에서 사용하는 CSR에 대해 알아보자 CSR (Client Side Rendering)CSR은 말 그대로 렌더링이 클라이언트에서 일어난다는 뜻이다CSR의 동작 방식은 위 사진과 같다 유저가 웹사이트에 요청을 보냄CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 보냄 (CDN이란 쉽게 말해 웹사이트를 방문할때 그 사이트의 콘텐츠를 빠르게 받을 수 있도록 하는 시스템이다)브라우저가 HTML과 JS 다운, 이 동안 유저는 사이트를 보지 못 함다운로드JS 실행, 데이터를 위한 API 호출, ..

React/Next 2024. 7. 8. 15:15

[NEXT.js (ver 14)] 시작 및 기본파일

구글 솔루션 챌린지에 참여했을 때 팀 구성원 중에 프론트엔드 담당이 나 혼자여서 오랜만에 NEXT를 써봤다 근데!! 내가 배웠을 당시와 다르게 업데이트 된 부분이 너무 많아서 얼레벌레 문서를 찾아가며 프로젝트를 마무리 했다... 아무래도 업데이트 된 내용을 다시 공부해야 할 것 같아서 오랜만에 강의를 들어본다 시작하기 npx create-next-app@latest --typescript 시작 설치는 이전과 똑같다 생성하는 과정에서 아래의 질문들이 뜰것이다 EsLint 적용해? => EsLint는 자바스크립트 문법에서 에러를 표시해주는 도구이다. 이왕이면 적용하는 것이 좋다. src 폴더 만들어? => src폴더를 만들게 되면 안에 app폴더가 필수적으로 들어가있고 components와 같은 폴더들을 사..

React/Next 2024. 3. 18. 21:19

[혼자 공부하는 머신러닝+딮러닝] 트리 알고리즘 - 교차 검증과 그리드 서치

검증세트( validation set ) 테스트 세트를 사용하지 않으면 모델이 과대적합인지 과소적합인지 판단하기 어렵다. 테스트 세트를 사용하지 않고 이를 측정하는 방법은 훈련세트를 또 나누는 것이다! => 검증세트 훈련 : 검증 : 테스트 = 6 : 2 : 2 from sklearn.model_selection import train_test_split train_input, test_input, train_target, test_target = train_test_split(data, target, test_size = 0.2 , random_state = 42) sub_input, val_input, sub_target, val_target = train_test_split(train_input, ..

AI 2023. 11. 6. 09:57

추가 정보

인기글

최신글

페이징

이전
1 2 3 4 ··· 12
다음
TISTORY
코딩이 모래? © Magazine Lab
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.