에디터를 사용하고 있는데 이미지에 링크태그를 넣으면 a 태그로 적용이 된다.. 앱내에서 웹뷰를 사용해서 포스팅을 관리하고 있었는데 이미지를 클릭하여서 상세 보기로 이동하고 다시 뒤로가기를 누르면 기존 포스팅으로 이동하지 않고 메인으로 이동하게 되었다.

이전 포스팅과 연결이 되는 포스팅입니다. 이전 포스팅에서도 카카오 기술 블로그를 통해서 안드로이드에서 이미지 확대 기능을 제작 하는 것을 보고 따라 하게 되었는데요. 카카오 기술 블로그 : https://fe-developers.kakaoent.com/2023

앱에서 웹뷰로 페이지를 구성하는 작업을 맡게 되었다. 그냥 페이지를 뿌려주면 되는데 페이지가 기사형식이어서 이미지가 디테일한데 폰에서는 작게 보여서 확대 기능을 추가해야 했다. 그래서 확대하는 방법에 대해서 찾아보다가 적용하게 되었다. 두가지 방법이 있다.

어드민 페이지에 포스팅할수 있는 에디터를 작업해야 해서 에디터 라이브러리를 찾아보게 되었다.

문제를 극복하고 이제 추가적인 기능 구현을 도전하게 되었다.

react 와 firebase 로 실시간 채팅앱을 구현하기로 하였다. 처음에는 firebase 9 버전으로 기능을 구현하고자 하였다.

내가 편하기 위해서 정리해둔다.필요한것파이어 베이스 apikey 등 각종 key 파이어 베이스에 로그인 하고 설정하면 고유 key 값을 준다.

useLocation 과 useNavigate 훅 단일 페이지에서 로그인 토큰을 어떻게 가지고 있을지 많은 고민을 하게 되었다.

이번에는 next를 azure web app 으로 배포하게 되었다. 어찌 저찌 하여 yml 파일은 잘 수정할수 있었다. 하지만 오류를 직면하게 되었다.

디자인할때 자주 사용되는 select 박스를 공통 컴포넌트로 제작하기로 마음먹었다.

드래그로 테이블 넓이를 조절 하기 위해 라이브러리를 선택하게 되었다. next js 를 사용하기 때문에 chatgpt 에게 추천을 받았는데 가장 추천했던게 tankstackreact-table이라서 선택하고 사용하게 되었다.

next js 에서 포스팅 할수 있는 방법을 찾다가 @toast-ui/react-editor에 대해서 알게 되었다.

yml 파일 분석 및 공부한것 정리 빌드와 배포할때 쓰인다.

azure appservice 빌드 과정중 만난 에러 빌드 하는 과정중 이렇게 빌드가 어려운 건지 몰랐다. 뭐만하면 계속 실패해서 정리해본다. 개복치 인줄 ..;;

react 에서 하드 코딩을 줄이기 위해서 서버에서 HTML 태그를 포함하여 주는 것을 뿌리게 되었다. 어떻게 적용하면 좋을까 싶어서 검색해봤는데 이런 식으로 변환을 해서 사용하면 된다. 원하는 값을 html 태그로 변환 하여 줬는데 document 식으로 전체 코드를

컴포넌트 내에서 아래 명령어로 import를 해준결과 에러가 발생했다.

import 를 해야하는데 dynamic(); 함수를 써야 할 경우가 있다. Next.js는 기본적으로 서버 측 렌더링(SSR)을 지원하며, 페이지를 사전 렌더링하여 초기 로딩 속도를 개선한다.

next js에 대해서 공부하다 보니 API Routes에 대해서 알게 되었다. Rest API 의 request URL을 숨기고 싶어서 방법을 찾아 보게 되었는데 Next js에서 자체 api endpoint 를 만들수 있어서 숨길수 있을까 생각하며 시도해보았다

azure로 next를 초기설정하고 바로 static web app 빌드를 진행하였다. 아무것도 건들이지 않고 npx create next 로 바로 생성하고 빌드를 진행한터라 npm run dev 도 잘되고 문제가 없을것이라고 생각하였다.

오늘은 취업준비(이직준비)에 대해 회고를 작성해보려고 합니다. 저는 2022년 8월 6일 경에 잘 다니던 회사에서 코로나로 인한 경영난으로 인해 권고사직으로 퇴사하게 되었습니다.