전체 글99 Virtual DOM이란? 그리고 사용 시 장점은? 👩🏻💻 Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요? 💁🏻♀️ 요약하자면 , React의 가상 DOM은 실제 DOM과 유사한 내용을 담고 있는 복사본이며, 이를 활용하면 렌더링을 최적화할 수 있습니다. 가상 DOM을 먼저 설명하자면, React는 변경 이전과 변경 이후의 두 개의 가상 DOM을 유지합니다. 첫 번째 가상 DOM은 변경 이전의 내용을, 두 번째 가상 DOM은 변경 이후에 보여질 내용을 담고 있습니다. 변경된 내용이 화면에 새롭게 그려지기 전, 즉 실제 DOM이 변경되기 이전에 React는 두 개의 가상 DOM을 비교하여 어떤 부분이 변경되었는지 효율적으로 찾아내는 작업(또는 Diffing)을 수행합니다. 이때, React는 부모 요소의 타입이 변경되면 .. 2023. 6. 8. 클라이언트 배포는 신기하고 재밌어 그리고 긴장돼 ... 🛠️ Todo 만들어 둔 웹을 Github Actions와 Amazon S3를 활용해 빌드 및 배포하여, 사용자들이 사용할 수 있게 하기 이번 클라이언트 배포의 3단계 1. Source : Github 브랜치에 코드가 commit 되면 2. Build : Github Actions의 YAML 파일에 적힌 명령어를 토대로 Webpack을 이용해 build 하기 3. Deploy : Github Actions의 YAML 파일에 적힌 명령어를 토대로 S3로 build 결과를 upload 하기 🧐 YAML 파일에 코드 적기 1. 해당 repository의 브랜치 이름을 적어준다. 현재 브랜치 명을 확인하려면 git branch라는 명령어를 입력 후 확인, q를 눌러 종료하면 된다. name: client on:.. 2023. 6. 5. Starting a Business 🍎 Today's Expression Vocabulary - file: (소를) 제기하다 - streak: 연속 - anecdote: 일화 - adhering: 고착 - delve: 동굴 - plethora: 거대한 Pronunciation - Trip [trihp] - Entrepreneur (derived from French) [ahn-trah-pr어-ner] - World [were-어ld] - Recently : Put stress on the [R] - Capabilities [kay-pabilities] 👩🏻🏫 Overall Feedback Hi, it was great seeing you again! I enjoyed talking to you about entrepreneurship. .. 2023. 5. 29. 개발은 그저 수단일 뿐 개발은 나만의 삶을 살아가고, 꿈을 이루기 위한 그저 tool일 뿐이다. 부트캠프 안에 있다 보면 이것이 전부인 것처럼 생각하게 되어서 내 세계가 좁아진다. 물론 지금은 새로운 것을 배우고 집중해야 하는 시기인 것은 맞지만 이것이 잘 되지 않는다고 내 삶이 다 무너진 것처럼, 뒤쳐진 사람인 것처럼 생각하지 않아도 된다는 것이다. 애초부터 개발이라는 길을 택한 이유는 내 손으로 무언가를 만들어 수익을 만들어보고 싶어서, 그리고 사랑하는 사람과 시간 공간 제약 없이 자유롭고 행복하게 살고 싶어서다. 그러니 부트캠프, 취업, 창업 모두 나에게는 그저 수단일 뿐이다. 이것들이 잘 안된다고 해서 무너지 않아도 된다. 가지고 있는 나만의 취향과 역량을 잃지 않으면서 이 개발이라는 tool을 다룰 줄 아는 능력을 하.. 2023. 5. 25. <h>에 버튼 속성을 부여하면 .. 🤔 오늘의 에러 React로 코드를 짜던 중, 오늘은 아래와 같은 콘솔 에러를 만났다. Received `true` for a non-boolean attribute `button`. If you want to write it to the DOM, pass a string instead: button="true" or button={value.toString()}. 🧐 처음 작성한 코드 처음에는 요소에 button 속성을 부여해, 클릭하면 모달이 나타나고 다시 클릭하면 모달이 없어지도록 했다. 이 부분이 문제였다. { title.map(function(a, i){ return ( {/* 이 부분 수정 필요 */} { setModal(!modal); setModalTitle(i) }}>{ title[i] .. 2023. 5. 22. Route, Routes를 BrowserRouter로 감싸주지 않으면.. 🤔 오늘의 에러 React로 코드를 짜던 중, 오늘은 아래와 같은 에러를 만났다. TypeError: Cannot read properties of undefined (reading 'pathname') 해당 에러에 대한 GPT의 답은 아래와 같았다. 이 에러는 React 애플리케이션에서 'pathname' 속성을 갖는 객체를 참조하려고 할 때 해당 객체가 정의되지 않은 경우 발생합니다. 'pathname'은 일반적으로 브라우저의 URL 경로를 나타내는 속성입니다. 일반적으로 이 에러는 다음과 같은 상황에서 발생할 수 있습니다: 1. 브라우저 라우터 오류: React Router 또는 다른 라우팅 라이브러리를 사용하는 경우, 브라우저 라우터가 초기화되지 않았거나 잘못 구성되어 'pathname' 속성이 .. 2023. 5. 19. [🍔 맛집 공유 사이트] 리액트로 CRUD 구현하기 🛠️ 구현할 기능 웹 사이트 내에서 사용자들이 자유롭게 맛집 추천 글을 올릴 수 있는 기능을 구현하고 싶다. As-Is: 현재는 기존에 올라온 글을 볼 수 있기만 함 ➡️ To-be: 맛집 제보 버튼을 클릭하면 글을 Create, Read, Update 그리고 삭제 버튼을 누르면 Delete 할 수 있다. 💡 구현 과정 - Create 1. input 칸을 만든다. input의 타입은 아래와 같이 다양하니 골라서 활용해 보자. // 순서대로 or 그냥 2. onChange 이벤트 핸들러를 활용한다. onChange 또는 onInput라는 이벤트 핸들러를 사용해 사용자가 에 무언가 입력 시, 중괄호 안에 있는 코드가 실행되도록 한다. {console.log("사용자가 입력하면 나타나는 내용")}} /> 아.. 2023. 5. 16. [🍔 맛집 공유 사이트] 모달창 같은 동적인 UI 만들기 🛠️ 구현할 기능 성수역, 강남역, 압구정역 총 세 개의 제목이 있고 현재 띄워지는 모달창에는 제목이 압구정역으로만 보이는데, 각 제목을 클릭하면 그에 맞는 모달창을 띄우고 싶다. 예를 들어, 성수역 제목을 클릭하면 성수역 맛집을 소개하는 모달창이 띄워지도록 말이다. As-Is: 3개의 제목이 있으나 현재는 모달창에 1개의 제목으로만 뜸 ➡️ To-be: 각 제목을 클릭하면 해당 제목을 가진 모달창을 띄우고 싶음 🧐 처음 작성한 코드 처음에는 제목당 1개씩 총 3개의 state를 만들어 주어야 하나, 아니면 타이틀 인덱스에 맞게 props를 내려주어야 하나 생각했다. 일단은 modalTitle이라는 state를 생성해주고, 삼항연산자 안에 넣어주었다. import './App.css'; import lo.. 2023. 5. 11. 현재에 집중하며 차근차근 나아가기 - 부트캠프 3개월차 회고 👏 Keep 1. 꺾였을 때 외부 자원을 활용하는 것 혼자 온라인으로 공부를 하다 보면 꺾일 때가 많다. 의지가 꺾이거나, 초심이 꺾이거나, 자신감과 실력이 꺾인다. (Section3 정도면 꺾일 때가 되기도 했다..) 그럴 때는 최대한 외부 자원을 활용해 왔다. 집중이 안 되는 시간에는 침대로 뛰어들 나를 잘 알기에, 모각코 방에서 캠을 켜놓고 공부했다. 초심이 꺾였을 때는 정규 수업 시간 이후에 최소한의 학습만 하고 푹 쉬거나, 개발자 친구에게 요즘 공부를 어떻게 하고 있는지, 어떤 마음가짐인지 털어놓으며 중간중간 점검하기도 했다. 그 외에는 리액트와 자바스크립트 강의와 책을 적절히 잘 활용하면서 지금까지 배웠던 개념들에 대해 복습하고, 나만의 웹 사이트를 만들어보며 자신감과 실력이 충전되기도 했다... 2023. 5. 9. 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요. 👩🏻💻 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요. 💁🏻♀️ 요약하자면 , 재귀 함수(Recursive function)는 자기 자신을 호출하는 함수입니다. 재귀 함수를 사용하면 반복적인 작업을 간단하고 효율적으로 처리할 수 있습니다. 재귀 함수를 사용하기 좋은 상황은 세 가지 정도로 이야기해볼 수 있을 것 같습니다. 1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 하위 문제의 해결이 상위에 있는 문제 해결에도 이어지는 경우 재귀 함수를 사용할 수 있습니다. 예를 들어, 피보나치 수열의 n번째 수를 구하는 문제가 있다고 했을 때, 피보나치 수열의 n번째 수는 n-1번째 수와 n-2번째 수를 합한 값이므로, 몇 번째 수를 구하든 동일한 구조의 작은 문제로 나눌.. 2023. 5. 9. Semantic HTML의 필요성을 예시를 들어 설명해 주세요. 👩🏻💻 Semantic HTML의 필요성을 예시를 들어 설명해 주세요. 💁🏻♀️ 요약하자면 , Semantic HTML은 웹 페이지의 각 요소에 의미를 부여하는 HTML 마크업 방법입니다. 이는 웹 페이지의 구조와 의미를 더 명확하게 전달하며, 결국 검색 엔진 최적화(SEO)와 웹 접근성을 향상시키는 데 기여합니다. 예를 들어, HTML 안에 제목, 내용, 푸터로 내용이 나눠져 있음에도 불구하고 모든 요소를 태그로 씌운다면 코드를 보는 개발자 입장에서 웹 페이지 구조와 의미가 정확하게 보이지 않을 뿐 아니라, 우리가 애써 만든 웹 사이트가 검색 엔진에 최적화되지 않을 것입니다. 제목 내용 따라서, HTML의 각 영역은 각 영역의 의미에 맞게 요소는 웹 페이지의 제목, 요소로는 섹션을 정의, 요소로는 .. 2023. 5. 9. Companies That the Youth Want to Work for 🍎 Today's Expression Vocabulary - conglomerates 대기업 - sought-after 인기있는 (e.g. This product was the most sought-after perfume at the time.) - regimen = schedule - acronyms 줄임말 - To sum things up 요약하자면 - Rift = barrier Pronunciation - Question [kwestian] - Limit [lihmiht] - Designer [dih-ziner] - Operate ['ah'-] - Specific [spuh-cific] - Toss [tahss (more of an 'ah' sound)] - Barrier: Emphasis on .. 2023. 5. 5. 이전 1 2 3 4 5 6 7 ··· 9 다음
