zestlumen의 오롯이, 나의 개발 일지 인기글 TOP10
- [ css ] 스크롤 상관없이 동일한 위치에 요소를 고정시키기 position: fiexd 위와 같이 우리가 화면의 스크롤을 마구마구 내려도 로고, 카테고리, 내가 찜한 콘텐츠가 있는 상단에 위치한 네비게이션 바는 동일한 위치에서 움직이지 않음을 볼 수 있다. position: fixed CSS 속성 중에 position: fixed를 하면 이렇게 고정할 수 있다. fixed는 요소를 문서의 뷰포트에 상대적으로 고정시키는 역할을 하는데 스크롤이 되더라도 항상 뷰포트의 특정 위치에만 고정되어 있다. fixed의 특징은 항상 요소가 뷰포트 기준으로 위치가 고정되고 다른 요소들과의 겹침을 피할 수 있다. 그래서 다른 요소의 배치를 고려하지 않아도 된다. 또한 부모 요소 위치에도 영향을 받지 않는다. 헤더, 네비게이션 바, 공지사항, 광고 배너 같이 항상 표시되어야 하는 요소를 고정시키는 경우나 모달.. 2023.08.03
- [ JavaScript ] sessionStorage에 여러 아이템 저장하기, 객체를 세션스토리지에 저장하기 여러 아이템을 sessionStorage에 저장하고 싶다면 아래와 같은 방법을 이용할 수 있다. 키 하나에 모두 저장하기 const data = { updateName: name, updateURL: url, updateKey: key }; sessionStorage.setItem('userData', JSON.stringify(data)); 여러 아이템을 data라는 객체에 저장하고 JSON.stringify() 함수를 사용해 객체를 문자열로 변환시켜 userData 키에 저장할 수 있다. sessionStorage에는 아래와 같이 담긴다. 그런 다음 가져올 때는 JSON.parse() 함수를 사용해 문자열을 다시 객체로 변환합니다. const data = JSON.parse(sessionStorage.. 2023.08.01
- [ JavaScript ] JS에서 src속성 추가 / 변경하기, setAttribute와 src JS에서 이미지의 src를 속성을 설정하거나 변경하는 법은 아래와 같이 두 가지가 있다. proImg.setAttribute('src',imgUrl); setAttribute(속성명,속성값) 메서드를 활용해서 쓰거나 직접적으로 src를 사용해서 속성에 접근할 수도 있다. proImg.src = imgUrl; 다만, setAttribute()메서드는 모든 브라우저에서 일관된 방식으로 동작하지만 src는 구형 브라우저의 호환성을 고려해야 한다. 구형 브라우저의 호환성을 고려해야 할 때는 setAtttribute()가 더 안전할 수 있다. 그렇지만 src는 현재 사용되는 대부분의 브라우저에서는 문제없이 작동되고 직관적이고 더 간결하게 쓸 수 있다는 장점이 있다. 2023.07.31
- [Python] TypeError: 'int' object is not iterable 해결 방법 [Python] 'int' object is not iterable 오류 해결 (range 사용법) 파이썬으로 코딩하다가 아래 에러가 갑자기 떴다.TypeError: 'int' object is not iterable처음에는 “이게 뭐지?” 싶었는데, 알고 보니까 진짜 단순한 실수였다.🧐 왜 이런 오류가 발생할까요? 가장 흔한 실수 (코드 예시):my_number = 5for i in my_number: # TypeError 발생! print(i) 지금 보면 당연한 건데, 당시에는 “5번 반복하려고 한 건데 왜 안 되지?” 싶었다.근데 생각해보면 for문은 리스트나 문자열처럼 “여러 개가 들어있는 것”만 반복할 수 있는데숫자 5는 그냥 하나짜리 값이라서 반복 자체가 불가능한 거였다.💡 확실한 .. 2025.08.01
- 노마드 코더니꼴라스, 배지현 :: IT 5분 잡학사전 (4) 데이터베이스 = 데이터 보관 DBMS (Database Management System) :데이터 베이스 관리 시스템 MySQL / PostgreSQL / SQLite / Oracle / MariaDB 등 SQL (Structured Query Language) = 데이터 베이스를 다루는 DBMS와 대화하기 위한 언어 ORM(Object Relational Mapping): SQL 번역기 같은 것. 사용자에게 익숙한 프로그래밍 언어로 SQL을 사용할 수 있음 파이썬-Django ORM, 라라벨-eloquent ORM, Node.js- Sequelize ORM,type ORM NoSQL document DB 대표적으로 MongoDB, 데이터를 JSON(JavaScriptObjectNotation,{key:.. 2023.10.31
- +노마드 코더니꼴라스, 배지현 :: IT 5분 잡학사전 (3) 알고리즘 컴퓨터에게 내리는 지시사항을 나열한 것 ex) 패스파인더 알고리즘(최단 경로 길 찾기), 압축 알고리즘(이미지 손상은 줄이고 용량 줄이기. png,jpg도 이걸로 만든 파일) 검색 알고리즘 선형 검색 알고리즘 (linear search) - 맨 처음부터 검색 이진 검색 알고리즘 (binary search) - 데이터 정렬이 되어있어야 사용(12345,54321 이런식으로) , 중앙값을 이용해 절반씩 배제하기, y = log x 정렬 알고리즘 버블 정렬: 1칸씩 밀면서 좌우 비교해서 교환하는 게 한 사이클, 시간복잡도는 O(N²) 선택 정렬: 전체 데이터에서 가장 작거나 큰 데이터의 위치를 따로 기억하는 방식, 시간복잡도는 O(N²)이지만 자리를 바꾸는 연산은 사이클당 1번으로 버블보다는 효율적... 2023.10.30
- 카테고리별 상품 목록 보여주기 NavBar는 아래와 같이 화면을 만들었는데 개별 화면으로 넘어가야할 것들은 리액트 라우터의 Link를 통해 넘기고 카테고리는 따로 컴포넌트를 만들었다. 카테고리 컴포넌트 useProducts()훅스를 통해서 받아온 데이터인 products에서 category만 가져온다. 중복을 피하기 위해 Set이라는 자료구조를 사용하고 새로운 배열로 만든다. [new Set(dataCategories]를 하게 되면 Set객체를 감싸는 배열이 된다는 거. [...new Set(dataCategories] 스프레드 연산자를 사용해야 새로운 배열을 생성해준다. 그리고 ALL을 추가하고 ETC는 뒤로 가야해서 저렇게 코드를 썼다...저래도 되는 건가.. 카테고리 별 상품이 보여질 페이지는 AllProduct.jsx인데 이 .. 2023.10.28