에러 노트7 왜 리액트는 map으로 component을 렌더링할때 key가 있어야 하나? 일단은 간단한 이유를 공식 learning 문서에서 확인할 수 있었다. https://react.dev/learn/rendering-lists Rendering Lists – React The library for web and native user interfaces react.dev 문서의 내용을 번역하면 다음과 같이 나온다. React가 키를 필요로 하는 이유는 무엇일까요? 만약 데스크톱의 파일들이 이름이 없다고 상상해보세요. 대신에 파일을 그들의 순서로 참조해야 할 것입니다 — 첫 번째 파일, 두 번째 파일 등. 이에 익숙해질 수 있겠지만, 한 번 파일을 삭제하면 혼란스러워질 것입니다. 두 번째 파일은 첫 번째 파일이 되고, 세 번째 파일은 두 번째 파일이 되는 식입니다. 폴더 내 파일 이름과 배.. 2024. 4. 3. 왜 onClick과 같은 eventListener들은 콜백 함수를 주로 사용할까? 우리가 onClick같은 함수에 인자를 추가할때 많은 상황에서 콜백 함수를 주로 사용하는 것을 볼 수 있다. 왜 그럴까? onClick = {() => clickBtn()} onClick = {clickBtn} 사실 위와 같은 상황은 별 다른 차이가 없다. 뭐 똑같다고 봐도 상관없다. 단지 아래와 같은 상황에서 콜백 함수를 사용해야 코드가 의도된대로 작동할 것이다. onClick = {(arg) => clickBtn(arg)} onClick = {clickBtn(arg)} onClick에 함수가 괄호를 포함하게 되면 해당 함수를 즉시 실행하게 된다. 인자가 없을 때 onClick = {clickBtn()}을 실행한 것과 같은 상황이 된다. 그러한 이유로 onClick시 실행되려하는 함수에 인자를 넣기위해.. 2024. 4. 3. React환경에서 이미지 경로 설정하는법 html만 공부했다면 img태그에서 이미지를 어떻게 가져오는지 알거다. 위 방식과 같이 하면 되는데 react에서 했는데 이미지가 정상적으로 로드가 안되었다. 뭐지? 싶었다. 일단 해결법은 아래와 같음 이미지 파일의 위치는 public폴더 아래에 있어야 함 왜 그러냐? src폴더는 웹팩으로 처리되고 public 폴더는 웹팩으로 처리되지 않는다. 일반적으로 이미지와 같은 asset파일들은 public에 넣자. 여기서 한가지 더 알아야 할것은 로컬 환경과 실배포환경의 디렉토리 구조는 바뀔 수 있기 때문에 두 환경에서 모두 public폴더 위치를 지정해주는 변수가 있다. process.env.PUBLIC_URL 위 경로가 public폴더의 위치를 의미, 여기서 뭐 process.env.PUBLIC_URL/as.. 2024. 3. 27. useEffect썼는데 왜 두번 실행되요? useEffect야 한번만 실행한다면서...두번 실행이 된다. 왜 그런가? index.js의 이다. 이 친구가 디버깅을 하면서 한번더 렌더하는건가 보다. 해결법은 해당 태그를 삭제하면 된다.... 2024. 3. 9. CSS 전체 선택자에 color: white를 추가하고 구체적인 선택자에 다른 color로 바꿨을 때 "컴퓨터는 바보가 아니다. 에러를 해결했을 때 바보는 나였다는 것을 깨닳을 수 있을 것이다." - 지친케찹 CSS를 다루다보면 답답한 상황이 많이 일어난다. 이전 프로젝트를 진행하면서 전체 선택자 때문에 문제가 생겼다. 일단 전체 선택자는 항상 전체 페이지의 쓸모없는 여백을 비울때 사용하므로 밑의 코드를 거의 default로 적용한다. * { margin: 0; padding: 0; box-sizing: border-box; } 저번에 했던 실수가 전체 셀렉터에 color: white를 추가해주었다. 나는 더 작은 범위의 선택자에 갈 수록 똑같이 color설정을 바꾸면 더 구체적인 속성으로 바뀔줄 알고 코딩했는데 바뀌지 않아서 고생을 했다. 예를 들자면 body태그 안에 h1의 폰트 색깔만 yellow으.. 2024. 2. 28. Intellij maven 프로젝트 생성방법(새로운 ui) jpa를 공부하려고 maven 프로젝트를 생성하는데 intellij의 프로젝트 생성 ui가 바뀌어서 조금 해맸다. 맨 처음 ui에서 new project를 클릭하면 위 화면이 뜨는데, Maven Archetype을 클릭하면 절대 안되고!! New Project에서 Maven을 클릭하고 Advanced Settings에서 groupid, artifactid를 설정하고 create하면 된다. 별거 아닌데 괜히 시간을 낭비하지 말자! 2022. 7. 26. 맥 h2, zsh permission denied 오류 문제 해결 권한이 없어서 생긴 문제, spring 시작할려고 h2 깔았는데 문제가 생겨서 조금 난감했지만 권한만 주면 쉽게 해결 가능. 터미널에서 해당 h2.sh파일이 있는 디렉토리에서 chmod755 h2.sh 명령 입력해주면 권한을 가지게 됨. chmod577 h2.sh 그 이후에 ./h2.sh 실행하면 h2가 실행된다. ./h2.sh chmod755의미가 궁금해서 대충 찾아 봤는데 읽기:4, 쓰기:2, 실행:1 이런식으로 권한에 값을 부여하고 세자리수의 의미는 각각 첫번째 자리: 소유자 권한, 두번째 자리: 그룹 사용자 권한, 세번째 자리: 기타 사용자의 권한이다. 그래서 chmod755는 소유자에게 모든 권한(4+2+1)을 주고 그룹, 기타 사용자들에게는 (4+1)읽기와 실행 권한을 주는 의미이다. 맥은 항.. 2022. 7. 26. 이전 1 다음
