티스토리는 왜 마크다운 문법이 잘 안먹을까... 원본은 아래 링크에 있음 https://iodized-pond-201.notion.site/JWT-e273e7ea07f743da856ceea1adfc39fd?pvs=4 클릭! JWT Json Web Token 등장 배경 기존 세션 기반 인증 방식 stateful (클라이언트, 서버의 state를 (서버에) 저장) 실제 인증 정보는 서버(세션)에 저장하고, 클라이언트에게 세션의 id만 전달하는 방식 쿠키로 전달, 해당 session-id에 해당하는 인증정보가 존재하면 인증된 사용자로 판단함. 단점 세션이 많아질수록 매 요청시 해당 세션을 찾아야하므로 서버 부담이 증가함. 다중 서버 환경에서 모든 서버가 동일한 세션을 유지하기 위해 별도의 조치 필요 유연한 확..
new Date() 에 들어가는 날짜 형식은 브라우저마다 달라서 크로스브라우징 이슈가 있을 수 있다. 아래는 https://string.tistory.com/32 에서 가져온, 각 형식별 브라우저 지원 여부이다. // yyyy-mm-dd var a = new Date("2021-07-06"); console.log(a); // CHROME - Tue Jul 06 2021 09:00:00 GMT+0900 (대한민국 표준시) // SAFARI - Tue Jul 06 2021 09:00:00 GMT+0900 (KST) // IE11 - Tue Jul 06 2021 09:00:00 GMT+0900 (대한민국 표준시) // yyyy-mm-dd hh:mm:ss var b = new Date("2021-07-06 1..
맥 : cmd + , 윈도우 : ctrl + , 위 검색에서 include languages 검색하면 바로 나옴. 위 화면이 나오면 위와같이 javascript javascriptreact typescript typescriptreact 입력
맥에서만 작업을 하다가 windows를 사용할일이 있어 yarn을 사용하려는데 위와같은 오류가 발생했다. 윈도우에서 yarn 을 사용할때는 RemoteSigned를 허용해줘야 한다고 한다. https://learn.microsoft.com/ko-kr/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.2 Windows Powershell을 관리자 권한으로 실행해 준 뒤에, get-help Set-ExecutionPolicy 를 입력하고 Y를 누른뒤에, Set-ExecutionPolicy RemoteSigned 를 입력하고 마찬가지로 Y를 누른다. RemoteSigned 권한이어야 잘 설치가 ..
기존 프로젝트를 리팩토링 하기 전에, 각 파일들의 의존성이 어떻게 연결이 되어있는지 시각화를 하기 위해 방법을 찾아보았다. 특히 타입스크립트의 경우, dependency가 어떻게 되는지 시스템에서 정확하게 파악을 하고 있으므로 분명히 tool이 있을것이라고 확신하고 찾기 시작했다. 우선 기록을 위해 여기 적어두고, 필요한 부분만 남기기로. 지금까지 입력한 명령어 모음 sudo npm -g install madge 비번입력, 설치 brew install graphviz yarn add -D dependency-cruiser yarn depcruise --init ✔ Where do your source files live? … src ✔ Do your test files live in a separate ..
2023년 9월 18일 월요일 항해 이전의 삶 2023년 2월, 카페를 정리하고 새로운 길을 찾아보기로 했다. 2023년 3월, 내가 할수 있는 선택지 중에, 개발자가 '가능한 옵션'이라는 것에 놀랐고, 더 늦기 전에 이쪽으로 해보자고 결심했다. 대학교 3학년때 컴퓨터공학과를 부전공이든 복수전공이든 수업을 한번 들어볼까 망설이다가 막연한 두려움때문에 미루다가 졸업을 해버렸었는데, 이젠 더이상 선택을 미루면 안된다고 생각했다. 우선은 시작이 중요하다고 생각하고, 무작정 가장 재미있어보이는 flutter 강의를 들으면서 간단한 앱을 만들어보았다. 2023년 4월, 뭔가 좀더 체계적인 학습이 필요하다고 생각하고, 비전공자 출신 개발자 지인들에게 어떤 방향으로 시작하는게 좋을지 오랜만에 만나서 여러가지 질문을 ..
좋아요 기능 useMutate로 변경 useMutate 활용해서 리팩토링 서버측 API 변경이 어려운 경우, 프론트에서 API를 호출할때 반대값이 오면 error를 던져주는 방식으로 바꿔준 뒤, useMutation의 에러핸들링을 활용하는 방법으로 리팩토링을 진행할 예정입니다. 그렇게 할 경우 좀더 코드가 간결하고 직관적이게 되며, 추후 서버 요청을 보낼때 에러핸들링이 내장되더라도 빠르게 수정을 할 수 있게 됩니다. [5분소요]라우터 코드스플리팅(성능측정하기) 이미 다 만들어 놓음 상세페이지 masonry 라이브러리 제거, CSS로 구현 성능 매우 개선될 예정 CSS에서 요소 갯수에 따른 속성 적용하기 활용 : https://shubamba.tistory.com/45 PWA적용 가능은 함. 모든 리소스는..
iOS 댓글 모달창 스크롤시 배경도 같이 스크롤되는 문제 iOS에서 모달창으로 댓글창이 있을때, 배경이 함께 스크롤 되는 이슈 윈도우에서도 댓글을 끝까지 내리면 그 이후엔 배경이 스크롤 되는 이슈 ✔️ 해결방안 댓글창이 열렸을때 댓글창 이외의 모든 스크롤을 막는 방법 도입 iOS 댓글창 배경부분 스크롤 막는 기능 커스텀훅 구현 (useLockScroll.tsx) body에 overflow:hidden을 주어서 모든 스크롤이벤트를 막음. classname으로 구분된 객체를 지정하여 overflow:auto 를 주어서 스크롤을 허용 import { useEffect } from 'react'; /** * useLockScroll * @param 첫번째 인자값 : 스크롤 막을지 말지 결정하는 boolean 값..
깃허브 링크 https://github.com/DongneMashil/dongnemashil-fe/blob/main/src/hooks/useUpdateUserInfo.tsx [유저정보 불러오기 방법에 대한 고민을 팀원들과 공유하기 위해 slack에 작성한 글입니다.] [글 아래 부분에 변경된 내용을 반영했습니다] 지금 프사가 각각 늦게뜨는 가장 큰 이유는, 매번 API를 호출해서 서버 응답을 기다리고 있기 때문입니다. 두가지 방법이 있습니다. 리엑트 쿼리 + Recoil에 유저정보 모두 저장 + 필요한 곳에서 Recoil 유저정보 업데이트하는 훅 호출 (원래 고민했던 방법) - 장점 - Recoil으로 상태만 가져오면 끝이라 코드가 짧음(필요한 곳에만 hook으로 상태 업데이트) const {nickNa..
ios에서 100vh를 정상적으로 인식하지 못하는 문제가 발생함. 자바스크립트로 높이를 다시 계산하는 방법으로 IOS는 해결했으나 안드로이드 크롬에서 주소창이 숨겨진것 기준으로 vh가 잡혀버리는 문제 발생 두개가 서로 상반된 원인이라 해결하려면 사용자 디바이스에 따라 코드를 2개를 짜서 해야하는데, 이 부분이 반응형 웹을 구현하면서 자연스럽게 해결될것으로 예상되어서, 우선 심각한 ios문제만 수정하였습니다 . 우선 아래 코드를 타입스크립트 부분에 추가하고 const setVH = () => { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); }; window.addEvent..
서버 시간이랑 로컬 시간의 오차가 있어서 발생함. 20초까지는 방금전으로 표시하고, 모든 음수도 방금전으로 표시해서 해당 오류의 가능성을 줄여놓음. 아래는 해당 타입스크립트 함수 (커스텀훅으로 생성시 map에서 사용이 불가능해서 일반 함수로 생성해서 같이 사용함) const timeAgo = (timeString: string): string => { const now = new Date(); const utcTimeDate = new Date(timeString + 'Z'); //Z를 끝에 붙이면 UTC 시간으로 인식함 const secondsDiff = (now.getTime() - utcTimeDate.getTime()) / 1000; const minutesDiff = secondsDiff / 6..
iOS에 기본으로 들어가있는, 가장 끝까지 스크롤하는 경우 발생하는 바운싱 애니메이션으로 인해 발생하는 오류로, 이 부분을 예외처리 할 필요가 있음. css overflow-y:scroll 가 있는곳에 아래 코드를 넣어서 일단 해결 overscroll-behavior-y: none; //아이폰 바운싱 효과 막음 (편집됨) 결과적으로는 commonLayout으로 감싸준 부분을 없애면서 다시 수정할 예정임.
프로젝트에서 나도 마주했었고, 동료분(경원님)이 마주했었던 업로드가 단계적으로 안되는 문제. - 일반 파일 업로드시 정상적으로 전송됨 - 파일 수정후 바로 업로드시 파일명 없음+확장자명앞에 점이 없음 (png만 있음->사실상 확장자가 없음) - 그 이후 다시 수정시 파일 가져오는거 자체가 막혀버림. 원인: 파일 명 생성 단계에서 파일명이 계속 누락되어 단계적으로 파일명이 사라지고, 파일명이 없는 경우 put요청을 못받아서 나는 415오류 파일 업로드 파일이름이 점점 사라지는걸 볼 수 있다.
몇번 코드를 넣었다가 뺐다가 해보니, 이 코드로 수정했을때 바로 오류가 사라지고, 되돌리니 바로 다시 CORS오류가 발생한다. 며칠동안 테스트를 한 결과 해당 오류가 다시 발생되지 않아서 이 방법으로 해결이 된것으로 판단된다. (아래 내용은 제가 프로젝트 트러블슈팅에 작성했던 내용입니다!) 추정 원인 아마 원인은 aws-chrome간 캐싱 버그로 의심됩니다. 브라우저가 우리가 이미 본 이미지의 URL은 캐싱을 하고있고, 이 부분에서 브라우저가 캐싱된 리소스의 CORS헤더를 기억하고 있고, 우리가 새로운 요청을 보내도 이전 캐싱된 리소스를 사용하게 되어 문제가 발생하는걸로 보입니다. 위 사진으로 보면 오른쪽이 캐싱된 원본 요청이고, 가운데가 캐싱된걸 요청하는것인데, cors관련 헤더가 아에 없어진 채로 요..
이미지 썸네일 픽셀화 현상 큰 이미지를 object-fit:cover로 할 경우 크롬에서는(사파리는 그렇지 않다고 함) 이렇게 픽셀화가 되며 이미지가 자글자글하게 보이는 현상이 있음 //css width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 0.875rem; 아래는 img태그의 object-fit:cover를 하지 않고, div태그에 background-image:url 이렇게 넣고 //css width: 100%; aspect-ratio: 1/1; overflow: hidden; border-radius: 0.875rem; background-image: url(${(props) => props.$imgUrl}); background..
Compiled with problems: × ERROR in src/pages/CommonLoginPage/CommonLoginPage.tsx:2:18 TS2305: Module '"components/common"' has no exported member 'AuthNavButton'. 1 | import React, { useState } from 'react'; > 2 | import { Button, AuthNavButton } from 'components/common'; | ^^^^^^^^^^^^^ 3 | import { AuthInputBox, AuthLogoBox, AuthErrorMsg } from 'components/common'; 4 | import { CommonLayout } ..
지금 진행중인 프로젝트는 모바일 기반으로, 추후 데스크톱 버전을 기획하고는 있지만, 우선은 모바일 우선으로 개발하고, 그 화면을 데스크톱에서 자연스럽게 보여주기 위해 전체 레이아웃을 만드는 작업이 필요했다. 위 사진에 나오는 배경 색상도 모두 지정된 색상으로, 해당 페이지를 이라는 공통컴포넌트로 감싸주면 바뀌게 되어있다. 아래는 CommonLayout코드 (개발 과정이라 리팩토링은 필요하다) 더보기 import React, { useEffect } from 'react'; import { StLayoutBody, StLayoutOuter, StLayoutSection, StSlidingHeader, } from './CommonLayout.styles'; import { FloatingFooter } f..
관리 폴더 public 폴더 webpack에 의해 관리됨 PUBLIC_URL 환경변수를 통해 접근 폴더 접근가능 파일 못찾으면 컴파일에러 없이 파일 깨짐 src 폴더 webpack에 의해 관리됨 (import하여 사용가능) 파일 못찾으면 컴파일 에러 발생 import logo from "경로"; require로 불러오기 가능 추가 팁 VS code는 jsconfig.json로 에디터에 대한 설정 및 기타 javascript에 대한 설정을 조작가능 index.html 위치한 곳에 jsconfig.json 파일을 생성해준다. 아래와 같이 작성해주면 경로 입력시 src 경로를 기본디렉토리로 하여 찾아준다. { "rootDir": "src", "compilerOptions": { "baseUrl": "src",..
항해99를 시작하며 작성했던 지원서를 발견해서, 오랜만에 읽어보니 감회가 새로워서 여기 남겨두려 합니다. 올해 1월까지 저는 홍대에서 베이커리 카페를 운영했었습니다. 전공과 전혀 관련없는 분야였지만, 프랑스 유학까지 가서 제과를 공부하고, 매일 새벽부터 직원들과 함께 저녁까지 쉬지않고 일했습니다. 저는 홍대에서 순수미술을 전공했습니다. 3학년때 공군 전기보수 지원병으로 벙커에 전기 시설물을 고치는 일을 했고, 졸업과 동시에 카페를 창업하여 6년간 운영했습니다. 저는 어떤 것에 몰입을 하면, 결과물이 나올때 까지 밤을 새서 어떻게든 만들어 냈었습니다. 군대에서 생전 처음으로 세탁기를 분해할때도, 미대에서 아두이노로 로봇팔을 만들때도, 카페를 운영하며 내부 통신망을 보수하거나, 새로 깔때도, 카페 기계들을 ..
이상태에서 진행이 안된다. 혹시몰라 git을 업그레이드 해봤는데 (2.39.2->2.41.0) 역시나 안된다. 해결방법 git config --global http.postBuffer 157286400 // 버퍼 용량을 150MB로 늘리는건데, 큰 파일을 다루고 있지 않아서 패스 git gc // garbage collection 최종 선택 -> 해결방법 git gc 이렇게 하고 입력하니 거짓말처럼 해결. 아마 내부적으로 데이터 흐름이 꼬였거나, 뭔가 알수없는 문제가 있었던것 같음. - 해결된 이유? `git gc` 명령어는 Git의 가비지 컬렉션을 수행합니다. 이 명령어는 저장소를 최적화하고 불필요한 파일을 제거하여 저장소의 크기를 줄입니다. 특히 저장소가 큰 경우나 많은 브랜치와 태그, 오래된 객체 ..
vscode에서 git add, commit은 되는데 pull이나 push를 할 때 무한로딩 되었다. 해결: git pull 방식이 바뀌어서 git config pull.rebase false (merge) 후 git pull/push 해야 한다.
appear to have any style information associated with it. The document tree is shown below. AccessDenied Access Denied Q0VD4RZ9J91T64KN aHcYCUcGMNqbkWwNs15iqwTaNqFIalmBh2l9Ylw6XZqNYzMnIF+vUG8c55rF6S2CU6SUbhag9fk= 분명 메인페이지는 되는데 다른 페이지는 위와같은 메세지가 나오면서 접근이 안된다. 모든 권한 다 찾아봤는데 안되서, 결국 해결방법은 아래와 같다. cloudFront 에서 오류코드를 404뿐만 아니라 403도 처리를 해줘야한다.
IAM 사용자를 생성한뒤 IAM사용자로 로그인해서 시작함. 가비아에서 아무 도메인이나 하나 구매한 상태에서 시작함. 0. Route53 호스팅영역 생성 DNS관리 밑에 작은 호스팅영역 생성 클릭. 가비아에서 구매한 도메인을 입력하고 바로 생성. Route53은 후반부에 마저 설정해줄 예정이다. 1. S3 버킷 만들기 원하는 버킷 이름을 설정해준다. aws리전은 서울로 설정. ACL설정은 여기 올린 객체의 소유권을 지금 생성한 이용자로 할지, 아니면 다른 계정에서 업로드한 사람이 소유할지 옵션인데, 추후에 필요시 활성화해서 사용하자. 우린 정적 사이트를 호스팅하지만, CloudFront를 이용해서 호스팅하므로 아래와 같이 체크한다. 참고로 만들어진 버킷 속성에 있는 아래 옵션도, 우리는 cloudFront..
1. 기본 설정, Devtools, Options React Query의 설치 및 초기 설정 $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query const queryClient = new QueryClient() function App() { return ( // Provide the client to your App ) ========== function Todos() { // Access the client const queryClient = useQueryClient() ... React Query Devtools의 설치 및 활용 방법 $ npm i @tansta..
https://flatland.shop/ https://github.com/taehyunkim3/hhblog-team9-Front GitHub - taehyunkim3/hhblog-team9-Front Contribute to taehyunkim3/hhblog-team9-Front development by creating an account on GitHub. github.com React App flatland.shop trouble shooting [로그인, 회원가입 먹통] : 아이디 중복등으로 오류가 있는 경우, alert창으로 알려주고 새로고침하여 데이터를 reset시킴. [회원가입 어려움] : 회원가입에 필요한 폼을 줄이는 대신, 그 폼을 수월하게 작성하기 위해 최대한 많은 정보를 실시간으로 ..
악수(Handshake): 이는 클라이언트(예: 웹 브라우저)와 서버가 처음 만나 서로 인사를 나누는 과정을 의미합니다. 이 단계에서 양측은 서로 데이터를 주고받을 수 있는지, 어떤 방법으로 데이터를 주고받을 것인지를 확인합니다. 공개키와 대칭키: 여기에서 공개키 방식은 각 키가 다른 암호화 방식입니다. 공개키로 데이터를 암호화하면 비공개키(혹은 개인키)로만 복호화가 가능합니다. 그러나 이 방식은 컴퓨터 자원을 많이 사용합니다. 대신 대칭키 방식은 암호화와 복호화에 같은 키를 사용하므로 효율적이지만, 키를 안전하게 공유해야하는 문제가 있습니다. SSL의 방식: SSL은 이 두 방식의 장점을 결합합니다. 클라이언트와 서버는 처음에는 공개키 방식을 사용하여 안전하게 대칭키를 공유하고, 이후에는 대칭키를 사용..
window.location 객체는 브라우저 창의 현재 URL을 표현하며, 다양한 방법으로 사용자가 페이지를 이동하거나 URL 정보를 다루는 데 사용될 수 있습니다. window.location 객체는 주요한 여러 속성과 메서드를 가지고 있습니다. window.location.href : 전체 URL을 얻거나 설정하는 데 사용됩니다. 아래는 그 예시 ``` console.log(window.location.href); // 현재 페이지 URL을 출력 window.location.href = 'http://www.example.com'; // 페이지를 www.example.com으로 이동 ``` window.location.replace(URL) : 지정한 URL로 이동하되 브라우저의 히스토..
.env 파일은 환경 변수를 저장하는 데 사용되는 파일입니다. 여기에는 데이터베이스 연결 문자열, API 키, 암호 등과 같은 민감한 정보를 저장할 수 있습니다. 이 파일은 저장소에 커밋되지 않아야 하며, 각 개발자나 환경에 따라 달라질 수 있는 설정을 관리하는 데 유용합니다. .env 파일을 사용하면 코드가 서로 다른 환경에서 실행될 수 있게 되며, 그로 인해 개발, 테스트, 프로덕션 등에서 약간씩 다른 설정을 적용하는 것이 가능해집니다. CRA(Create React App)와 Vite에서 .env 파일을 사용하는 방법에는 약간의 차이가 있습니다. CRA(Create React App) CRA에서는 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다. 이러한 변수는 REACT_APP_ 접두사로 ..
