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에..

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

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

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

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

웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 그럼 모듈과 모듈 번들링에 대해서 조금 더 살펴보겠습니다. #모듈이란? 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다. // math.js function sum(a, b) { return a + b; } function substract(a, b) { return a - b; } const pi = 3.14; export { ..

운영체제란? 시스템의 자원과 동작을 관리하는 소프트웨어 프로세스, 저장장치, 네트워킹, 사용자, 하드웨어를 관리 운영체제의 역할 및 목적 자원관리 컴퓨터 시스템 자원 효율적 관리 (시스템 자원 - CPU, Memory, I/O장치와 같은 하드웨어 자원과 프로세스, 파일 메시지 등의 소프트웨어 자원) 자원 보호 프로그램이나 다른 사용자가 데이터를 삭제하거나 중요 파일에 접근하지 못하게 컴퓨터 자원들 보호 인터페이스 제공 하드웨어 인터페이스와 사용자 인터페이스 제공하여 편리하게 사용하도록 지원 응답시간 (Turnaround Time) 작업 의뢰 후 시스템에서 결과가 얻어질 때까지의 시간 처리능력 (Throughput) 시스템의 생산성을 나태내는 단위. 일정시간 동안 처리하는 일의 양 사용 가능도(Availa..

1. 객체 지향 프로그래밍 ( Object Oriented Programing ) 1) 객체 객체란 말 그대로 대상을 나타내는 단어입니다. 예를 들어, 사람 개인 한 명 한 명을 모두 객체라 할 수 있고, 책 한 권 한 권을 객체라 할 수 있습니다. 사람은 생김새와 성격이 똑같을 수는 없기 때문에 개개인을 객체라 할 수 있으며, 책도 내용이 같을지라도 한 권의 책에 흠집을 낸다고 해서 모든 책들이 전부 흠집이 나는 것이 아니기 때문에 한 권 한 권을 객체라 할 수 있습니다. 2) 클래스 사람들은 일반적으로 같은 속성들을 갖고 있습니다. 여기서 속성이란 눈, 코, 입, 손, 발, 등의 신체들을 의미합니다. 책도 책 이름, 작가, 출판사, 출판일 등 같은 속성을 갖고 있다고 할 수 있습니다. 사람, 책 같은..

나는 프론트엔드 개발자가 되기위해서 당연하게도 javascript를 배우고 사용하며 개발을 공부하고 있다. 하지만 어느순간 javascript를 사용하고 있지만 이 친구가 어떻게 만들어졌고, 오늘날 왜 프론트개발하기위해 기본적으로 알아야하는 기초언어 같은 자리를 잡게 되었을까?? 궁금해졌다. 이 궁금증을 해결하기 위해서는 javascript의 역사에 대해 알아보고, 그 결과 조금 더 시야가 넓어지고 언어를 이해하는데 도움이 될 것이라 생각이 든다. 같이 한번 살펴보자. 자바스크립트의 역사 1993 NCSA - Mosaic Web Browser 1994 Netscape - Netscape Navigator HTML/CSS로 간단하게 정적 웹 페이지를 만들 수 있었다. 시장 점유율 80% 이후 동적 웹사이트..