\(@^0^@)/

💥 Icon Font 란? SVG 기반의 Vector 그래픽을 Font 파일화 하여 CSS를 통해서 Icon을 사용하는 방식으로, 수많은 이미지 아이콘을 관리해야 하는 방법과 다르게 단순히 Font 파일과 CSS만 관리하면 된다. 대표적으로는 Material-Icon, FontAwesome 이 있으며, 그 외 여러 프레임워크에서 자체 Icon Font를 지원하기도 함. 지난 5년 동안 FontAwesome의 관심도가 Material-Icon보다 더 높은 것을 볼 수 있음. 👍 Icon Font 장점 1. 하나의 글꼴 파일에 다양한 아이콘을 넣어두고 사용 2. CSS로 확장하여 모든 작업이 가능 3. Vector Graphic이기 때문에 크기 변형에 제한이 없음 4. Unicode 또는 Ligature 사..

h1에 텍스트 마크업은 하지만 화면에는 보이지 않고, 스크린리더에서만 읽을 수 있게 스타일링하고, 화면에는 텍스트 대신 이미지를 배경으로 설정하여야 한다. 이렇게 구현해야 되는 이유를 정확히는 모르겠지만, 아마도 스크린리더로 웹 접근성을 준수하고 싶지만, 화면에는 이미 만들어진 svg를 넣어주는 것이 더 효율적이라는 생각 때문인 것 같다. 이미지를 넣고 스타일링으로 디테일을 잡아주는 부분들은 수월했지만, 막상 텍스트를 없애려니 어떻게 없애는 것이 좋은 방법일지 모르겠어서 찾아보니, 생각보다 많은 사람들이 "웹 접근성을 위한 텍스트 숨김 처리"를 고민하고 있었구나..!! 시도해본 방법들 1. display: none 혹은 visibility: hidden 보통 제일 생각해보기 쉬운 게 display: no..

이번 과제에 "HTML은 웹 표준과 웹 접근성을 준수하면서 마크업을 수행하라"는 요구사항이 있었다. 가끔 HTML 관련 강의를 보거나, 클론 코딩으로 웹사이트의 마크업 된 코드들을 파악할 때 모르는 태그가 있어서 구글링 해보면 웹 접근성, 스크린 리더 관련 태그였던 기억이 있다. 그러나, 그 이상으로 주의 깊게 찾아본 적은 없었고 UI에 영향을 주지 않으니 그냥 무시하고 넘어가도 된다는 생각으로 스크린 리더를 적용하지 않고 코딩을 해왔었다. 하지만, 점점 웹 개발자가 되기 위해 공부를 하면서 단순히 작동만 되는, UI 적으로만 오류가 없으면 그만으로 생각하는 개발자가 아닌, 모두가 공평하고 올바른 정보를 주면 좋겠다는 생각을 했고, 그러기에 웹 접근성을 준수해서 개발하는 것이 꼭 필요하다는 생각이 들어,..

캐러셀을 구현하면서 급 궁금해진 document.addEventListener()와 window.addEventListener()의 차이. 일단 document와 window의 차이점을 알아보도록 하자. (지난번 학습한 것 같은 느낌적 느낌) Window vs Document Window : 브라우저 객체 모델의 최상위 객체 (BOM : Browser Object Model)로 현재 웹브라우저의 탭 혹은 창의 모델을 나타낸다. https://developer.mozilla.org/en-US/docs/Web/API/Window Window - Web APIs | MDN The Window interface represents a window containing a DOM document; the docum..

백엔드없이 to-do-list를 만들기 위해 full fake REST API인 json-server를 사용하였음. 그리고 to-do-list를 구현하면서 추가한 기능 pagination를 정리해보려 한다. 1. route 설정 현재 페이지를 나타내줄 _page와 한 페이지 당 데이터의 갯수를 나타내 줄 limit을 요청하기위해 fetch로 GET을 불러오는 getTodos함수의 url을 아래와 같이 변경해주었음. 그렇게 변경하고 해당 페이지를 새로고침 하니, url이 아래와 같이 변경되었다. 2. pagination 구현을 위한 값 설정. 현재 페이지 총 데이터의 갯수 (백엔드와 연결된 것이 아니기에 내 데이터의 갯수를 넘길 수는 없고, 임의로 설정해야 함) 화면에 나타날 페이지 갯수 한 페이지 당 나..

server가 없는 개발서버에서는 SSR, SSG의 차이점을 구분하기가 어려우니, 간단한 server를 만들어, 프로덕션 환경에서 둘의 특징과 차이점을 파악해보자. 💥 Server 구축 1. 서버용으로 프로젝트를 하나 생성하여 터미널에 npm install express cors를 설치하여 서버를 구축해주고, 2. 3. data.js 파일을 만들고, json 형식의 데이터 생성.(나의 경우에는 jsonplaceholder의 fake data를 사용했음) 4. 터미널에 node app.js를 입력하여 서버를 작동하고, 5. 브라우저에서 내가 지정한 port 번호 + 주소로 들어가 보면 (나의 경우에는 http://localhost:8080/api/posts ) 위와 같이 json 형식으로 data가 받아지..

프리온보딩을 하며 Next.js를 처음 접했는데 우리 팀이 선택했던 과제는 페이지가 하나인 프로젝트여서 Next.js의 맛을 전혀 느낄 수가 없었다. 그래서 선택하지 않은 좀 더 큰 규모였던 과제를 혼자 차근차근 만들면서 Next.js를 공부해보려 한다. 강의를 듣고 있는 중인데, Next.js하면 빠질 수 없는 CSR과 SSR를 한번 짚고 넘어가야 할 것 같아서 프로젝트 들어가기 전에 후딱 정리해보자! 💡 SSR이란? Server Side Rendering의 약자로, 말 그대로 서버 측에서 렌더링 하는 방식. 브라우저에서 서버로 컨텐츠를 요청하면, 서버에는 즉시 페이지에 필요한 데이터를 얻어와 모두 삽입하고 CSS까지 모두 적용해서 렌더링 준비를 마친 HTML, JS code를 브라우저에 전달한다. 전..

옵션 파라미터 // 둘은 동일한 표현 // | undefined 를 ? 로 대체할 수 있다. name : string | undefined name ? : string 타입 extend // 타입 변수를 생성할땐 맨앞의 문자를 대문자로 하고, // 구분하기 쉽게 뒤에 type을 붙여주면 좋다. type OrangeType = string; type PriceType = number; type OrangePriceType = OrangeType | PriceType;​ // & 연산자로 object를 extend 할 수도 있음.​ // 하지만 같은 이름의 type 변수를 재정의 할 수는 없음. type ScrollX = {x : number] ; type ScrollY = {y : number] ; typ..

💥Typescript 쓰는 이유 JS는 Dynamic typing을 지원하는 언어로, 타입에 대해 관대하다. 하지만 Dynamic typing은 조그마한 사이즈의 프로젝트라면 편리하지만, 큰 프로젝트를 할 때에는 단점이 될 수 있음. type과 관련된 버그들이 많이 발생하기 때문. ✍ 일반 HTML CSS JS 웹 개발 시 TS를 사용하려면 Node.js 최신 버전, Vscode 에디터를 설치 Vscode 에디터 터미널에 명령어 입력 npm install -g typescript​ 작업 폴더 생성하여 오픈 작업 폴더에. ts로 끝나는 파일을 만들면 끝! ts파일은 js랑 똑같이 사용 가능하지만, 웹브라우저는 ts 파일을 읽지 못하기에, js파일로 변환 작업을 해야 함. js파일로 변환하려면 터미널을 열어..

✨ 삼항 연산자는 만능이 아니다 중첩 삼항 연산자는 파악이 힘듦. 삼항 연산자의 요소가 길어질 때는 &&도 되지 않을까 한번 더 생각하자. 삼항 연산자가 false일때 null 이면 항상 &&연산자를 생각해보거나, 어쩌면 조건부 렌더링조차 필요 없을 수도 있다. 출처 : 프리온보딩 세션 🔑 useState 과도하게 사용하지 않기 1. state가 props를 통해 부모로부터 전달된다면 2. 시간이 지나도 변하지 않는다면 3. 컴포넌트의 다른 state 또는 props를 기반으로 계산할 수 있다면 state가 아니다. 참고 : https://www.zigae.com/useState-dont-over/ 📷 useMemo useMemo는 함수의 값을 pass useMemo를 자식 컴포넌트에 props로 넘겨서..