오블완

💡 문제 상황해당 글은 Mixed Content 에러를 만나 해결하면서 겪은 모든 에러에 대한 기록이다.HTTP와 HTTPS 통신 간의 보안 문제를 만나 프론트엔드 개발자인 내가 잘 모르는 부분을 해결할 수 있었는지.. 기록해보겠다.  📌 백엔드 서버로 AWS를 도입하게 된 계기Next 프로젝트로 1:1 실시간 채팅 기능을 개발하고 있었다. Next의 자체 서버를 이용하여 Route Handlers를 이용한 API를 설계해 둔 상황이었다. 그러나, Next를 Vercel로 배포하고 있었던 터라 Vercel의 서버리스 환경에서는 Websocket 연결을 유지할 수 없어 Nods.js로 간단하게 socket 서버만 로컬 서버로 따로 구축했다.하지만 배포환경에서 채팅도 연결하려고 하다보니, 클라우드 환경을..

📌 Next를 왜 사용할까?React 대신 Next를 사용하는 이유를 생각해 보았을 때, 가장 먼저 떠오르는 것은 SSR이라고 생각한다. 하지만 SSR 때문에 Next를 사용하는 건 아니라고 생각한다. SSR은 React에서도 가능하기 때문이다. 그렇다면 다른 이점이 어떤 것이 있을까? Next는 React를 확장한 프레임워크이기 때문에 여러 다양한 기능들을 제공하고 있다. 폴더 기반의 간편한 라우팅, 다양한 렌더링 전략, 코드 스플리팅 자동화 등등 개발자가 빠르게 사용할 수 있고 편리하게 접근할 수 있는 도구들을 제공해준다. 이외에도 여러 이미지, 폰트 최적화 기능을 제공하는 점 또한 장점이라고 생각한다. 즉, 리액트에 프레임워크적인 성격을 심어주는 것이 Next다 라고 생각하면 좋을 것 같다.   ..

📌 캐싱이란?서버에서 어떤 데이터를 불러온 후에 그 데이터를 불러온 저장소보다 가까운 곳에 임시로 저장하여, 필요시 빠르게 불러와 사용하는 프로세스를 의미한다.메모리 계층 구조에서 캐시는 디스크나 메인 메모리보다 더 빠르게 데이터를 불러와서 사용해야 할 때 쓰인다.캐싱된 데이터를 사용하면 동일한 요청이 반복적으로 서버에 요청되지 않는다. 이는 네트워크 트래픽을 줄이고, 서버와 클라이언트 간의 왕복 시간(RTT, Round Trip Time)을 단축시킨다. 더 빠른 속도로 데이터를 제공할 수 있다는 의미이다. 이는 즉 사용자 경험을 개선할 수 있기 때문에 캐싱을 잘 활용하는 것이 중요하다.현재 작업중인 Next 프로젝트의 성능을 더 개선시킬 수 있는 방법이 없을까 고민하다가 캐싱에 대해서 공부도 하고 개..

📌 현재 상황지금 개발중인 Next SNS프로젝트에서는 이미지가 메인 화면에 처음 진입 시 바로 노출된다. 때문에 이러한 부분이 LCP에 영향을 줄 수 있을 것 같았다. LCP는 Last Contentful Paint로 가장 마지막 텍스트 또는 이미지가 표기되기까지 소요되는 시간이기 때문이다. LCP를 조금이라도 줄여 Lighthouse 성능을 개선해보고자 우선 이미지 사이즈 최적화를 하게 되었다.  📌 문제 상황 분석하기그렇다면 기존에 LCP는 얼마였을까? 아래 이미지를 보면 알 수 있듯이 4.1초로 성능이 좋지 않았다. 추측해봤을 때, 사용자가 추가한 이미지를 Storage에 원본 그대로 저장하다보니 LCP에 영향을 미칠 것 같았다. Next에서 제공하는 Image 컴포넌트는 렌더링 시 이미 이미..

나의 ContextNext 프로젝트를 진행하면서 코드 재사용성을 높이기 위해 코드 공통화 하는 작업을 하고 있다.그러다보니, 여러 컴포넌트나 부모-자식 구조의 컴포넌트 사이에 동일한 값을 전달하기 위해 Context 를 주로 사용한다는 점을 알게되어, Context라는 것을 좀 공부해보고자 한다. ContextContext란 부모 컴포넌트가 트리 아래에 있는 모든 컴포넌트에 깊이에 상관없이 정보를 명시적으로 Props를 통해 젙달하지 않고도 사용할 수 있게 해준다.Props를 UI트리를 통해 데이터를 전달하는 경우, 깊이 전달해주거나 많은 컴포넌트에 같은 Props가 필요한 경우 장황하고 불편할 수 있습니다. Props drillling 상황이 초래할 수 있습니다.Props 전달하는 대신 ‘순간이동’시킬..

백준 2447 별찍기 - 10  문제 접근****  **** 모양의 별찍기를 하는 데 다만 반복문의 조건이 까다롭다고 생각했다. 하지만 조건이 까다로워서 어려웠다. 우선 별을 찍는데 i와 j가 1인 위치에는 공백으로 출력되어야 했다. 이 조건을 생각하기 어려웠다. 코드import sysinput = sys.stdin.readlinen = int(input())arr = [[' ' for _ in range(n)] for _ in range(n)]def func(x,y,n) : if n == 1 : arr[x][y] = "*" return new_n = n // 3 for i in range(3) : for j in range(3) : ..

📌 사용자 경험(UX) 을 개선하자사용자 경험을 개선하는 것은 프론트엔드 개발자의 숙명이다. 현재 개발중인 SNS 프로젝트의 경우, 각 피드들을 확인하면서 원하는 게시글에 버튼을 클릭해 좋아요 표시를 할 수 있다. 그러던 와중 좋아요 버튼을 클릭했을 때, 업데이트되는 시간이 오래 걸린다는 문제가 있었다. 인스타그램과 같은 SNS에서는 즉각적으로 반영되는 것을 볼 수 있기 때문에 나도 이 부분에 대한 기능을 개선해보려고 한다.    📌 Optimistic UpdatesOptimistic Updates는 낙관적 업데이트로 서버에 요청을 보내고 응답을 기다리지 않고 '미리 성공함'을 가정하여 UI를 즉시 갱신하는 것이다. 만일 서버 요청이 실패하면 롤백된다. 낙관적 업데이트의 장점은 '사용자 경험 개선' ..