성연커밋 : )

Ref란 무엇일까?Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 하나의 방식이다.Ref는 그럼 언제 사용할까?포커스, 텍스트 선택 영역, 혹은 미디어의 재생 관리애니메이션 직접적으로 실행시킬 때서드 파티 DOM 라이브러리를 React 와 같이 사용할 때라고 공식문서에 나와 있다.하지만 나는 이것을 보고 정확히 무엇인지? 이해가 되지 않았다.여기서 나는 React의 렌더링 조건이 생각난다.props가 변할 때state가 변할 때부모 컴포넌트가 리렌더링 될 때React는 state가 바뀌면 렌더링이 되는 반면, ref는 DOM에 직접 접근하기 때문에 렌더링이 되지 않는다!그래서 나는 Ref를 보통, 불 필요한 렌더링을 막기 위해서 사용하곤 한다.DOM에 직접 접근상태 변..

취준 때 공부를 했지만, 복습 겸 브라우저 엔진에 대해서 자세하게 알아보려고 한다. 브라우저 구성요소  브라우저 엔진에 대해 공부를 해보면, 해당 사진이 많이 뜨는 것을 볼 수 있다.구성요소에 대해 살펴보자면사용자 인터페이스: 사용자가 액션을 취하는 곳 (뒤로가기, 앞으로가기, 새로고침, url 입력하는 주소창)- 해당 부분은 어떤 웹 사이트를 가도 변하지 않는 곳이다.렌더링 엔진: 웹 사이트를 그리는 엔진브라우저 엔진: 사용자가 액션을 취하여 렌더링 엔진에게 알려주는 곳 (가교역할 담당)통신: 네트워크 (웹 사이트 호출, 데이터)자바스크립트 해석기: 자바스크립트를 이해할 수 있도록 해석하는 곳UI 백엔드: 기본적인 위젯을 그리는 인터페이스자료 저장소: 브라우저가 정보를 저장하는 곳(로컬, 세션, 쿠키 ..

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..