참치코더의 꿈 메모장

Next.js 13부터 도입된 App Router는 기존 pages 라우터와 달리 폴더 구조 기반 라우팅 레이아웃 개념을 핵심으로 한다. App Router 기본 구조 App Router는 app/ 디렉토리를 기준으로 동작한다. app/ layout.tsx : 전역 레이아웃 page.tsx : 루트 페이지 (/) globals.css about/ page.tsx 규칙- page.tsx : 실제 페이지이다.- layout.tsx : 해당 경로 이하에 적용되는 레이아웃이다.- 폴더 이름 : URL 경로를 나타낸다. 기본 페이지 라우팅 루트 페이지 (/) app/page.tsx export default function Home() { return Home Page} 접속 URL : http://..

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647@Controller@RequestMapping("/basic")public class BasicController { @GetMapping("text-basic") public String textBasic(Model model){ model.addAttribute("data", "Hello Spring!"); return "basic/text-basic"; } @GetMapping("text-unescaped") public String textUnescaped(Model model){ ..

이전에 했던 강아지 산책 서비스의 정리본 입니다.약 2달 전에 진행했던 프로젝트이고, ReadMe 뿐만 아니라 블로그에 정리하는 것도 중요할것 같아 깃에 있던 내용을 정리해재등록하게 되었습니다...! 배포 주소Git(프론트 엔드) : https://github.com/shincharl/Dog_Go_FrontendGit(백엔드) https://github.com/shincharl/Dog_Go_Backend깃 내부에 연동 주소가 있습니다!! GitHub - shincharl/Dog_Go_Backend: 강아지 산책 서비스 업로드용입니다. (백엔드)강아지 산책 서비스 업로드용입니다. (백엔드). Contribute to shincharl/Dog_Go_Backend development by creating ..

25.12.23일 프로젝트 완료 3일차 까지 개발을 완료하고 이녀석~! 개발을 안하는구나.... 라고 생각하실수 있겠습니다. ㅎㅎ.. 약 12월 1일 부터 23일까지일차별로 개발 진행상황을 정리하려고 했지만, 워낙에 개발이란게 생각과 방향성이 그때그때 다르고, 한번 개발에 들어가면하루를 온전히 다 쓰기 때문에 블로그에 작성하려고 시간을 보면 항상 새벽 3~4시 였습니다...;; 그럴바에는 깃에 commit 하면서 효율을 높여 빠르게 끝내고 한번에 정리하는 것이 옳다고 생각해 이렇게 최종 마무리하고 글을 작성하게 되었습니다. 그럼 어떻게 개발이 진행이 되었는지 설명하겠습니다. ^^ https://github.com/shincharl/homeSchools GitHub - shincharl/homeSc..

함수 타입 TypeScript에서 함수 타입은 함수가 입력으로 받는 매개변수와 반환값의 타입을 명시하는 것이다. ex)function add(a: number, b: number): number{ return a + b;} 함수 타입 선언 방법 1. 함수 선언 시 타입 명시 function greet(name: string): string { return `Hello, ${name}`;} - 매개변수 타입과 반환값 타입을 바로 함수에 붙인다. 2. 변수에 함수 타입 지정 let add: (x: number, y: number) => number; add = (a, b) => a + b; - 변수에 이 타입을 지정하면, 타입에 맞는 함수만 할당 가능하다.- JS의 콜백 함수 타입을 지정할 때 유..

useCallback( ) React에서 useCallback은 함수를 메모이제이션 하는 훅이다.불필요하게 새로운 함수가 계속 만들어지는 것을 방지하기 위해 사용한다. const memoizedFunction = useCallback(() => {}, [ ]); - 첫 번째 인자 : 메모이제이션할 함수- 두 번째 인자 : 의존성 배열- 배열 안의 값이 바뀔 때만 새로운 함수를 생성한다.- 배열 안 값이 바뀌지 않으면 이전에 생성한 함수를 재사용한다. function Counter() { const [count, setCount] = useState(0); const handleClick = () => { console.log("Clicked!"); }; return Click me;..

25.12.01프로젝트 3일차 Socket.io를 이용해서 웹 서버랑 메일을 주고받는 통신은 어느정도 끝냈고, SpringSecurity를 이용하여 백단을 만들고 있는데...컨트롤러를 만들다가 어떤 기능을 줘야 할까? 하는 생각에 다시 프론트 단으로 돌아왔다. 웹 화상 통신을 하려면 일단 로컬에서 카메라 등 하드웨어를 제어를 해야하는데 이러한 방법을 몰라서 책을 보며 열심히 한번 만들어 보았다. 일단 기본적인 조작감을익힌 후 사용자 끼리 통신하는 peer-to-peer 를 사용하며 데이터를 본격적으로 보낼 예정이다.(이것도 공부를 해야한다.... 화이팅!) 1) 가지고 있는 카메라가 없기에 OBS Studio로 가상 카메라 코덱을 설치한후 해당 카메라 정보를 이용하는 것으로 목표로 삼았다. 2) 기본적..

여러 형태로 구성된 타입을 하나의 큰 유니언 타입으로 묶되, 내부적으로 구분을 통해 정확하게 좁히는 패턴을 말한다. 서로소 유니언의 특징 1. 공통된 식별자 키가 있다.2. 각 타입은 그 식별자에 서로 다른 값을 가지며 여러 타입이 유니언으로 묶여 있다.3. switch문에서 자동으로 타입을 좁힌다.4. 특정 키를 검사하는 순간 타입을 정확하게 추론한다.5. 조건문 기반 Narrowing이 매우 직관적이다.6. 실수 발생 가능성이 적으며 컴파일러의 보호를 받는다. type Shape = {kind: "circle"; radius: number} | {kind: "square"; size: number} | {kind: "tri..