분류 전체보기 3

DOM에서 흔적을 지워라! <React.Fragment>

"알겠습니다! 저한테 맡겨주세요!" 헬리오스 탑은 리액트로 만들어졌습니다. 리액트는 UI를 구성하는 최소 단위인 컴포넌트들로 구성되어 있습니다.이때 각각의 리액트 컴포넌트는 여러 요소를 그대로 반환할 수 없으며, 그렇기에 하나의 부모 요소로 묶어주어야 합니다.예시를 살펴봅시다. 위와 같이 여러개의 JSX 요소를 그대로 반환하려고 하면,리액트는 하나의 부모 요소가 필요하다는 오류를 발생시킵니다. 태그를 사용해 부모 요소로 묶어주었더니,더 이상 오류가 발생하지 않습니다.이제 HeliosTower.tsx 컴포넌트를 App.tsx에서 불러오면,화면에 정상적으로 출력되는 것을 확인할 수 있습니다. 앗, 그런데 누군가 부모 태그에 css를 추가하는 장난을 쳐놨습니다. 태그에 빨간색 배경을 입혀서, 탑이 ..

스코프 마을의 비밀 파헤치기 (var, let, const)

* 본 내용은 자바스크립트 딥다이브 13장, 15장을 학습한 내용입니다. 네 알겠습니다! 저한테 맡겨주세요!! 브루스 박사가 정리해 놓은 문서를 읽어보면서var 키워드에 어떤 문제가 있고, 새로운 키워드 let과 const가 문제를 어떻게 해결해주는지 살펴봅시다. .... 🍄 스코프와 스코프 체인 🍄 스코프는 곧 '유효범위'입니다. 우선 알아야 할 것은 '함수 스코프와' '블록 스코프' 입니다.이를 풀어서 생각하면 함수 범위 그리고 블록 범위가 되겠네요. function funcScope() { console.log('함수 스코프입니다.');}funcScope(); ↑ 위 코드는 블록 { } 이 함수로 감싸져 있습니다. 즉 이는 함수 스코프입니다. { var myPostion..

독서는 마음의 양식

고작 만원, 이만원 남짓으로 다른 세계를 경험할 수 있다는 것은 얼마나 값싼 값어치인가.올해도 더욱 다양한 세계들에, 그리고 깊게 빠질 수 있는 내가 되길 바라며. 오늘 개발 티스토리를 만들었는데, 소소하게 독서 카테고리도 하나 만들었다.읽은 책들 한권 한권을 짧게라도 여기에 기록해 두어야겠다.내가 빠졌던 세계를 기록하는 것은 모험가로서의 본분이다. 개발을 하더라도, 혹은 어떠한 다른 일을 하더라도 독서는 중요하다고 생각한다.독서는 인간 영혼의 깊이를 만들어 준다. 아무리 자신의 분야에서 똑똑해도, 영혼의 깊이가 얕다면 사람들을 깊이 끌어당기기 어렵다. 나는 똑똑한 사람보다도 깊이 있는 사람이 되고 싶다.