티스토리

강원도지사

검색하기

블로그 홈

강원도지사

kangwonpark27.tistory.com/m

하루하루를 소중하게 살고 싶습니다

구독자: 0

방명록 방문하기

주요 글 목록

supabase,drizzle,Auth.js를 사용해서 todo 프로젝트를 해봅시다 https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.comhttps://orm.drizzle.team/ Drizzle ORM - next gen TypeScript ORM.Drizzle ORM is a lightweight and performant TypeScript ORM with developer experience in mind.o.. 공감수 2 댓글수 1 2025. 4. 3.
React Query를 공부해봅시다 이 글의 코드를 이해하려면 이전 글을 읽는 것을 추천드립니다. https://kangwonpark27.tistory.com/67 useImperativeHandle | createPortal | forwardRef | Serveraction | middleWare에 대해 공부해봅시다useImperativeHandleuseImperativeHandle은 React에서 부모 컴포넌트가 자식 컴포넌트의 특정 메서드나 속성을 직접 제어할 수 있도록 도와주는 Hook이다. 보통 forwardRef와 함께 사용하며, ref를 통해 컴포넌트kangwonpark27.tistory.com ReactQuery는 아래의 명령어로 설치가 가능하다yarn add @tanstack/react-queryyarn add @tan.. 공감수 0 댓글수 0 2025. 3. 20.
useImperativeHandle | createPortal | forwardRef | Serveraction | middleWare에 대해 공부해봅시다 useImperativeHandleuseImperativeHandle은 React에서 부모 컴포넌트가 자식 컴포넌트의 특정 메서드나 속성을 직접 제어할 수 있도록 도와주는 Hook이다. 보통 forwardRef와 함께 사용하며, ref를 통해 컴포넌트의 특정 기능만 노출하도록 할 수 있다. 일반적으로 React에서 부모 컴포넌트가 자식 컴포넌트의 내부 동작을 직접 제어하는 것은 권장되지 않는다. 하지만 특정 상황에서는 필요할 수 있다. 예를 들어, input 요소의 focus 메서드를 부모에서 호출하거나, 특정 컴포넌트의 메서드를 외부에서 실행할 필요가 있을 때 useImperativeHandle을 사용할 수 있다. 이 Hook은 forwardRef와 함께 사용되며, useImperativeHandle(.. 공감수 1 댓글수 0 2025. 3. 17.
카카오맵 API 사용 중 Cannot read properties of undefined (reading 'maps') 오류 해결! 카카오맵 쓰려다가 이거 때문에 정말 애를 먹었다. 검색도 아래처럼 엄청 많이 하고 ㅎㅎ.. 해결하기 위해 여러가지를 시도해보았다 첫번째. 카카오 문서 그대로 따라하기 처음에 카카오맵 연결할때는 claude(생성형 AI)에게 짜달라고 했는데 너무 미사여구를 많이 붙인 코드를 줘서 공식문서를 보고 일단 기본적인 거만 따라했다.(처음에는 바로 따라하다가 const로 변수 만들고 이러길래 바로 공식문서로 이동함) https://apis.map.kakao.com/web/guide/#ready 두번째. index.html에 api키 넣어 코드 짜기 위에서 말했듯 claude는 변수로 하길래 이게 맞나? 했는데 아니었구요.. 아래 벨로그보면서 따라했더니 됐습니다 + 'kakao' is not undefi.. 공감수 0 댓글수 0 2024. 12. 14.
The requested module does not provide an export named 해결법 코드를 작성하다가The requested module '/src/components/header/index.jsx' does not provide an export named 'Header' 이와 같은 오류가 뜨길래 2가지 방법을 시도해봤다. 첫번째로는 이 블로그를 참고해서 하다가 안되길래 https://velog.io/@ddaa111/export-default-%EB%AA%A8%EB%93%88-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0-%EC%97%90%EB%9F%AC export default 모듈 불러오기 에러1. 배경 1.1 개발 환경 Vite React JavaScript 1.2 문제 상황 components 폴더 하위에 3개의 컴포넌트 생성 후 index.js에 3개의 .. 공감수 1 댓글수 0 2024. 12. 12.
REST API의 주요 HTTP 메소드들의 차이점 GET리소스를 조회/읽기만 하는 작업데이터를 변경하지 않음 (읽기 전용)URL에 데이터가 노출됨캐시 가능 예) 게시글 목록 조회, 특정 사용자 정보 조회POST새로운 리소스 생성서버에 데이터를 제출요청 본문에 데이터를 담아 전송멱등성이 없음 (같은 요청을 여러번 하면 여러개가 생성됨) 예) 새 게시글 작성, 회원가입PUT리소스를 수정하거나 없으면 생성전체 리소스를 교체/업데이트멱등성이 있음 (같은 요청을 여러번 해도 결과가 동일) 예) 게시글 전체 내용 수정PATCH리소스의 일부분만 수정PUT과 달리 일부 필드만 업데이트 가능멱등성이 없을 수 있음 예) 게시글의 제목만 수정, 사용자의 이메일만 변경 공감수 0 댓글수 0 2024. 11. 19.
UML 다이어그램에 대해 알아보자(객체, 와이어프레임) UML 다이어그램이란?UML 다이어그램은 프로그램을 만들기 전에 설계도를 그리는 표준화된 방법입니다. 마치 건축가가 건물을 짓기 전에 설계도를 그리는 것처럼, 개발자도 프로그램의 설계도를 그립니다. 오늘 알아볼 다이어그램은 객체와 와이어프레임입니다. 객체- 프로그램의 구조를 보여주는 가장 기본적인 다이어그램- 각 요소들의 특징과 관계를 표현합니다 예시 사진&코드@startumlobject Londonobject Washingtonobject Berlinobject NewYorkmap CapitalCity { UK *-> London USA *--> Washington Germany *---> Berlin}NewYork --> CapitalCity::USA@enduml와이어프레임- 웹사이트나 앱의 화면 .. 공감수 0 댓글수 0 2024. 11. 7.
Next.js에 대해 알아보자 #2 포스팅 미리 보기metadata로 웹사이트 title 바꾸는 법dummyjson을 활용해보기신기술 suspense 사용해보기(feat. 동적라우팅)next에서 로딩 화면 간편하게 만들기 아래의 설명보다 좀 더 자세한 설명을 원한다면 공식문서를 참고하는 것이 좋다! metadata로 웹사이트 title 바꾸는 법 본격적인 내용에 들어가기에 앞서 아주 간단하게 몸풀기하고 들어가도록 하겠다. 몸풀기로 준비한 것은 metadata라는 것으로 웹사이트 title을 바꾸는 법이다. //layout.tsx//정적인 페이지 사용시 쓸 수 있는 코드export const metadata = { title: 'Thank you next!', description: '넥스트야 고마워',} 나는 layouy.tsx안.. 공감수 1 댓글수 2 2024. 9. 26.
tailwindcss에 대해 파헤쳐보자 Tailwindcss에 대해 이야기는 너무나 많이 들었지만 제대로 배워보는 것은 이번이 처음이었기에 정리를 해보겠다. Tailwindcss가 뭐예요?테일윈드를 이해하기 위해서는 일단 중요한 개념 중 하나인 Utility-First Fundamentals를 이해해야한다. 이 개념은 제한된 기본 유틸리티 집합으로 복잡한 구성요소를 구축하는 것이라 해석할 수 있다. 위의 사진과 같이 Tailwindcss에는 제한된 기본 유틸리티를 제공한다. 따라서 제한된 기본 유틸리티를 사용해서 스타일링을 하는 것이 테일윈드의 핵심이라고 볼 수 있다. 보통 CSS 코드를 작성하면 이러한 모습으로 작성하게 될텐데 만약 CSS 대신 Tailwindcss를 쓴다면 아래 코드와 비슷한 짜임새가 나올 것 .. 공감수 4 댓글수 2 2024. 9. 11.
Next.js에 대해 알아보자 Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 번들링, 컴파일 등과 같이 리액트에 필요한 도구를 추상화하고 자동으로 구성한다. 리액트에는 없는 서버 사이드 렌더링, 정적 사이트 생성, 증분 정적 재생성과 같은 다양하고 풍부한 기능을 제공하여 동적이며 빠른 리액트 어플리케이션을 구축하는 데 도움을 준다. 아래의 내용을 좀 더 자세하게 알고싶다면 공식문서를 참고해보도록 하자 자동설치npx create-next-app@latest //자동 설치수동설치npm install next@latest react@latest react-dom@latest//수동 설치package.json 파일에 접속하여 "scripts": { "dev": "next dev", "build": .. 공감수 0 댓글수 0 2024. 9. 5.
리액트에서의 Context API와 Redux 비교 Context API:1. React에 이미 들어있는 기능이다. 따로 설치할 필요가 없다.2. 여러 컴포넌트에서 같은 데이터를 쓸 때 유용하다. 마치 큰 그릇에 데이터를 담아두고 필요한 컴포넌트가 꺼내 쓰는 것과 비슷하다.3. 간단한 전역 상태 관리에 좋다. 예를 들어, 로그인한 사용자 정보나 테마 설정 같은 것들을 관리하기에 적합하다.4. 사용하기 쉽지만, 데이터가 자주 바뀌는 경우엔 성능이 느려질 수 있다.Redux:1. 별도로 설치해야 하는 라이브러리다. React 밖에서도 쓸 수 있다.2. 복잡한 데이터를 다루는 데 더 적합하다. 여러 가지 데이터가 서로 연관되어 있고 자주 바뀌는 경우에 유용하다.3. 개발할 때 도움되는 도구들이 많다. 예를 들어, 데이터가 어떻게 변하는지 쉽게 볼 수 있는 도구.. 공감수 0 댓글수 0 2024. 6. 23.
리액트에서 Redux를 사용하는 이유 및 Redux의 단점 Redux를 사용하는 이유:1. 복잡한 상태 관리가 쉬워진다. 여러 페이지나 부품(컴포넌트)에서 같이 사용하는 정보를 한 곳에서 관리할 수 있어 편리하다.2. 상태 변화를 예측하기 쉽다. Redux는 정해진 규칙에 따라 상태를 변경하므로, 어떤 변화가 일어날지 미리 알 수 있다.3. 문제 해결이 쉽다. Redux에서 제공하는 개발 도구를 사용하면 상태가 어떻게 변했는지 쉽게 확인할 수 있어 오류를 빨리 찾을 수 있다.4. 다양한 기능 추가가 가능하다. Redux는 미들웨어라는 기능을 통해 비동기 작업이나 로그 기록 같은 추가 기능을 쉽게 넣을 수 있다.Redux의 단점:1. 새로운 개념을 배워야 한다. Redux를 사용하려면 '액션', '리듀서', '스토어' 같은 새로운 용어와 개념을 이해해야 한다.2... 공감수 0 댓글수 0 2024. 6. 23.
리액트의 비동기 처리 .목차비동기 처리의 개념JS에서 비동기작업을 다루는 방법 세가지Promise (객체)Promise 객체란Promise 상태 3가지Promise 사용 문법과 기본예제4. Asysnc/await (키워드)Asysnc/await 의 역할Async/await의 기본 문법 및 기본 예제 비동기 처리의 개념동기(synchronous)는 요청과 응답이 동시에 이루어진다는 것을 의미한다. 그러나 각 작업의 처리 속도가 다를 수 있기에, 앞선 요청을 모두 처리할 때까지 기다려야 하는 동기 방식 대신 비동기(asynchronous) 방식이 필요하다. 비동기는 요청을 기다리지 않고 그 동안 다른 일을 처리할 수 있게 해준다. 더 자세히 말하자면, 요청한 내용에 대해 나중에 응답하겠다는 약속(Promise)을 해놓고 그 동안.. 공감수 0 댓글수 0 2024. 6. 3.
리액트에 대해서 알아보자! 1. 리액트의 기초1. 리액트의 특징리액트(React)는 FaceBook에서 만든 언어이고, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 리액트는 아래와 같은 특징이 있다.컴포넌트 기반: 컴포넌트라는 재사용 가능한 코드블럭을 사용하여 UI를 구축합니다. 컴포넌트로 인해 코드를 모듈화하고 재사용성을 높이며, 유지 보수를 용이하게 할 수 있다.가상 DOM: 빠른 렌더링을 위해 실제 DOM과 별도의 가상 DOM을 사용하고, 변경사항을 효율적으로 감지해 최소한의 업데이트를 실제 DOM에 적용하여 성능을 향상시킨다.단방향 데이터 흐름 : 데이터는 항상 부모 컴포넌트에서 자식 컴포넌트로만 흐른다. 이러한 단방향 데이터 흐름 아키텍처는 데이터 흐름을 추적하고 예측하기 쉽게하여 코드를 유지보수하.. 공감수 0 댓글수 0 2024. 5. 2.
그냥 알고 싶었던 백엔드 지식(토큰, 세션, 쿠키, jsp) 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 10. 15.
IntelliJ 인텔리제이 단축키(윈도우) Intelij인텔리제이 단축키 alt + 1 = 코드 창 숨기기, 펼치기 alt + insert = src에서 새로운 파일 만듦 ctrl + shift + f12 = 코드창만 보기 ctrl + / = 주석달기, 취소 ctrl + shift + / = */ 형식으로 주석달기 ctrl + shift + 상 or 하 방향키 = 해당하는 코드를 위 아래로 이동시킬 수 있음 ctrl + d = 복사 ctrl + x = 줄 삭제(잘라내기) ctrl + f = 찾기 +@ enter = 다음 단어, shift + enter = 이전 단어로 이동 ctrl + shift + f = 모든 파일에서 찾기 shift+shift = 인텔리제이의 모든 기능을 보기(정확하지 않음) alt + space = 패키지 임포트 (impor.. 공감수 0 댓글수 0 2023. 9. 26.
폼이란? 사용자로부터 데이터를 입력받아 서버로 전달할 때 사용된다 서버에서는 데이터를 처리하여 실행 결과를 사용자에게 전달한다 텍스트 상자, 버튼 같은 형태의 폼을 만드는 데는 HTML사용(프론트엔드) 데이터를 처리하는 데는 서버 프로그래밍을 이용(백엔드) form 태그 폼을 만든다 action : 데이터를 처리할 서버 상의 스크립트 파일주소 method : 입력받은 데이터를 서버에 전달할 방식 지정(get|post) get:주소에 데이터를 추가하여 전달하는 방식, 데이터가 주소 입력창에 그대로 드러나며, 전송 데이터 크기가 제한적이다(4,096byte) post:데이터를 별도로 첨부하여 전달하는 방식, 데이터가 드러나지 않고 데이터 크기의 제한이 없다. 보안 및 활용성이 좋다. input 태그 폼에 입력하는 칸.. 공감수 0 댓글수 0 2023. 4. 12.
분할태그 웹 페이지는 레이아웃을 구성하기 위해 공간을 분할하는데, 공간 분할 태그를 사용하면 레이아웃을 자유롭게 구성할 수 있다. div태그 div는 분할을 뜻한다 HTML요소를 논리적인 섹션으로 분할하여 스타일을 지정할 때 사용한다. 태그를 사용하여 공간을 분할하면 한 줄을 전부 차지 div는 블록 태그입니다. h3은 블록태그입니다. p는 블록태그입니다. span태그 텍스트를 분할하여 일부 텍스트에 스타일 속성을 지정할 때 사용한다. 텍스트 크기만큼 공간을 차지한다 //기본형식 내용 ////////// span태그는 인라인 태그 링크태그는 인라인 태그 q태그는 인라인 태그 블록태그와 인라인태그 블록 레벨 요소 : 내용을 블록으로 묶어서 처리하며 한 줄을 전부 차지, 너비(width)와 높이(height)를 가질.. 공감수 0 댓글수 0 2023. 4. 12.
HTML에서 이미지와 미디어를 넣고싶다면 HTML5에서는 웹 브라우저 안에서 멀티미디어(이미지,오디오,비디오)를 직접 재생이 가능하다 (꺽쇠기호 는 아쉽게도 쓰지 못했다. 이점 감안해 주시길) 이미지 태그 img img태그를 사용하여 웹페이지에 사진, 그림 등 이미지를 넣을 수 있다. src : 이미지 파일의 경로를 지정함 alt : 대체 텍스트를 지정함 width, height : 이미지의 너비와 높이를 지정함 오디오 태그 audio audio태그를 통해 웹 페이지에 오디오를 삽입 audio scr="이미지 주소" alt="대체문자열" controls video video태그를 통해 웹 페이지에 비디오 삽입 태그를 사용하면 미디어 파일을 여러 가지 형식으로 제공할 수 있다. 공감수 0 댓글수 0 2023. 4. 12.
HTML으로 표 작성하기 표와 관련된 태그 표를 작성하기 위해서는 태그를 사용해야한다. 표 작성 태그 : 표 제목 작성 : 행을 지정: 열을 지정:,(제목행) 표의 행이나 열을 합치고 싶다면? 행을 합칠때 : rowspan, colspan(세로로 합침) 내용 열을 합칠 떄 : colspan (가로로 합침) 내용 공감수 0 댓글수 1 2023. 4. 12.
비주얼 스튜디오에서 scanf오류가 났을때! 비주얼 스튜디오에서 scanf관련해서 오류가 뜰때는! scanf_s 로 scanf를 바꿔주거나 #define _CRT_SECURE_NO_WARNINGS 을 제일 위에 입력해놓으면 된다. 하지만 필자는 #define _CRT_SECURE_NO_WARNINGS는 적용이 잘 되지 않아서 scanf_s를 쓰는편이다.. 그러나 scanf_s는 다른 컴파일러나 프로그램에서는 쓸 수 없는 코드이다! 다른 프로그램으로 옮겨 코드를 작성할때에는 scanf_s를 scanf로 꼬옥 바꿔주자 공감수 0 댓글수 0 2023. 4. 4.
git 기본 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 3. 17.
C언어 기본들 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 3. 17.
HTML 기초 2일차 -2(리스트 태그) 이번에는 리스트태그이다. 번호 없는 리스트 [ul, /ul] [li, /li] (Unordered list) 태그 안에 태그를 사용하여 각 항목을 표시함 순서가 없는 목록은 각 항목 앞에 작은 원이나 사각형등 불릿(bullet)이 붙는다 [예시] 아메리카노 카페라떼 핫초코 차 녹차 홍차 자스민차 [질문해야할 것] 사실 여기에서 빠뜨린 거 한가지는 '꽉찬 동그라미와 안이 텅 빈 동그라미를 어떻게 구분하여 코딩하나?' 인데 선생님께 질문을 안했다... 다음 시간에 질문해야되겠다.(내 예상엔 들여쓰기 차이인듯) 번호가 있는 리스트 [ol, /ol] [li, /li] : Ordered list ol태그는 순서가 있는 목록을 만들 때 사용된다. ol 태그 안에 있는 li태그를 사용하면 각 항목을 표시하고 각 항목.. 공감수 0 댓글수 1 2023. 3. 10.
HTML 기초 2일차 -1(텍스트 태그) 텍스트 서식 태그 !!!주의사항!!! 원래라면 꺽쇠기호를 이렇게 사용해야하나 티스토리에서 보여지지 않는 관계로 꺽쇠기호를 생략하였다. 굵은효과 b, /b태그 단순히 굵게 표현 strong, /strong 태그 :중요한 의미를 표현하며 굵게 표현됨 이탤릭체 표현 i, /i태그 단순한 이탤릭체로 표현 em, /em 태그 강조 의미를 포함한 태그 인용 표현 q, /q태그 인용한 내용을 표시 줄 바꿈없이 사용, 따옴표를 붙인다 blockquote, /blockquote 태그 줄을 바꾸고 인용 내용을 안으로 들여 써서 구별한다, 와 다르게 따옴표를 붙이지 않는다. 하이라이팅 mark, /mark태그 텍스트에 하이라이팅 효과를 준다 삭제효과 del, /del 가로줄을 만들어 지운 것과 같은 효과 위첨자와 아래첨자 .. 공감수 0 댓글수 0 2023. 3. 9.
HTML 기초 첫째날 틀린부분이 많을 수도 있다 그리고 정리가 잘 안되어있음 웹기초 태그 1.나 등을 끝맺을때에는 /와 함께 끝맺는다 예시 2.은 수평선을 만듦 3.~ h6으로 갈수록 얇아짐 4.사이 글자 입력가능 5. 줄바꿈, 따로 끝맺기 없음 6.글자// 7. 공백//제목 //수평선 공백//내용 공감수 0 댓글수 0 2023. 3. 7.

문의안내

티스토리
로그인
고객센터

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