모르면 참고해보자! Case Study

과제 중 div위에 div가 올려지지 않는 상황이 발생하여 원인을 분석해 보았다. position과 z-index를 활용하였다. 그래도 해결하지 못한 문제점이 있었으니..

html과 css로 슬라이드 제작하기 입니다!

벽돌깨기 플래시 게임을 이전에 만들어둔게 있었는데 좌우로 이동하면 패들의 반이 밖으로 이동한다. 그의 임시 해결 방안을 생각해본다

백준의 알고리즘 문제 고양이, 개를 풀어 보면서 배운 기호 출력법! 고양이 문제 부터 시작합니다. 첫단계로 고양이를 출력해야 합니다 . console.log()를 활용해서 고양이를 도출해야 하는데 기호 ()는 어떻게 처리할지 막막합니다. 우리는 백틱 사용법과 이스케이

이번에는 js를 활용한 자바스크립트 슬라이드 효과를 제작해 보았습니다.

기존 html, css파일은 있으며 js만 수정하여 알고리즘을 작성하였습니다. 헥사코드 6자리를 조합하여 클릭하면 색상을 만드는 것입니다.

이번 과제는 미리 만들어둔 클론 인스타그램 페이지에 댓글 기능을 구현하는 것.

fetch,map(),props등을 복습하는 과제 겸 filter를 이용해서 검색 기능을 구현하는 과제를 받게 되었다.filter를 이용해서 검색 기능을 하게 되면 아래와 같이 된다. 과제에서 친절하게 주석으로 힌트가 주어져서 쉽게 도전할수 있었다. 몬스터 카드들은 데

인터넷 효과에서 자주 사용되는 효과인 필터 효과를 자바스크립트를 이용해서 구현해보았다. 카테고리 버튼을 클릭하여 필터링 되는 방법과 검색을 통해서 필터링 되는 방법 두가지를 구현하였다.

프로젝트 과제 진행때 광고배너 만들기를 맡게 되었다.

팀 프로젝트시 버튼을 클릭하면 스타일을 변경해줘야하줘야 했다.

map함수를 백엔드와 통신하여 데이터를 받아서 실행하게 되면 데이터가 들어오는 것보다 렌더링이 먼저 되어서 오류가 발생하게 된다.

라이브러리 없이 리액트 함수형 , 스타일 컴포넌트에서 슬라이드를 구현해보았다.

페이지를 만들때 백엔드 팀에게 데이터 정보를 받아서 제작하게 된다. 프론트 단에서 정보를 받고 활용하는 방법에 대해서 알아본다.

라이브러리 없이 캘린더, 달력 만들기 입니다.

1편은 기존의 달력을 틀을 만들었습니다. 2편에서는 CSS를 수정해서 완벽하게 구현해보도록 할 것입니다. 이전달, 다음달 정보가 이번달에 등장하지만 회색으로 표시해야 이번달의 정보가 정확하게 보일것 같고 토요일과 일요일도 회색으로 표시할 예정입니다. 토요일, 일요일

코드문제를 풀다가 includes에 대해 다시 알게 되었다. 내가 알던 includes는 string일때 array일때 사용이 가능하며 만약 찾고자 하는 문자가 포함되어 있을 경우 true를 return해준다. 다음은 MDN에서의 정의이다. includes에 대해

서론 프로그래머스 상반기 과제 중 고양이 사진첩 과제에 도전해봤다.다. 지금 프론트엔드 개발자로 일하고 있기 때문에 위의 작업을 많이 해봤다. vue를 쓰

타입스크립트를 도입하기 이전 jsdoc은 라이브러리 설치를 하지 않고도 바로 사용이 가능하여서 사용하게 되었다.

기존 리액트에서 next js 로 이전하는 과정에서 import 한 img를 styled component로 사용하려고 했는데 화면에 불러지지 않는 오류가 있었다.

니꼬의 클론코딩을 진행하고 있었다. 2월 20일 부터 시작을 하고 있었는데 꾸준히 매일 매일 커밋을 하고 있었는데 잘되고 있겠지 라고 생각하며 신경을 안쓰고 있었는데 최근들어 확인해보니 커밋 내역이 하나도 안채워져있단것을 알게 되었다.

회사내에서 배웠던 내용을 정리했던 글 같다. 오랜만에 발견한 글이라서 다시 정리해둔다.

vue 와 플러터 로 진행 글로벌 함수를 만들어서 플러터에서 함수 접근이 가능하게 해야 한다.

이번에 catbot 으로 작은 프로젝트를 진행하면서 배포를 하게 되었다. 이전 프로젝트에는 깃허브 배포(gh-pages)를 활용했는데 cloudflare를 이용하여 배포를 진행했다. 왜 cloudFloare를 사용하게 되었는가 하면 장점이 있다.

처음으로 백엔드를 구성해봤다. 에러들을 만나고 aws도 직접 구성해봤는데 문제들을 만나서 상당히 힘들었다.

홈페이지를 대부분 개설한것 같아서 수익화를 넣어주기 위해서 광고를 넣게 되었다. 선택한것은 kakao AdFit이다.

cat bot에서 새로운 기능인 고양이가 있는지 없는지 ? 에 대해 선택을 받도록 기능 구현을 하였다.

오류 발생

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

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

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

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

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

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

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

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

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

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

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

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

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

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

나중에 도움이 될수 있도록 텔레그램으로 oAuth로그인 하는방법을 작업하면서 정리해보았다

next 13을 사용하면서 빌드를 할때마다 시간이 엄청 오래 소요가 되었다.

web app으로 프로젝트 업무를 맡게 되면서 app 내부에서 오류가 발생할 경우 캐치를 잘 못하기도 하고 에러가 올 경우 텔레그램을 활용했는데 조금더 자세히 에러 로그를 정리하고 싶어서 에러 로그에 대해서 찾아보게 되었고Sentry에 대해서 알게 되었다.

에러 로그를 찾아보다가 이미 회사에서 사용하고 있는 seq 로거를 활용하기 위해서 공식문서에 node적용 케이스가 있어서 보고 적용하게 되었다.

winston 에러 로거 를 하던 프로젝트에 적용하기 위해서 고군분투하고 있다. 이전 글 왜 사용하게 되었는지는 "이전글" 을 참고해서 보면 알수 있다.

원래 안드로이드 개발이나, 앱 개발에서 google - recaptcha를 사용할수 있었다. 찾아보니 ios는 불가하다고 알려져 있다. 나도 처음엔 몰랐는데 가끔 보면 봇이 아닙니다. 하고 이미지에서 무엇을 찾아라 하고 등장하는 것이 있다. 이것이 capcha 이다.

데이터를 관리하고 통신 과정 , stats를 사용해서 loading상태를 알아서 유저의 경험을 더 좋게 하기 위해서 SWR에 대해서 고려하게 되었다.

sun editor 를 사용하고 font설정을 안하면 기본 폰트를 사용할수 있다. Arial, Comic Sans MS, Georgia, Verdana 이 기본 폰트인데 굉장한 폰트이기는 하지만 한글에서 적용할때는 그닥 큰 효과를 보지 못한다 .

mui 라이브러리 공식 문서 내에 Minimizing bundle size 라는 문서가 있었다.해당 주소 : https://mui.com/material-ui/guides/minimizing-bundle-size/기존에 빌드가 너무 오래걸려서 refactori

application gate way를 진행하하다가 인증서가 필요하게 되었다. https를 listeners로 설정하려면 certification이 필요하다. test로 공부하고 있는 중 이기 때문에 Let's Encrypt 사이트에서 무료 인증서를 발급하게 되었다

원하던 목적은 서버 두대 (1,2)가 돌아가는데 업데이트를 위해 배포를 진행할때 서버 1은 서버를 멈추고 2는 계속 운영되고 1이 배포가 완료되면 2를 멈추고 1을 운영하는 것을 원하기 위해서 선택하게 되었다.

Load balance 에러를 만나게 되었다.

font awesome을 사용해보니 13 버전의 \_app 에서 수정하는 것만 나오길래 14버전에서 수정하는 방법을 알아봤다. npm i --save @fortawesome/react-fontawesome@latest @fortawesome/free-solid-svg

Tiptap editor 선택을 위해 참고한 사이트는 아래와 같다 . nextjs에서 설정하는 방법도 상세히 알려줘서 쉽게 적용할수 있었다. 벨로그 사이트이다. https://velog.io/@bae-sh/React-quill%EC%97%90%EC%84%9C-

원래는 azure를 사용해서 webApp 배포를 했는데 회사에서 azure에서 google cloud platform으로 비용측면으로 전환 작업을 진행하게 되었다. 그래서 Google cloud Platform(GCP)를 공부하게 되면서 배포를 진행하게 되었다.

"Step timestamp: "2024-05-09T06:55:48.683036613Z"에러 등장 .. 이전에 더미 파일로 빌드를 진행했을때 완벽하게 잘 되었기 때문에 바로 작업파일로 진행을 했었는데 빌드가 실패했다.

docker hub에 있는 seq를 설정한다. https://hub.docker.com/r/datalust/seq로그인이 필요한데 계정은 있을 것이라고 생각이 되어 넘어간다. artifact registry에 도커 파일을 저장해야 한다.

google cloud logging next js 구글 로깅을 위해서 라이브러리가 있길래 라이브러리를 다운 받았다. npm install @google-cloud/logging그리고 테스트를 하기 위해 공식문서에서 나온 코드들을 ts파일로 만들어서 작성하고 함수를 호

스크롤에 맞춰 애니메이션 CSS를 주기위해서 IntersectionObserver API를 활용하게 되었다. 다른 컴포넌트에서도 사용해야 했기에 훅스로 만들려고 했었다. 초기에는 ref값을 target으로 훅스 매개 변수로 전달해 주었다.

next js를 도커로 배포하게 되었다. (google cloud platform)GCP배포를 완료 하였는데 사이트로 접속하니 500에러가 나왔다. 무슨 문제일까 확인을 하기위해 콘솔을 들어가 봤는데 internal serverError 라고 밖에 나오지 않아서 에러를

파일을 다운 받자 https://cloud.google.com/sdk/docs/install-sdk mac 을 사용하기 때문에 멋찌게 터미널로 설치를 진행해보자!일단 나는 루트 경로에 설치를 했기 때문에 download 폴더에 알집 파일을 다운 받았기 때문에

대시 보드 내에서 각각 아이템을 드래그 해서 옮기는 업무를 맡게 되었다. 일단 drag 함수에 적응하기 위해서 더미 데이터로 테스트를 해보고 공부한것을 가지고 정리해본다. 드래그 라이브러리도 있었지만 왠지 내힘으로 한번 해보고 싶어서 DragEvent를 활용하게 되었다

input 에 옵션으로 range 옵션이 있다. 간단하게 구현이 가능하지만 디자인을 할때 슬라이드 값이 차지한 부분의 색은 변경이 가능하지만 선택되지 않은 나머지 부분은 회색이 디폴트 이고 변경이 힘들었다.

rechart에서 label을 사용하면 bar 차트에서 차트에 대한 정보를 보이게 설정해줄수 있다. 기본 label 컴포넌트를 활용하던가 아니면 차트 내부 label 옵션을 활용하면 라벨을 쉽게 사용할수 있는데 나의 경우에는 바 차트의 이름 + 차트의 점수 + 차트의

내가 사용하는 api 중 메모리가 가득차서 오류가 나는 일이 생겨나게 되었다. 처음에는 메모리를 늘려주는 조건을 주어서 해결하려고 하였으나다시한번 오류를 만나게 되었는데 이는 지속시간만 늘려주는 일 만 초래했고 근본적인 이유를 찾아야 했다. 확인해보니 메모리 사용율이