프로그래밍 공부 노트

깃허브에 로컬 프로젝트를 push하려고 했는데 아래와 같은 오류가 발생했다.

float 속성 float 속성을 사용하면 해당 속성이 적용된 컨텐츠가 블록 내부의 좌측 또는 우측에 붙게되고 다른 컨텐츠들이 float 속성이 적용된 컨텐츠 주변을 감싸게 된다. 기본형: float: left l right l none left -> 해당 요소를 문서의 왼쪽에 배치한다. right -> 해당 요소를 문서의 오른쪽에 배치한다. none -> 좌우 어느쪽으로도 배치하지 않는다. float을 사용하면 아래의 이미지와 같이 float 속성이 적용된 요소의 그 주변을 다른 요소가 감싸게 된다. clear 속성(float 속성 해제하기) float 속성을 사용하면 float 속성을 적용한 요소 다음에 오는 요소들에도 속성이 전달된다. 따라서 float 속성이 적용된 컨텐츠 다음에 오는 컨텐츠들이 감싸는것을 원치 않으면 clear 속성을 사용해서 속성이 적용되지 않도록 할 수 있다. float: left; 였다면 clear:left; 사용하여 무력화 float: right; 였다면 clear:right; 사용하여 무력화 위처럼 사용하면 float 속성을 무효화 시킬 수 있다. 이외에도 float 속성 값과 상관없이 무조건 기본상태로 되돌리고 싶다면 clear: both; 속성을 사용하면 된다. 예시) <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "utf-8" /> < title > float & clear </ title > < style > div { padding : 20px ; margin : 10px ; } .box1 { background : #ffd800 ; float : left ; } .box2...

지금까지 태그와 요소가 동일한것으로 알고있었다. 그러니까 동일한것을 가리키지만 부르는 방식이 두가지라고 알고있었다. 당연히 그러려니하고 넘어갔는데 이제와서 갑자기 궁금해서 찾아보니 두가지는 조금 달랐다. HTML 관련 강의나 내용들을 보면 태그와 요소라는 용어를 자주 접하게 된다. 비슷해보이지만 두가지는 조금 다르다. 태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그가 적용된 것을 가리킨다. < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse provident cumque quam cupiditate laboriosam, nostrum accusamus! Cum enim doloremque tempora aperiam sed vel, quia laborum facere ullam quam odio sapiente! </ p > 이 소스에서 <p></p> 가 태그이며 시작태그와 종료태그 사이에 작성된 텍스트가 p 요소이다.

Git에서 Remote Repository 주소를 다른 주소로 변경하고자 한다. 현재 Remote Repository 주소를 확인하기 위해서는 아래 명령어를 터미널에 입력한다. $ git remote -v  입력하면 나오는 URL 주소가 현재 Remote Repository의 주소이다. 이제 원하는 주소로 변경하려면 아래 명령어를 입력한다. $ git remote set-url origin <<새로운 git URL 주소>>  입력한 뒤 제대로 변경됐는지 확인하기 위해서 아래 명령어를 한번 더 입력한다. $ git remote -v  변경된 주소 확인하기 Git Remote Repository 변경 완료!

자바스크립트를 공부하다가 어떤 블로그는 target을 사용해서 이벤트를 처리하고 다른 블로그는 currentTarget을 사용해서 이벤트를 처리하고있었다. 찾아보니 이벤트 버블링으로 인해 둘을 구분해서 사용한다고 한다. 예제를 통해 둘을 비교해보면 import React , { useEffect } from "react" ; function LangingPage () { const clickTest = ( e ) => { console . log ( e . target ); console . log ( e . currentTarget ); }; return ( < div > < h1 > 시작 페이지 </ h1 > < li > < button onClick = { clickTest } > < span > 제출 </ span > </ button > </ li > </ div > ); } export default LangingPage ; 위 예제는 리액트로 작성했다. 버튼을 클릭해보면 아래와 같이 다르게 결과물이 출력되는것을 확인할 수 있다. 출력 순서는 target, currentTarget 순이다. target은 실제로 내가 클릭한 태그를 반환하고 currentTarget은  onClick 이벤트가 작성되어있는  태그를 반환한다. 여기서 이벤트 버블링이라는 개념이 적용되는데 span 태그를 클릭했어도 이벤트 버블링으로 인해 이벤트가 button 태그까지 전달되어 button 태그에 작성된 onClick 이벤트가 동작하게된다. 이벤트 버블링으로인해 onClick 이벤트에서는 어느 태그가 클릭되었는지 target event로 알 수 있다. 자세한 설명이 적혀있는 참고 링크를 아래에 첨부해 두었다...

__dirname : 현재 실행중인 폴더 경로 __filename : 현재 실행중인 파일 경로 ex) 현재 실행중인 root 에 uploads 파일이 없으면 uploads 파일 생성 app . use ( ' / ' , express . static (path . join (__dirname , ' uploads ' ))) ;

 오늘은 국비학원에서 프로젝트하면서 사용 될 드래그 앤 드롭 컴포넌트를 작성했다. 아래 라이브러리를 다운받아서 만들어봤다. react-dnd  react-dnd-html5-backend 아직 미완성이고 드래그엔 드롭한 데이터를 받아와 백엔드에 요청하고 해당 관련 데이터를 받아오는 작업을 해야한다. 소스코드: https://github.com/seungwonleee/Drag-and-Drop

VSCode를 사용하면서 확장기능들중 잘 사용하고있는 Prettier가 갑자기 동작을 하지않았다. Prettier를 재설치해보고 VSCode를 껏다켜보고 컴퓨터도 재부팅 해봤지만 똑같이 동작하지 않았다. 1. VSCode settings 에서 Format on Save 를 검색하고 체크박스가 표시되어있는지 확인하고 안되어있다면 체크하기 체크가 되어있었고 해제했다가 다시해봤지만 그대로였다. 2. settings -> json 검색 -> Launch -> edit in settings.json -> editor.formatonsave:true 이미 true로 설정되어있었다. 마지막으로  3. settings -> Default Formatter 검색 버튼눌러서 "esbenp.prettier-vscode" 선택 해당부분이 나는 null로 되어있었다. esbenp.prettier-vscode 를 선택하고 해당 문제를 해결할 수 있었다.

Homebrew를 사용하여 MongoDB를 설치할 수 있다. $ brew update && brew install mongodb 하지만 터미널에 에러를 뿜는다.. Error: No available formula or cask with the name "mongodb". ==> Searching for a previously deleted formula (in the last month)... Error: No previously deleted formula found. ==> Searching taps on GitHub... Error: No formulae found in taps. 해결 방법 아래 코드를 순서대로 터미널에 입력하여 설치하면 된다. brew services stop mongodb brew uninstall mongodb brew tap mongodb/brew brew install mongodb-community brew services start mongodb-community 최종적으로 잘 설치 되었는지 확인을 해보려면  $ mongo -version // MongoDB shell version v4.4.1 잘 나오는것을 확인할 수 있다. 한가지 또다른 방법은 $ brew list 를 통해 설치되어있는 파일들을 확인하는것이다.

Mongoose 로 MongoDB 연결시 에러  MongoDB를 Mongoose를 사용하여 연결해주었다. 원래 잘 작동했었는데 갑자기 에러 메세지를 뿜었다. Example app listening at http://localhost:5000 [0] MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. 찾아보니 mongoDB 연결시에 맨처음에 아이피 주소를 설정해줬었는데  집에서만 맨날 공부하다가 오랜만에 카페에 나왔더니 아이피 주소가 변경되어서 접속이 안된것이었다. mongoDB 사이트에 접속해서 해당 cluster에서 Network Access로 들어가서    ADD IP ADDRESS ADD IP ADDRESS 버튼을 클릭하여 맥의 경우  시스템 환경설정 -> 네트워크 에 접속하여 현재 연결된 Wi-Fi 의 IP 주소를 복사여 추가해준다.

[React] CORS 이슈 , Proxy 설정하기 client 와 server 가 사용하는 포트가 다를때 Cross-Origin Resource Sharing 즉, CORS 이슈가 발생한다. Cross-Origin Resource Sharing (CORS) Cross 는 정보의 이동을 뜻하고 Origin 은 client와 server 각각을 의미한다. Resource 는 말그대로 자원 즉, 데이터를 말하며 Sharing 은 공유를 말한다. 즉, client와  server 간의 데이터 공유에 있어서 발생하는 보안 문제점에 관한 정책이다. 한국어로 교차 출처 리소스 공유라고 하며 교차 출처 자원 공유는 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. 특정한 도메인간의 요청 특히 Ajax 요청은 동일-출처 보안 정책에 의해 기본적으로 금지된다. 예시를 들어보면  1) Web Docment    -------------------------> Web Server (domain-a.com)                                                 (domain-a.com) 둘은 Same-origin requests이기 때문에 항상 허용되지만 2) Web Docment    -------------------------> Web Server (domain-a.com)                    ...

리액트 또는 톰켓으로 개발하다보면 이전에 실행했었던 서버가 종료되지않아 동일한 포트로 서버를 실행하고자 할 때 오류가 발생하는데, 이때 사용중인 포트를 찾아 종료 시키면 해당 문제를 쉽게 해결할 수 있다. 터미널에 입력 포트번호 찾기 lsof -i :포트번호 ex) lsof -i :5000 5000포트 사용중인 프로그램 출력 COMMAND   PID       USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME node     17127       won   26u   IPv6 0x3d92b7d93508cd71       0t0   TCP *:commplex-main (LISTEN) kill 하기 (종료 시키기) kill PID번호 COMMAND   PID       USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME node     17127       won   26u   IPv6 0x3d92b7d93508cd71       0t0   TCP *:commplex-main (LISTEN) ex) kill 17127 종료 완료!