메로그

package-lock.json 해당 파일은 package.json 의 부족한 정보로 인해 역할을 대신 합니다. package.json 을 사용하여 원래는 node_modules 가 다운로드 되지만, 같은 패키지를 이용해서 다운로드 하는 경우, 개발시 환경이 다르거나, npm, node 버전이 다르거나.. 의 이유로 오류가 발생하는 것을 볼 수 있습니다. 그런 경우에, package-lock.json 을 사용하면, 패키지가 수정되었거나, node_modules 가 변경될 때 의존성을 주입하여 자동 생성되도록 합니다. package-lock.json 이 있는 경우, package-lock.json 을 보고 node_modules 가 생성된다는 것입니다. (package.json 이 아니라...) 비고 간단..

Cannot find module '@babel/helper-builder-react-jsx' yarn upgrade 이 후에 다음과 같은 오류가 발생하는 경우가 있다. 이의 경우, 모듈이 제대로 설치되지 않은 것 임으로 설치된 node_modules 를 삭제하고 다시 설치해주면 된다. cli rm -rf node_modules yarn

cors 란 Cross-Origin-Resource-Sharing 의 약자로 다른 도메인에서 리소스를 요청하는 방법을 말합니다. 프론트단과 백단을 각각 다른 로컬 서버로 개발할시 흔히 볼 수 있습니다. 아무런 설정도 없이 다른 도메인에서 서버를 요청하면 다음과 같은 에러를 확인할 수 있습니다. Access to XMLHttpRequest at 'http://localhost:8000/api/search' from origin 'http://localhost:3002' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource...

vscode setting vscode 를 처음에 설치 후, 어떤 것을 셋팅해주면 좋을지 필요한 꿀팁을 적어보겠다. 저장시 불필요한 공백제거 Trim Trailing Whitespace 를 체크하여 줍니다. Settings 에 들어가서 Trim 만 검색해도 나옴. 탭 사이즈 조절 Settings 에 들어가서 tab 을 검색하면 Editor: Tab Size 가 나오는데 여기서 Size 를 조절해주면 됨. 기본적으로 4 가 설정되어 있으니, 2 로 바꿔보자. 단축키 조절 Keyboard Shortuts 에 들어가서 원하는 단축키를 변경합니다. 저 같은 경우에는 한 줄 행삭제를 cmd + k 를 사용하기 때문에 Delete Line 을 검색하여 변경해줍니다. vscode extension vscode 에는 ..

설치 [https://white-blank.tistory.com/38?category=968252] window 관련 자바 설치의 경우, 다음 url 로 들어가시면 됩니다. window 와 마찬가지로 아래 오라클 페이지로 들어가 mac 에 맞는 java 버전을 클릭하여 설치하시면 됩니다. [https://www.oracle.com/java/technologies/downloads/#java8-mac] java8 mac 버전 설치 설치가 완료되면, 터미널에서 java -version 을 입력하여 버전이 잘 나오는지 확인합니다. 라이브러리/Java/JavaVirtualMachines 아래에 설치한 jdk 가 있는지 확인합니다. 환경변수 자바의 경로를 잡히도록 환경변수를 설정해줍니다. vi ~/.bash_pr..

Dom 요소(객체) 추가 document.createElement() 를 사용해서 요소를 동적으로 추가합니다. 추가한 요소에는 필요한 스타일, 속성을 추가할 수 있습니다. // 요소 생성 const newNode = document.createElement('div'); // id 속성을 추가합니다. newNode.setAttribute("id", "NewDiv"); // 필요한 스타일을 추가합니다. innerHTML, innerText 도 사용가능합니다. newNode.style.width = "300px"; newNode.style.height = "400px"; newNode.style.backgroundColor = "red"; 동적 요소 트리에 삽입 위의 추가한 요소를 Dom 트리에 삽입해보자...