서버 = 백엔드, DB 라고 생각했던 사람, 나야 나 🙋🏻‍♀️... 그래도 프론트엔드 개발자로 입사하고, 백엔드 개발자들과도 얘기해보면서 백엔드 개발이 서버와 DB 다루는 거구나 라고 이해하게 되었다. 그런데 Next.js 공부를 하면서 접한 서버 사이드 렌더링... 이 서버도 그 서버야? 하는 의문이 들었다. 그리하여 찾아보고 정리하는 포스팅! 서버란? 서버 : 클라이언트의 요청에 응답하는 프로그램 요청에 따라 html, css, js 등 정적 파일을 보내주는 프론트엔드 서버와, DB 데이터를 보내주고 연산하는 백엔드 서버로 나눌 수 있다. 프론트 서버 주로 정적 리소스(static resources)를 다루는 데 사용된다. 정적 리소스는 서버 측에서 동적으로 생성되는 게 아니라, 이미 저장되어 있는..

작업하다가 중간에 파일명 첫글자를 대문자로 바꿨는데, 깃으로 커밋하는 과정에서 대소문자 구분이 안 된다는 사실을 발견했다. 회사에서 작업하다가 집에서 내려받았더니 대소문자 변경 전 내역이 받아져서 당황했던... 한번 작업이니까 그냥 파일명을 일일히 변경해서 사용했는데, vercel 로 배포하려고 하니 다시 문제가 발생. 검색해보니 config 설정을 변경하면 간단하게 해결되는 부분이었다. git config core.ignorecase false 명령어 입력 후 다시 커밋 해보니, 이전의 footer.tsx 파일과 Footer.tsx 파일 두개가 같이 있는 것을 볼 수 있다. 이러면 build 시 문제가 생기므로 아래의 명령어를 이용하여 캐시를 삭제해준다. git rm -r --cached . * 마지막..

MPA & SPA : 웹 어플리케이션을 구성하는 형태 MPA(Multiple Page Application) - 전통적인 방식, 다수의 페이지로 구성되어 요청마다 정해진 페이지를 반환 SPA(Single Page Application) - 단일 페이지, 해당 페이지 자체에서 화면을 재구성 ex) React CSR & SSR : 렌더링 방식 CSR - 클라이언트 사이드(브라우저)에서 HTML 문서를 렌더링 - SPA의 방식 - 최초 요청 시 받아온 HTML 문서는 거의 비어있으며, 그 후 JS 등 다른 파일을 로드하여 브라우저 단에서 렌더링을 실시해 화면을 구성. 특징 로딩시간 - 초기 로딩이 완료되기 까지 오래 걸림 SEO - 빈 HTML 문서가 넘어오므로 최적화가 어려움 인터랙션 속도 - 번들링된 js..

OG(Open Graph) 오픈 그래프 프로토콜은 어떠한 인터넷 웹사이트의 HTML 문서에서 head -> meta 태그 중 "og:XXX"가 있는 태그들을 찾아내어 보여주는 프로토콜이다. https://namu.wiki/w/%EC%98%A4%ED%94%88%20%EA%B7%B8%EB%9E%98%ED%94%84%20%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C 원리는 플랫폼에 URL을 붙여 넣는 순간 해당 플랫폼에서 일하는 크롤러가 빠르게 해당 URL을 먼저 방문해서 웹페이지에 있는 오픈그래프 데이터를 수집해 미리 보기 형식으로 구성해주는 방식 출처: https://6u2ni.tistory.com/22 [Design Futures:티스토리] 쉽게 말해 링크를 SNS 등의 플랫폼에 추가..

생각보다 업데이트를 꽤나 자주 하는 비주얼 스튜디오 코드. 릴리즈 노트가 뜨면 슬쩍 둘러보곤 하는데요, 이번 1.70 버전 릴리즈에서 마음에 드는 업데이트를 발견해서 공유해드리려고 해요. 바로 sticky scroll 입니다! 아래 이미지로 보시는 게 이해가 빠르실 거예요. Sticky Scroll 보시는 것처럼 스코프의 헤더를 고정시켜줘서, 자바스크립트나 scss에서 네스팅이 깊어질 때 유용한 것 같아요. scss를 메인으로 사용하는 제게 꼭 필요했던 부분입니다. 설정 방법 설정 방법은 아래와 같아요. File > Preferences > Settings로 들어가시거나, 혹은 Ctrl + , 누르시면 세팅 창이 열려요. 세팅 창에서 sticky 키워드로 검색을 하시면, 이렇게 세 가지 옵션이 나오는데 ..

여러분 안녕하세요! 세상의 모든 코린이들을 위한 인강사이트 인프런, 다들 잘 알고 계시죠? 정말 다양하고 많은 강좌들이 있어 저도 애용하는데요, 생각보다 인프런에서 다양한 할인이벤트를 자주 열더라구요. 그래서 이벤트 할 때마다 담아뒀던 강의를 사곤 한답니다 ㅎㅎ 오늘 업무가 많지 않아서 중간에 잠깐 짬내서 강의 하나 들으러 인프런을 들어갔는데요. 방금 전 인프런 사이트를 들어갔다가 발견한 깜짝 쿠폰! 여러분께도 공유해드리려고 오랜만에 포스팅을 써보아요. 사실 이 메세지를 보고도 쿠폰이 그래서 어디 있다는거지? 했는데요, 아무리 찾아봐도 없어서 다시 한번 메세지를 확인해보니... 코드가 한글이었던 거예요!! 쿠폰코드 : 레이니데이응원 마이페이지의 내 쿠폰함으로 들어가셔서 할인쿠폰 코드 입력란에 한글로 '레..