티스토리

코딩이 모래?

검색하기

블로그 홈

코딩이 모래?

sand8594.tistory.com/m

컴퓨터공학과 찌끄레기의 공부

구독자: 2

방명록 방문하기

주요 글 목록

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.. 공감수 0 댓글수 3 2024. 10. 8.
[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에 빈 리.. 공감수 0 댓글수 1 2024. 7. 22.
[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") }.. 공감수 0 댓글수 0 2024. 7. 21.
[Node.js] Node.js 입문!! 프론트엔드 공부하면서 Node도 해야지 해야지 하다가드디어 공부 시작!! 풀스택 가보자고Node.js: 서버 측 자바스크립트 런타임 환경 Node.js V8 자바스크립트 엔진과 libuv 및 C/C++에 의존성을 가진 자바스크립트 런타임이다 일단 런타임은 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻한다. V8은 자바스크립트 코드를 실행하도록 해주고libuv는 이벤트 루프 및 운영체제 계층 기능을 사용하다록 API를 제공한다. 쉽게 말해 Node는 자바스크립트 코드 실행에 필요한 런타임으로 V8엔진을 사용하고, 자바스크립트 런타임에 필요한 이벤트 루프 및 운영체제 시스템 API를 사용하는데는 libuv 라이브러리를 사용한다는 뜻이다. 기본 코드 살펴보기const http = require(.. 공감수 2 댓글수 1 2024. 7. 12.
[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 ( 안녕하세요! .. 공감수 0 댓글수 0 2024. 7. 10.
[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 호출, .. 공감수 0 댓글수 1 2024. 7. 8.
[NEXT.js (ver 14)] 시작 및 기본파일 구글 솔루션 챌린지에 참여했을 때 팀 구성원 중에 프론트엔드 담당이 나 혼자여서 오랜만에 NEXT를 써봤다 근데!! 내가 배웠을 당시와 다르게 업데이트 된 부분이 너무 많아서 얼레벌레 문서를 찾아가며 프로젝트를 마무리 했다... 아무래도 업데이트 된 내용을 다시 공부해야 할 것 같아서 오랜만에 강의를 들어본다 시작하기 npx create-next-app@latest --typescript 시작 설치는 이전과 똑같다 생성하는 과정에서 아래의 질문들이 뜰것이다 EsLint 적용해? => EsLint는 자바스크립트 문법에서 에러를 표시해주는 도구이다. 이왕이면 적용하는 것이 좋다. src 폴더 만들어? => src폴더를 만들게 되면 안에 app폴더가 필수적으로 들어가있고 components와 같은 폴더들을 사.. 공감수 0 댓글수 0 2024. 3. 18.
[혼자 공부하는 머신러닝+딮러닝] 트리 알고리즘 - 교차 검증과 그리드 서치 검증세트( 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, .. 공감수 0 댓글수 0 2023. 11. 6.
[혼자 공부하는 머신러닝+딮러닝] 트리 알고리즘 - 결정 트리 로지스틱 회귀로 와인 분류하기 알코올, 도수, 당도, pH 값으로 와인의 종류를 구별해보자 와인은 레드와인과 화이트와인이 있다 import pandas as pd wine = pd.read_csv("https://bit.ly/wine_csv_data") wine.head() 네번째 열은 타깃값으로 레드와인이면 0, 화이트 와인이면 1이다 로지스틱 회귀로 훈련하기 전에 판다스의 유용한 메서드를 알아보자 info() wine.info() ''' RangeIndex: 6497 entries, 0 to 6496 Data columns (total 4 columns): # Column Non-Null Count Dtype --- ------ -------------- ----- 0 alcohol 6497 non-.. 공감수 0 댓글수 1 2023. 11. 3.
[혼자 공부하는 머신러닝+딮러닝] 다양한 분류 알고리즘 - 확률적 경사 하강법 확률적 경사 하강법 (Stochastic Gradient Descent) 훈련한 모델을 버리지 않고 새로운 데이터에 대해서 조금씩 훈련하는 방식을 점진적 학습 또는 온라인 학습이라고 부른다. 대표적인 점진적 학습 알고리즘이 SGD이다. 확률적 경사 하강법에서 확률적이란 말은 '무작위하게' 혹은 '랜덤하게'의 기술적인 표현이다 그다음 경사는 기울기를 말하고 하강법은 내려가는 방법을 말한다. 전체 샘플을 사용하지 않고 딱 하나의 샘플을 훈련 세트에서 랜덤하게 골라 가장 가파른 길을 찾는 것이 바로 SGD이다. 더 자세히 설명하자면 SGD는 훈련 세트에서 랜덤하게 하나의 샘플을 선택하여 가파른 경사를 조금씩 내려간다. 그 다음 훈련 세트에서 랜덤하게 또 다른 샘플을 하나 선택하여 경사를 조금 내려간다 이런 식.. 공감수 0 댓글수 0 2023. 10. 29.
[혼자 공부하는 머신러닝+딮러닝] 다양한 분류 알고리즘 - 로지스틱 회귀 로지스틱 회귀 로지스틱 회귀는 이름은 회귀이지만 분류 모델이다. 이 알고리즘은 선형 회귀와 동일하게 선형 방정식을 학습한다 ex ) z = a * Weight + b * Length + c * Diagonal + d * Height + e * Width + f 여기서 a, b, c, d는 가중치 혹은 계수이다 z는 어떤 값도 가능하지만 확률이 되려면 0~1의 값이어야 한다 z가 아주 큰 음수일 때 0이 되고 z가 아주 큰 양수 일때 1이 되도록 바꾸는 방법이 시그모이드함수(또는 로지스틱함수)이다. 사이킷런에는 로지스틱 회귀 모델인 LogisticRegression 클래스가 준비되어 있다. 공감수 0 댓글수 1 2023. 10. 29.
[혼자 공부하는 머신러닝+딮러닝] 회귀 알고리즘과 모델 규제 - 특성 공학과 규제 다중 회귀 여러 개의 특성을 사용한 선형 회귀를 다중 회귀 라고 부른다 특성이 2개면 타킷값과 함께 3차원 공간을 형성하고 선형 회귀 방정식 타깃 = a * 특성1 + b * 특성2 + 절편 은 평면이 된다 이번 에제에서는 농어의 길이뿐만 아니라 농어의 높이와 두께도 함께 사용한다 기존의 특성을 사용해 새로운 특성을 뽑아내는 작업을 특성공학 이라고 한다. 사이킷런의 변환기 사이킷런은 특성을 만들거나 전처리하기 위한 다양한 클래스를 제공한다 사이킷런에서는 이런 클래스를 변환기라고 부른다 사이킷런의 모델 클래스에 일관된 fit(), score(), predict() 메서드가 있는 것처럼 변환기 클래스는 모두 fit(), transform() 메서드를 제공한다. 이번에 사용해볼건 PolynomialFeatur.. 공감수 0 댓글수 1 2023. 10. 29.
[혼자 공부하는 머신러닝+딮러닝] 회귀 알고리즘과 모델 규제 - 선형 회귀 k-최근접 이웃의 한계 농어 데이터를 다시 사용하고 50cm 농어의 무게를 예측해보자 이전까진 전 게시물과 똑같다 print(knr.predict([[50]])) # [1033.33333333] 농어의 무게를 1033g정도로 예측했다. 하지만 실제 이 농어의 무게는 훨씬 더 많이 나간다고 한다 어디서 문제가 생긴걸까? 최근접 이웃을 산점도로 표시해보자 import matplotlib.pyplot as plt distances, indexes = knr.kneighbors([[50]]) plt.scatter(train_input, train_target) plt.scatter(train_input[indexes], train_target[indexes], marker = "D") plt.scatter(50.. 공감수 0 댓글수 1 2023. 10. 28.
[혼자 공부하는 머신러닝+딮러닝] 회귀 알고리즘과 모델 규제 - k 최근접 이웃 회귀 지도 학습 알고리즘은 크게 분류와 회귀로 나뉜다. 회귀란? : 임의의 어떤 숫자를 예측하는 문제 ex) 내년도 경제 성장률 예측, 배달 도착시간 예측, 농어의 무게를 예측 k-최근접 알고리즘이란? 예측하려는 샘플에 가장 가까운 샘플 k개를 선택한 후 이 샘플들의 클래스를 확인하여 다수 클래스를 새로운 샘플의 클래스로 예측한다. k-최근접 이웃 회귀도 이와 비슷!! 분류와 똑같이 예측하려는 샘플에 가장 가까운 샘플 k개를 선택 (회귀이기 때문에 이웃한 샘플의 타깃은 어떤 클래스가 아니라 임의의 수치) 이웃 샘플의 수치를 사용해 새로운 샘플x의 타깃을 예측함 => 수치들의 평균 구하기! KNeighborsRegressor 사이킷런에서 k-최근접 이웃 회귀 알고리즘을 구현한 클래스 객체를 생성하고 fit메서드.. 공감수 0 댓글수 1 2023. 10. 28.
[딮러닝 튜토리얼] 섹션 1 - 3. Learning Algorithm 기초 Learning Algorithm 내가 원하는 어떤 일을 할 수 있도록 connection weight을 잘 설정해야하는데 그것이 바로 learning algorithm이라고 할 수 있다. x라는 training data를 줬을 때 t 값이 나오면 우리는 이것을 학습이 완료 되었다고 한다. 위의 수식이 최소가 되는 w값을 찾는것이 우리의 숙제이다. 위 수식을 그래프로 그리면 아래와 같이 표현되는데 E(w)가 최소가 되는 w값을 어떻게 찾느냐? 우리는 극소가 되는 w값을 찾지는 못 하지만 그 근사값에 해당하는 값들을 찾을 수 있다 어떻게? 미분을 통해서! Gradient Descent Method 한 점을 잡고 극 점의 미분값을 계산했을 때 음수면 양의방향(즉 오른쪽) 으로 옮기고 양수면 음의 방향(즉 왼.. 공감수 0 댓글수 0 2023. 10. 10.
[딮러닝 튜토리얼] 섹션 1 - 2. Multilayer Perceptron 소개 Perceptron 지난 게시물에서 했던 과정을 퍼셉트론이라고 한다. 즉 퍼셉트론이란 입력과 가중치들의 곱을 모두 더한 뒤 활성화 함수(activation function)을 적용해서 그 값이 0보다 크면 1, 0보다 작으면 -1을 출력하는 선형분류기 구조를 말한다. 단층 퍼셉트론 지금까지 배운 퍼셉트론을 단층 퍼셉트론이라고 한다. 퍼셉트론은 단층 퍼셉트론과 다층 퍼셉트론으로 나누어지는데, 단층 퍼셉트론은 값을 보내는 단계와 값을 받아서 출력하는 두 단계로만 이루어진다. 이때 이 각 단계를 보통 층 (layer)이라고 부르며, 이 두개의 층을 입력층(input layer)과 출력층(output layer)이라고 한다. 강의에서 예시를 든 퍼셉트론을 살펴보자 입력 세 개 중 하나는 편의를 위해 1이라고 가.. 공감수 0 댓글수 0 2023. 10. 10.
[딮러닝 튜토리얼] 섹션 1 - 1.Neural Network 소개 본 게시물은 유데미의 AI 완전정복을 위한 딮러닝 튜토리얼 part1을 듣고 작성되었습니다. Neural Network 원래의 이름은 artificial neural network이었다. 인간의 두뇌를 모방해서 만들어 내기 위한 연구에서 시작되었다 인공 신경망은 두뇌의 신경세포, 즉 뉴런이 연결된 형태를 모방한 모델이다. 인공신경망은 간단히 신경망이라고도 한다. 생물학적 뉴런 인간의 뇌는 1000억 개가 넘는 신경세포가 100조 개 이상의 시냅스를 통해 병렬적으 연결되어있다. 뉴런의 기능 Input : 수상돌기(dendrite)로 부터 들어온 input 시그널 Reservoir : Cell body가 신호를 저장 Output : 신체 세포에 저장돈 신호의 양이 임계값보다 크면 cell body가 축삭(a.. 공감수 0 댓글수 0 2023. 10. 10.
[혼자 공부하는 머신러닝+딮러닝]데이터 다루기 - 데이터 전처리 사이킷런으로 훈련 세트와 테스트 세트 나누기 사이킷런은 머신러닝 모델을 위한 알고리즘뿐만 아니라 다양한 유틸리티 도구도 제공한다. 대표적인 도구가 train_test_split() 함수이다. 해당 함수는 전달되는 리스트나 배열을 비율에 맞게 훈련세트와 테스트 세트로 나누어 준다 from sklearn.model_selection import train_test_split train_test_split(arrays, test_size, train_size, random_state, shuffle, stratify) (1) Parameter arrays : 분할시킬 데이터를 입력 (Python list, Numpy array, Pandas dataframe 등..) test_size : 테스트 데이터셋의 비.. 공감수 0 댓글수 1 2023. 10. 6.
[혼자 공부하는 머신러닝+딮러닝]데이터 다루기 - 훈련 세트와 테스트 세트 이 게시물은 혼자 공부하는 머신러닝+딮러닝 교재를 기반으로 작성되었습니다. k-최근접 이웃 알고리즘 클래스를 통해서 구현하는데! KNeighborsClassifier from sklearn.neighbors import KNeighborsClassifier kn = KNeighborsClassifier() fit () kn.fit(학습할 데이터, 기준) kn 객체에 데이터와 그 기준을 넘겨주면 이것들을 토대로 학습을 시킨다 러머신러닝에선 이런 과정을 훈련이라고 부른다 score () kn.score(테스트데이터, 평가 갈래혹은 기준?) 위 fit 메서드로 훈련시킨 것을 토대로 score 메서드를 이용하여 얼마나 잘 훈련되었는지 평가할 수 있다. 이 메서드는 0에서 1 사이의 값을 반환하며 1 데이터는 모.. 공감수 0 댓글수 0 2023. 10. 5.
데이터 시각화 - seaborn 본 게시물은 아래의 글을 참조하여 작성하였습니다. https://wikidocs.net/86290 https://data-gongbu.tistory.com/44 Seaborn Seaborn이란 파이썬의 시각화 도구인 matplotilib를 더 편하게 사용할 수 있도록 만든 라이브러리이다. seaborn은 matplotlib 대비 손쉽게 그래프를 그리고 그래프 스타일 설정을 할 수 있다는 장점이 있다. 라이브러리 임포트 #라이브러리 임포트 import pandas as pd import matplotlib.pyplot as plt import seaborn as sns #seaborn에서 제공하는 flights 데이터 셋을 사용 flights = sns.load_dataset('flights') #그래프 .. 공감수 2 댓글수 2 2023. 10. 5.
[Pandas] 판다스 데이터프레임(DataFrame) 본 게시물은 유튜브 파이스탁님의 파이썬 판다스 기초 강의를 들으며 작성하였습니다 DataFrame :2차원 데이터를 효과적으로 표현한 판다스 자료구조 DataFrame으로 데이터를 표현하는 방식은 컬럼(열)단위로 표현하는 방법과 로우(행)단위로 표현하는 방법이 있음 1. 컬럼단위 컬럼명을 딕셔너리의 key로 데이터는 딕셔너리의 values로 사용! from pandas import DataFrame data = { "종가":[157000,51300,68800,140000], "PER":[39.88,8.52,10.03,228.38], "PBR":[4.38,1.45,0.87,2.16] } index = ["NAVER", "삼성전자", "LG전자", "카카오"] df = DataFrame(data, index.. 공감수 0 댓글수 0 2023. 9. 20.
[Pandas] 판다스 시리즈(Series) 본 게시물은 유튜브 파이스탁님의 파이썬 판다스 기초 강의를 들으며 작성하였습니다 파이썬 및 Numpy 자료구조 자료구조 특징 예제 코드 리스트 순서 o 수정 o [1,2,3] 튜플 순서 o 수정 x (1,2,3) 딕셔너리 연관된 데이터 (key:value) 쌍을 저장 {'coffee':5000, 'bread':2000} NdArray 반복문 없이 데이터 배열에 대한 처리 선형 대수와 관련된 기능 제공 arr = np.array([1,2,3]) Pandas 기본 자료구조 자료구조 특징 Series Numpy를 기반으로 만들어진 1차원 데이터를 위한 자료구조 DataFrame Numpy를 기반으로 만들어진 2차원 데이터를 위한 자료구조 from pandas import Series, DataFrame # S.. 공감수 0 댓글수 0 2023. 9. 20.
[Pandas] Numpy 기초 본 게시물은 유튜브 파이스탁님의 파이썬 판다스 기초 강의를 들으며 작성하였습니다 Numpy : 행렬이나 다차원 배열 연산 import numpy as np 리스트와의 차이점? 리스트에서! data = [1,2,3,4] result = [] for i in data: result.append(i*10) print(result) #[10,20,30,40] 넘파이 사용! import numpy as np arr = np.array([1,2,3,4]) # 리스트 타입에서 ndarray타입으로 바뀜 # type(arr) = numpy.ndarray arr10 = arr*10 print(arr10) #[10 20 30 40] 리스트에다가 똑같이 10 곱하면 안 되나요? => 안됨 안에 값들이 10번 반복함!! 배열.. 공감수 0 댓글수 0 2023. 9. 19.
[Next] 대충프로젝트(4) - useRef없이 input창에 포커스 주기 ver1부터 계속 고민했던 오류인데 ver2만들면서 제ㅐㄷ로 해결이 됐다 하고자 하는 것은 추가하기 버튼을 눌렀을 때 새 form태그가 생기면 안에 있는 input에 자동 포커스를 주고자 하였다 기존 코드 const addRef = useRef(null) const [addState, setAddState] = useState(false) const onClickAdd = () => { setAddState(prev=>!prev) setTimeout(() => { addRef.current.focus() }, 100); } ... return ( {addState ? :null} ) 원래는 위와 같은 방식으로 add버튼을 눌렀을 때 새div가 생겨나고 그 안 input태그에 focus를 주는 방식을 사용.. 공감수 0 댓글수 2 2023. 5. 27.
[Next] 대충프로젝트(3) - useEffect 의존성 배열 제대로 사용하기 거의 한달동안 고치지 못한 오류를 드디어 고친 기념! 블로그 포스팅으로 남겨두려고 한다 코드에서 recoil을 사용하여 전역으로 사용하는 변수인 change가 있다. 이 change의 초기값은 false이며 어떤 값들이 post, delete, put되면 prev=>!prev로 설정해서 이전과 다른 값이 되도록 설정한다 useEffect는 이 값을 감지하여 데이터를 다시 가져오는데 여기서!!!! 데이터가 바로 가져와지지 않는 오류가 발생했었다 즉 change가 바뀌는 것을 useEffect가 알아차리지 못 하는 것... 이걸 거의 한달 동안 끙끙거리며 고치지 못했었다 처음 생각한 방법은 값이 변경될 때는 현 컴포넌트에서 하위 컴포넌트에서 변경되므로 그 밑으로 함수를 넘기고 이것을 상위 컴포넌트가 감지하는.. 공감수 0 댓글수 0 2023. 5. 12.
WEB 이 무엇인가 Web은 HTML, CSS, JavaScript와 같은 기술을 사용하여 웹 페이지, 웹 애플리케이션, 웹 서비스 등을 제작하고 제공할 수 있으며, 사용자들은 이를 이용하여 정보를 공유하고 소통하며, 다양한 서비스와 컨텐츠를 이용할 수 있습니다. Web은 인터넷의 핵심 기술 중 하나로, 현재는 거의 모든 분야에서 사용되고 있습니다. Web 기술의 발전으로 인해, 사용자 경험의 개선, 소셜 미디어, 전자상거래, 빅데이터, 클라우드 컴퓨팅 등 다양한 분야에서 혁신적인 변화가 이루어지고 있습니다. 공감수 0 댓글수 0 2023. 4. 1.
[NEXT] 당근마켓 (2-2) - 로그인 구현 시작하기 앞서 이 과정은 pscale이 연결되어야 가능함 따라서 콘솔에서 pscale connect - [프로젝트명]을 입력해주자 로그인 로직은 다음과 같은 과정을 거친다 1. email이나 phone을 백엔드에 넘기기 --있음?--> login, --없음?-->sign in 2. 토큰 생성 -- 랜덤숫자를 생성하여 유저와 연결 3. Twillo를 사용해 유저에게 토큰(랜덤숫자)를 문자 or 메일보내기 4. 토큰을 입력하여 백엔드로 보내고 일치하다면 로그인하기 1️⃣ 로그인 화면에서 DB에 유저정보 있는지 확인하기 위의 창 에서 유저정보를 로그인하거나 생성할 것이다. email이나 phone 정보를 입력했을 때 그 정보를 통해 유저가 있는지 확인하고 없다면 새로운 유저 정보를 만들어 줄 것이다. // /.. 공감수 0 댓글수 0 2023. 2. 10.
[NEXT]당근마켓(2-1) - React Hook Form을 이용하여 유저 정보를 백엔드에 넘기기 1️⃣ useForm 사용하여 데이터 생성 pages/enter.tsx에 들어가서 useForm을 사용해주자 //pages/enter.tsx interface EnterForm { email?: string; phone?: string; } ... const [submitting, setSubmitting] = useState(false); const {register, handleSubmit, reset} = useForm(); ... const onEmailClick = () => { reset(); // email을 눌러서 데이터를 전송하고 또 phone을 눌러서 데이터를 전송하면 // 두 가지 데이터가 동시에 전송되므로 reset사용하여 하나만 전송시켜준다 setMethod("email") }; .. 공감수 0 댓글수 0 2023. 2. 9.
[NEXT]당근마켓(1) - Prisma를 이용한 Database 생성 백엔드 접근을 처음 해보지만.. 강의내용을 토대로 정리해보자 어려웡 ㅜㅜ Prisma란? nodejs, typesciprt의 ORM(Object Relational Mapping) js or ts와 데이터베이스 사이에 다리를 놓아주는 역할을 한다 (번역기라고 생각하면 됨) Prisma를 사용하기 위해서 먼저 Prisma에 DB가 어떻게 생겼는지 데이터의 모양을 설명해줘야 하는데 이 때 schema.prisma를 사용한다. Prisma가 타입에 관한 정보를 알고 있으면 client를 생성해 줄 수 있는데client를 이용하면 TS로 DB와 직접 상호작용 가능하다. Prisma Studio : Visual Database Browser, DB를 위한 관리자 패널같은 것. 설치방법 npm install pri.. 공감수 1 댓글수 0 2023. 2. 8.
[Next] 대충프로젝트(2) - 캘린더 만들기 원래는 npm 관련 모듈을 사용하려고 했으나... css적용하기도 까다롭기도 해서 그냥 내가 만들려고 한다 도전! ✳️기본 달력 형태 만들기 일단 과정은 다음과 같다 1. 오늘이 속하는 달의 첫날은 1년 52주 중 몇번째 주? 2. 오늘이 속하는 달의 마지막 날은 1년 52주 중 몇번째 주? 3. 첫 주부터 마지막 주를 +1 씩 돌아가며 날짜를 7일씩 달력에 뿌린다 moment 라이브러리를 사용해줄것이다. const [date, setDate] = useState(moment()); const today = date.clone().format("YYYY-MM-DD") // 오늘 날짜 미리 저장 builddCalendar함수로 달력이 출력될 때 필요한 array들을 관리해준다. const buildCale.. 공감수 0 댓글수 0 2023. 2. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.