본문 바로가기
728x90
반응형

전체 글145

[react] react-modal 라이브러리를 이용하여 모달창 구현하기 react-modal 라이브러리를 사용하여 모달창을 구현해보려고 한다. 라이브러리를 사용하면 아주 쉽게 원하는 모달창을 구현할 수 있다. 정답 확인이라는 버튼을 클릭했을 때 정답을 모달창을 통해 보여주는 코드를 구현하고자 했다. 1. 먼저 라이브러리 설치부터 해주자! npm i react-modal 2. 정답 확인 버튼을 클릭했을 때 모달창을 보여주기 위해 state를 하나 생성한다. 정답 확인 버튼에게 onClick 이벤트를 주고 클릭될 때마다 생성한 state 값이 true 또는 false 값을 가질 수 있도록 했다. const [modalIsOpen, setModalIsOpen] = useState(false); const showAnswer = () => { setModalIsOpen(!modal.. 2023. 3. 15.
vertical-align: middle 속성이 적용되지 않을 때 해결 방법 최상위 안에 button, div, button이 있을 때 수직 정렬이 되지 않는 문제가 있었다. 이미 최상위 의 자식 는 가운데 정렬되어 있다고 생각해, 에게만 vertical-align: middle;을 줬다. 하지만 버튼들은 여전히 수직 정렬이 되지 않는 문제가 있었다. 결과적으로 vertical-align: middle; 속성을 뿐만 아니라 자식 에게도 줬어야 했다. 적용시키고자 하는 요소가 있을 때 그 주변 요소들도 모두 같이 적용시켜줘야 수직 정렬이 되기 때문이다. 흠 vertical-align에 대해 깊게 공부해보고 있는데 자식 에게만 vertical-align: middle; 속성을 주면 버튼들이 수직 정렬되는 것을 확인할 수 있었다. vertical-align 이 놈이 진짜 골 때리는 놈.. 2023. 3. 14.
[HTML] 테이블(표) 만들기 알아두면 꼭 한 번 써 먹을 일이 있기 때문에 정리해봤다. 테이블 구성 요소 : 테이블을 만드는 태그 : 테이블의 헤더를 만드는 태그 : 테이블의 행을 만드는 태그 : 테이블의 열을 만드는 태그 테이블 만드는 법 테이블 만들기 1 - 1 1 - 2 2 - 1 2 - 2 한 번 익혀두면 아주 쉽게 테이블을 구현할 수 있다. 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 3. 14.
[JS] 2개의 배열을 하나의 객체로 만드는 방법 예를 들어 want라는 배열에는 가지고 싶은 항목들이 문자열로 담겨있고, number라는 배열에는 개수가 담겨있다고 가정해보자. let want = ["banana", "apple", "rice", "pork", "pot"]; let number = [3, 2, 2, 2, 1]; 2개의 배열을 하나의 객체로 만들려면 어떻게 해야할까? 내가 원하는 결과 값은 아래와 같다. {banana: 3, apple: 2, rice: 2, pork: 2, pot: 1} 아래와 같이 reduce를 사용하면 원하는 결과 값을 얻을 수 있다! const result = want.reduce((acc, cur, idx) => { return { ...acc, [cur]: number[idx] }; }, new Object);.. 2023. 3. 12.
[⭐️⭐️⭐️⭐️⭐️] 브라우저의 렌더링 원리 브라우저가 화면에 나타나는 요소를 렌더링할 때, 웹킷(Webkit)이나 게코(Geko) 등과 같은 렌더링 엔진을 사용합니다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하여 다음 단계들로 이루어집니다. 1. HTML을 파싱 후, DOM 트리를 구축합니다. 2. CSS를 파싱 후, CSSOM 트리를 구축합니다. 3. JavaScript를 실행합니다. 단, HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됩니다. 4. DOM과 CSSOM을 조합하여 렌더트리를 구축합니다. 단, display: none; 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않습니다. 5. 뷰포트 기.. 2023. 3. 10.
[23.03.08] 스터디 회고록 - 이미지 슬라이드(캐러셀) 직접 만들기 배운 점 슬라이드 애니메이션 부드럽게 구현하기 나는 슬라이드를 구현할 때 scrollLeft라는 속성을 사용해서 스크롤바의 위치를 옮겼다. 아래 글을 확인하면 코드도 같이 확인 가능하다. [React] 이미지 슬라이드(가로형,버튼O,반응형) 만들기 이미지 슬라이드를 만든 코드를 남겨두려고 한다. 웹 서칭을 많이 했는데 나와 완전 똑같은 것을 구현해둔 선배 개발자 분들은 안계셨다,, 빙빙 돌아왔지만 어쨌든 해결했으니깐! 혹시혹시 나와 1two13.tistory.com 근데 슬라이드가 부드럽지 못하고, 뭔가 뚝뚝 끊기는 듯한 느낌이 들었다. 애니메이션 효과를 주어 부드럽게 하고 싶었는데, 끝내 거기까지 구현해내지는 못했다. 하지만 다른 팀원 중 한 분이 이를 구현해냈다! 멋져! 그 분 코드를 확인해보니깐 s.. 2023. 3. 9.
[Redux] Redux-toolkit 사용법(완전 쉬움) Redux-toolkit은 완전 구세주이다. 갓!!! 전역에서 사용해야 하는 state를 사용할 때 사용하기에 아주 완벽하다. 굳이 미리 공부할 필요는 없고, props로 주고 받는 관계에 대해 지치고, 너무 불편함을 느끼고 있다면 이제는 공부해야할 때라고 생각한다. 등장 이유 1. react-redux는 설정해야할 것이 너무 많았기 때문에(1번이라도 사용해본 사람은 알거다..) 2. 미들웨어 사용 시 설치해야할 것이 너무 많았기 때문에 3. 반복되는 코드 작성을 줄이기 위해 4. 불변성을 유지하기 어려웠기 때문에(이전에는 spread 연산자를 사용하여 복제 후 사용했다.) 설치 방법 위와 같은 이유로 redux-toolkit이 등장하게 되었다. npm install @reduxjs/toolkit 사용방.. 2023. 3. 8.
[React] 메모리에 있는 값과 화면에 보여지는 값이 상이한 문제 문제 상황 아래 사진에서 삭제 버튼을 클릭했을 때 메모리에 있는 skillList(redux로 관리하고 있는 배열로, 객체들을 요소로 가지고 있다.)의 값은 변경되지만, 실제 화면에 보여지는 값은 변경되지 않는 문제점이 있었다. 시도한 해결방법과 문제점 skillList.map을 실행할 때 주는 key의 값을 index(숫자)가 아닌 랜덤한 값을 주는 방법이였다. 이 방법을 시도하게 된 이유는 스킬 추가 버튼을 클릭했을 때 콘솔창에 오류가 발생하는데 key prop이 문제라는 내용의 오류 문구였고, 이를 해결하면 문제 상황이 해결될 줄 알았다. 지금 생각해보면 그 오류는 그 오류고,(사실 오류도 아니였고 warning이였다😂) 값이 변경되지 않는 문제는 다른 문제였을텐데 아무튼 여기에 꽃혀서 빙빙 돌아갔.. 2023. 3. 8.
[CSS] 내용이 넘어갔을 때 스크롤바 추가하기 컨텐츠가 넘어갔을 때 해당 컨텐츠 바로 밑에 스크롤바를 추가하고 싶었다. 이 때 사용할 수 있는 CSS가 overflow이고, scroll 값을 주면 된다. 나는 tailwind css를 사용하고 있어서 전체 이미지를 감싸고 있는 에게 overflow-scroll 속성을 주었다. 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 3. 8.
[JS] Promise에서 PromiseResult 데이터 꺼내는 법 아래와 같은 결과값에서 Promise의 PromiseResult 데이터만 가져오고 싶은데 그게 잘 되지 않았다. Promise 데이터를 추출하는데에는 2가지 방법이 있다. 1. then을 사용하는 방법 이 방법은 꼭 then 안에서만 사용이 가능하기 때문에 밖에서 사용할 수 없다. 거의 데이터를 밖으로 가져와 사용하기 때문에 2번 방법을 사용하면 된다. 2. await을 사용하는 방법 async render() { const response = await fetch('./src/data.json'); if (response.ok) { const fetchedData = await response.json(); } } await을 두 번(?) 사용해야 한다는 점을 기억하자! 참고자료 tistory 2023. 3. 8.
728x90
반응형

티스토리툴바