분류 전체보기

1. Firebase 프로젝트 생성 우선 firebase에서 프로젝트를 생성해야 합니다. 다음 이미지 순서대로 따라 하시면 프로젝트를 생성할 수 있습니다. firebase 홈페이지 https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 해당 홈페이지에서 시작하기 버튼을 눌러주세요 박스 안에 프로젝트 추가 부분을 클릭해 주세요 구글 애널리틱스는 사이트 분석하고 싶을때 누가 방문했는지 알 수 있는지 등 분석할 떄 유용..

react-app(web server)을 배포하기 위하여 vercel이나 netlify와 같은 무료 호스팅 툴을 이용하여 웹 사이트를 배포할 수도 있지만, 트래픽 제한이 있기 때문에 언젠가 AWS 클라우드를 빌려 배포해야되는 순간이 올 것이다. 현재 무료 호스팅 툴인 vercel을 이용하여 미니쿡을 배포해둔 상태이다. 이 웹 서버를 AWS EC2 인스턴스로 배포해보도록 하겠다. 전체적인 순서는 다음과 같다. 웹 사이트 배포 AWS 가입 인스턴스 생성 인스턴스 접속 깃 클론 후 빌드 (Git & Node) 포트 없애기 (nginx & fowarding) 💡 1. AWS 가입 AWS는 가입 1년간 프리티어를 제공한다. 프리티어라고 모두 공짜가 아니라, 일정 유형의 인스턴스에 일정 시간 동안 무료로 제공한다...

매주 월, 목요일 9시 99클럽 스터디가 게더타운에서 진행된다. 이렇게 운영매니저님이 스터디 시간이 가까워지면 오픈채팅방에서 링크를 알려주신다. 해당 링크로 들어간 후 기본 설정을 마치면 이런 귀여운 맵에 들어올 수 있다. 월요일에는 각자 언어/레벨에 해당하는 공간으로 이동해서 클럽장님이 내주시는 문제를 풀고 함께 모각코를 진행하면된다. 문제는 비기너/미들러/챌린저 이렇게 3개로 나뉘어져있다. 나는 미들러, 챌린저 문제를 다 풀어볼 생각이기 때문에 먼저 파이썬/미들러 구역으로 갔다. 이제 오늘의 미들러 문제를 풀어보자 먼저 미들러 첫번째 문제 연습 - 햄버거 만들기 미들러 두번째 문제 연습 - 둘만의 암호 다음으로 챌린저 첫번째 문제 힙(heap) - 이중우선순위큐

폴더명을 바꾸려고하니 아래와 같은 에러가 발생했습니다. 저번에도 폴더명을 바꾸거나 폴더를 이동시키려고 할 때 발생했던 에러였는데 또 발생하네요. 빈번하게 발생하는 오류인 것 같으니 해메지 않게 해결방법을 정리해보겠습니다. Error: EPERM: operation not permitted 관리자권한이 필요한 폴더내에 node.js 프로젝트 폴더가 있어서 생기는 에러라고합니다. (파일 삭제는 가능한데 생성하거나 이름을 변경하려고 하면 에러 문구가 뜨면서 안된다...) 검색해보니, powershell로 캐시를 삭제하는 방법으로 해결하는 것 같은데 같은 방법을 적용해봐도 해결이 되지 않습니다 1. 현재 실행되고있는 vsc를 종료한다. 2. cmd를 관리자 권한으로 실행하고 해당 위치로 경로를 이동 후 아래 명..

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.    메인 페이지 캐러셀 문제 발생웹 너비 사이즈를 변경했을 때 고정된 이미지 이동 값 때문에 이미지가 밀리는 문제 발생간단하게 overflow 되는 것을 보이지 않게 처리하고 클릭 이벤트가 발생할 때마다 보여지는 이미지의 위치를 x축으로 이동시키는 식으로 구현했다. 반응형으로 캐러셀을 구현하기에 꽤나 복잡할 것으로 보이고 시간적인 여유가 없어서 라이브러리의 도움을 받기로 했다. 가장 많이들 사용하는 라이브러리는 swiper와 react/slick 정도 일 것 같다. swiper vs react-slick(2024.04...

※Windows 환경에서 설치하는 방법입니다. 1. 몽고 DB : 데이터베이스 2. 몽고 DB 컴파스 : 워크벤치같이 시각화해서 볼 수 있다. 1. 설치 MongoDB 서버를 사용하려면 우선 설치부터 해야 합니다. https://www.mongodb.com/try/download/community Try MongoDB Community Edition Try MongoDB Community Edition on premise non-relational database including the Community Server and Community Kubernetes Operator for your next big project! www.mongodb.com Install MongoDB ..

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.    Debounce 적용하기상황프로젝트 검색 기능을 구현할 때, 한 글자씩 입력할 때마다 API 요청하도록 구현했었다.분석위와 같은 방법으로 기능을 구현하면 필요 이상의 요청이 발생할 것이라고 판단했다.검색 input 값을 콘솔창에 출력해봤더니 키워드 완성 전 필요 없는 값들이 입력이 발생할 때 마다 출력되고 있었다. 이렇게 순간적으로 많은 양의 데이터를 서버에 요청하면 서버에 부하가 발생하여 응답 속도가 느려질 것이다.  이 문제에 대한 해결책을 찾기 위해 구글링해본 결과, Debounce라는 기술을 활용할 수 있다고..

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.    지난 편에 이어서 LCP 최적화를 진행해 보도록 하겠습니다. LCP 개선하기 - Reduce unused JavaScript번들사이즈 줄이기 LightHouse -  Reduce unused JavaScript  조언은 웹페이지나 앱이 로드될 때 필요하지 않은 JavaScript 코드가 있을 경우 해당 코드를 최적화하여 성능을 향상하라는 의미입니다. 웹 페이지나 앱에서 사용되지 않은 JavaScript 코드가 많을 수록 페이지 로딩 시간이 늘어나고 사용자 경험이 저하될 수 있습니다. 따라서 사용되지 않은 JavaSc..

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.    현재 상황모든 페이지 화면 및 기능 구현 -> mock 데이터로 구현다음 과제api 연동 -> React-query 사용해 볼 예정테스트 배포  마이페이지 성능 측정하기 초기 측정 결과 : 48점초기 점수 : 48점측정 도구 : LighHouse성능을 많이 신경 못써서 점수가 낮게 나올거라고 생각하긴 했지만 48점은 충격적이네요. 빨간색이라 더 충격적.. 간단하게 최적화 할 수 있는 방법으로 점수를 조금 올려보겠습니다 React.Memo, useCallbackReact.Memo : React에서 제공하는 고차 컴포넌..

1. Node 설치 확인하기 node --version 2. 프로젝트 생성하기 mkdir back yarn init-y 이 작업을 하고 나면 디렉터리에 pakage.json 파일이 생성됩니다. 3. Koa 웹 프레임워크 설치하기 yarn add koa 설치한 뒤 다시 한번 pakage.json을 열어 보면, koa가 dependencies에 추가되어 있을 것입니다. 4. ESLint와 Prettier 설정 두 기능을 VSC에서 사용하려면 VS 마켓플레이스에서 Prettier-Code formatter와 ESLint 확장 프로그램을 설치해둔 상태여야 합니다. yarn add --dev eslint yarn run eslint --init Prettier 설정하기 디렉터리에 다음 파일을 만드세요. .pret..