모르면 참고해보자! 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