1. 깃허브 레파지토리 Issues 탭 입력창에 이미지 드래그 하면 이미지호스팅이 된다. 2. 위키나 리드미 입력창에 주소를 넣어준다. gif도 잘들어간다.
분류 전체보기
.../ 이 거슬린다. 우리가 진행한 프로젝트는 상대경로를 통해 각 폴더에 접근한 프로젝트였다. 상대경로를 이용하면 굳이 코드 건드리지 않고 작업은 편하다고 생각했지만 컴포넌트가 세분화 될수록 다른 개발자가 만든 컴포넌트를 import해올때 어디에있는지 경로를 찾는것도 일이라 생각했다. 처음부터 설정하고 작업을 진행할걸이라는 생각이 들면서 다음프로젝트에 절대경로를 설정해서 개발을 진행하면 코드가 좀더 깔끔하지 않을까 생각하며 절대경로 설정방법을 확인해봤다. 설정방법 이래저래 찾아보니 cross-env 라이브러리를 설치하는 방법도 있는데 공식문서를 보니 json파일추가로 라이브러리 설치없이 절대경로 설정이 가능한것 같아 이 방법으로 적용해보았다. CRA문서 > jsconfig.json 또는 타입스크립트의 ..
만들었다고 끝이아니다. 사이트의 성능개선을 위해 크롬에서 제공하는 웹사이트의 성능을 측정하는 도구 LightHouse로 측정했고 하성능 최적화를 위해 하나하나씩 해결이 필요했다. 우선 각각의 컴포넌트 파일이 어떤 코드로 구성이 어떻게 되어 있는지 확인이 필요했고, 어떻게 하면 초기 리로딩 성능을 개선할지 인사이트를 주는 cra-bundle-analyzer라는 패키지를 발견해서 적용해보았다. 설치 1. 먼저 webpack-bundle-analyzer를 devDependencies로 설치 $ yarn add -D webpack-bundle-analyzer 2. cra-bundle-analyzer도 devDependencies로 설치 $ yarn add -D cra-bundle-analyzer 3. 아래 명령..
항해99를 시작하고 담은 회고일지 🏃♂️항해 1주차 회고 > 🏃♂️항해 2주차 회고 > 🏃♂️항해 3주차 회고 > 🏃♂️항해 4주차 회고 > 🏃♂️항해 5주차 회고 > 🏃♂️항해 6주차 회고 > 🏃♂️항해 7-13주차 회고 >
Web Components 들이 매우 많아 귀찮을 경우, 여러개의 태그들을 하나의 단어로 축약할 수 있는 문법 자바스크립트 문법은 아니고 브라우저 기본 기능 중 하나임. 커스텀 html 태그 만드는 법 예를 들어서 이라고 입력하면 이렇게 2개의 태그가 안에 출현하게 만들고 싶음 같은 커스텀 태그를 이제부터 컴포넌트라고 칭할겁니다. 컴포넌트를 만들고 싶으면 이런 형식에 따라서 그대로 타이핑만 하면 됩니다. 이건 정해진 문법이라 이해할 필요는 없고 따라치면 됩니다. class 클래스 extends HTMLElement { connectedCallback() { this.innerHTML = '이름을 입력하쇼' } } customElements.define("custom-input", 클래스); 1. 컴포넌트..
for in 반복문 Object에 사용 var 오브젝트 = { name : 'Kim', age : 30 }; for (var key in 오브젝트) { console.log(오브젝트[key]); // Kim 30 } 특징 1. 셀수있는 것만 출력해줌(enumerable) var 오브젝트 = { name : 'Kim', age : 30 }; console.log( Object.getOwnPropertyDescriptor(오브젝트, 'name') ); //{value: "Kim", writable: true, enumerable: true, configurable: true} enumerable이 true인 자료들만 for in 반복문이 출력가능 2. 부모의 prototype에 저장된 것도 출력 class ..
Promise 성공하면 then(), 실패하면 catch()를 실행 1. 일단 new Promise()로 생성된 변수를 콘솔창에 출력해보시면 현재 상태를 알 수 있음 성공/실패 판정 전에는 성공 후엔 실패 후엔 이렇게 프로미스 오브젝트들은 3개 상태가 있습니다. 그리고 성공을 실패나 대기상태로 다시 되돌릴 순 없음 2. Promise는 동기를 비동기로 만들어주는 코드가 아님 Promise는 비동기적 실행과 전혀 상관이 없습니다. 그냥 코딩을 예쁘게 할 수 있는 일종의 디자인 패턴입니다. var 프로미스 = new Promise(function(성공, 실패){ var 어려운연산 = 1 + 1; 성공(); }); 프로미스.then(function(){ console.log('연산이 성공했습니다') }).ca..
Array 안에 있는 데이터를 변수에 담는 방법 var array = [2,3,4]; var a = array[0]; var b = array[1]; var [a,b,c] = [2,3,4]; //디폴트값도 가능 var [a,b,c = 5] = [2,3]; Object 안에 있는 데이터를 변수에 담는 방법 var { name : a, age : b } = { name : 'Kim', age : 30 }; var { name, age } = { name : 'Kim', age : 30 }; //name = 'Kim' 변수를 object로 집어넣고 싶은 경우 key값과 value값이 동일하면 하나로 생략이 가능 var name = 'Kim'; var age = 30; var obj = { name, age }..
말풍선을 어떻게 만들지? scope프로젝트에서는 테스트진행 페이지에 진행도를 나타내는 프로그래스바가 있었고 그 상태게이지 상단에 말풍선모양의 디자인을 구현해야하는 와이어 프레임을 전달 받았다. svg형태로 가져다 쓰면 편하겠지만 css로 만들어 보고싶었다. border-width, ::before, ::after 이 3가지가 핵심 - border-width : top, right,bottom, left 순서로 적용 - ::before는 중심컨텐츠앞 ::after는 뒤에 배치 const ArrowBubble = styled.div` position: relative; width: 100%; height: 25px; padding: 0 5px; background: #f1f9ff; /* -webkit-bor..
Constructor 비슷한 object를 쉽게 찍어낼수 있는 문법 constructor안에서 쓰이는 this는 새로생성되는 object를 뜻함 상속(inheritance)이라함 - this : 기계에서 새로 생성되는 object (instance) - 기계 : object생성기(constructor, 생성자) //var 학생1 = { name : 'Kim', age : 15 }; function 기계(이름,나이){ this.name = 이름; this.age = 나이; this.sayHi = function() { console.log('안녕하세요'+ this.name +'입니다') } } var 학생1 = new 기계('park',13); //기계 {name: 'park', age: 13, sayHi..
