버블링 위의 이미지와 같이 버블링은 이벤트가 발생한 요소부터 위로 올라간다. 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} ); } 해당 코드로 넘겨주기 전에 ..
🎉결과물 우리동네 어린이집 우리동네 어린이집 udon-house.netlify.app 개발 기간: 2023. 03. 09 ~ 2022. 03. 28 GitHub url : https://github.com/kindergarten-udon/udon-house GitHub - kindergarten-udon/udon-house Contribute to kindergarten-udon/udon-house development by creating an account on GitHub. github.com 📍프로젝트 과정 프로젝트의 시작 멋사 4기를 진행하며 한번도 같은 팀원으로 만나보지 못했던 분들로 구성되었다. 멋사 운영진분들 어쩜이리 짤때마다 한번도 안본분들을… 이렇게 잘 섞지..? JavaScript 자..
💬 들어가며 이전에 개념을 정리했던 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 : 공백을 코드에 있는 그대로 표시한다. 태그처럼..
SI(System Integration) 시스템 구축 다양한 시스템, 기술, 소프트웨어 등을 하나로 통합하여 하나의 큰 시스템으로 만드는 것을 의미한다. 이를 통해 기존의 시스템들을 연결하고 상호작용할 수 있도록 설계, 구현, 테스트, 유지보수 하는작업이 필요하다. 시스템통합은 주로 기업이나 조직에서 사용되며, 각각의 부서나 프로젝트가 독립적으로 개발한 시스템들을 하나로 통합하여 전체적인 업무 프로세스의 효율성을 높이고 비용을 절감한다. 시스템 통합은 여러 시스템간을 단순히 연결하는 것이 아니라 각 시스템이 올바르게 통합되어 전체적인 시스템이 효율적으로 작동하게 설계해야 한다. 사용되는 산업분야 제조업에서는 생산라인의 자동화된 시스템들이 서로 통합되어 생산 라인이 자율적으로 운영될 수 있도록 한다. 금융..
sort를 이용한 인기순위 정렬 firebase를 이용해 게시글을 받아온 후 해당 게시글중 인기순위에 든 목록을 따로 만들어야 했다. 우리가 이용한 방법은 sort를 이용하여 게시글을 인기 순서대로 정렬시켜서 원하는 만큼 자르기! 먼저 받아온 글들을 출력하면 아래와 같이 배열형태로 구성되어 있었다. 우리는 이것을 sort와 slice를 이용하여 정렬한 후 잘랐다. 우리가 원하는 게시글은 3개 이기 때문에 0-3 까지 잘랐다. sort 와 slice를 이용한 코드 //받아온 data const [contents, setContents] = useState([]); // 인기 게시글을 가져오기 위한 방법 const bestBoard = contents .sort((a, b) => { return b["lik..
📍WebPack (웹팩) 웹팩이란 자바스크립트 애플리케이션을 위한 정적 모듈 번들러이다. 알아듣기 어려운데 쉽게 말하자면 Application을 구성하고 있는 모든 자원들 즉, HTML, CSS, 이미지, 폰트등을 모듈로 보고 이를 하나의 의존성 그래프로 결합하여 번들링하는 방식으로 이루어 진다. 웹팩은 여러개의 구성 옵선을 제공하여 개발자가 필요에 따라 커스터마이징 할 수 있다. webpack.config.js 파일에 정의해 사용하며 코드의 관리와 성능을 향상시키는데 매우 유용하다. 📍Pritter 프리티어는 코드의 일관성과 가독성을 향상시켜주는 도구로, pritterrc.js 등 그 안에서 정의하여 사용할 수 있다. 🧑💻 설치방법 먼저 Visual Studio Code를 실행합니다. 왼쪽 사이드바에..