Studyyyyy

보통 이런식으로 대괄호 안에 이름을 넣고 페이지를 생성하면.../book/1, .../book/2 처럼 동적 경로의 페이지가 생성이 된다. 그런데 /book/123/234/345/645/568/123...이렇게 좀 더 범용적인 동적 페이지를 생성하고싶을 때 대괄호 안에 ...을 붙혀주면 된다. next js에서는 이렇게 설정돼있는 "모든 구간에 대응한다" 해서 "Catch-all segment(구간) " 라고 부른다고 한다.  +)그런데 만약 .../book 페이지로 간다면book 폴더 안에 index.tsx가 없기 때문에 404 에러가 뜬다.만약 index.tsx를 생성하지 않고 뒤에 query가 더 붙지 않는 페이지까지 범위를 허용하고싶다고 하면[...id]를 대괄호로 한번 더 감싸주면 된다.  이런..

도커 - 다양한 프로그램과 데이터를 각각 독립된 환경에 격리하는 기능을 제공하는 엔진 컨테이너 - 그 독립된 환경. 용량이 된다면 하나의 도커에 여러개를 만들 수 있다. 이미지 필요. 안에 운영체제 비슷한거 있음컨테이너를 따로 만드는 이유? :버전 관리 용이컨테이너의 생애주기 : 컨테이너 만들고 -> 실행하고 -> 종료하고 -> 폐기 윈도우, 맥에서 전부 구동은 되지만 내부적으로 리눅스 필요 서버 컴퓨터 위에 리눅스 위에 도커 위에 컨테이너들 Ubuntu(우분투) : 리눅스 배포본 (초보 추천)배포본은 크게 두가지 : 레드햇 계열, 데비안 계열WSL2 : Windows Subsystem for Linux 2. 윈도우에서 리눅스 소프트웨어를 실행하기 위한 기능. 윈도우 1903/1909 이후 버전에서 실행..

CSR (Client-Side Rendering)서버에서 미리 HTML을 생성하지 않고, 클라이언트의 브라우저에서 렌더링작동 방식 서버는 초기 HTML 파일과 JS 파일만 제공사용자의 브라우저는 JS파일을 받아 실행, 화면에 필요한 데이터를 서버에 요청해 페이지 구성장점필요한 부분만 새로 로딩하여 페이지 전환이 빠름 => 서버 부담 적음사용자와 상호작용이 많은 웹 어플리케이션에서 유리 => 인터랙티브한 사용자 경험단점HTML과 JS 파일을 모두 불러온 후 페이지가 렌더링되므로 초기 로딩이 길어짐 => 다운이 완료되기 전까지 화면에는 아무것도 나오지않는다.검색 엔진이 컨텐츠를 읽지 못해 SEO의 어려움React, Vue, Angular 등에서 사용하는 렌더링 방식SSR (Server-Side Renderi..

https://shape-coding.tistory.com/entry/TypeScript-ReactFC%EC%97%90-%EC%82%AC%EC%9A%A9%EC%97%90-%EB%8C%80%ED%95%B4-%EC%83%9D%EA%B0%81%ED%95%B4%EB%B3%B4%EA%B8%B0 [TypeScript] React.FC에 사용에 대해 생각해보기FC란? Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입입니다. 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입입니다. React.FC 사용 타shape-coding.tistory.com React.FC는 children 속성을 암시적으로 포함하고 기본 pro..

코드에 관한건 아니고, 프로젝트를 하면서 파일을 첨부하고 업로드 할 때 백엔드(파이썬) 에서 유효성 검사를 해주어 통과된 파일만 넘기는 부분이 있었다.들어보니, 백엔드에서 유효성 검사를 해주면 이미 파일이 업로드 된 채로 거부되기 때문에 서버에 손실이 가 프론트엔드에서 유효성검사를 먼저 해주고 업로드 전부터 막아주는것이 좋다고한다.대신 db에서 직접 조회해서 존재 여부를 판단해야하는 부분은 빼고 코드를 추가해줬다. 물론 유효성 규칙들은 파이썬 view 파일에 있던 코드를 그대로 챗gpt에 자바스크립트로 변경시켜 수정했다. ~~~유효성 검사는 백엔드가 해주더라도 프론트에서 먼저~~~

일단 배포는 완료됐다^0^ https://dbd-random-perks-kr.netlify.app/ 데바데 랜덤퍽KR dbd-random-perks-kr.netlify.app241020 수정아침 6시까지 배포하고 오류 없는것까지 확인하고잤는데 아침에 백엔드 친구가 오류떴다는 카톡을 보냈다.결국 toml 파일은 적용이 제대로 안되는건지 효과가 없었고, netlify.toml 파일은 삭제, _redirects 파일을 수정하여 고쳤다.고친건 _redirects 파일 하나뿐이 되었다. --------------------------------------------------------------------------------------------------------------------------------..

처음 렌더링을 하고, scrollHeight의 값과 clientHeight의 값을 비교하여 다음 데이터를 자동으로 불러올지 말지를 구현하는 일이 생겼다.그런데 자꾸 제대로 작동하지 않아서 확인해보니 scrollHeight과 clientHeight값이 둘다 20으로 뜨는것이다. clientHeight의 값이 더 커야 작동을 하는데 값이 저렇게 나오니 제대로 작동하지 않은것이다. gpt에게 물어본 결과, 초기 데이터 로딩 이후 DOM이 아직 완전히 렌더링되지 않아서일수 있다고 한다.제시해준 해결책은, setTimeout()을 이용해 DOM이 렌더링 될 시간을 준 후에 추가 데이터를 로드하도록 하는것이었다.checkAndFetchMoreData() // 기존에 그냥 함수를 호출했다면setTimeout(() =..

https://stackoverflow.com/questions/63480680/how-do-i-turn-off-text-formatting-on-save-in-visual-studio-code How do I turn off text formatting on save in visual studio code?I don't know why my code is auto formatted on save and for some reason changing the layout. I figured out this was due to auto format on save. How do I turn this off in Visual Studio Code?stackoverflow.com setting창에서 editor: ..