YG - 96년생 , 강아지 있음, 개발자 희망

보투게더 팀 블로그에서 작성한 글을 가져왔습니다. 보투게더 사용성 개선하기 (3) - 이미지 클릭 시 이미지 자세히 보기 이미지가 작아서 확대해서 보고 싶은 마음이 들었습니다.다른 사이트에서 이미지를 누르면 보통 확대된 이미지가 나오는데요. 보투게더 사이트에서 사용자가 예상한 동작이 작동하지 않으면 velog.io 구현하게 된 계기 이미지가 작아서 확대해서 보고 싶은 마음이 들었습니다. 다른 사이트에서 이미지를 누르면 보통 확대된 이미지가 나오는데요. 보투게더 사이트에서 사용자가 예상한 동작이 작동하지 않으면 불편함을 느낄 것이라고 생각이 들었습니다. 원하는 동작 이미지를 누르면 이미지를 자세히 볼 수 있는 확대 창이 나온다. 구현 방법 웹 접근성을 위해서 dialog 태그로 구현했습니다 dialog를 ..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다. 보투게더 사용성 개선하기 (2) - 게시글, 댓글 작성 시 링크 첨부 게시글, 댓글의 경우에 링크 넣기 버튼을 눌른 후 \[ ] 사이에 사용자가 직접 괄호 사이에 링크를 넣고 저장 버튼을 눌러야 했습니다. 그러나 게시글이나 댓글 기능을 사용하면서 링크 첨부를 하 velog.io 문제점 게시글, 댓글의 경우에 링크 넣기 버튼을 누른 후 [[ ]] 사이에 사용자가 직접 괄호 사이에 링크를 넣고 저장 버튼을 눌러야 했습니다. 그러나 게시글이나 댓글 기능을 사용하면서 링크 첨부를 하는 방식이 불편하다고 느꼈습니다. 해결 방법 본문 링크 삽입 시 [[ ]] 을 붙여주고 있는데, 이걸 작성자에게 붙이도록 하지 않고 렌더링 시 http | https | www로 시작..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다. 보투게더 사용성 개선하기 (1) - 이미지 복사 붙여 넣기 업로드 게시글 작성 시 이미지를 올릴 때 너무 불편하다.이미지 업로드가 불편해서 이미지 업로드 기능을 잘 사용하지 않게 된다.다른 커뮤니티 게시글 작성처럼 이미지 복사 붙여 넣기로 이미지를 올 velog.io 문제점 게시글 작성 시 이미지를 올릴 때 너무 불편하다. 이미지 업로드가 불편해서 이미지 업로드 기능을 잘 사용하지 않게 된다. 해결 방법 다른 커뮤니티 게시글 작성처럼 이미지 복사 붙여 넣기로 이미지를 올릴 수 있으면 편하겠다는 생각이 들었다. 구현 방법 ClipboardEvent 이벤트를 이용하여 클립보드의 파일이 있는지 확인한다. 파일이 있다면 이미지 타입인지 또 한 번 확인한다. in..

에러가 나게 된 과정 MSW와 같이 사용하려는 목적으로 api/route.tsx를 통해 모킹 데이터를 내보내서 SSR(서버 사이드 렌더링)을 시도하였습니다. Error occurred prerendering page.라는 에러가 나오게 되었고, 많은 인터넷 검색을 통해 이유를 알게 되었습니다 이유 빌드 중에는 Next.js API 경로를 사용할 수 없습니다. 외부 url에서 데이터를 가져오십시오. 해결 방법 api/route.tsx를 통해 MSW와 같이 모킹 하여서 SSR을 할 수 없는 상황이었습니다. 그래서 외부 주소인 개발 서버의 api 주소를 통해 데이터를 가져와 보여주게 되었습니다 app/api/category/route.tsx import { MOCK_CATEGORY_LIST } from '@m..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다 사용자가 업로드 한 이미지 압축하여 서버로 보내기 (feat.Browser Image Compression, Upload Images Converter, 이미지 압축 패키지 비교 (23.10.04 기준) Browser Image Compression https://www.npmjs.com/package/browser-image-compression 다운로드 수 : 137,399 번들 사이즈 : 55.51KB 마지 velog.io 이미지 압축 패키지 비교 (23.10.04 기준) 이미지 성능 최적화 사용자가 서버로 보내는 이미지의 용량을 줄여서 서버의 용량도 절약해 주고, 사용자가 이미지를 불러올 때 가볍게 불러올 수 있도록 하려고 했습니다. 그래서 사용자가..

이 글을 작성하게 된 이유 알고리즘 문제를 풀 때 배열 안의 배열의 형태로 문제를 풀려고 Array(N+1). fill([])을 했었습니다 이때 배열에 하나의 값만 추가하여도 모든 배열에 값이 들어갔는데요 처음엔 이해가 되지 않았지만 GPT에게 물어보고 답을 알았습니다. fill 배열을 할 때 한 가지 배열의 메모리값만 참조하여 모든 배열이 이루어진 것이었습니다 const arr = Array(N + 1).fill([]); const visited = Array(N + 1).fill(false); console.log(arr); arr[0].push(1); console.log [ [ 1 ], [ 1 ], [ 1 ], [ 1 ], [ 1 ], [ 1 ] ] GPT 답변 이러한 결과가 나오는 이유는 `Ar..

팀 블로그에서 가져왔습니다 nginx에서 정적 리소스 캐싱하기 (성능 최적화) nginx 설정에 들어갑니다 2.그리고 운영 서버에서 파일을 전달하는 위치에서 해당 코드를 작성해줍니다html은 캐싱하지 않습니다. 빌드 시 항상 이름이 똑같은데 안의 내용이 달라졌을 때 사용자 velog.io nginx에서 이미지 파일들과 javascript 번들 파일 캐싱하기 nginx 설정에 들어갑니다 2. 그리고 운영 서버에서 파일을 전달하는 위치에서 해당 코드를 작성해 줍니다 html - no Cache html은 캐싱하지 않습니다. 빌드 시 항상 이름이 똑같은데 안의 내용이 달라졌을 때 사용자에게 항상 최신의 데이터를 보여줘야 하기 때문입니다 location / { root /home/votogether/fronte..

리프레시 토큰이 제대로 들어오는 지 확인하고 싶어서 localhost를 https로 변경했는데 여전히 Set-Cookie가 되지 않는 문제가 있었습니다. domain=DOMAIN_NAME When searching the cookie list for valid cookies, a comparison of the domain attributes of the cookie is made with the Internet domain name of the host from which the URL will be fetched. If there is a tail match, then the cookie will go through path matching to see if it should be sent. "Tai..