일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- github
- useEffect
- W
- web
- db
- IntersectionObserver
- CSS
- url
- jQuery
- REACT
- 배포
- data
- HTML
- http
- API
- Cloud
- nosql
- Boostrap
- firestoredatabase
- supabase
- Fetch
- SQL
- TMDB
- Protocol
- bootstrap
- JavaScript
- Database
- Github Pages
- til
- this
- Today
- Total
목록web (7)
072DATA

안녕 강의를 듣다가 정리하면서 학습하면 좋을 것 같아서HTTP 상태코드 및 HTTP 메서드에 대해서 간략하게 적어보았다. HTTP 상태코드 서버가 클라이언트의 요청을 처리한 결과이고세자리 숫자로 구성되어 첫 번째 자리에 따라 의미가 다르다 1xx : 정보100 (Continue) :요청의 일부를 서버가 받았으며, 나머지를 계속 보내달라는 의미 2xx : 성공200 (OK) : 요청이 성공적으로 처리되었음을 나타냄201 (Created) : 요청이 성공적으로 처리되었고 새로운 자원이 생성되었음을 나타냄 3xx: 리다이렉션301 (Moved Permanently) : 요청한 리소스가 영구적으로 새로운 URL로 이동302 (Found) : 오청한 리소스가 임시로 다른 URL로 이동 4xx: 클라이언트 오류..
안녕하세요 오늘은 팀 프로젝트를 진행하면서 구현했던 무한스크롤 방식을 TIL로 작성해보려 합니다무한 스크롤은 꼭 한 번 구현하고 싶었던 기능이었기 때문에 설레는 마음으로 기능을 구현하였습니다.intersectionObserver을 React에서 사용하고 Supabase로 데이터를 받아왔습니다!1. 상태 변수 설정 const [postLoadingMore, setPostLoadingMore] = useState(true); const [displayedPosts, setDisplayedPosts] = useState([]); const [offset, setOffset] = useState(0); const limitLength = 6; postLoadingMore: 추가 데이터가 있는지에 대한 ..
템플릿 리터럴(Template Literal) 안녕하세요 오늘은 자바스크립트 ES6부터 제공된 템플릿 리터럴에 대해서 알아보겠습니다. 템플릿 리터럴은 자바스크립트에서 문자열을 좀 더 유연하게 다루고 싶을 때 유용하게 쓸 수 있는 문법입니다기존의 문자열 표현 방법보다 편리하고 코드도 훨씬 깔끔하게 작성할 수 있습니다.템플릿 리터럴은 백틱(``)으로 감싸서 사용합니다. 주요 기능 변수 삽입 const name = "이태규";const greeting = `안녕, ${이태규}!`;console.log(greeting); // "안녕, 이태규!" 문자열 안에 변수를 넣을 수 있습니다.${} 구문을 이용해서 변수나 표현식을 그대로 문자열에 삽입합니다. 다중 행 문자열 const multilin..

안녕오늘은 캠프에서 개인과제( 개인 프로젝트 )로영화 정보 검색 사이트를 만들어 본 과정을 작성해 보겠습니다.개발 환경Visual Studio CodeGithub사용 기술 프론트엔드JavascriptHtml/Css 외부 API TMDB API주요 기능영화 검색영화 ID값 가져오기페이지 디자인 먼저 구조는 네비게이션바와 영화 리스트 두개의 div로 나누었습니다전체적인 분위기와 색상은 왓챠를 고려해서 비슷한 색감으로 디자인 했습니다. 네비게이션 바에서 왼쪽 상단 로고와 검색창을 같은 div로 묶고로그인/회원가입 버튼도 다른 div에 묶어서 display: flex; flex-wrap: inherit; align-items: center; justify-content: ..

안녕 오늘은 배포와 Github, Github Pages 에 대해서 공부한 내용을 기록하고 정리해 보도록 하겠습니다. 나만의 추억 앨범 관련 링크들 1편https://0723-0725.tistory.com/25 나만의 추억 앨범 만들기 - 페이지 디자인편(Bootstrap, HTML, CSS)안녕저는 이제 추억 앨범을 만들어 볼건데 오늘은 디자인 위주로 작성해 보겠습니다. 사실 이미 진행한 프로젝트이지만 제대로 기록하기 위해 블로그에 남겨볼까 합니다. 먼저 보면 좋0723-0725.tistory.com 2편https://0723-0725.tistory.com/26 나만의 추억 앨범 만들기 - 자바스크립트 적용( JQuery, Fetch )안녕 이번에는 이전에 추억 앨범 페이지에 동적인 요소들..

안녕 이번에는 이전에 추억 앨범 페이지에 동적인 요소들을 추가하기 위해 javascript를 적용할 것이고 JQuery를 사용하여 javaScript를 더욱 간편하게 사용해 보도록 하겠습니다. JQuery는 HTML 문서의 탐색, 이벤트 처리, 애니메이션, 그리고 Ajax 통신을 단순화하기 위해 만들어진 빠르고 간결한 JavaScript 라이브러리입니다 JQuery 문법$(document).JQuery의 메소드들 제이쿼리를 사용하면 기존 자바스크립트에서는 사용되는 문법 document.getElementById를 $표시 하나로 표현 가능합니다. 해당 문법을 참고하여 페이지를 만들어 보겠습니다. 시작!! 추억 앨범 만들기 디자인편 링크https://0723-0725.tistory.co..

안녕저는 이제 추억 앨범을 만들어 볼건데 오늘은 디자인 위주로 작성해 보겠습니다. 사실 이미 진행한 프로젝트이지만 제대로 기록하기 위해 블로그에 남겨볼까 합니다. 먼저 보면 좋은 BootStrap 활용편 링크 https://0723-0725.tistory.com/22 BootStrap을 활용하여 페이지 구성하기안녕 오늘은 CSS,HTML 및 BootStrap을 활용하여 페이지를 구성해 볼 것이다.먼저 구성할 페이지는 맛집 소개 페이지이며 JavaScript를 사용하지 않았기 때문에 기능 구현은 되어있지 않다. 초0723-0725.tistory.com시작 나만의 추억앨범 추억 저장하기 먼저 HTML의 구조를 만들고 부트 스트랩의 링크 및 폰트..