티스토리

DevYoon

검색하기

블로그 홈

DevYoon

studyoon.tistory.com/m

⊹ 일찍, 그리고 자주 실패하기 ꙳

구독자: 7

방명록 방문하기

주요 글 목록

[Next.js] 이미지 최적화로 렌더링 속도 개선하기 프로젝트를 진행하면서 메인페이지의 로딩이 너무 느리다는 단점을 발견했다. Next/image 태그를 사용해 이미지 최적화를 하고 있다고 생각했는데, 추가적인 작업이 필요하다고 생각했다. 따라서 다음과 같은 2가지를 처리해보았다. 1️⃣ 이미지 리사이징 - 우리 페이지에는 2개의 실사 이미지가 들어가는데, (나머지는 아이콘) 두 이미지가 유독 더 느리게 렌더링 되었다. - 사이즈를 확인해보았는데, 역시나! 각각 가로가 5000px, 3500px 이상이었다. - 사이트 환경 내에서 깨지지 않는 선 (2000~ 3000px 사이)에서 이미지 크기를 줄여주었다. 그러나 그럼에도 여전히 렌더링 속도는 내가 느끼기에 느렸다🥲 스크롤 이벤트도 걸어놓은 터라, 사이트 메인에 접속해서 스크롤을 내릴 때 이미지가 바로바로.. 공감수 0 댓글수 0 2022. 10. 7.
[Recoil] Recoil이란? 💾 Recoil 1️⃣ Recoil이란? React의 hooks와 어울리면서, React에 필요한 것들만 React스럽게 제작한 상태관리 라이브러리 기존의 Redux나 Mobx와 같은 상태 관리 라이브러리들은 React 라이브러리가 아님 store는 외부요인으로 취급되므로, React의 내부 스케줄러에 접근할 수 없음 동시성 모드의 등장으로 위 사실이 중요해짐 동시성 모드 ❓ 프로그램을 독립적으로 실행할 수 있는 조각으로 나누어 구조화 ➡️ 단일 스레드 사용의 한계를 깨고 애플리케이션을 보다 효율적으로 만듦 참고 🔗 https://medium.com/swlh/what-is-react-concurrent-mode-46989b5f15da 기본적인 store 구성을 위해 많은 보일러 플레이트와 장황한 코드를 .. 공감수 0 댓글수 3 2022. 9. 13.
[Web] 무한스크롤이란? ♾ 무한 스크롤(Infinite Scroll) 사용자가 페이지 하단에 도달했을 때 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식 👍 장점 다음 콘텐츠를 보기 위한 추가 클릭이 필요하지 않고 페이지 로드 시간이 짧음 ➡ 클릭하는 것보다 더 나은 사용자 경험을 제공 터치 스크린(모바일)일 때 더 유용하게 적용 화면이 작을 수록 스크린이 길어짐 ➡ 모바일 환경에서 콘텐츠를 보여주기 직관적이고 사용하기 쉬움 사용자 참여 및 콘텐츠 탐색이 쉬움 👎 단점 페이지 성능이 느려짐 특정 항목 검색 및 원래 위치로 되돌아오기 힘듦 스크롤 막대가 실제 데이터양을 반영하지 못함 Footer를 찾기 어려움 ✏ 참고 https://velog.io/@eunoia/%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC.. 공감수 0 댓글수 0 2022. 9. 8.
[Sass] Sass란 무엇인가? & 기본 문법 🎨 Sass Syntactically Awesome Style Sheets CSS 파일로 변환되는 스타일 시트 언어 😑 CSS는... 프로젝트 규모가 커질수록 중첩된 스타일 구조와 빈번한 수정 때문에 유지보수가 어려워짐 ➡️ Sass는 변수, 중첩 규칙, Mixin, 함수 등 사용하여 CSS를 구조화하여 표현하거나 스타일 요소를 재사용할 수 있음 ❔ SCSS Sass 3.0 이상부터 사용 가능한 표기법으로, CSS 구문과 호환됨 기존 문법 .nav-list display:flex list-style:none li margin-right: 10pxSCSS 문법 .nav-list{ display:flex; list-style:none; li{ margin-right:10px; } }➡️ 블록({})과 세미콜.. 공감수 0 댓글수 0 2022. 9. 7.
[Next.js] document is not defined 에러 해결 Next.js로 개발하던 중 다음과 같은 오류를 만났다. document가 not defined라니...?! 너무 의아해서 검색해본 결과, Next.js를 사용하기 때문에 만난 에러였다. Next.js는 서버 측에서 렌더링 된 후 클라이언트로 전송되는 SSR 구조이므로, 클라이언트에서만 정의된 전역변수(window나 document)를 사용하려면 렌더링 후 사용해야 했다. 이 오류를 해결하기 위해서는 3가지 방법이 있다. 1️⃣ document의 type 확인하기 - 해당 오류는 서버 측에서 렌더링 될 때, document의 type이 undefined로 나오기 때문에 발생한다. - 따라서, document의 type이 undefined가 아닐 때 실행하게 한다. if(typeof document !==.. 공감수 0 댓글수 0 2022. 7. 26.
[CSS] position fixed 가운데 정렬하기 하단 메뉴바를 구현하는 과정에서 가운데 정렬이 되지 않는 문제가 발생했다. 개발자도구로 확인해보니 메뉴바가 왼쪽에 쏠려있는 것을 볼 수 있었다. position: fixed; bottom:0; left:0; right:0; left와 right를 0으로 설정해두어 해결! 공감수 0 댓글수 0 2022. 7. 26.
[Next.js] Mui BottomNavigation에 링크 넣기 mui의 BottomNavigation을 사용하는 과정에서 Link 삽입에 난항을 겪었다. 1️⃣ Link 태그로 감싸기? Next에 있는 next/link를 사용해서 Link 태그로 BottomNavigationAction을 감싸주었다. BottomNavigationAction에 설정한 label 등이 나타나지 않았다. 반대로 BottomNavigationAction으로 Link 태그를 감싸니 제대로 작동하지 않았다. 2️⃣ href 설정? 단순하게 가볼까 싶어 BottomNavigationAction에 href 설정을 줘봤으나 역시 생각한 방향대로 되지 않았다. 3️⃣ next/router 사용 참고글 : https://github.com/mui/material-ui/issues/22001 단비같은 .. 공감수 0 댓글수 0 2022. 7. 26.
[Django] CORS CORS SOP(Same-Origin Policy) 1️⃣ SOP란? 동일 출처 정책 특정 출처(origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 보안 방식 잠재적으로 해로울 수 있는 문서를 분리 ➡️ 공격받을 수 있는 경로 줄임 2️⃣ Origin(출처) 두 URL의 Protocol, Port, Host가 모두 같아야 동일한 출처 *️⃣ http://localhost:3000/posts/3 Scheme / Protocol Host Port Path http localhost: 3000 posts/3 CORS 1️⃣ Cross-Origin Resource Sharing 교차 출처 리소스(자원) 공유 추가 HTTP Header를 사용 ➡️ 특정 출처에서 실.. 공감수 0 댓글수 0 2022. 5. 16.
[Vue] TMDB API로 영화 관련 페이지를 만들어 보자 ⚒️ 1️⃣ HOME : 영화 목록 조회 페이지 TMDB API에 popular로 요청 보내서 상위 40개의 영화를 보여준다. 🎞️ Vue LifeCycle Hook mounted를 활용해 따로 어떤 버튼을 클릭하지 않아도 요청 후 영화 목록 데이터를 가져와 화면에 보여주었다. 🎞️ API에서 받아온 데이터 안에 id값이 있길래, for문의 key로 사용했다. 2️⃣ Random : 영화 추천 페이지 과제는 랜덤으로 영화를 하나 뽑아서 보여주는 거였는데, 좀 더 실존하는 서비스 느낌을 내보고 싶어서 문구를 추가해봤다. 오늘 뭐 보지? 버튼을 클릭하면 🔽 이렇게 변한다. 뭘 봐야 할지 모르겠다면, 저희가 대신 골라드릴게요! 오늘 뭐 보지? 오늘은 {{pick.title}} 어때요? {{pick.overview}.. 공감수 0 댓글수 0 2022. 5. 13.
[Vue] Font Awesome을 Vue에서도 사용해보자 🍯 깔끔하고 귀여운 아이콘이 많아 가끔 썼던 Font Awesome 💫 Vue에서도 사용하고 싶은데 방법을 몰라서 한 번 찾아봤다. 1️⃣ Step 01 Font Awesome에 접속해 CDN 코드를 복사한다. https://fontawesome.com/account/cdn Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 2️⃣ Step 02 복사한 CDN을 Vue ➡️ main.js의 head 안에 넣어준다. 3️⃣ Step 03 마음에 드는 아이콘을 골라 코드를 복사한 후, 넣고 싶은 곳에 넣어주면 끝! 공감수 0 댓글수 0 2022. 5. 12.
[Vue] Vuex를 이용하여 TodoList App을 만들어 보자 ⚒️ 1️⃣ Store import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) export default new Vuex.Store({ plugins:[ createPersistedState() ], state: { todos:[ ] }, getters: { isdone(state){ return state.todos.filter(todo => { return todo.done === true }).length }, isnotyet(state){ return state.todos.filter(todo => { return todo.done === false }).. 공감수 1 댓글수 2 2022. 5. 12.
[Vue] Vuex Vuex 1️⃣ Vuex란? Vue 상태관리 라이브러리 state(상태)를 전역 저장소로 관리할 수 있도록 지원 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 상태가 예측 가능한 방식으로만 변경 컴포넌트의 공유된 상태를 추출 ➡️ 전역에서 관리 컴포넌트는 커다란 view가 되며, 모든 컴포넌트는 트리에 상관없이 상태에 액세스하거나 동작을 트리거 할 수 있음 2️⃣ Props&Emit VS Vuex Props&Emit props&Emit은 단반향 흐름, 부모 ➡️ 자식 간의 전달만 가능 장점 : 데이터의 흐름 직관적으로 파악 가능 단점 : 컴포넌트 중첩이 깊어지면 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 데이터 전달이 매우 복잡해짐 단방향 데이터 흐름 state : 앱을 작동하는 원본 소.. 공감수 1 댓글수 0 2022. 5. 11.
[Vue] Youtube API를 활용하여 Youtube App을 만들어 보자 ⚒️ 🔥 주요 Keypoint ❕ 상위 컴포넌트 - 하위 컴포넌트 연결 / props & emit 1️⃣ App App.vue 💫 searchBar로부터 이벤트 청취 ➡️ 입력값과 API KEY로 params 구성 ➡️ axios로 요청 💫 요청 결과 전달 받은 영상들을 videos 배열에 넣어주기 ➡️ 하위 컴포넌트인 VideoList에 props로 전달 💫 VideoList로부터 이벤트 청취 ➡️ 선택한 비디오 props로 VideoDetail에 전달 2️⃣ searchBar 검색 💫 input 박스에 작성 후 엔터 ➡️ 부모 컴포넌트(App)에게 이벤트로 입력한 값 전달 3️⃣ VideoList VideoList 💫 VideoListItem의 이벤트 청취 ➡️ App으로 이벤트 전달 💫 하위 컴포넌트인 .. 공감수 1 댓글수 5 2022. 5. 10.
[Vue] 점심 메뉴와 로또 번호를 추천해보자 1️⃣ App.vue 라우터 경로 설정 Lunch | Lotto 🔥 router-link to = '/lunch' 🔥 router-link :to = '{name:'lunch'}' ➡️ Named Routes 2️⃣ index.js routes 설정 const routes = [ { path: '/lunch', name: 'lunch', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: lunch }, { path:'/lotto/:lottoNum', name: 'lotto.. 공감수 1 댓글수 1 2022. 5. 10.
[Django] 체크박스 만들기 completed = forms.BooleanField(label='Completed', label_suffix=' : ', required=False, widget=forms.widgets.CheckboxInput()) label_suffix : 라벨과 위젯 사이에 들어갈 컨텐츠 required : 체크박스를 체크하지 않고(False 상태) 넘겨줄 수 있게 하기 위해 required를 False로 두었다. 만약 required=True가 된다면, 체크박스를 체크해야만 넘겨줄 수 있다. 3️⃣ 체크박스 : widget에 CheckboxInput()을 사용 공감수 0 댓글수 0 2022. 4. 19.
[DB] SQL SQL 1️⃣ SQL 1️⃣-1️⃣ SQL이란? 관계형 데이터베이스 관리시스템의 데이터 관리를 위해 설계된 프로그래밍 언어 1️⃣-2️⃣ 분류 DDL 데이터 정의 언어(Data Definition Language) 관계형 데이터베이스 구조(테이블, 스키마)를 정의하기 위한 명령어 CREATE, DROP, ALTER DML 데이터 조작 언어(Data Manipulation Language) 데이터를 저장, 조회, 수정, 삭제 등을 하기 위한 명령어 INSERT(삽입), SELECT(조회), UPDATE(갱신), DELETE(삭제) (시험에 나옴) DCL 데이터 제어 언어(Data Control Language) 데이터베이스 사용자의 권한 제어를 위해 사용하는 명령어 GRANT, REVOKE, COMMIT,.. 공감수 1 댓글수 0 2022. 4. 14.
[DB] RDB & RDBMS DB 1️⃣ Database 1️⃣ Database란? 체계화된 데이터의 모임 몇 개의 자료 파일을 조직적으로 통합하여 자료 항목의 중복을 없애고 자료를 구조화하여 기억시켜 놓은 자료의 집합체 논리적으로 연관된 하나 이상의 자료의 모음 ➡️ 내용을 고도로 구조화하여 검색과 갱신의 효율화 2️⃣ 데이터베이스로 얻는 장점 데이터 중복 최소화 데이터 무결성 ➡️ 정확한 정보를 보장 데이터 일관성 데이터 독립성 (물리적, 논리적) 데이터 표준화 데이터 보안 유지 1️⃣-1️⃣ RDB 1️⃣ RDB란? Relational Database 키와 값들의 간단한 관계를 표 형태로 정리한 데이터베이스 2️⃣ RDB 용어 스키마(schema) : 데이터베이스에서 자료의 구조, 표현방법, 관계 등 전반적인 명세를 기술 (M.. 공감수 1 댓글수 0 2022. 4. 14.
[Django] Template Django Template 1️⃣ DTL (Django Template Language) Django template에서 사용하는 built-in template system 조건, 반복, 변수 치환, 필터 등의 기능을 제공 Python처럼 일부 프로그래밍 구조(if, for 등)를 사용할 수 있지만, 해당 python 코드로 실행되는 것은 아님 DTL Syntax 1️⃣ {{ Variable }} render()를 통해 views.py에서 정의한 변수를 template 파일로 넘겨 사용하는 것 변수명은 영어, 숫자, 밑줄(_) 조합으로 구성될 수 있으나 밑줄로는 시작 불가능 공백이나 구두점 문자 사용 불가능 (.)를 사용하여 변수 속성에 접근 가능 {{ 변수명.속성 }} render()의 세 번째 인.. 공감수 1 댓글수 0 2022. 4. 10.
[Django] 요청과 응답 Django 요청과 응답 1️⃣ URLS HTTP 요청(Request)을 알맞은 View로 전달 init.py ➡️ 앱의 모든 것을 패키지처럼 쓸 수 있게 해줌 from import views trailing comma : 마지막에 ,을 써주는 것으로 장고에서 권장되는 작성 형식. 이후에 바로 새로운 것을 입력할 수 있도록 써줌 path('admin/', admin.site.urls), 2️⃣ View 클라이언트의 요청 객체가 넘어옴 urls.py를 호출했을 때 템플릿을 렌더링 해줌 def index(request): return render(request, '.html(템플릿 경로)') 3️⃣ Template 템플릿 생성 : 앱 안에 templates 폴더 생성(일종의 약속.. 공감수 1 댓글수 0 2022. 4. 10.
[Django] Django 시작하기 Django 시작 1️⃣ 가상환경 생성 및 활성화 1️⃣-1️⃣ 생성 python -m venv 1️⃣-2️⃣ 활성화 방법 1 source /Scripts/activate 방법 2 Ctrl+Shift+P ➡️ python select interpreter ➡️ 터미널 껐다 켜기(Ctrl+`) 2️⃣ Django 설치 requiremets가 없을 때 pip install django==3.2.12 requirements 있을 때 pip install -r requirements.txt 3️⃣ 프로젝트 생성 프로젝트 = Application의 집합 하나의 프로젝트는 여러 앱을 가짐 django-admin startproject 옵션 . : .을 붙이지 않으면 프로젝트 폴더 안에 프로젝트 생성 .을 붙이면 폴.. 공감수 1 댓글수 0 2022. 4. 10.
[Django] Django란? Django 검증된 파이썬 기반 웹 프레임워크 1️⃣ 웹 프레임워크란? 1️⃣-1️⃣ WEB(World Wide Web) 인터넷에 연결된 컴퓨터를 통해 정보를 공유할 수 있는 전세계적인 정보 공간 1️⃣-2️⃣ 프레임워크(Framework) 프로그래밍에서 특정 운영 체제를 위한 응용 프로그램 표준 구조를 구현하는 클래스와 라이브러리 모임 재사용할 수 있는 수많은 코드를 프레임워크로 통합 → 개발자가 새로운 애플리케이션을 위한 표준 코드를 다시 작성하지 않아도 같이 사용할 수 있도록 도움 1️⃣-3️⃣ 웹 프레임워크(Web Framework) 웹 페이지를 개발하는 과정에서 겪는 어려움을 줄이는 것이 주 목적 데이터베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드 재사용 등의 기능을 포함 동적인 웹 페이.. 공감수 1 댓글수 0 2022. 4. 9.
[Django] Form Django Form 1️⃣ Django의 Form을 사용하는 이유 ➡️ 유효성 검증 유효성 검증 : 사용자가 입력한 데이터를 검증하는 것 HTML의 form, input 태그를 사용해서 직접 사용자로부터 데이터를 받으면 유효성 검증을 코드로 모두 구현해야 함 Django의 Form은 이러한 작업과 반복 코드를 줄여줌 외부의 악의적 공격 및 데이터 손상에 대한 중요한 방어 수단 2️⃣ Django가 처리해주는 form에 관련된 작업 3가지 렌더링을 위한 데이터 준비 및 재구성 데이터에 대한 HTML Forms 생성 클라이언트로부터 받은 데이터 수신 및 처리 3️⃣ Django Forms 3️⃣-1️⃣ forms 선언하기 앱 안에 forms.py 파일 생성 from django import forms cl.. 공감수 2 댓글수 0 2022. 4. 7.

문의안내

티스토리
로그인
고객센터

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