My Boundary As Much As I Experienced

옛날부터 npm으로 뭔가 설치하거나 지울 때, vscode로 node-modules 안에 있는 파일 수정할 때, 간간히 나던 에러인데 정확한 원인은 모르고 sudo -s를 입력해서 간간히 임시적으로 해결했었다. 그러나 현재 firebase를 깔고 설치된 public/index.html 파일 내에서 작업해야 되는데 계속 permission 뭐시기때문에 fail했다는 얘기만 나와서 더 이상 진행이 불가능 했었다ㅠㅠ stack overflow와 다른 모든 블로그 정보 글을 봐도 해결 못하던 문제를 이곳에서 해결했다. 생명의 은인이다.=> https://nuggy875.tistory.com/123 해결 방법:/*$ echo $USER$ echo $HOME으로 유저이름과 홈 디렉토리를 정확히 알아내고, 아래 명령..

과제 목표: HTML/CSS를 사용하여 원하는 페이지를 구현하기(JS는 꼭 필요한 부분에만 사용하고 그 이유를 명시하기) 결과물: 원본 사이트: https://line.me/ko/ LINE｜라인은 언제나 사용자와 함께 합니다. 메신저 앱 그 이상의 경험을 제공합니다. 라인은 새로운 인프라 경험, 새로운 커뮤니케이션 경험을 모두에게 전달하고자 합니다. line.me 클론 코딩 결과물: https://playful-eclair-e2793a.netlify.app/ LINE｜라인은 언제나 사용자와 함께 합니다. 메신저 앱 그 이상의 경험을 제공합니다. 라인은 새로운 인프라 경험, 새로운 커뮤니케이션 경험을 모두에게 전달하고자 합니다. line.me 과제에서 배운 부분: 지금껏 html/css/바닐라 자바스크립트..

GSAP이란? GSAP은 자바스크립트 애니메이션 라이브러리이다. CSS로도 transition이나 애니메이션을 만들 수 있고, JS로도 어느정도 동적인 웹사이트를 만들 수 있지만, GSAP을 이용하면 훨씬 더 쉽게 애니메이션을 만들 수 있다. 반복적이거나 yoyo효과같은 것도 만들 수 있다. 기본적인 사용법 (조작할 수 있는 속성) 더보기 위치 및 크기: x: 요소의 가로 축 위치를 이동합니다. y: 요소의 세로 축 위치를 이동합니다. left: 요소의 왼쪽 위치를 이동합니다. top: 요소의 위쪽 위치를 이동합니다. right: 요소의 오른쪽 위치를 이동합니다. bottom: 요소의 아래쪽 위치를 이동합니다. width: 요소의 너비를 조절합니다. height: 요소의 높이를 조절합니다. scale: ..

공통점 .append()와 .appendChild() 모두 대상 객체에 자식 노드를 추가하는 메소드이다. .append() append메소드를 사용하면 노드 객체(Node Object)나 DOMstring을 사용할 수 있다. 1. 바로 텍스트를 추가할 수 있다. 2. 여러 개를 한꺼번에 추가할 수 있다. .appendChild() 1. 텍스트를 추가하려면 createTextNode를 만들어서 첨부해야 된다. 2. 한 번에 하나의 요소만 추가 가능하다. 결론 여러모로 append를 쓰는게 낫겠다. appendchild를 여러번 쓸걸 한 번에 처리할 수 있을거같다.

정의: Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 말이 너무 어려운데, 쉽게 말하자면, 외부 API를 호출했는데 값이 아직 안 왔다는지, 의도적으로 setTimeout(시간 지연)하고나서 그 값을 활용해야된다는지 등등.. 다른 모종의 이유로 아직 값이 할당되지 않은 변수를 활용하는 방법 중 하나이다. 예를 들어 날씨 API를 활용하여 기상 예보를 보여주는 사이트가 있다고 해보자. 이 사이트에는 이런 로직이 있다. 1. 날씨 API를 사용해서 오늘의 날씨를 조회한다. 2..

인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다. 대부분의 웹페이지가 메타 정보 중 decription과 title정도는 표출해주기도 하지만, 그것만으로 링크의 정보를 파악하기 힘든 경우가 많다. 이 문제점을 개선하기 위해 웹페이지에 대한 정보를 담고 있는 메타 정보의 사용 방식을 표준화하여 페이스북을 포함한 모든 sns 링크 공유 시 통일된 형식으로 정보를 표출하게 설계되었다. sns에 특화된 프로토콜이다. SEO에 도움이 되는가 SEO에 직접적인 영향을 주지는 않는다. 하지만 오픈 그래프 태그를 사용했을 때 웹사이트의 사용자 유입, 전환률에 확실한 영향을 준다는 점에서 SEO 못지않은 큰 장점을 가지고 있다. 기본형 og:title - 웹 페이지 제목 og:type - 웹 페이지 유형 ..

Callback 콜백이란? 함수가 끝나고 난 뒤에 실행되는 함수. 자바스크립트에서 함수는 객체이다. 따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있다. 인자로 대입되는 함수를 콜백함수라고 부른다. 다른 함수에 콜백 함수를 대입하는 방법 1. 익명함수로 전달 myDiv.addEventListener("click", function (){ console.log("익명함수를 넣어서 동작!") }) // 사실 기명함수를 선언해서 넣어도 똑같다. 이름이 있으나 없으나 상관없다. 2. 화살표 함수로 전달 myDiv.addEventListener("click", () => console.log("화살표 함수를 넣어서 동작!")}) 3. 선언/표현한 함수를 전달 myDiv.addEventListene..

인터넷의 발전으로 방대한 양의 웹문서가 생기면서, 제각기 일관적이지 않게 생성된 문서 구조는웹문서에서 원하는 정보를 찾기가 점점 힘들어 지게 만드는 원인이었다. 태그의 기능과 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위한 태그.HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그.   시멘틱태그를 사용하면 좋은점(장점)1. SEO 최적화에 유리. (SEO: Search Engine Optimization)검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어검색 결과의 노출에 유리할 수 있게 해준다. 2. 웹 접근성에 효율적일반적인 브라..

기본적인 Display 속성의 종류 none block inline inline-block - 안 보여요. - 클릭도 안 돼요. - 아예 영역이 사라져요. - 한 블록을 모두 점유하는 요소이다. - 대표적으로는 h, div 등이 있다. - height와 width를 설정할 수 있다. - 구획으로도 많이 쓰인다. - 글자처럼 취급되는 요소이다. - 한 블록에 여러 개가 쌓일 수 있다. - 대표적인 인라인 요소는 p, span 등이 있다. - height와 width를 가질 수 없다. (컨텐츠에 auto로 맞춰짐) - block과 inline의 중간 형태. - 라는데 그렇게 딱히 쓰이는 걸 본 적이 없다. Display: none과 visibility: hidden, Opacity: 0의 차이 display..

자료형을 생성하는 2가지 방식 프로토타입을 만들기 전에 예시로 배열을 만드는 데는 2가지 방법을 사용해보자 const fruits = ["Apple", "Banana", "Cherry"]; //배열 리터럴 방식 const fru2 = new Array("Apple", "Banana", "Cherry"); //사실 리터럴로 입력해도 컴퓨터는 생성자 함수 방식으로 생성한다. 하나는 배열 리터럴 방식으로, []을 이용해서 직관적으로 자신이 넣고싶은 데이터들을 넣을 수 있다. 나머지 하나는 생성자 함수를 사용하는 방법이다. new 연산자와 맨 앞글자가 대문자인(파스칼 표기법) 생성자 함수를 사용하는 방식이다. Array뿐만 아니라, Object도 이와 같이 생성할 수 있다. 생성자 함수(틀)에서 내가 원하는 객..