우당탕탕 개발일기

https://medium.com/tinyso/how-to-create-a-timeline-component-with-reactjs-779520c81209 How to create a Timeline Component with ReactJS Last week, my coworker had no idea to implement a Timeline Component which is reusable for other pages. Then I helped her step by step to… medium.com 그저..빛...

모달창 배경 만들기 https://penguingoon.tistory.com/249 [CSS] 모달창 + 어두운 배경 반드는 기본적인 방법 안녕하세요! 오늘은 아래와 같은 모달창을 만들 때 필요한 기법(?)을 소개하도록 하겠습니다. 모달창이란 사용자와의 상호작용을 위해 제공되는 인터페이스의 한 종류이비다. 보통 모달창을 띄 penguingoon.tistory.com 모달창 화면 크기에 맞춰 중앙에 위치하게 하는 css position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-tr..

리액트 컴포넌트 설계하는 방법 중 하나인 아토믹 디자인! 명확한 컴포넌트 설계 기준을 정하기 위해 회의 때 아토믹 디자인이 제시해주셔서 알아보기로 했다. - 디자인 시스템이란? 재사용이 가능한 컴포넌트를 먼저 구성하고 이를 조립하는 방식 아토믹 디자인은 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념이며, 일관된 UI를 만들고 유지보수성을 향상시켜준다. 아토믹 디자인은 화학적 관점에서 영감을 얻은 시스템이라 단어들도 화학적인 느낌이 난다. 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 효과적인 인터페이스 시스템을 만든다. 원자(Atom) - 더 이상 분해할 수 없는, 가장 작은 구성의 기본 컴포넌트 ex. label, i..

https://developer-talk.tistory.com/102 [React]Key 이해하기 React에서 배열 요소를 렌더링하는 경우 map()을 사용합니다. 아래 예제는 header라는 array의 object 수만큼 ... 를 렌더링하는 예제입니다. See the Pen by JaeSung2386 (@jaesung2386) on CodePen. 위 코드를.. developer-talk.tistory.com 나는 map을 사용하지 않았는데 자꾸 key값 달라고 에러가 떴다. 근데 검색해보면 거의 다 map 사용시에 key값 에러가 뜨는 거에 관한 글들이라 조금 더 원초적인 대답을 찾기로했다. 위의 글이 key를 이해하는데 큰 도움이 되었다. 나 같은 경우에는 아마 "리스트"인데 키 값을 주지 않..

말그대로 과 사이에 빈칸이 존재하면 안되는데 존재하는 경우의 에러! 나같은 경우에는 삼항연산자로 ''를 나오게 해놨더니 발생했다. null로 수정해서 해결! null과 ''의 차이의 중요성을 또 한 번 알게 됐당 https://stackoverflow.com/questions/39914455/react-validatedomnesting-text-cannot-appear-as-a-child-of-tr React: validateDOMNesting: #text cannot appear as a child of Can you explain me why react show warning Warning: validateDOMNesting(...): #text cannot appear as a child of . ..