지식을 훔쳐라 ❕ 👀 지식을 훔쳐라 ❕ 👀

분류 전체보기

• [React] 강의

  FrontEnd/React 2022. 6. 16. 16:51

  React.js 모바일 앱 : 반응이 빠르고 화면 전환이 원활 -> 앱 사용 편리함 웹 사이트 : 링크나 버튼을 누르면 그 요청이 서버로 전송되고 서버로부터 얻어진 html 문서를 불러오는 데 시간이 소요되기 때문에 오래 걸림 자바스크립트 개발자들이 브라우저에서 어떤 로직을 수행할 수 있게 해준다. 사용자들이 화면에서 보는 것들을 조작할 수 있음 (DOM) DOM을 자바스크립트로 조작할 수 있음 (새로운 HTML 문서를 불러올 필요가 없음) 리액트 : 클라이언트 사이드의 자바스크립트 라이브러리 자바스크립트 대신 리액트를 사용하는 이유 자바스크립트 모든 단계를 일일히 코드로 작성해야 함 -> 반복작업으로 인한 시간 소요, 간단한 기능을 구현하는데에 자바스크립트 코드가 길어질 수 있음 여러 개의 요소가 존재..

  Read More
• [JS] Uncaught TypeError: Cannot read properties of null 에러 해결방법

  FrontEnd/JavaScript 2022. 6. 4. 00:23

  Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth') 왜 이 에러는 계속해서 날 괴롭힐까 ? 이유는... 내가 바보니까......................^^ 해결 방법! 브라우저가 보여주는 에러 이유는 명확하다! 에러를 잘 읽어보자. null이라는 단어가 눈에 띈다. 바로! 내가 찾으려는 요소에 null 값이 있다는 것이다. 즉, 내가 선택한 요소에 값이 들어오지 않아 속성을 읽어올 수 없다는 에러였다. 나는 선택한 요소의 실제 너비(width)값을 얻기 위해 offsetWidth 속성을 출력하려 했는데 에러가 발생했다. 그래서 if 문을 이용해 선택 요소에 null이 들어가면 return 을 해서 다음 반복문을 실행하..

  Read More
• [CSS] Transition Error

  FrontEnd/HTML／CSS 2022. 5. 27. 00:31

  js(자바스크립트)로 버튼을 눌렀을 때 콘텐츠가 스르륵 넘어가는 효과를 주기 위해 transition을 사용하려고 했다. 근데 자꾸 transition이 안먹고 뚝딱 움직이기만 해서 개발자 도구를 찾아보니 속성값이 유효하지 않다는데 문제가 뭔지 알 수가 없었다. 찾아보니 단위를 쓰지 않거나 calc 메서드 내에 연산자 띄어쓰기를 하지 않아도 발생하는 개복치 오류였다.. 단위를 안쓴게 없는데 잘 생각해보니 설마 0에 단위를 안써줘서 그런건가 싶어 코드를 수정했더니... 스르르르르ㅡ르,,,, 효과가 잘 나타남.............................^^ 개복치 오류야 고마워! 덕분에 오늘도 하나 배웠다! 정리 transition 속성 사용 시, 발생하는 invalid property value 오..

  Read More
• [JS] Uncaught TypeError: forEach is not a function error

  FrontEnd/JavaScript 2022. 5. 23. 01:42

  Uncaught TypeError: forEach is not a function error document.getElementsByClassName으로 얻은 배열에 forEach를 사용하려고 시도했더니 이런 에러가 발생했다. 알고보니 getElements로 받아온 DOM 배열(?)은 실제로는 배열(Array)이 아닌 HTML collection이었다. getElementsBy~가 반환하는 값은 배열이 아니기 때문에 forEach를 사용할 수 없다. https://developer.mozilla.org/ko/docs/Web/API/Element/getElementsByTagName Element.getElementsByTagName() - Web API | MDN Element.getElementsByT..

  Read More
• [Git] git pull, git commit 오류

  기타/Git 2022. 5. 22. 21:39

  fatal: refusing to merge unrelated histories git pull origin master git 저장소의 최신 버전으로 pull을 시도했는데 오류가 발생했다. 아마도 내가 이전에 서로 다른 방법으로 2번 push 한 경우 다른 프로젝트가 한 repository에 존재하기 때문인 것 같다. git pull origin master --allow-unrelated-histories 그래서 관계없는 두 번의 push 내역들을 병합하여 pull 하는 명령을 실행시켰다. 이후 작업을 끝내고 commit을 하려는데 또 오류가 발생했다. error: Committing is not possible because you have unmerged files. 로컬 저장소와 원격 저장소(g..

  Read More
• [FE] HTTP와 HTTPS

  FrontEnd 2022. 5. 18. 10:58

  HTTP와 HTTPS HTTP HTTP(HyperText Transfer Protocol)란? 서버-클라이언트간의 데이터를 주고받는 프로토콜, 규약 거의 모든 형태의 데이터 전송 가능 Application 계층의 프로토콜로, TCP/IP 위에서 동작 상태를 가지고 있지 않은 프로토콜(Stateless) 포트번호 80번 HTTP Message 구조 브라우저에 URL을 입력하면 HTTP 표준에 따라 URL을 요청 메시지로 변환하고 TCP/IP를 사용하여 인터넷을 통해 요청을 보낸다. 웹 서버는 요청을 수신하고 클라이언트가 요청한 웹 페이지를 반환(response)한다. HTTP Request : 클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지 HTTP Request start line HT..

  Read More
• [JS] 문벅스 Vanila JS

  FrontEnd/JavaScript 2022. 5. 16. 19:16

  문벅스 카페의 에스프레소 메뉴판 만들기 메뉴 추가 Element.insertAdjacentHTML() HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가한다. 이미 사용중인 element는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므로 빠르다. 'beforebegin' : element 앞에 'afterbegin' : element 안에 가장 첫번째 child 'beforeend' : element 안에 가장 마지막 child 'afterend' : element 뒤에 ul.querySelectorAll("li").leng..

  Read More
• [JS] innerHTML, innerText, textConten

  FrontEnd/JavaScript 2022. 5. 14. 15:53

  HTML 삽입 미리보기할 수 없는 소스 innerHTML 요소의 속성 중 하나로, 요소(element) 내에 포함 된 HTML 또는 XML 마크업 따라서 하위 요소의 HTML 태그가 출력되는 것을 알 수 있음.. innerText 요소의 렌더링된 후 텍스트, 즉 화면에 출력되는 텍스트 display: none; 으로 설정된 span 텍스트는 출력되지 않음을 알 수 있음. textContent 요소를 노드화하여(?) 노드의 하위 노드 텍스트까지 모두 출력 (숨겨진 요소의 텍스트도 가져옴) https://developer.mozilla.org/ko/docs/Web/

  Read More