Project
[Python/Django/Framework] Django , WebFramwork에 대해서
Airbnb 클론코딩을 진행하면서, 다양한 개념에 대해서 알게되는것 같습니다! 오늘은 WebFrameWork 장고에 대해서, 배운걸 기록해보겠습니다. WebFramWork FrameWork는 "모든 레고가 준비되어 있는 큰 레고상자"라고 생각하면 저는 더 와닿았습니다. 특히, "조립법"까지 모두 정해져있는 레고상자입니다. "FrameWork"는 정해진 사용법이 있다는게 라이브러리와 큰 차이점인 것 같습니다. 코드 내에서의 차이점을 보자면, 라이브러리는 프로그래머가 가져와서 쓰고 , FrameWork는 프로그래머가 작성한 코드를 가져갑니다.(이게 무슨말이야) 즉, 라이브러리는 라이브러리 내의 일종의 함수를 내가 import해서 활용하는 측면이 강하다면, FrameWork는 이미 활용법이 정해져 있는 함수와..
[python/poetry/Django] Python Webproject 셋팅하기 -1
클론코딩을 진행하면서, ToyProject들을 진행해보려고 합니다.큰 마음을 먹고, 백엔드부터, 프론트까지 다 해볼 수 있는 노마드코더님의 Airbnb클론코딩을 질렀습니다! 기본적인 강의 내용을 자세하게 포스팅 하기보단, 제가 부딪혔던 문제들을 위주로 ,기록해보려고 합니다! Python Project 설정 Poetry 다운로드 패키징 시스템 중 하나입니다. 각각의 프로젝트에 대해서, 독립적인 개발환경을 만들어줍니다. 프로젝트에 따라서, 필요한 환경이 다르기 때문에, 독립적인 개발환경이 필요하게 됩니다. Poetry를 다운로드하면, 환경변수를 등록해주어야 합니다. 설치를 확인하기 위해, poetry --version을 입력하면, 실행할 수 없는 명령어라고 나올 수 있습니다. 환경변수 설정하기 [STEP1]..
[React/state/React상태관리] TodoList 삽질하기 2
클릭시 체크리스트 제거하기 HTML 태그의 내부기능인 onChange를 이용해서, check가 됬을 때 함수를 발생시켜줬다. 그래서, checkHandler에 idx를 넘겨주고,checkedItem["idx"]값을 체크가 되었다면 true로 만들어주고, filter를 이용해서 false인 것들만 남기는 형식으로 구현을 하였습니다. 코드로 보시죠! const checkHandler = (idx) => { checkedItems[idx] = !checkedItems[idx]; setItems([...items.filter((item) => !checkedItems[item.id])]); setCheckedItems([...checkedItems]); }; //...생략... {items.map((todo, ..
[React/State/React상태관리] React TodoList로 삽질하기
ㅇ정말 "간단"하게 하고 끝낼 생각이었던 TodoList가 생각보다 , 생각하게 된 것이 많아서 따로 글을 적게 됩니다. 3가지에 대해서 간단하게 기록하고 넘어가려고 합니다. React의 map 함수를 이용했을 시, Key의 re-rendering React의 Component의 흐름 React state의 불변성과 filter,map 등의 함수형 프로그래밍 TodoList 일정관리 어플리케이션입니다. 버튼을 클릭하거나, 옆에 체크박스를 클릭해서 사라지게 하거나, 버튼을 클릭해서 없애는 등 다양한 형태로 구현할 수 있습니다. 저는 CheckBox형태로 클릭하면 하나씩 뿅뿅 사라지는 형태로 구현했습니다. 기능 생각하기 사실, 생각할 것도 없습니다. 체크박스를 클릭하면 , 없어지면 됩니다. 간단한 기능입니다..
[Project/JS/배너] 자바스크립트로 이미지 슬라이더 직접 만들기 - 오류,기능추가!
추가할 기능 Slider의 끝과 처음이 연결되어있는 듯한 효과 Indicator을 클릭하면 , 해당 index로 이동하는 기능 버그 Next 버튼을 클릭할 때, 뭔가 점점 빨라지는 현상 원인 점점 빨리지는 현상의 원인 Next 버튼을 눌렀을 때도, SetInterval의 이벤트루프는 동작하고 있기 때문이다.Next버튼이나, Prev버튼을 눌렀을 때 다시 Interval을 초기화 시켜줘야한다. Interval을 초기화하는 코드가 많아져서, 따로 함수로 구현하였다. * 추가 코드 onMoveNext(){ ... onResetInterval(this.autoplay) ... } onResetInterval(IsAutoPlay){ if(IsAutoPlay){ clearInterval(this.#interValI..
[Project/JS/배너] 자바스크립트로 이미지 슬라이드 구현 - 슬라이드 기능 구현
저번에 작성한 설계 그림을 보고 오늘은 구체화 시키고, 코드까지 작성해보려고 한다. 슬라이드 구현 웹 브라우저에서 이미지 슬라이드를 "직접" 구현하기 위한 아이디어를 찾아보았다. 이미지를 하나의 필름처럼, 늘어놓고 옆으로 이동시키는 개념으로 구현하는 거였다. 이미지를 하나의 필름 처럼 늘어놓기 위해서, Float이나 Flexbox를 이용할 수 있고, 옆으로 이동시키기 위해서는 Margin을 주거나, left와 같은 position을 변경할 수도 있을거 같다. 이미지들을 FlexBox로 쭉 늘어놓고, Margin-left를 줘서 밀어내는 방식으로 구현하려고 한다. prev,next 버튼 prev버튼을 누르면 , 이미지의 크기만큼 margin-left의 +값을 해주고, next버튼을 누르면 이미지 크기만큼의..
[Project/JS/개발환경] 자바스크립트로 이미지 슬라이더 직접 만들기 - 개발환경
Templetes(개발 폴더 구조) 아래와 같은 구조로, 개발을 진행하겠습니다. image 폴더에는 배너로 쓸 이미지가 첨부됩니다. Webpack 설정 사용 플러그인 HtmlWebpackPlugin bundling 할 때, html 파일도 같이 번들링하는 Plugin입니다. 많이 쓰이는 PlugIn 이더군요! Cssloader, CssMinimizerPlugin, MiniCssExtractPlugin CSS도 같이 bundling하기 위한 Plugin입니다. TeserWebpackPlugin Bundling 파일 압축을 위한 Plugin입니다. Module(로더)를 설정할 때, 이미지 로더도 같이 설정해줍니다. ... module:{ rules:[ ... { test:/\.(gif|jpe?g|tiff?|..
[Project/JS/배너/설계] 자바스크립트로 이미지 슬라이더(Swiper) 직접 만들기 - 설계
홈페이지를 들어가보면, 움직이는 배너를 볼 수 있다. 이번 프로젝트는 배너를 Vanilla JS로 구현해볼거다! 배너를 만드는 라이브러리는 이미 잘 만들어저있다.(Swiper JS, React Slick 등) 빠르게 작업을 해야할 때는 라이브러리를 활용하되, 라이브러리 또한 JS로 이루어져있기 때문에, 한번 만들어보고 싶어졌다. HTML Box Modeling 하기 (Wire Frame) Slider-wrap : 이미지 슬라이더 최상위 Div 입니다. Slider : 슬라이더들을 감싸고 있는 Slider div입니다. 하위 컴포넌트로, ul > li 형태로 slider가 여러장 있는걸로 구현합니다. Button : Next, Prev 등 클릭하면 이미지 슬라이드가 넘어가게 만들겁니다. indicator ..