Suno

Next.js 와 더불어 TypeSciprt는 많은 개발시장에서 요구되는 스펙중 하나가 된 것 같다. 그래서 next.js와 typesciprt을 이용하여 개인블로그를 만드는 프로젝트를 하나 해서 포트폴리오로 만들어 볼 생각이다. 그러면 이번에는 typescript에 대해서 알아보고 왜 많은 개발자들에게 인기가 있는지 어떤 장단점이 있는지 파악해보자. TypeScript 가 나오게 된 배경... 자바스크립트는 원래 클라이언트 측 언어로 도입되었습니다. 그런데 Node.js의 개발로 인해서 자바스크립트를 클라이언트 측 뿐만이 아닌 서버 측 기술로도 활용되게 만들었습니다. 그러나 자바스크립트 코드가 커질수록 소스 코드가 더 복잡해져서 코드를 유지 관리하고 재사용하기가 어려워졌습니다. 더욱이 Type 검사 및..

요새 취업사이트에서 프론트엔드 개발자를 모집하는 회사들을 살펴보면 자격요건이나 우대사항중에 Next.js 에 대한 내용이 굉장히 많이 보입니다. 부트캠트에서 마지막 실전프로젝트로 팀원들과 프로젝트를 할때 미리 알고 적용해봤으면 좋았겠지만 아쉽게도 next.js 에 대해 뒤늦게 알게되서 공부를 시작하게 됐습니다. 그렇다면 왜 많은 개발자들이 next.js를 선호하고 어떠한 장단점들이 있는지 파악하고 공부하면 더욱 효과적일것 같아서 얼른 알아보고 이걸 적용해서 개인프로젝트에 활용해봅시다~! 요즘 트렌드 Client-side Rendering => Server-side Rendering 시대로 변하는중 html을 서버에서 만드는 것 => SSR Client-Side Rendering 원래 React와 Vue에..

Next js란? React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와 주는 간단한 프레임워크 입니다. (리액트는 라이브러리) 리액트로 개발할 때 SPA(single Page Application)를 이용하며 CSR(Client Side Rendering)을 하기때문에 장점도 있지만 단점도 있는데 그부분이 바로 검색엔진 최적화(SEO) 부분입니다. CSR을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출 될 일이 없습니다. 하지만 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있..

git push 를 하려했는데 원격저장소에서 commit 변경사항이 생겨서 pull을 받아야 한다는 메세지가 떴다. 그래서 pull을 받으려 했으나 에러 메세지가 뜨면서 pull이 진행되지 않았다. 여러 블로그글들을 찾아보면서 해결방법을 알아냈다. 먼저 git pull 은 git feach와 merge를 합친 명령어이다. 그 중 merge의 방식을 명시하라는 에러인 것 같다. 각 옵션의 의미를 알아보고, 설정을 해보자. 기존 pull 방식 기존 pull의 경우, pull을 받으면 불필요한 merge commit이 생성된다. 마치 3-way merge와 같은 모양새이다. (아래 그림에서의 빨간색 commit이 바로 불필요한 merge commit이다.) 이 방식이 세 가지 옵션 중 첫번째에 해당된다. gi..

리액트와 불변성의 연관 관계는 리액트가 지향하는 함수형 프로그래밍의 특징에서 발견할 수 있습니다. 함수형 프로그래밍의 특징 중 하나가 순수함수를 사용하는 것인데, 순수함수란 동일한 매개변수를 넣었을 때 동일한 리턴값을 출력하는 함수 입니다. 동시에 순수함수는 외부의 값을 변경하는 사이드 이펙트가 일어나지 않는 조건을 지키는 함수를 뜻합니다. 여기서 외부의 값을 변경하지 않는다는 부분이 불변성과 깊은 연관이 있습니다. 우선 불변성이란 개념을 이해하고 왜 지켜주는지 그 이유와 방법에 대해 알아보겠습니다. 불변성이란 ??? 사전적으로 불변성이란 값이나 상태를 변경할 수 없는 것을 의미합니다. 불변성의 의미를 깊이 파악하기 위해 자바스크립트의 원시타입과 참조타입을 통해 불변성을 살펴봅시다. 원시 타입 : Boo..

리액트에서 부모컴포넌트에서 자식컴포넌트로 props를 내려줄때 주로 구조분해할당을 사용했습니다. 대략 느낌적인 느낌으로 사용하고 있었는데 조금 더 구체적인 내용을 정리해보고 이해하고자 합니다. 구조분해할당이란? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식 배열 분해하기 배열이 변수로 분해되는 예제 // 이름과 성을 요소로 가진 배열 let arr = ["Bora", "Lee"] // 구조 분해 할당을 이용해 // firstName엔 arr[0]을 // surname엔 arr[1]을 할당하였습니다. let [firstName, surname] = arr; alert(firstName); // Bora alert(surname); // Lee 분해는 파..

항상 map을 통해 리스트안에 데이터들을 반복해서 나열 할 때 고유한 key값을 줘야 한다고 들었습니다. 그러나 고유한 key값으로 index를 줘서는 안된다라고 들었는데 당시에는 완벽하게 이해하지 못했습니다. 고유한 key값을 줬을때 어떠한 장점들이 있는지 다시 한번 파악하고 index를 key값으로 지정하게 됐을경우 어떠한 오류가 생길 수 있는지 살펴봅시다. JSX Key 속성에 대해서 만약 리스트에 key 속성을 넣지 않는다면?? 아래와 같은 에러가 발생하게 됩니다. JSX Key 속성은 무엇인가?? 리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야 합니다. 키는 React가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 됩니다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키..

화살표 함수는 정말 많이 쓰이는데 항상 헷갈리는 점이 있었습니다. 보통은 return을 생략해서 많이 사용했었는데 어떨 때는 return이 생략되면 원하는 결과를 얻지 못하는 경우가 있었습니다. 그래서 이번에 확실하게 화살표 함수에 대해서 정리해보려고 합니다. return 과 괄호를 생략 가능한 상황에 대해서 살펴봅시다. 화살표함수란? 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다. 바로 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다. 화살표 함수의 예시 let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전입니다. let sum = function(a, b)..

JSX를 사용하면서 단순히 리액트에서는 JSX문법 규칙들이 있고 꼭 이걸 사용해야만 한다고 알고 있었다. 하지만 필수요소는 아니였고 어떤 원리로 돌아가는지를 더욱 정확히 파악해보고 JSX를 사용했을때 장점을 알고 그로인해 리액트에서 대부분의 사람들이 JSX를 사용하는 이유를 알아보자. JSX란 무엇인가? JSX는 자바스크립트의 확장 문법 입니다. 리액트에서는 이 JSX를 이용해서 화면에 UI가 보이는 모습을 나타내줍니다. jsx를 이용하면 ui를 나타낼 때 자바스크립트(logic)와 html구조(markup)를 같이 사용할 수 있기 때문에 기본 ui에 데이터가 변하는 것들이나 이벤트드리 처리되는 부분을 더욱 쉽게 구현할 수 있습니다. 리액트에서 jsx 사용은 의무인가요?? 의무는 아니지만 자바스크립트 안..

Node.js 개념 살펴보기 노드 공식 사이트에서는 노드를 다음과 같이 설명하고 있습니다. Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다. 즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행 할 수 있으며, 서버를 실행하는데 제일 많이 사용됩니다. Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램이다. Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경)이다. Node.js는 서버사이트 스크립트 언어가 아니다. 프로그램(환경)이다. Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다. Node.js는 확장성이 있는 네트워크 어플리케이션 ..