아싸지만 1일1글 하고싶어

목차 시작하기 전 이전에 아이콘을 쓰는 법을 포스팅 한 적 있는데 무료 icon 쓰기 / fontAwesome 이 포스팅의 목적은 fontAwesome이 설정에 따라 출력이 안 되는 걸 발견해서이지만, 나는 언제나 포스팅을 이 정보를 처음 접하는 사람이 본다 생각하고 쓰니 fontAwesome을 설명하고 나서 쓰겠다. 서 sirong.tistory.com React에서 그대로 쓰면 style 제한이 좀 있다. 그래서 React용 icon 쓰는 법을 새로 찾아 포스팅해본다. 설치방법 react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons..

React의 장점!! 새로운 언어를 쓸 때에는 그 언어의 장점을 인지하며 내가 이렇게 근사한 언어를 구사한다~라는 느낌으로 프로젝트를 하면 뭔가 기분이 좋다. 그래서 적어보는 리엑트의 장점!! 효율적 렌더링 html과 css의 데이터를 종합하여 출력하는 것을 렌더링이라 한다. 하지만 우리는 그림을 보려고 하는 게 아니라 우리에게 맞춰 변화하는 화면을 볼려하기에 랜더링은 수시로 일어나게 된다. 이때 React의 대표적인 장점이 부각되는데, 기존의 렌더링이 변경해야 하는 부분이 있다면 새로 랜더링을 하는데 비해, React는 Virtual Dom이란 가상의 객체를 랜더링 하고 변경될 때마다 이와 비교하여 달라진 곳만 랜더링 한다. 즉, 웹의 변화를 빠르게 구현할 수 있다. 내 웹이 다른 웹보다 빠르다니!! ..

Visual Code를 쓰다보면 자동완성을 자주 많이 쓰게 된다. 그런데 하다보면 이런 자동완성을 나에게 맞게 수정, 추가 하고싶을때가 생긴다. 그럴때를 위한 포스팅! 왼쪽 하단의 톱니바퀴(Manage)를 누른다음 User Snippets(사용자 코드 조각)을 눌러준다. 그러면 화면 상단 중앙에 창이 뜨는데 자동완성을 추가하고 싶은 파일확장자를 입력 해 준다. .json을 무조건 쳐 줄 필요는 없다.(리스트에선 생략되어 있을 뿐) 초기 html.json 파일 자동완성 이름이라 적힌곳에 이 자동완성의 이름을, prefix에 자동완성을 불러올때 필요한 글자, body에 내용을, description에 자동완성에 대한 설명을 적어주자. body가 여러줄이라면 정렬과 같이 대괄호에 넣어주자 성공적으로 추가를 완..

Visual Code로 웹개발을 하는 중 세이브를 계속 하는게 귀찮을때가 많다. 깜빡할때도 많고 세이브 시점으로 이전으로 되돌리기가 안되는것도 아니니 자동저장 설정을 해놓아서 문제 될 확률은 적은 것 같다. Visual Code를 켜준 뒤, ctrl + , 를 눌러준다 그럼 설정 창이 뜨는데 설정 검색에 auto save를 타이핑해주자 그럼 Files: Auto Save가 뜨는데 afterDelay : 문서를 변경 후 Auto Save Delay에서 설정한 시간(ms / 1s = 1000ms) 뒤 자동저장한다. onFocusChange : 문서 변경 후 다른문서 / 다른프로그램을 실행 할 시 자동저장한다. onWindowChange : 문서 변경 후 다른프로그램을 실행 할 시 자동저장한다. afterDe..

https://sirong.tistory.com/23 무료 icon 쓰기 / fontAwesome 이 포스팅의 목적은 fontAwesome이 설정에 따라 출력이 안되는걸 발견해서이지만, 나는 언제나 포스팅을 이 정보를 처음접하는 사람이 본다 생각하고 쓰니 fontAwesome을 설명하고나서 쓰겠다. 서론 fo sirong.tistory.com 오늘 쓴 글은 다른 사람이 안 되는 상황을 내가 알아내어 도와준 정보를 적은 것이다. 나는 기억에 의존하지 않고 그때그때 순간 이해, 판단으로 문제를 해결하는걸 좋아한다. 기억에 의존하는것은 내가 가진 지식, 내가 믿고 있는 정보를 맹신하여 그 사이에 상황이 달라졌을 가능성을 배제하고, 새로운 정보를 받아들이길 거부할 수 있다고 생각하기에. 늘 모든 가능성과 자신이..

목차 이 포스팅의 목적은 fontAwesome이 설정에 따라 출력이 안 되는 걸 발견해서이지만, 나는 언제나 포스팅을 이 정보를 처음 접하는 사람이 본다 생각하고 쓰니 fontAwesome을 설명하고 나서 쓰겠다. FontAwesome Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 이 사이트를 웹페이지를 만들면서 사용하지 않는 경우는 googlefont보다 적지 않을까 googlefont는 폰트마다 지원되는 언어가 제한되어 있어, 그 언어 국가의 폰트 사이트를 찾는 경우가 있다. Like a http..

SVG 데이터 전달용을 목표로 한 XML를 기반으로 한 언어로써 벡터를 기반으로 한 그래픽을 표현하는 언어이다. 벡터 : 기준좌표로부터 방향과 크기를 가진 물리량 즉 선을 그으면 A(x,y)위치 / 각도 / 이동량 3개로 표현 할 수 있는 것이다. 이렇게 표시함으로써 기존의 이미지 표시와는 다르게 다양한 해상도에서 고해상도 이미지를 구현 할 수 있다. (다시 그리면 되니깐!!) 다만 이것도 데이터이기에 표시해야하는 데이터 수가 많아질수록 시간이 증가한다. 해상도가 자주 변하지만 데이터는 잘 안변하는 네비게이션 어플이 대표적인 예이며, 해상도는 변하지 않지만 복잡한 이미지가 많은 프로그램에서는(게임 어플이라던가) 부적절하다. 최소비랑 최대비는 간단한데 좌측 최상단이 0,0이고 우측 최하단이 120,120이..

목차 html 줄 생성하기 줄 꾸미기 여기서 style을 곁들이면 이쁘게 꾸밀 수 있는데 가로길이 정하기 hr { width: 100px; }​ 세로길이 정하기 height로 높이를 지정할 수 있다. hr { height: 10px; width: 100px; }​ 주의사항 여기서 알아둬야 할게 hr(horizontal rule)은 이름 그대로 자로 선을 긋는 거라 가로 / 세로를 지정 할 경우 내부 면적은 비어 있다. 이를 이용해서 사각형을 그릴 수 있지만 공간 안에 콘텐츠를 담는 것은 제한되어 있고, 무엇보다 접근성에서 불편하니 사각형 용으로 쓰지는 말자. 사각형을 그리고 싶다면 svg나 canvas를 사용하여 그리는 것이 좋다. 심화내용 여기서부턴 심화 내용 hr에 style을 넣는다면 저 정도쯤 일..