TIL (75) 썸네일형 리스트형 TIL 23.06.23 자식요소 overflow: hidden 적용 및 무시하기 문제점 select 를 구현하던 중, 아래와 같이 부모영역에 overflow: hidden 이 걸려있을 때, 자식 요소에서 부분적으로 overflow:hidden 속성을 무시할 수 있는 기능을 구현하는 과정에서 어려움을 겪음. 시도해본 것 1. position: fixed 를 통해 부모요소위로 고정시켜놓았으나, 스크롤을 내릴때 같이 내려가고 올라가는 문제가 발생함. 2. z-index: z-index 값을 줘보았으나 이와 상관없이 overflow:hidden 을 걸면 자식요소가 부모영역을 벗어나지 못했음. 해결방안 : overflow:hidden 이 적용된 Container 아래 중간부모(?) 요소를 하나 더 만들어서 position: relative 를 적용하면 overflow:hidden 이 적용되고.. [Firebase] Firebase 란? Firebase : 구글이 제공하는 서버리스 플랫폼으로 파이어 베이스로 웹 서비스를 개발 할 때 필요한 인프라를 제공한다. 프론트엔드 개발자들은 서버를 따로 관리할 필요없이 웹 애플리케이션을 만들 수 있다. 서버리스 : 서버는 있으나 서버의 인프라 관리를 하지 않아도 되는 것. Firebase 의 주요 서비스들 1. Authentication 사용자 인증, 즉 로그인 및 회원가입을 제공하는 서비스 2. Firestore 문서 중심의 NoSQL 데이터베이스. 3.Storage 파일을 업로드 하고 다운로드하는 드롭박스, 구글드라이브와 같은 서비스로, 파이어 베이스에 바로 업로드 하기에는 용량 제한이 있어서 적합하지 않다. TIL 23.06.22 스타일 컴포넌트, 인풋값 오류 문제점 React 프로젝트 중, 스타일 컴포넌트를 적용한 후에 인풋 값에 글씨를 입력하면 하나만 입력해도 포커스가 해제되는 현상이 있었다. 시도해본 것 1. 스타일 컴포넌트 내용 수정 스타일에 문제가 있는것인가 싶어서 인풋과 관련한 스타일을 제거하고 시도해봤으나 역시나 안됨. 2. onChange 핸들러가 제대로 동작하는지 검증 onChange 프로퍼티 안에 직접 함수를 작성해보고, 밖으로 빼서 핸들러를 만들어 작성했으나 결과는 역시 같았다. 해결방안 개발자도구 창의 콘솔에서 스타일 컴포넌트들을 컴포넌트밖으로 빼라는 주의 문구가 있었나. 오류가 나는 것은 아니었으나 함수 밖으로 빼서 전역으로 사용했더니, 인풋값에 값 입력이 잘 되었음. 알게된것 스타일 컴포넌트는 App이든 다른 컴포넌트 , 함수안에 있으.. WIL 23.06.18 [개인프로젝트] TO DO LIST TO DO LIST 개인프로젝트를 마치면서 그동안 배웠던 것 중에 기억해야 할 것을 적어보려고 한다. Title, Note 에 각각 값을 입력하여 WorkingList 에 추가할 수 있고, 추가 된 값은 완료를 눌러 DoneList 로 옮기거나 옮겨진 값을 취소를 눌러 불러올 수 있으며 x를 클릭하여 값을 삭제할 수 있다. 문제점 1. 기존의 아이디 값이 정해져 있어서 완료를 눌렀을 시에, 그 id 값의 우선순위에 따라서 DoneList 에서 차례대로 값이 쌓이는게 아닌, 값이 id 값 순서대로 쌓였음. 예를들어, 위의 '수학 (id : 1)' 에 확인버튼을 누르면 '과학 (id : 4)'밑으로 쌓이는 게 아닌, 수학의 id 값인 1에 의해 영어(id : 3)의 위로 값이 이동함. 큰 문제는 아니지만 불.. [JavaScript] 5주차_클래스 상속 // 상속 (Inheritance) // Class -> 유산으로 내려주는 주요 기능 // 부모 자식 // 동물 전체에 대한 클래스 class Animal { constructor(name) { this.name = name; } //메서드 (짖다) speak() { console.log(`${this.name} says!`); } } const me = new Animal("Mia"); me.speak(); // Mia says! class Dog extends Animal { // 상속 : 부모에게서 내려받은 메서드를 재정의 할 수 있음. // 오버라이딩(overriding) speak() { console.log(`${this.name} barks!`); } } const cuttyPuppy01 =.. TIL 23.05.31 문제점 개인프로젝트 중 영화목록 로드시, 함수가 재실행되면서 페이지 새로고침 효과가 나타나는데 정확히 어떤 원리로 되는것인지 알고싶었음. 같은 조원분께서 본인도 그렇게 만들고 싶다고 여쭤봐서 내 코드를 분석하여 원인을 찾아보기로 하였다. 시도해본것 showMovieList(""); 나의 경우, 영화 리스트를 보여주는 함수를 처음에 실행하고 if (title.toLowerCase().includes(val.toLowerCase())) 이후 if문을 사용하여 해당 값이 포함된 영화제목의 영화를 보여주는 원리이며 이후 영화 검색을 할 때, function showSearchList(e) { movieList.innerHTML = ""; // 빈 여백값으로 만듬 e.preventDefault(); // 브라우저.. [JavaScript] 5주차_클래스 생성 연습 // 클래스 연습해보기 class Car { // 클래스 생성 constructor(modelName, modelYear, type, price) { this.modelName = modelName; this.modelYear = modelYear; this.type = type; this.price = price; } makeNoise() { console.log( `${this.modelName}는 ${this.modelYear}년식이며 ${this.type}타입이고 ${this.price}만원 입니다.` ); } } const car1 = new Car("쏘렌토", "2023", "디젤", "4000"); car1.makeNoise(); //쏘렌토는 2023년식이며 디젤타입이고 4000만원 입니다. TIL 23.05.28 문제점 영화제목 검색시, 페이지 초기화가 제대로 되지 않는 문제점이 있었다. 검색된 제목은 나오는데 기존에 있었던 영화 목록에 계속 추가되는 바람에 보기가 불편했다. 시도해본 것 // 영화 리스트 보여주기 function showMovieList(val) { movieList.innerHTML = ""; // 이하생략 } 영화 리스트 보여주는 함수 첫 부분에다 작성했었는데, 이건 val 값을 입력해볼 겨를도없이 빈 페이지가 나왔다. 영화 val 값에 따른 영화제목 검색 조건식에도 작성해 보았으나 똑같은 결과가 나왔다. 해결방안 function showSearchList(e) { movieList.innerHTML = ""; e.preventDefault(); const val = searchInput.v.. 이전 1 ··· 5 6 7 8 9 10 다음
