성연커밋 : )

emotion을 이용하여 프로젝트 스타일링을 하였고, 깃허브 액션을 이용하여 CI CD 를 진행하려고 하였다. local에서는 build가 성공하는데 깃허브 액션에서는 build를 자꾸 실패하는 점이 있었다. 빌드 실패 내용은 테마에서 breakPoints를 찾지 못하는 것이었다. TS2339: Property 'breakPoints' does not exist on type 'Theme'. 나는 emotion을 이용하여 styled 컴포넌트를 작성할 때 max-width: ${({ theme }) => theme.breakPoints.lg}px; 를 작성해주었다. theme 파일에 breakPoints파일을 잘 지정해주었는데 대체 왜 build를 실패할까? 의문이 생겼다. tsconfig 문제일까하고,..

23년의 1분기 회고를 작성한 지 얼마 되지 않은 것 같은데, 23년 4분기까지 모두 끝나버렸다. 매 분기별 회고록을 작성하지 못한 것이 아쉽다. 하지만, 년도별 회고는 꾸준하게 쓰고 싶다. 회사를 다닌지도 1년, 신입 개발자에서 성장하고 있는 것 같다. 처음 회사를 다니고서는, 적응하느라 내 개발 커리어 성장이 되고 있는 걸까? 라는 생각이 들었다. 적응 한 이후, 회사와 본인 프로젝트의 병행이 힘들었지만, 나름대로 회사에서 하는 일들에 대해서도 공부를 할 수 있음에 감사했다. 개발자를 꿈꾸는 후배들을 보며, 이력서와 포트폴리오를 봐주며, 개발자로써 한 발 성장하는 모습을 찾았다. 첫 회사이다보니 적응하느라, 내 개인 공부를 많이 못 한 것이 아쉽다. 그래도, 회사에서 하는 업무에서 내가 공부해보고 싶..

쿠버네티스로 전환을 하면서, ROUTE 53을 alb에 연결한 CF로 연결을 해주었다. 프로젝트를 진행하면서, 헤더와 쿠키에 있는 값들을 확인하며 리다이렉트를 시키는 미들웨어가 존재하는데, CF를 이용하여 전환하면서 쿠키와 헤더에 값들이 존재하지 않아, 자꾸 리다이렉션이 되지 않는 문제를 찾았다. 이 문제는 CF의 설정 때문이었다. CF 설정에서 원본정책요청에서 헤더와 쿠키의 값을 받는 설정이 있다. 이 부분에서, 나는 모두 받지 않아 쿠키와 헤더 값들을 alb에서 cf로 전달을 못 해주고 있었다. 그래서 모든 값들이 전달이 되지 않아 리다이렉션이 되지 않았다..! 이럴 때 All Viewer를 선택하여 모든 속성을 넘길 수 있었다. All Viewer를 선택할 시, 너무 많은 요청으로 성능이 저하 될 ..

다국어 페이지란? 웹 사이트에서 여러 개의 언어를 사용할 수 있게 한 것 i18n이란? i18n이란 internationalization 단어를 축약한 것으로, 프로그램 특정 지역이나 언어에 종속이 아닌, 다양한 언어의 웹 페이지를 만들 수 있다. 웹 프로젝트에서 i18n을 사용해보자 현재 리액트에서 i18n을 사용할 수 있는 라이브러리가 있다. yarn add react-i18next i18next i18next-browser-languagedetercor 위 명령어를 이용하여 라이브러리를 설치하고, i18n의 설정 파일을 작성해주자. import i18next from 'i18next'; import { initReactI18next } from 'react-i18next'; import Langua..

쿠버네티스란? 쿠버네티스는 컨테이너화된 애플리케이션을 자동화하기 위한 컨테이너 오케스트레이션 도구이다. 💡 컨테이너 오케스트레이션이란? 복잡한 컨테이너 환경을 효과적으로 관리하기 위한 도구 배경 코드 작성 → build (이미지 만듦) → ship (이미지 저장) → run (실행) 개발 이후 배포과정을 대표로 Build, Ship, Run 이 있다. 이미지를 만드는 Build, Docker Hub, Ecr등 레지스트리에 저장하는 Ship, 만든 이미지를 실행하는 Run 도커 이미지가 수천개가 된다면, 이 많은 이미지들을 관리하기 불편한 점들이 생긴다. 이러한 이미지들을 어떤 컨테이너에 배포를 하고, 어떤 컨테이너가 죽었고를 확인하기가 힘들어 컨테이너 자동을 용이하게 해주는 툴이 필요성을 느끼게 되어, ..

프로젝트를 진행하던 도중 mp4파일을 자동재생이 되도록 설정을 하기위해서 autoplay옵션을 주었다. Desktop과 Androdid폰에서는 잘 되었지만, ios핸드폰의 safari는 자동재생이 되지 않는 문제가 있었다. 구글링을 해보니까, ios safari 버전 15이상부터 이슈가 있었던 것 같다. 문서에서 더보기 iPhone에서는 이제 요소가 인라인으로 재생될 수 있으며 재생이 시작될 때 자동으로 전체 화면 모드로 전환되지 않습니다.핀치 동작으로 전체 화면을 종료하면 없는 요소는 계속해서 인라인으로 재생됩니다. 속성이 없는 요소는 iPhone에서 재생하려면 계속해서 전체 화면 모드가 필요합니다. 와 같은 말이 있었다. 즉, video가 자동재생될 수 있도록 autoplay, muted, ios를 ..

border에 gradinet를 주려고 했다.border에 linear-gradinet를 이용하여 주었지만, 작동하지 않았다. 인터넷을 검색하여 해결 방법들을 찾아보았다. 나는 border-radius를 같이 줄 것이기 때문에, background-image를 이용하여 border를 gradinet를 줄 수 있었다.position: relative; border: 1px solid transparent; border-radius: 16px; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, red 0%, orange 100%); background-origin: border-box; background-clip: conten..

next 13이 업데이트되면서 대규모 업데이트가 되었다 next.js의 13 업데이트 내용이 무엇일까 ? Next.js 공식문서에 설명하는 변화점들은 다음과 같다. app/ Directory (beta) Laytous React Server Components Streaming Trubopack (alpha) New next/images (stable) New @next/font (beta) Improved next/link 등이 있다. 이번에는 app 디렉토리에 대해 알아보고자 한다. app/ Directory app Directory 는 현재 베타버전으로, 프로덕션 환경에서는 사용을 권하질 않는다고 공식홈페이지에선 말하고 있습니다. next는 주요 라우팅을 pages 폴더 내에서 하고 있었는데, ap..

React 프로젝트를 진행하다보면 public폴더 내 manifest.json파일을 흔히 볼 수 있다. 프로젝트를 진행하면서 manifest.json에 대해 자세히 파헤쳐본 적이 없었기 때문에 문득 이 파일이 무엇을 하는지 궁금해졌다. manifest.json 웹앱 manifest란 앱에 대한 정보를 담고 있는 json 파일이다. 배경색과, 앱의 이름, 홈스크릲 ㅘ면에 추가할 아이콘 등의 정보를 담는 것이다. 웹앱 매니패스트의 파일명은 manifest.json으로 많이 사용하곤 한다. { "short_name": "React App", "name": "Create React App Sample", "start_url": ".", "display": "standalone", "theme_color": "#..

api를 fetch하는 라이브러리로 axios를 많이 쓰곤 했다. 이 때, 백엔드에서 api의 parameter값으로 두개를 optional로 주곤 했다. 그래서 나는 const fetchData = async (param1?:boolean, param2?:string) => { const res = await axios.get('/api/endpoint', { params: { param1, param2, } }); return res; } 위와 같이 fetchData 함수를 만들었다. fetchData함수를 사용할 때 param1이 필요로하면, param2 없이 fetchData(param1에 해당하는 변수명) 을 주면 되었지만, param1을 전송하지 않고, param2만 주고 싶을 때가 있었다. ..