본문 바로가기

분류 전체보기

(35)
[AWS] AWS Summit 2024 (Day2) 참가 후기 안녕하세요 주갬입니다.작년에 이어 올해도 AWS Summit에 참석하여 다양한 강연을 들었습니다. 오늘은 이에 대한 후기를 작성해보려고 합니다.행사는 5/16 ~ 5/17 양일간 진행되며, 17일은 생성형 AI 중심으로 강연이 구성되었습니다. 저는 생성형 AI에 관심이 많아 17일에만 참석하였습니다.   목차 ) 키노트생성형 ai 의 성공적 구축을 위한 데이터 전략AWS 스토리지로 AI/ML 워크로드 가속화하기스마트한 미래, AWS와 함께하는 MongoDB Atlas 기반의 AI 애플리케이션 혁명Amazon BedRock을 이용한 프롬프트 엔지니어링 모범사례Imply Druid를 활용한 실시간 데이터 분석과 당근마켓 사례부스 탐방  1.  키노트   키노트는 웅장한 4면 스크린에 영상으로 송출되었습니다...
[최적화] React 프로젝트 최적화 - 1. 문제점 인식 (LightHouse) 회사에서 듀얼 모니터가 되지 않던 M1 맥북을 교체해주었다. 무려 M3 맥북 💻 으로!! (본론은 아니지만 자랑) 전에 쓰던 맥북에서 데이터를 옮기고 업무를 하려고 전에 개발하던 리액트 프로젝트 개발 사이트를 딱 열었는데 세상에 렌더링이 너무 느린 것이다... 그래서 네트워크 탭을 열어서 확인해보니 빌드된 파일의 용량이 무려 23MB,, 사진을 빨리 띄우면 뭐하나 메인 빌드 파일이 너무 커서 뜨지를 않는데,,ㅎ 수정이 시급하다고 생각했다. 어디서부터 시작해야할지 몰라 이것저것 찾아보다 LightHouse라는 구글 확장 프로그램을 이용해 사이트 성능을 측정할 수 있다는 것을 알게되었다. 이 프로그램의 좋은 점은 점수를 산출해줄 뿐만 아니라 꽤 구체적으로 개선 방안을 제시해준다는 것이다. 이 LightHou..
[HTML, CSS] 내용 부분 스타일 지정만으로 푸터 하단 고정하는 방법 안녕하세요 주갬입니다. 오늘은 사이드 프로젝트를 하면서 푸터가 중간에 떠있는 현상을 해결한 방법에 대해 설명 드리려고 합니다. 구글링을 해보시면 푸터를 하단에 고정하기 위한 다양한 방법들이 존재합니다. 하지만 그 대부분의 방법이 저의 상황에서는 적용하기엔 무리가 있는 방법들이였습니다. 그 방법들을 간략히 정리하면 이렇습니다. 1. position: fixed - 푸터가 하단에 계속 고정되어 있어 스크롤을 내려도 항상 같은 위치에 푸터가 존재해 어색하다. 2. position: absolute - 푸터를 본문 밑에 고정시킨다면 본문 길이가 짧을 때 하단 고정이 안된다. - 본문 길이가 길 때도 스크롤은 absolute로 지정된 영역을 잡아주지 않아 어색하다. 3. 본문에 height: 100% 나 100v..
[React-bootstrap] 모달창 닫기버튼 스타일이 깨지는 현상 안녕하세요 주갬입니다. 오늘은 react-bootstrap을 이용 중에 모달창 닫기버튼 스타일이 깨지는 현상을 해결한 방법에 대해 말씀드리려고 합니다. 다른 bootstrap 요소들은 잘 나오는데 모달창 안에 있는 닫기 버튼만 스타일이 깨지는 현상이 발생했습니다. 원래는 이렇게 예쁜 닫기버튼이 나와야합니다. 구글링을 해본 결과 이 현상은 bootstrap 버전과 react-bootstrap 버전이 맞지 않을 때 발생한다고 합니다. https://stackoverflow.com/questions/65472384/react-bootstrap-only-close-button-styling-not-working React-Bootstrap ONLY Close Button Styling Not Working Fo..
[Node.js] 이진 파일 개념 정리 Buffer 바이너리 데이터들의 스트림을 읽거나, 조작하는 매커니즘. Buffer클래스는 바이너리 데이터들의 스트림을 직접 다루기 위해 Node.js API에 추가됨 - ArrayBuffer 자바스크립트에서 모든 이진 데이터는 기본적으로 모두 ArrayBuffer 객체에 포함된다. ArrayBuffer는 그저 메모리의 연속된 공간을 차지하고 있는 추상적인 메모리 계층과도 같다. ArrayBuffer에 대한 접근 및 조작은 항상 view라고 불리는 객체를 생성해서 수행해야 한다. view 객체는 자기 스스로는 어떠한 데이터도 저장하고 있지 않고, 그저 ArrayBuffer의 내부를 들여다보기 위한 수단으로 사용한다. - TypedArray view 객체 == TypedArray (Uint8Array, Ui..
[NCP] 네이버클라우드 NCE 자격증 후기 + 공부 방법 안녕하세요 주갬입니다. 저는 12월 1일, 네이버클라우드플랫폼의 공인자격증인 NCE (Naver Cloud Expert) 자격을 획득하였습니다. 오늘은 그 후기와 어떻게 학습하였는지 꿀팁들을 적어보려고 합니다! NCE시험은 코로나로 대면 시험이 중단되었다가 올해 8월에 시험을 재개한 만큼 아직 베일에 쌓여있는 시험인데요, 준비하는 데에 어려움을 겪고 계시는 많은 분들이 이 글에서 많은 도움을 얻어가신다면 좋겠습니다. 1. 공부 기간 & 과목별 투자 시간 저는 무리하지 않고 일주일에 한 과목씩 따는 것을 목표로 했습니다. 10월 27일에 Network 시험으로 시작해 12월 1일에 마지막 시험을 보고 자격증을 취득했네요! 꽤나 공부할 양이 많기 때문에 공부 기간은 적어도 한 달 이상으로 잡는 것이 좋아보입..
[Laravel] Mac에 라라벨 설치 A-Z 안녕하세요 주갬입니다. 오늘은 제가 두고두고 보기 위해... Laravel을 설치하는 방법을 작성해두려고 합니다. 0. 사전 작업 Mac의 패키지 관리자인 Homebrew를 설치합니다. 설치 후엔 업데이트를 한 번 해줍니다. brew update 그리고 Laravel은 PHP 프레임워크이니만큼 PHP가 깔려있어야 하겠죠? PHP도 설치해줍니다. brew search php brew install php 1. Composer 설치 그 다음으로는 PHP 패키지 관리자인 Composer을 설치해야합니다. Composer는 제가 다른 블로그들 보고 실패를 많이 해봤는데 공식문서가 최고입니다,,! 공식문서 따라가시면 바로 설치 잘 됩니다. https://getcomposer.org/doc/00-intro.md I..
[React Hooks] useEffect와 useSelector 같이 쓸 때 주의해야 할 렌더링 순서 안녕하세요 주갬입니다. 회사에서 리액트로 프로젝트를 하고 있는데 캐시를 지우고 사이트를 열면 렌더링이 제대로 되지 않는 오류를 발견했습니다. 문제 상황) 렌더링에 문제가 발생한 hook은 다음과 같습니다. const tk = useSelector(state => state.user.tk); const uuid = useSelector(state => state.user.uuid); const ogc = useSelector(state => state.user.ogc); useEffect(() => { var data = JSON.stringify({ "tk" : tk, "uuid" : uuid, "ogc" : ogc }); var config = { method: 'post', url: ~~~~ , he..
[React-Select 라이브러리] 'label' 키 이름 안맞추고 원하는 키 이름으로 지정하는 방법 React로 개발 중 셀렉트박스를 만들 때 유용하게 사용할 수 있는 React-Select 라이브러리가 있습니다. https://react-select.com/home React-Select A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support. jedwatson.github.io 이 라이브러리를 활용하면 CSS로 직접 하나하나 셀렉트 박스를 만들지 않아도 몇 줄의 코드만으로 쉽게 셀렉트 박스를 구현 할 수 있습니다. 위의 공식 사이트에 들어가면 설치 방법과 간단한 사용 방법이 있으니 참고해 주세요. 저는 이 react-select 라이브러리를 사용해 셀렉트 박스를 구현..
react-vis-timeline 'isDataViewLike' 설치 오류 해결방법 react-vis-timeline 설치 오류 해결방법 vis-data를 찾을 수 없다는 오류와 'isDataViewLike'를 export할 수 없다는 경고... 딥빡 stackoverflow를 뒤져본 결과 vis-data 의 버전이 문제라는 것을 확인했다. https://github.com/razbensimon/react-vis-timeline/issues/3 Running the examples · Issue #3 · razbensimon/react-vis-timeline Overview Failure to compile examples Error message: ./node_modules/vis-timeline/esnext/esm/vis-timeline-graph2d.js Attempted impo..

반응형