TIL

    React input 에러 (Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.)

    # 에러 내용 Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. ❯ ❮ 문제의 에러코드. html에서 별반 다르지 않았다. # 해결 방법 input 사이에 있는 텍스트를 삭제한다. value나 label (for)로 수정한다.

    React 에서 이미지가 불러와지지 않을 때 (엑박 뜰때)

    React 에서 이미지가 불러와지지 않을 때 (엑박 뜰때)

    # 문제점 메인 로고를 불러오려고 img 태그 속 src에 이미지 주소를 넣었다. 그런데 이미지는 불러와지지 않고, 깨진 파일처럼 떠있는 것이다. import './App.css'; function App() { return ( ); } 실제 코드는 일반 html로는 잘 돌아간다. # 해결법 import를 통해 불러오면 해결된다! import './App.css'; import mainlogo from './assets/image/mainlogo(black).png'; function App() { return ( ); } export default App;

    React 오류 : 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.

    문제 상황 git clone 을 실행했는데 React 프로젝트가 실행되지 않는다! 에러 메세지 아래와 같은 에러 메세지가 떴다. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 해결법 npm install -save react-scripts 전역 설치가 필요할 경우, -g 옵션을 붙이면 된다!

    React 컴포넌트 호출 오류 : [ ... is using incorrect casing. ]

    처음 컴포넌트에 대해 공부하고 있는데, 이런 오류가 났다. Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. at todoList at div at App 뭔가 싶어 해석해보면 리액트 컴포넌트는 PascalCase 를, HTML 엘레먼트는 lowercase(소문자)를 사용하라는 것이다! 그럼 PascalCase는 뭘까? 파스칼 표기법 "PascalCase" 첫 단어를 대문자로 시작하는 표기법 예시: BackgroundColor, TypeName, PowerPoint CamleCase와 비슷하지만 첫단어도 대문자라는 차이점이 있다. 오류 메시지에서 나왔듯, 내가 만든 컴..

    GIT (branch | MERGING )해결법

    2022.05.13 TIL GIT으로 pull을 받다보면 MERGING 이 뜨는 경우가 많다. 이런 경우는 충돌이 난 경우가 대부분이다. 의외로 해결 방법은 쉽다. 1. conflict 부분을 전부 수정한다 2. commit을 한다. 전부 수정했는데도 MERGING이 사라지지 않는 경우가 있는데, 대부분 커밋하지 않아서이다. 추천하진 않지만, +를 붙이면 강제로 push가 가능하다. git push origin +{branch_name}

    자바스크립트 함수 명명의 중요성 (특히 이름 짓기)

    2022.05.04 TIL 접두어를 적절히 활용하면 함수 이름만 보고도 함수가 어떤 동작을 하고 어떤 값을 반환하는지 쉽게 알 수 있다. 접두어를 사용하여 함수이름을 짓자. "show..." – 무언가를 보여줌 "get…" – 값을 반환함 "calc…" – 무언가를 계산함 "create…" – 무언가를 생성함 "check…" – 무언가를 확인하고 불린값을 반환함 주의: 함수는 동작 하나만 담당해야 한다! 긴 함수는 하나씩 끊자. 끊긴 함수는 테스트와 디버깅이 쉬워진다! 그리고 함수 그 자체로 주석의 역할까지! 가독성도, 가성비도 좋은 함수를 만들자.

    Javascript alrert, prompt, confirm

    2022.05.03 TIL 자바스크립트로 사용자 인터페이스로 사용할 수 있는 기본적인 세가지가 있습니다. 1. alert alert는 [확인] 버튼이 포함된 모달창을 띄웁니다. 확인 버튼을 누르기 전까지 다른 행동은 불가합니다. 사용방법 : alert(content); 2. prompt prompt는 [확인] [취소] 버튼과 [입력 필드]가 포함된 모달창을 띄웁니다. 결과값으로는 입력 필드에 입력한 내용이 전달됩니다. 만약 취소버튼을 눌렀다면, 결과값으로 null이 전달됩니다. prompt(title, [default]) 3. confirm confirn은 [확인][취소] 버튼이 포함된 모달창을 띄웁니다. true, false로 결과값이 전달됩니다. confirm(title)