공부기록 (165) 썸네일형 리스트형 DOM과 Event, BOM에 대해 정리 DOMDOM이란? HTML파일을 브라우저가 나타낼 수 있도록 하는 객체 모델. 브라우저에서 메모리에 저장되는데 트리형태로 저장됨. JS가 접근하여 DOM의 구조를 변경할 수 있게 하는 API도 제공함.DOM의 구조를 변경할 수 있게 하는 API에는 무엇이 있을까? getElementById, innerHTML, innerText등이 있다.DOM이 왜 중요한가?DOM이 없다면 HTML을 JS로 동적으로 변경할 수 없다.DOM과 HTML이 다른 점 HTML단지 계층 구조로 나타낸 문서이다. 그러나 DOM은 이것을 파싱하여 계층구조로 브라우저의 메모리에 저장된 객체모델이다. DOM에는 document인 루트 노드를 시작으로 브라우저에서 DOM을 조작해줄 수 있는 메서드까지 존재한다.DOM요소 추가 생성하는 방.. 코어자바스크립트 chapter 7 👉클래스란? 자바스크립트에서의 클래스는 생성자 함수를 new 연산자와 함께 호출하면 인스턴스가 생성된다.이때 Array의 prototype 내부요소들이 인스턴스에 상속된다.(프로토타입 체이닝에 의한 참조) -클래스는 일급객체다 - 무명의 리터럴로 생성가능 (런타임에 생성가능) - 변수나 자료구조에 저장가능 - 함수의 매개변수에 전달가능 - 함수의 반환값으로 사용가능- 클래스에서 정의할 수 있는 메서드 종류 - constructor(생성자) - 프로토타입 메서드 - 정적 메서드 👉스태틱 메서드란?var Rectangle = function (width, height) { //생성자함수 this.width = width; this.height = height;}Rectangle.. [Next js]Metadata 추가하기 metadata추가하기 metadata는 SEO와 공유가능한 곳에서 중요하다. 메타데이터란? 메타데이터의 타입들 Open Graph image를 metadata를 사용해서 추가하는 방법 metadata를 사용해서 favicon을 추가하는 방법 1. 메타데이터란? 웹페이지의 추가 상세내용을 제공한다. 메타데이터는 페이지를 방문하는 유저에는 보여지지 않고 페이지의 HTML내에 때때로 head 엘리먼트 안에 내장된다. 이 숨겨진 정보는 search engines와 웹페이지의 컨텐츠를 더 많이 알 필요가 있는 다른 시스템에 중요한 정보다. 왜 metadata가 중요한가? metadata는 페이지의 SEO를 강화하는 데 중요한 역할을 한다. 적절한 metadata는 search engines가 효과적으로 웹페이지.. 자바스크립트 날짜 라이브러리 쓰는 이유와 라이브러리 비교 이전의 프로젝트에서는 날짜 라이브러리를 사용하지 않고 Date객체만을 활용해 날짜를 사용하였다. 그러나 이렇게 자바스크립트에서 Date객체를 활용하면 브라우저별로 시간이 다를 수 있다. timezone을 고려하지 않으면 서버와 클라이언트 간의 지역이 다른 경우 시간대가 달라질 수 있다. (timezone이란? 영국 그리니치 천문대를 기준으로 지역에 따른 낮밤의 차이를 조정하기 위해 구분된 시간의 구분선. 지구는 24개의 시간대가 있다.) 날짜 라이브러리는 이러한 timezone을 고려하였기 때문에 시간차에 대한 불편함을 겪지 않아도 된다. 그러므로 프론트엔드에서는 대부분 날짜 라이브러리를 사용한다고 한다. 라이브러리 사용을 위한 비교 1. dayjs 2. moment js 3. date fns 4. lu.. [tailwind] utility클래스의 우선순위 적용문제 문제 상황 : 현재 페이지의 path별로 nav바에 스타일을 적용하는 중이다. util 클래스인 nav-hover를 path에 따라 return하여 적용하였으나 스타일이 적용되지 않았다. 아래는 nav바의 목록이다. 추가 검색 식재료 영수증 문제의 원인 : next에서 제공하고 있던 전역 css스타일 문제는 위의 layout.css파일에서 [type='button']인 것들이 모두 적용되고 있었다. layout.css파일의 위치는 다음과 같았다. 실제로 해당 파일의 위치에 들어가보니 해당 스타일이 적용되어 있었다. css우선순위 출처 : Specifishity :: Specificity with Fish specifishity.com 아래로 내려갈 수록 우선순위가 높다. 내가 적용 한 것은 클래스 선택.. [docker] 백엔드 docker-compose 파일 build 에러 디버깅해보기 3 (Error connecting to database ConnectionRefuseError 에러) - 해결완료!!! 1. 에러상황 : Error connecting to database ConnectionRefuseError 2. 시도해본 것들 3. 에러 해결 성공! 4. 작은 에러 docker-compose up 했을때 서버 유지되지 않는문제 1. 에러상황 : 2. 시도해본 것들 1) docker container mysql의 port 변경해보기 로컬 mysql과 충돌될 수 있으므로 host port를 3306에서 3307로 변경해본다. sequelize를 사용하는 곳에도 똑같이 port를 3307로 변경해준다. 2) docker container의 ip 확인하기 docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' [containe.. [docker] 백엔드 docker-compose 파일 build 에러 디버깅해보기 2 에러상황 구현하고자 했던 것 성공적으로 완료하면 디버깅 방법 1. 문제 1. env파일에 작성한 환경변수 잘 불러와지는가? 문제 2. docker-compose up했을 때 build가 되지 않음 문제 3. 각각의 옵션을 잘 알지 못하며 무엇을 빼놓았는지 알지 못함 에러상황 해결 아직 해결 하지 못한 에러 에러상황 : docker-compose 파일을 활용해 build를 하면 container를 생성하지 못함 구현하고자 했던 것 node와 mysql의 연동을 위해 docker-compose파일을 활용하여 build에 성공 하기 성공적으로 완료하면 docker-compose up container가 잘 생성되고, run을 했을 때 5001포트가 잘 실행될 것임 문제 1. env파일에 작성한 환경변수 잘 불.. [docker] 백엔드 docker-compose 파일 build 에러 디버깅해보기 1 하고자 하는 것 : docker container로 각각 mysql과 node를 생성해서 서로 연결하기 백엔드 초기세팅 : 의문점 1. 백엔드 서버와 mysql 연동은 정상적으로 작동 중인가? mysql과 node 컨테이너 : 의문점 2. mysql과 node 컨테이너는 각각 정상 작동 하는가? 1. node : 컨테이너 빌드 에러없음 [문제점 1] node 컨테이너에서 mysql 컨테이너에 접속할 수 없음 2. mysql : 컨테이너 접속 에러 없음 [문제점 2] docker-compose 파일을 활용해 build를 하면 에러가 뜸 (다음 포스팅) 백엔드 초기세팅 의문점 1. 백엔드 서버와 mysql 연동은 정상적으로 작동 중인가? 1. node로 실행하면 정상 실행 완료 2. express serve.. 이전 1 2 3 4 ··· 21 다음
