티스토리

Dev, Ang

검색하기

블로그 홈

Dev, Ang

dev-ang.tistory.com/m

깔끔하게 털어마시는 개발스트로베리 🍹

구독자: 1

방명록 방문하기

주요 글 목록

네트워크 비용 개선을 위한 텍스트 기반 파일 압축 방식 웹에서의 텍스트 압축 텍스트 압축은 데이터 타입안에서 낭비되는 공간을 줄이고, 궁긍적으로 네트워크 대역폭 사용량을 크게 감소시킬 수 있습니다. 특히 대부분의 요소(HTML, JS, CSS, JSON 등)가 텍스트로 이루어진 웹 사이트에서는 사이트 트래픽의 대부분을 점유하는 Big3(자바스크립트, CSS, HTML)을 압축하여 전송한다면 브라우저 로딩과 네트워크 대역폭 사용량을 개선할 수 있습니다. ⚠️ 그렇지만 무조건적인 압축이 좋은 것은 아닙니다. 압축을 푸는 시간이 네트워크 요청보다 오래 걸릴 경우에는 압축을 적용하지 않는 것이 좋으며, 성능 개선을 위해 사이트의 문제점을 분석하고, 트래픽에 영향을 미치는 파일을 압축 전송했을 때 네트워크 대역폭 절약에 큰 도움이 될 수 있습니다. 웹에서 텍스트를 압.. 공감수 2 댓글수 0 2023. 4. 15.
Next.js에서 Ping 체크를 위한 Health Check 파일 작성 프로젝트의 상태를 검사하기 위해 Health Check를 진행하는 것은 매우 중요합니다. 서비스에 문제가 발생하지는 않았는지, 가용성 점검을 위해 안정적인 상태를 확인하는 것이 필요한데요, 이때 프론트엔드의 건강 상태를 모니터링하기 위해서 적절한 health check 파일을 생성해주는 것이 좋습니다. | 만약 헬스 체크 파일이 없다면 어떻게 될까요? 임의의 사이트에 대해 curl 요청을 날려보겠습니다. 아주 많은 양의 통 html 코드가 응답으로 반환되는 것이 보이시나요? 사이트에 따라 헬스체크를 위한 별도의 경로가 존재하겠지만, 만약 health check 파일이 생성되어 있지 않다면 상태 모니터링을 위해 매번 대용량의 응답을 돌려받아야 합니다. 😱 서비스에 문제가 발생하지는 않았는지를 확인하고, 가.. 공감수 0 댓글수 0 2023. 3. 26.
GPT-3.5-Turbo Model을 활용한 채팅 프로젝트 처음 세상에 공개된 후 챗 GPT는 압도적인 성능으로 하나의 트렌드가 되었습니다. 검색 엔진을 대체할 만큼 정보 수집은 물론 대화, 코딩 등에서 큰 기량을 뽐내는 GPT 모델은 이미 인간의 일상 곳곳에 접목되어 다양한 업무를 대체하고, 보조하기 위한 수단으로 사용되고 있습니다. 이런 고성능 모델을 프로젝트에 활용하면 얼마나 재미있는 서비스를 만들어 볼 수 있을까요? (두근두근) 챗 GPT의 세 번째 버전의 인공 지능 중 하나인 GPT-3.5-Turbo 모델을 기반으로 진행한 저의 Open AI 프로젝트를 공유합니다. 특정 인물과 가상의 직업군을 가진 멘토와 커뮤니케이션을 체험하는 채팅 서비스를 만들고자 했는데요, 대화를 위한 언어 모델 선정 과정에서 GPT-3.5-Turbo을 선택하게 되었습니다. GPT.. 공감수 2 댓글수 0 2023. 3. 11.
가비지 컬렉션(Garbage Collection) 자바스크립트는 객체를 생성할 때 자동으로 메모리를 할당하고, 필요치 않을 때 자동으로 해제하는 작업이 수행됩니다. 이를 위해 크롬 같은 브라우저에서는 다양한 가비지 컬렉션 기법이 수행되고 있습니다. 가비지 컬렉션의 정확한 동작 방식 및 전략은 자바스크립트 엔진의 버전에 따라 다를 수 있으며 성능 및 메모리 사용에 영향을 미치는 중요한 요소입니다. 가비지 컬렉션(Garbage Collection) 가비지 컬렉션(Garbage Collection)은 메모리 관리 기법 중 하나로, 자바스크립트가 실행되는 동안 생성된 가비지(미사용 객체)를 수집하여 더 이상 사용되지 않는 객체(가비지)를 자동으로 식별하고 메모리를 회수하여 메모리 누수를 방지하는 작업을 말합니다. 웹 애플리케이션에서 자바스크립트 실행 도중에 가.. 공감수 0 댓글수 0 2023. 2. 26.
Next.js Conf 10월 26일 컨퍼런스에서 발표된 Next.js 13 버전, 새롭게 변경된 내용을 정리해봅니다 :) | 공식 문서 | 컨퍼런스 페이지 | 예제 배포 사용 Next.js 13 App Playground – Vercel Explore the new app directory (App Router) in Next.js 13. vercel.com 최신 Next.js 설치 npm i next@latest react@latest react-dom@latest eslint-config-next@latest 무엇이 달라졌는지? app/ Directory (beta) (app/디렉토리): Easier, faster, less client JS Layouts (레이아웃) React Server Components (리액트 .. 공감수 0 댓글수 0 2022. 10. 30.
React에서 유저의 네트워크 단절 상태를 핸들링 하는 방법 React에서 브라우저의 네트워크 단절 상태를 핸들링 하는 방법에 대해 소개합니다. | Handling Internet Disconnection In React Applications. 🔎 필요성 프론트에서 예외 처리 로직을 추가할 때, 사용자에게 상황에 맞는 적합한 피드백을 실제로 주고 있는지 점검해볼 필요가 있습니다. 이를 통해 부족한 예외 처리를 정리하고, 우선 순위를 고려해 사용자 경험을 높여가는 것이 중요합니다. (유저 플로우와 맞는 예외 처리는 사용자 접속 및 유지율 향상에도 영향을 미치기 때문) 본 게시물에선 유저 브라우저 상태에 따라 네트워크 단절 상태에 맞는 UI를 제공하도록 브라우저 navigator를 활용해 React 애플리케이션에서 적합한 네트워크 상태를 체크하는 방법을 정리했습니다.. 공감수 0 댓글수 0 2022. 7. 31.
React 18이 가진 몇가지 흥미로운 기능에 대하여 오늘은 파트에서 FE 새싹 트렌드 스터디 🌱를 진행하는 날입니다. React 18이 가진 몇가지 흥미로운 기능에 대한 소개하며, 정리한 내용을 공유합니다 :) How to Update 리액트 18 버전은 기존의 코드를 유지하며, 버전 업데이트를 위해 아래 2가지 작업만 진행해주시면 됩니다. yarn add react@18 react-dom@18 // 두 줄만 변경하면 The End! import ReactDOM from 'react-dom/client'; // import by client import App from './App'; // 기존 ReactDom.render 함수 교체 → ReactDom.createRoot() 적용 const root = ReactDOM.createRoot(document.. 공감수 0 댓글수 0 2022. 6. 28.
디자인 시스템과 스토리북 최근 회사에서 인사이트를 공유하고자 스토리북 사용 권장을 위한 팀 세미나를 진행했습니다. 사용하면서 느꼈던 장점과, 처음 접했을 때 헷갈릴 수 있는 요소들을 위주로 가볍게 정리해본 내용에 대해 공유합니다 :) 디자인 시스템 디자인 시스템이 처음이라면, 간단히 스타일 가이드와 컴포넌트의 복합체를 의미합니다. 컴포넌트들이 어떻게 사용되어야 하는지, 디자인을 할 때 어떤 규칙들을 지켜야 하는지에 대한 가이드를 제시하고, 통일성 있는 UI를 제공합니다. 스토리북 디자인 시스템과도 밀접한 관련을 가진 스토리북은, 개발 방식의 효율성 향상을 위해 다양한 방식으로 사용되는 UI 컴포넌트 개발 도구입니다. 리액트와 완전히 분리된 UI 컴포넌트 개발용 오픈소스 도구로, 디자인 시스템의 테스팅, 문서화 툴, 외부 공개용 .. 공감수 0 댓글수 0 2022. 2. 3.
코드 최적화 🔮 코드 성능 영향 요소 점검 수칙 패키지 최적화 번들 사이즈 측정 결과 분석 빌드 시간과 번들링 사이즈에 영향 웹 페이지 리소스 로딩 속도 개선 기대 렌더링 최적화 Page 단위 Server-side Data Fetching 활용 유저의 대기시간 최적화 렌더링 속도(웹 화면 그려지는 로직) 개선 기대 로직 최적화 Memory Leak 등 성능 영향 로직 수정 브라우저 상호작용 속도 개선 기대 이번 포스팅에선 개발 과정에서 적용할 수 있는 번들 사이즈 최적화를 다룹니다. 번들 최적화 01. 원인 분석 번들 사이즈를 분석할 수 있는 다양한 도구들이 존재한다. 프로젝트 내 라이브러리별 비중을 파악해보고 그에 맞는 최적화 진단을 시작해보자. Webpack Analyse ( 가장 다양한 정보 제공 but 사용법.. 공감수 2 댓글수 0 2022. 1. 26.
한글 도메인 주소가 DNS에 등록 & 처리되는 과정 Result 전세계의 다국어 도메인은 퓨니코드로 변경되어 등록과 처리가 진행된다. 인터넷 사용자가 입력한 다국어 도메인은 클라이언트 측에서 아스키 기반의 퓨니코드로 변환되 네임서버로 전송된다. | 과정 주소창에 다국어 도메인이 입력된다 (ex. 청와대.com) 클라이언트(브라우저)측에서 퓨니 코드로 변환한다 ( ex. xn--vk1b187a8ue.com ) DNS의 네임 서버로 전송되 IP 주소를 찾아 접속하게 된다 * 네임 서버는 퓨니코드 형태의 영역 데이터를 운영한다 . 1) 국제화 도메인 네임 ( IDN _ Internationalized Domain Name ) 인터넷 상에서 호스트의 주소를 나타내는 도메인 네임은 기본적으로 라틴 문자, 숫자, ( _ )언더바 등으로 구성되어있다. 여기서 말하는 .. 공감수 0 댓글수 0 2022. 1. 6.
React 상태 관리 라이브러리 (Redux, Mobx, Recoil, Context API) 프론트엔드 개발에서 상태 관리는 매우 중요한 개념입니다. 상태 관리를 통해 사용자 인터페이스(UI)의 상태를 관리하고 변경사항을 추적하고, 애플리케이션의 동적인 요소를 효과적으로 제어해 사용자 경험을 향상시킬 수 있습니다. 프론트엔드에서 가장 일반적인 상태 관리 방법 중 하나는 상태 관리 라이브러리를 사용하는 것입니다. 대표적인 상태 관리 라이브러리로는 Redux, MobX, Vuex 등이 있습니다. 이러한 라이브러리는 애플리케이션의 상태를 중앙 집중화된 저장소에 저장하고, 상태의 변경을 관리하며, 컴포넌트 간의 상태 공유를 용이하게 해줍니다. Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나로, 단방향 데이터 흐름을 기반으로 합니다. Redux는 액션(Action), 상태(State), 리.. 공감수 0 댓글수 0 2021. 12. 4.
하위 컴포넌트에 boolean(참/거짓) props 변수 전달 React에서 하위 컴포넌트로 props 전달 시, 특정 요소에만 전달하기 원하는 변수가 존재한다. 아래 예시로 가로줄을 구성하는 Row 컴포넌트의 첫번째 줄에만 isLargeRow 변수를 전달해 다른 요소보다 크게 화면에 표현하고 싶다면 하위 컴포넌트에서 isLargeRow 변수의 default값을 false로 지정한 다음 원하는 특정 컴포넌트 요소에만 isLargeRow 변수를 전달해주면된다. 하위 컴포넌트 function Row({ data, isLargeRow = false }) { return( {data.name} ); } export default Row; 상위 컴포넌트로부터 data와 isLargeRow이라는 boolean값을 전달받는 Row 컴포넌트가 존재한다. isLargeRow 변수를.. 공감수 0 댓글수 0 2021. 11. 27.
함수 전달 렌더 에러 문제 & 리액트 className 작성법 정리 1. 버튼 클릭 시 useState를 활용해 type의 변수 값을 변경해주고 싶을 때 코드의 중복되는 부분을 함수로 작성해 전달해 주려했는데 무한 반복이 돌아간다. const [type, setType] = useState(''); const handleSortChange = (type) => { setType(type); }; 이는 버튼을 클릭했을 때 함수를 전달하면 발생하는 에러로 button 위 함수가 실행될 때 state를 변화하는 코드이기 때문에 계속 렌더되는 에러가 발생한다. state 변화시킬 땐 아래 방법으로 작성 ( ) => arrow function으로 함수를 전달해주거나 ( ) => 바로 setType() 코드를 작성해 변수를 업데이트 하거나 돔 요소에 id 값을 지정해주고 이벤트 핸.. 공감수 0 댓글수 0 2021. 11. 15.
Next js 맛보기 공식 페이지 Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org 리액트로 프로젝트를 진행하면서 새롭게 프로젝트를 만들게 된다면 next js를 사용해 개발해보고 싶었습니다. Next.js는 Zeit에서 만든 React 프레임워크로 리액트만으로 개발를 진행하면 핵심기능 외의 라이브러리(라우터, 상태 관리 등)를 추가로 설치해 조합해야 했지만, Next에선 별도의 설치없이 프론트앤드 개발에 필요한 다양한 기능을 여러 3rd 라이브러리로 기본으로 제공합니다. Next 프로젝트 생성 기본 설치를 위해선 npx 혹은 yarn을 통해.. 공감수 0 댓글수 0 2021. 11. 10.
M1 맥북 - VS code 및 도커 설치 1. VS code 1 ) 설치 URL 비주얼스튜디오코드는 마이크로소프트사에서 만든 텍스트 에디터로 ts기반으로 개발된 오픈소스 프로젝트입니다. 웹개발 및 다양한 언어 개발에 유용하게 활용됩니다. Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2 ).. 공감수 0 댓글수 0 2021. 11. 8.
M1 맥북 - Nodejs, npm & yarn 설치 최근 M1 맥북을 구매하게 되면서 프론트 개발에 필요한 프로그램 설치를 진행하였습니다. 리마인드겸 정리해두는게 좋을 것 같아 설치한 목록을 정리해보려고 합니다. 추가 사항이 생기면 아래에 계속 업데이트 해두겠습니다. 1. Node.js & npm 1) 설치 URL https://nodejs.org/en/download/ Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) 설치 단계 사이트에 접속해 macOS Inataller 아이콘을 클릭하면 패키지 다운로드가 진행됩니다. 다운로드 폴더 내부에 node-v16.13.0.pkg와 같이 노드 버전이 명시된 패키지 파일을 확.. 공감수 0 댓글수 0 2021. 11. 6.
파이어베이스 실제 프로젝트 연결 예시 [ firebase 연동 코드 ] import firbase from 'firebase'; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, }; const firebaseApp = firebase.initializeApp(firebaseConfig); const db = firebaseApp.firestore(); const auth = firebase.auth(); export { auth }; export default db;.. 공감수 0 댓글수 0 2021. 10. 23.
🚀 Firebase 프로젝트 생성 & 웹 프로젝트 연결 Friebase에서 프로젝트를 생성하고 웹 프로젝트에 연동하는 단계에 대한 방법에 대해 알아보자. 1 . 프로젝트 생성 STEP 1. 내 콘솔로 이동 → 프로젝트 추가 (+) 클릭 STEP 2. 프로젝트 이름 & ID 지정 ✍ 프로젝트 이름 지정 후 연필 아이콘 클릭해 고유한 프로젝트 ID 지정한다. STEP 3. Google 애널리틱스 사용 설정 해당 프로젝트에 Google 애널리틱스 사용을 설정할지 선택 후 프로젝트 만들기 버튼 클릭하면 프로젝트 생성 완료! 2 . 프로젝트 연동 STEP 1. 프로젝트 생성 후 아이콘 클릭 프로젝트 유형에 따라 아이콘을 선택 ( iOS , 안드로이드 or 웹 앱 ) 웹 앱 프로젝트의 경우 아이콘을 클릭한다. STEP 2. 웹 앱 Firebase 추가 설정 .. 공감수 0 댓글수 0 2021. 10. 18.
React 환경에서 Firebase 설정하기 - 5단계로 까먹지 않고 끝내는 firebase 연동 Summary 1. 프로젝트에 Firebase 설치 yarn add firebase 2. Firebase 연동 코드 작성 ( 5단계) import firbase from 'firebase'; // 1. firebase import const firebaseConfig = { // 2. firebase api 키값 선언 apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, }; const firebaseApp = firebase.initializeApp(firebaseConfig).. 공감수 0 댓글수 0 2021. 10. 15.
Redux, 제대로 알고 있을까 다양한 곳에 동일한 정보가 분산되어 있을 때 한 곳의 정보를 업데이트하게 될 경우 props를 통해 전달해주는 방법은 데이터의 위치가 가깝다면 편리하지만 프로젝트 크기가 커진다면 번거로운 작업이 될 수 밖에 없다. 그렇다면 업데이트 사항을 props로 전달해주는 방법 말고 다른 방식은 뭐가 있을까? redux? context? mobx은 또 무엇일까 Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org 리덕스 공식문서에 접속하면 더 다양한 정보를 살펴볼 수 있으며 리덕스를 사용하기 위해선 사전 설치 작업이 필요하다. 1. 터미.. 공감수 0 댓글수 0 2021. 10. 6.
[리액트] 마크다운 에디터 'react-md-editor' 설치 및 적용 방법 (feat. front) Summary 1. React 마크다운 에디터 설치 yarn add @uiw/react-md-editor 2. Editor 작성 컴포넌트 import MDEditor from "@uiw/react-md-editor"; const Editor = (props) => { return ( ) } export default Editor; 3. 마크다운 뷰 컴포넌트 import MDEditor from "@uiw/react-md-editor"; const NoticeView = (props) => { return ( ) } export default NoticeView; Result - 에디터 작성 화면 - 마크다운 적용된 뷰 화면 📝 기울기, 굵기, 이미지 등 적용 사항 정상 동작 확인 ✔️ CODE 설명 'r.. 공감수 0 댓글수 0 2021. 9. 29.
[CSS] 스크롤 시 내용이 떠오르는 css 효과 Summary 1. js 코드 function handleScroll() { const elements = document.querySelectorAll('.on-screen'); elements.forEach(element => { if ( element.getBoundingClientRect().y > window.innerHeight ) { // 각 요소의 위치와 스크린 높이 비교 // css 스타일에 변화 적용 element.style.opacity = "0"; element.style.transform = 'translateY(70px)'; } else { element.style.opacity = "1"; element.style.transform = 'translateY(0px)'; } }).. 공감수 0 댓글수 0 2021. 9. 17.
[css] 스크롤을 부드럽게 알맞은 위치로 - 'scroll snap' 스크롤을 내렸을 때 내가 원하는 위치로 조정되는 부드러운 사용성을 경험해 봤을 것이다. 이것은 간단히 css을 활용해 구현이 가능하며 이를 snap scroll이라 부른다. ( 스냅 스크롤 ) snap scroll 모듈을 사용하지 않으면 사용자가 직접 스크롤을 내렸을 때 화면 컨텐츠가 개발자가 생각했던 위치에 정확히 오지 않거나, 화면의 위치를 계속 측정하면서 스크롤을 특정 위치로 옮기려할 경우 많은 js 코드가 소모되기 때문에 snap scroll css을 활용하면 스크롤 조작을 편리하게 사용할 수 있으며, 정확한 정보전달 및 유저의 사용성 향상에 도움된다. Summary 1. 부모와 자식 요소의 height을 동일하게 설정 2. 부모 엘리먼트 css 설정 overflow-y : scroll ; scr.. 공감수 0 댓글수 0 2021. 9. 16.
📜 스크롤바 CSS 적용하기 ( feat. ::-webkit-scrollbar, 프론트앤드 ) 결 론 ::-webkit-scrollbar { height: 0px; width: 5px; } ::-webkit-scrollbar-thumb { background-color: rgb(170, 165, 165); border-radius: 30px; } 👀 Safari / Chrome 환경에서 동작하는 스크롤은 ::-webkit-scrollbar 을 이용해 CSS 조절이 가능하다. 사진은 CSS를 적용하지 않은 기본 스크롤바 화면으로, 간단한 css 적용을 통해 날씬이로 거듭날 수 있다. Result See the Pen by wkddkdud (@angpeng) on CodePen. 1. ::-webkit-scrollbar _ 스크롤바 전체 영역 조절 ::-webkit-scrollbar { height:.. 공감수 0 댓글수 0 2021. 8. 31.
🛰 API 호출로 프로젝트에 필요한 데이터 GET해오는 방법 (Feat. 프론트앤드, React) 여름이었다 .. 프로젝트 제작을 위해 필요한 데이터가 있다면 API 호출을 통해 받아올 수 있는데 리액트의 경우 JSX 파일 내부에 무작정 자바스크립트 코드(호출을 위한)가 너무 많으면 가독성에 좋지 않기 때문에 별도의 js 파일을 만들어 분리하는 것이 좋다. 프로젝트에서 api 호출이 빈번할 경우라면, service 폴더를 생성해 호출 관련 js 코드를 한곳에 관리해주면 깔끔한 분류가 가능하다. 😉 ex) 특정 사이트의 식단 데이터를 요청하는 경우 ( = API 호출을 통해 데이터를 받아와준다 ) 1 . 사이트를 방문해 API 호출을 원하는 데이터를 확인한다. 2 . 개발자 도구 ( F12 ) 속 - Network 창에 접속해 식단 데이터가 담긴 파일을 확인한다. Preview 창을 통해 자세한 데이터.. 공감수 0 댓글수 0 2021. 8. 30.
node 환경에서 타입스크립트(TypeScript) 파일 실행하기 npm install -g typescript 타입스크립트로 파일을 작성해 줬다면 실행 결과를 얻기 위해 컴파일러을 이용해 .ts 파일을 -> .js 파일로 변환해주는 작업을 거쳐야한다. 1. npm install -g typescript 첫째, node를 사용해 글로벌로 타입스크립트를 설치해줬다면 기본적으로 타입스크립트를 자바스크립트로 변환해주는 '타입스크립트 컴파일러 ( tsc )' 실행이 가능해진다. 2. tsc main.ts 둘째, 우리가 작성한 ts 파일에 tsc 명령어를 실행하면 .ts 파일과 동일한 이름으로 변환된 .js 파일이 생성된다. 3. ts-node main.ts 셋째, ts -> js파일로 변환 과정을 거쳤다면 이제 ts 폴더명을 실행시켜 ts 파일의 결과값 확인이 가능하다. 2-.. 공감수 0 댓글수 0 2021. 8. 24.
📝react-map-gl, Mapbox를 활용한 지도🗺 프로젝트 생성 - React 프론트 편🚂 | 1. React 설치 프론트앤드 폴더로 이동해 현재 폴더 내부(.)에 react를 설치한다. cd frontend npx create-react-app . | 2. 폰트 선택 fonts.google.com 리액트 설치가 진행되는 동안 구글 폰트.com에 접속하여 프로젝트에 사용될 폰트를 골라 해당 코드를 복사한다. [ 복사한 코드 ] // link 코드 // css 코드 font-family: 'Playfair Display', serif; 해당 코드를 프론트의 public폴더 > index.html 파일 내부에 붙여주면 프로젝트 속 글꼴 지정이 완료된다. index.html에 작성할 css 스타일 코드가 2~3줄로 짧기 때문에 별도의 css 파일을 생성하지 않고 html 문서 내부에 style 코드.. 공감수 0 댓글수 0 2021. 7. 23.
📝풀스택을 활용한 지도🗺 프로젝트 생성 - MongoDB 연동 백엔드 편🚂 협업을 진행하면서 백엔드의 동작 과정을 이해하기 위해 공부하고 싶은 마음이 있었습니다. 본 프로젝트는 🧭 지도를 활용해 사용자 평점을 기록하고 핀으로 표시하는 프로젝트 제작하는 과정으로, 해당 포스팅에선 백엔드 초기 설정과 api 작성 단계에 대해 다루고 있습니다. 진행하기 앞서 프로젝트 폴더 내부에 백엔드 & 프론트 폴더를 생성해줍니다. | 1. 백엔드 초기 환경 설정 1-1 ) npm init _ node js 설정 및 애플리케이션 초기화 backend 폴더 내부로 들어와 초기화 설정을 진행합니다. cd backend npm init // 초기화 설정 진행 1-2 ) 백엔드 환경에서 필요한 라이브러리 사전 설치 백엔드 환경으로 express, monmongoose와 변경사항 존재할 때 restarti.. 공감수 0 댓글수 0 2021. 7. 22.
👨‍👨‍👧‍👦 소셜 미디어 제작을 위한 Rest-API 초기 생성 단계 (with MongoDB) | 1. 애플리케이션 초기화 🐤 1-1. 빈 폴더에 code . > 빈 프로젝트 폴더 내부에 접속한다. 터미널에 npm init 입력 & 몇가지 질문 사항에 대해 답변 ( Enter 키 끝까지 눌러준다 ) 🐤 1-2. 생성된 package.json에 rest api에서 사용될 라이브러리들을 추가해준다. yarn add express mongoose dotenv helmet morgan nodemon [ 설치 이유 ] ** express ** - node.js 프레임워크에서 애플리케이션을 빌드할 것이므로 기본적으로 실행될 'express' 서버의 설치가 필요 ** mongoose ** - 몽고디비 내부에 문서를 생성할 수 있는 mongo 모델을 생성 ** dotenv ** - 몽고 디비 생성하면 제공되는 .. 공감수 0 댓글수 0 2021. 7. 18.
CSS를 활용한 3가지 스타일의 Loading Screen 구현 💬 - with 애니메이션, React 💙 React, css, javascript를 활용한 간단한 로딩 스크린 애니메이션 - 한번 알아두면 평생 써먹는, 사용자에게 더욱 친화적 환경 제공을 위한 프로젝트 속 필수 코드 ! 😋 [ 활용 프로젝트 ] 1. Feed Loading 화면 구현 | 구현 단계 및 실제 코드 단계 ( skeleton : 골격, 해골의 의미 ) skeleton 컴포넌트 생성 ( vscode에서 단축키 사용해 rafce - const 리액트 함수 또는 rfce - fcuntion 리액트 함수 생성 ) component 내부 함수에 실제 구조를 div 태그 이용해 만들고 나머지는 css에서 끝낸다 rafce 사용한 경우 [ const 함수 ] export default function skeleton({ type }) { con.. 공감수 0 댓글수 0 2021. 7. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.