TypeScript의 기본 타입들 number ( Number X ) let age: number; age = 12; string (String X) let userName: string; userName="Max"; boolean let isInstructor: boolean; isInstructor = true; 복잡한 타입 arrays let hobbies: string[]; // number[], boolean[] ... hobbies=['Sprots', 'Cooking']; objects //타입 미지정시 any 타입으로 지정됨, 추천하지 않음 let person: { name: string, age: number, }; person = { name: "Max", age: 32, } object..

HTML MDN 모든 웹기술이 담겨있는 문서 MDN https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org whatwg html에 관한 표준, 커뮤니티 사이트 https://whatwg.org/ Web Hypertext Application Technology Working Group (WHATWG) whatwg.org HTMLhint HTML에 필요한 정적 코드 분석 도구 htt..

웹 표준이란 무엇일까? 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동을 해야함을 의미. 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규칙과 규격의 집합. 웹 표준을 준수하는 것은 웹 사이트와 웹 어플리케이션의 개발과 유지보수를 용이하게 하며, 다양한 웹 브라우저나 기기에서의 호환성 문제를 최소화 할 수 있다. 이는 웹 사이트나 어플리케이션의 접근성, 사용성, 검색엔진 최적화 등의 측면에서도 이점을 제공한다. W3C (World Wide Web Consortium) 우리가 아는 www. 월드 와이드 웹의 표준을 개발하고 유지보수하기위해 설립된 국제 컨소시엄. 💡 정리 😕: 그래서 웹 표준이란 뭐야?..

💬 들어가며 마크업과 CSS 를 하다보면, 상자 안에 가운데 정렬해 아이콘을 넣어야 할 때가 있다. 가로 정렬, 세로 정렬등이 있지만 이번에는 세로로 가운데정렬을 하는 경우를 살펴보자. 위와 같은 예시 이미지 처럼, 반응형에 맞춰 input 창의 세로 높이도 조절이 될때마다 그에 맞게 눈동자 아이콘이 가운데에 위치 하도록 해보자. 초보자들은 내가 했던 것 처럼, input 창의 height 값에 맞춰서 대강 가운데에 오도록 했을 것이다. 💡 문제 해결 input 창과 눈 아이콘을 의미하는 button 태그는 같은 레벨에 있을 것이다. 해당 두가지를 div태그로 묶어 relative를 준다. 그렇다면 div창크기에 맞춰 input이 생길 것이고, button은 div태그의 크기에 맞춰서 이동되도록 할 것 ..

버블링 위의 이미지와 같이 버블링은 이벤트가 발생한 요소부터 위로 올라간다. FORM DIV P 만약 p태그를 클릭해도 form 태그에 할당된 핸들러가 동작되는 것을 말한다. 가장 안쪽의 p 태그를 클릭하면 p에 할당된 onclick 핸들러가 동작하고, 그 바깥의 div태그의 핸들러가 동작한다. 그리고 from에 할당된 핸들러가 동작한다. document 객체를 만날때까지, 각 요소에 할당된 onclick 핸들러가 동작한다. p를 클릭한다면 p, div, form 의 얼럿창이 순서대로 뜨게 되는 것이고 div 를 클릭한다면 div, form 순으로 얼럿창이 뜨게 되는 것이다. 이것은 event.target을 이용하여 접근할 수 있다. event.target 이벤트가 발생한 가장 안쪽의 요소는 타깃(tar..

❓ 문제 상황 react 프로젝트 진행중 게시판의 게시글이 많아질수록 스크롤이 많아지고 가독성이 떨어지는 문제점을 해결하기 위해 pagination을 사용하기로 했다. 💡 문제 해결 현재 우리 프로젝트의 코드는 게시글들을 firebase에서 받아온 데이터들을 props로 받아 map을 이용해 넘겨주는 함수와 그것들을 인자로 받아 랜더링 시켜주는 함수가 있다. 여기서 처음 contents를 props로 받고, map을 이용해 다른 함수로 넘겨주기 전에 pagination을 이용해야 한다. 이해를 돕기위해 코드를 추가하면 function BoardItem({ title, content, id, like }) { return ( {title} {content} {like} ); } 해당 코드로 넘겨주기 전에 ..

💬 들어가며 이전에 개념을 정리했던 Redux, MVC등의 글을 한번 보고가면 좋을 듯 하다. https://strap.tistory.com/58 (MVC, Flux, Redux) 애플리케이션 상태관리 MVC (Model - View - Controller) 소프트웨어 개발에서 많이 사용되는 소프트웨어 디자인 패턴중 하나로, 애플리케이션의 구성 요소를 세가지 역할로 나누어 관리함으로써 개발의 유지보수성과 확작성 strap.tistory.com 오늘 공부할 부분은 recoil 이지만 한번더 간단하게 Redux에 대해 이야기해보면, Redux는 전역 상태관리를 도와주는 라이브러리로 오늘날 Recoil에 비해 월등히 많은 개발자가 사용한다. 최근 Recoil도 많은 개발자가 사용하는 추세이지만 아직 비교가 안..

💬 들어가며 firebase를 사용하여 프로젝트를 진행중에 게시글을 실시간으로 불러와야하는 문제점이 생겼다. 이럴땐 onSnapshot을 사용하여 실시간으로 DB정보를 가져올 수 있다. 이 onSanpshot은 firestore를 이용하는데 .. FireStore란? Firestore는 구글(firebase)에서 지원하는 NoSQL 데이터베이스 서비스로, 실시간 리스너를 통해 사용자와 기기간 데이터의 실시간 동기화가 가능하다. 또한, Cloud Firestore는 앱에서 많이 사용되는 데이터를 캐시하기 때문에 기기가 오프라인 상태가 되더라도 앱에서 데이터를 쓰고 읽고 수신 대기하고 쿼리할 수 있다. firebase를 이용해본 사람이면 누구나 아는 부분일 것이다. 여기에서 firestore Database..

💬 들어가며 VScode 내에서 NPM을 이용해 라이브러리들을 설치하며 프로젝트 진행중, 잘못 설치한 비슷한 라이브러리, 이제 이용하지 않아 삭제해야하는 라이브러리들을 고민하다가 찾아보게 되었다. NPM(Node Package Manager) 프로젝트들을 진행하며 대부분 패키지 매니저를 이용해 라이브러리 설치를 해보았을텐데 대표적으로 NPM, yarn 등이 있다. 난 지금 NPM을 사용하고 있기 때문에 NPM을 간단히 설명해보자면 Node.js 환경에서 패키지를 관리하기 위한 툴로 Node.js는 JavaScript를 이용하여 서버 사이드 애플리케이션을 개발할 수 있는 런타임 환경이며, npm은 이러한 Node.js 애플리케이션에서 사용되는 모듈을 관리하는 도구이다. 쉽게 말해 모듈을 검색하고 설치한다,..

❓ 문제 상황 textarea 에서 줄바꿈 표시하기 프로젝트 진행중 게시글에 수정하기를 누르면 textarea 에서 줄바꿈이 나타나지 않는 현상이 일어났다. 이러한 문제가 생기는 것을 찾아본 결과 입력된 텍스트의 줄바꿈을 제대로 저장하고 출력해주지 않아서 그렇고 한다. 하지만 찾아보니 문제는 생각보다 간단했다. 💡 문제 해결 white-space white-space는 요소안의 공백처리를 어떻게 할지 지정하는 속성이다. normal : 기본값, 공백을 여러개 넣어도 공백 1개만 표시되고, 글이 길어지면 텍스트가 자동 줄바꿈 됨니다. nowrap : 공백을 여러개 넣어도 1개만 표시되고, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시 된다. pre : 공백을 코드에 있는 그대로 표시한다. 태그처럼..