본문 바로가기

반응형

전체 글

(397)
[Vitest 설정] ~ 형식의 인수는 'UserConfigExport' 형식의 매개 변수에 할당될 수 없습니다. 발생 에러vite.config.ts 파일 내에서 vitest 설정 시 test 속성이 UserConfigExport  형식에 존재하지 않아서 타입에러가 발생하는 것을 확인 하였습니다. 해결방법이는 기본적인 vite.config.ts 파일에서 선언된 타입이 vitest 설정의 타입과 불일치하여 생기는 문제이므로, vite.config.ts 파일 상단에 ///   를 추가 해줍니다./// export default defineConfig({ plugins: [react()], test: { globals: true, environment: 'jsdom', setupFiles: ['./setup.js'], },}) 결과더 이상 타입 에러가 발생하지 않는 것을 확인하였습니다. 사실 http..
GPT를 활용한 매우 효과적이고 효율적인 학습법 들어가는 말오늘은 질문과 응답 방식을 활용한 학습법에 대해 이야기해볼까 합니다. 이 방법은 특히 새로운 개념을 배우거나 복잡한 내용을 이해할 때 아주 유용합니다. 저는 이 방식으로 처음 보는 개념을 이해하고 실제 상대에게 설명하기 까지 며칠 걸리지 않을 정도로 빠른 습득력을 얻을 수 있었기에, 이에 대한 방법을 공유해볼까 합니다1. 질문하기먼저, 자신이 이해하고 싶은 주제에 대해 질문을 만들어봅니다. 예를 들어, 저의 경우 도커에 대해 학습을 시도하기 위해 "도커는 무엇인가?"라는 큰 틀을 만들었습니다. 다만, 해당 질문 이전에 해당 지식에 대한 별도의 개별학습을 진행하는게 중요합니다. 해당 방식은 공부한 내용을 실제 이해하고 있는가를 테스트하고, 부족한 부분을 보완해서 빠른 시간 내에 남들에게 쉽게 설..
🔧 링크 저장소 해당 포스트는- 해당 포스트는 적재적소에 활용할 수 있는 링크를 저장하는 용도의 역할을 합니다. - 해당 포스트는 내용이 많이 추가되거나, 게시글을 최상단으로 끌어올릴 필요성이 있을 때는 최신 날짜를 기준으로 갱신됩니다. 기타 링크🔗https://developer.chrome.com/docs/devtools/network?hl=ko(브라우저 네트워크 도구 활용 가이드)개인 포스트 링크📕자료구조와 알고리즘 위키📕백엔드 위키 📕디자인 위키📕프론트엔드 개념 저장소
스프링 시큐리티는 복잡합니다. 다만, 공통된 인증 흐름은 존재합니다. 들어가는 말최근에 스프링부트 공부를 시작하면서, 큰 난간이었던 것들 중 하나는 스프링 시큐리티에 관한 것이었습니다. 아무리 내부적으로 추상화 및 캡슐화되어 사용자는 노출된 인터페이스를 기반으로 도구를 사용하면 된다고 해도, 스프링 시큐리티가 내부적으로 어떻게 사용자의 자격증명을 처리하는지 그 흐름을 이해하지 못하고는 제가 도구를 쓰는 것인지, 도구가 나를 쓰는 것인지 긴가민가할 때가 많았습니다. 따라서 오늘은 스프링 시큐리티가 내부적으로 어떤 흐름을 통해 동작하는지 간략하게 살펴보며, 앞으로 학습의 기틀을 단단히 다지는 시간을 가질까 합니다. 스프링 시큐리티?스프링 시큐리티는 스프링 기반 애플리케이션에서 인증(Authentication)과 인가(Authorization)를 처리하는 보안 프레임워크입니다...
최근 1달 간 자바를 공부하면서 알게된 사실( 자바스크립트 vs 자바) 들어가는 말최근에 Java를 공부하면서, 평소에는 이해하지 못했던 이론이나 개념들이 이래서 사용하는 거구나! 라며 홀로 뮤레카를 외친 경험을 하였습니다. 오늘은 이에 대해서 3가지만 간략하게 정리해보는 시간을 가져볼까 합니다( 서로 다른 언어이기 때문에 알게된 점은 많지만 그 중 몸소 와닿은 3가지만 정리합니다. ).    프로그래밍 언어는 서로 다른 철학과 목적을 가질 수 있습니다. Java와 JavaScript는 이름이 비슷하지만, 그 특성과 사용 사례는 매우 다릅니다. 특히 디자인 패턴, 자료구조, 알고리즘의 개념을 접근하는 방식에서 차이를 느낄 수 있는데, JavaScript에서는 이러한 개념들의 필요성을 크게 느끼지 못하다가, Java에서의 활용을 보며 그 중요성을 실감하게 되었습니다.  디자인..
[스프링 시큐리티] Refused to display 'http://localhost/' in a frame because it set 'X-Frame-Options' to 'deny' 에러 개선 문제 발단- 스프링 시큐리티에서는 기본적으로 X-Frame-Options 을 deny(해당 경로에 대한 모든 frame 삽입 차단)로 지정해두기 때문에, 데이터베이스 조작을 위한 인터페이스를 iframe 형식으로 렌더링 시 이를 차단하기 때문입니다. - 즉, 해당 문제를 개선하려면 해당 경로에 접속하는 경우에는(동일 경로에 한정하여서는) 렌더링되는 것을 허용하도록 스프링 시큐리티 구성 파일에서 설정해주면 됩니다. 코드 적용- 스프링 시큐리티 6.11 버전이상에서 적용- SecurityConfig 파일에 @Configuration@EnableWebSecuritypublic class SecurityConfig { @Bean public SecurityFilterChain filterChain(H..
[CSS] 반응형 레이아웃의 기본, 중단점( styled-componets 에서 중단점 적용 팁) 들어가는 말오늘은 반응형 레이아웃의 기본이 되는 중단점에 대해 알아보고, 실제 styled-components 에 적용하는 방법과 사용 팁에 대해 정리해볼까 합니다.중단점이란 뭘까요?CSS에서 중단점(breakpoints)은 반응형 웹 디자인에서 화면의 크기에 따라 스타일을 변경할 수 있게 하는 기준점을 말합니다. 다양한 화면 크기(모바일, 태블릿, 데스크탑)에 맞는 스타일을 적용하기 위해 사용됩니다. 최근에는 중단점을 모바일 우선으로 두고, 스타일을 적용하고 있다는데 이를 어떻게 적용하고 있는지 향후 예시를 통해 알아볼 것입니다. 중단점 사용 방법중단점은 주로 미디어 쿼리(media queries)를 통해 정의합니다. 특정 화면 너비 조건에 따라 스타일을 적용할 수 있도록 하는 것이 미디어 쿼리입니다...
잔소리 프로젝트 마무리 잔소리 프로젝트란?쟌소리 프로젝트는 구글 애드센스 API 를 기반으로 애드센스에서는 제공하지 않는 보고서 알림에 대한 불편함을 개선하기 위해 시도한 메일링 서비스를 만들어보고자 시도했던 프로젝트 입니다. 순전히 개인화된 프로젝트 였기에 실제 사용자를 받아볼 생각은 없는 방향으로 진행되었습니다(퀄리티 자체도 실제 서비스하기에는 부족했구요). 데스크톱  모바일 사용된 기술스택전반적으로 사용한 스택 부분에서는 NextJS14, PostgreSQL+ Prisma + GCP Cloud SQL 으로 개발하고, GCP Cloud Run  을 통해 도커 컨테이너 방식으로 배포하는 방향으로 갔습니다.  이번 프로젝트에서 시도해 보고자 했던 것해당 프로젝트는 순전히 스케줄링을 통해서 사용자가 등록한 보고서 옵션과 일정에 ..

반응형