공부혜옹

React CSR VS NextJS SSR,SSG React는 CSR(client side rendering)을 사용해 SPA를 구현한다. 이 경우엔 페이지 소스를 확인해보면 거의 텅텅 빈 html 파일과 js 파일을 담은 코드 한줄을 읽을 수 있는데 이와 같이 비어있는 코드 덕분에 SEO(검색엔진최적화)에서 어려움을 겪는다. 반면, NextJS는 SSR(Server side rendering), SSG을 사용한다. 첫페이지를 사전렌더링 해놓고 출력하기 때문에 꽉 차 있는 html 파일을 제공한다. 학부생 레벨에서의 토이프로젝트는 이와같은 사실이 상관 없을 수 있으나 기업단위의 서비스를 제공할 땐 사용자들에게 많이 노출되어야 하는점이 중요하기 때문에 SEO가 중요하다 따라서 요즘은 NextJs를 사용하는..

기존에 사용하고 있던 React의 프레임워크이기 때문에 React와의 차이점이 무엇인지, React의 어떤점을 보완하고자 하는 기능인지 최대한 인지하면서 공부해보려고 한다 React 코드기반 라우팅 VS NextJS 파일기반 라우팅 nextJS는 기존 React와 달리 파일 기반 라우팅을 실행한다 기존의 React는 라우트와 관련된 코드를 따로 구현해 주어야했다 const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( ); NextJS는 이와 달리 파일기반으로 라우팅하기에 코드작성이 따로 필요 없다 다만 폴더 구조와 파일명을 조금 더 신경써서 설계 후 작명해주어야 한다 → 폴더 구조와 파일..

5. 단축평가 5-1) 단축평가는 표현식을 평가하는 도중에 평가결과가 확정되는 경우 나머지 평가 과정을 생략하는 것이다 //결과: 'Cat' 'Cat' || 'Dog' // Cat(true)에서 이미 결과가 확정이되어 'Dog'는 평가하지않는다 5-2) 단축평가는 if문을 대체할 수 있다 if(true) foo = '트루'; -> foo = true && '트루'; if(!true) foo = '폴스'; -> foo = !true || '폴스'; 5-3) 단축평가 사용사례 5-3.1) 객체변수가 null인지 undefined인지 확인한 후 프로퍼티를 참조할때 //obj가 null 혹은 undefined이면 falsy값이므로 obj로 평가되고 값이 있을경우 onj.value로 평가된다 let obj = n..

4. 연산자 4-1) NaN은 자신과 일치하지않는 유일한 값이다 NaN은 === 대신 Number.isNaN 혹은 Object.is 빌트인 함수을 사용한다 4-2) typeof null은 null이 아닌 object라는 문자열을 반환한다 4-3) 지수연산자 ES7부터 지수연산자가 새로 도입되었다 기존에는 Math 함수를 사용하였다 Math.pow(2,2); // 기존 2 ** 2; //ES7 (-2) ** 2 //음수를 밑으로 사용하려면 괄호로 묶어야한다 2 * 5 ** 2 = 50 2 *= 2 //4 기존 이항연산자중에 우선순위가 가장 높다 할당연산자와 사용 가능하다

2.스코프 💡 함수레벨스코프 VS 블록레벨스코프 - 함수레벨은 함수를 기준으로 스코프 생성 ex. var - 블록레벨은 블록을 기준으로 스코프 생성 ex. let,const 렉시컬스코프(정적스코프) VS 동적스코프 렉시컬스코프는 함수를 어디에서 정의했는지에 따라 상위 스코프를 정의한다 동적스코프는 함수를 어디에서 호출했는지에 따라 상위 스코프를 정의한다 2-1) var키워드는 같은 스코프내에서 중복 선언이 가능하다 function(){ var foo = 1; var foo = 2; console.log(foo); //2 } 2-2) 모든 스코프는 하나의 계층적 구조로 연결된다 → 스코프체인 2-3) 자바스크립트는 렉시컬스코프를 따른다 3. let, const키워드와 블록레벨 스코프 3-1) var키워드와..

최근 면접준비를 위해 modern deep dive를 읽으며 js 기본 개념부터 탄탄히 하기위한 공부를 다시 하고있다 modern deep dive 포스팅은 무언가를 설명하기 보다 책을 읽으며 노션에 정리한 부분을 기록한다 1. 변수 1-1) 변수는 값이 아닌 메모리의 주소를 기억하고 있다 result = 30 의 경우 30이 저장되어있는 메모리의 주소 공간을 result라는 이름으로 부르겠다는 뜻이다. result를 호출할 경우 result에 해당하는 메모리 주소를 찾아가 그곳에 저장되어있는 값을 참조한다 1-2) 변수 선언은 값을 저장하기 위한 공간을 확보한다는 개념이다 선언 후 할당을 안해주었다면 undefined로 초기화 된다 undefined는 js의 원시타입(primitive 타입)이다 JS에..

이 글에선 tailwind CSS의 초기 세팅 및 사용법에 대해서 설명하지 않는다. 해당 내용은 공식문서에 가장 잘 설명이 되어있다. tailwind CSS를 사용하며 느낀점과 문제점, 그리고 해결과정에 대해서 설명한다. 실제 적용 화면 Tailwind CSS란? Tailwind CSS는 Utility-First CSS 프레임워크이다 Utility-First CSS? 미리 프로젝트에 맞게 세팅되어있는 유틸리티 클래스를 활용하여 html 코드내에서 스타일링 할 수 있게하는 css 사용계기 기존에는 프레임워크 없이 SCSS를 사용하고 있었는데 최근 다수의 기업들이 CSS 프레임워크를 사용한다는것을 알게되면서 사용시 이점이 무엇인지 궁금하여 사용해보게 되었다 CSS framework에는 emotion, bul..

CSR과 SSR이 뭔지 알기에 앞서 SPA와 MPA 개념에 대해 알아야한다 SPA란?(single page application) 한개의 페이지로 구성된 어플리케이션 사용자가 필요한 부분의 데이터만 받아와서 페이지를 부분적으로 업데이트하여 사용한다 기존엔 사용자가 페이지를 이동할때마다 해당 페이지에 해당하는 index.html을 서버로부터 매번 가져와 페이지를 전체 업데이트 했다. (서버에 모든 페이지의 index파일이 이미 준비되어있는 형태) 이러한 과정을 개선하기 위해 AJAX를 이용한 SPA가 탄생했다. MPA란?(Multiple Page Application) 여러개의 페이지로 구성된 어플리케이션 새로운 페이지를 요청할때마다 서버에서 렌더링된 정적 리소스를 다운한다 페이지 전체를 다시 렌더링한다 ..