프로그래밍 공부 노트

  Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. 과거의 웹사이트들은 대부분 SSR 방식으로 동작해 왔지만 스마트폰이 대중화 되면서 기존의 웹들이  모바일에 최적화 되어있지 않아 사용에 불편함이 생기게 되었다. 그래서 사용자들은 모바일 앱과 같은 형태의 웹페이지가 필요하게 되었는데 이러한 문제를 해결하기 위해서 React, Angular, Vue 등 과 같은 라이브러리, 프레임워크가 생기게 되었고 CSR(Client Side Rendering)이 가능한 SPA가 등장하게 되었다. SPA는 Single Page Application으로 기존의 웹페이지와 다르게 1개의 페이지에서 여러 동작을  수행할 수 있어 모바일 앱과 비슷한 형태로 메뉴바는 고정되어있고 컨텐츠 영역만 계속 변경되는 방식이다. # CSR 과  SSR  비교 둘의 차이점을 확인해보자. 프론트엔드 개발자라면 누구나 한번 들어봤을 React는 CSR 방식을 이용한다. CSR 방식은 화면의 프레임 등을 먼저 렌더링한 뒤 비동기방식으로 데이터를 요청해서 불러와 화면에 데이터를 출력해준다. 이러한 방식을 사용하는 이유는 보통 사용자가 3초이내에 화면이 렌더링 되지 않으면 해당 페이지를 떠난다고 한다.  그렇기 때문에 CSR 렌더링 방식으로 하면 데이터를 불러오기 전 까지 로딩창을 보여주던지 또는 화면의 일부를 보여줌으로서 사용자를 조금이라도 더 해당페이지에 길게 머물수 있도록 도와준다. 반면에 CSR을 사용하면 한번에 모든 데이터를 불러와야하기 때문에 초기 로딩속도가 느릴 수 있다.  또한 검색엔진 최적화에 문제가 발생할 수 있다. 좋은 검색엔진의경우 해당 페이지가 CSR 방식이라는것을  알아 차리고 곧 데이터가 불러와지겠다는것을 판단할 수 있지만 좋지 못한 검색엔진의 경우 해당 페이지가 초반에 로딩 되어있을때 어떠한 데이터도 존재하지 않기 때문에 웹사이트가 검색 순위에서 밀려나는 문제가 발생할 수 있다. 반면에 SSR 방식을

깃허브에 로컬 프로젝트를 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 를 선택하고 해당 문제를 해결할 수 있었다.