본문 바로가기

전체 글59

[React] 리액트에서 폰트어썸 사용하기 1. 터미널에 명령어 입력해서 폰트어썸을 프로젝트에 설치 yarn add @fortawesome/fontawesome-free yarn 또는 npm 사용 2. index.js 파일에 폰트어썸 import 해주기 import "@fortawesome/fontawesome-free/js/all.js"; 2022. 1. 4.
[Git] error: failed to push some refs to error: failed to push some refs to 'https://github.com/codnjs779/listApp.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull...') before pushing again. hint: See the 'Note about fast-forwards' in 'g.. 2022. 1. 4.
[Web] Critical Rendering Path 🔷 DOM + CSSOM 브라우저가 페이지를 렌더링 하려면 DOM과 CSSOM 트리를 생성해야 한다. 성능이 좋은 웹페이지를 만들기 위해서 최대한 빨리 HTML, CSS를 브라우저에 제공해줘야 한다. 작성한 코드는 브라우저에서 작동할 수 있게 변환되는데, HTML -> DOM // CSS -> CSSOM으로 변환된다. HTML로 마크업된 코드가 DOM으로 변환되기 까지 아래와 같은 과정을 거친다. Hello web performance students! 1. Bytes 브라우저가 HTML의 원시 바이트를 읽어와서 해당 파일에 대해 지정된 인코딩에 따라 개별 문자로 변환한다. 2. 토큰화 브라우저가 문자열을 웹 표준에 지정된 고유 토큰으로 변환한다. 3. 렉싱 토큰은 해당 속성 및 규칙을 정의하는 객체로 .. 2021. 12. 14.
[CSS] box-sizing 속성 1) box-sizing: content-box; 정해둔 상자의 크기는 변하지 않음. 그래서 border 설정을 하면, 바깥쪽으로 커짐 .parentBox { box-sizing: content-box; width: 100px; height: 100px; border: solid #4bdd38 20px; padding: 5px; } 2) box-sizing: border-box; 정해둔 상자의 크기와 border 의 크기를 합해서 크기가 책정됨. 예를 들어 100px 100px 크기의 상자를 만들었음 거기에 border속성으로 solid, 10px, red를 추가하면 바깥으로 border가 적용되는 것이 아니라 안쪽으로 적용되서 정해둔 상자의 크기가 그만큼 줄어들게 됨. .childBox { box-si.. 2021. 12. 7.
[GraphQL] 그래프큐엘 등장 배경과 강점 (feat. REST API) REST API, GraphQL은 클라이언트와 서버가 데이터를 주고받는 형식이다. 요청형식 용도 GET 정보 받아옴 POST 정보 입력 PUT/PATCH 정보 전체 수정/ 정보 부분 수정 DELETE 정보 삭제 이런 방식으로 데이터를 주고받는다. 그래서 각 데이터를 받아 올 때 기본 API주소에 특정 id를 추가하거나 변수들을 추가해서 필요한 데이터를 주고받을 수 있다. 하지만, REST API는 예를 들어서 A팀의 주장 이름만 받아오고 싶다 하는 경우에도 특정 데이터만 콕 찝어서 받아올 수 없고 큰 범주의 데이터를 해당 URI를 통해 받아온 후 사용해야 한다. 이런 경우를 Overfetching이라고 한다. 또한, REST API는 각 요청 형식마다 URI주소가 전부 다르기 때문.. 2021. 12. 3.
[JS] 동기(Synchronous), 비동기(Asynchronous) 프로그래밍(+Promise) 동기, 비동기 프로그래밍은 코드가 실행되는 순서의 차이가 있다. 이 두가지 개념을 기차에 비유해 보자면, 아래 그림과 같다. 동기 프로그래밍은 앞 기차가 가기 전까지 뒤 기차들은 순서를 기다려야 하는 것과 같다. 비동기 프로그래밍은 앞 기차가 가길 기다리지 않아도 되고 다른 경로로 이동해서 최적의 선로를 찾아 운행되는 것과 같다. 즉 동기는 하나의 코드가 실행되기 끝나기를 기다려야 다음 코드가 실행될 수 있는 것이라면, 비동기는 한 코드의 실행시간이 길어질 때 다음 코드들도 동시에 실행 되는 것이다. console.log('1번기차 출발') setTimeout(() => { console.log('2번기차 출발')}, 3000) console.log('3번기차 출발') 2번기차가 출발하는 것을 기다리지 .. 2021. 12. 3.

티스토리툴바