본문 바로가기

전체 글145

[Node.js] Node의 역사, Node의 특징 (NODEJS 강의 후기) 이번 강의는 백앤드 part1 의 Ch01, Ch02 부분이다. NODEJS(노드 js)의 역사와 특징, 장단점 등에 대해서 배워보았다. 먼저 위키백과의 node.js 에 대한 설명을 살펴보면 아래와 같다. Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다. 고전적인 방식 : 고전적인 요청하고 기다리기 방식은 너무 많은 클럭 수를 낭비한다.. 2021. 6. 30.

[React] Context 란? Context 활용 방법, 공식 문서 context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다 언제 context를 써야 할까 context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인.. 2021. 6. 28.

[React] 리액트 훅 (Hook) useState, useEffect 활용하기 리액트를 처음 공부할 때 어려웠던 부분이 Hook이었다. 사실 리액트 공부 시작한지 4주차인 꼬꼬마라 아직도 어렵다. 그래도 이제 Hook이라는게 뭔지 조금은 알것 같아서 정리하면서 더 공부해보려고 한다. 아래는 리액트 자습서의 내용이다. 동기 Hook은 우리가 5년간 React로 컴포넌트를 작성하고 유지하는 동안 부딫혔던 수 많은 문제들을 해결했습니다. React를 배우는 중이든, 매일 사용하든, 심지어 비슷한 컴포넌트 모델과 함께 다른 라이브러리를 선호하든지 간에, 사용자는 이러한 문제를 인식해 왔을 것 입니다. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다. React는 컴포넌트간에 재사용 가능한 로직을 붙이는 방법을 제공하지 않습니다. (예를 들어, 스토어에 연결하는 것) 만약 이전부터 Re.. 2021. 6. 27.

스타트업 신입개발자 한 달 생존기 6월 1일 첫 출근을 시작하고 정신없이 지내다 보니 어느덧 4주가 지나갔다. 진짜 이번주까지는 공부하고 일하느라 쉴틈이 없었던 것 같다. 다행히 이번 주말은 회사 일은 잠시 내려놓고 내가 하고싶은 공부를 할 수 있는 시간이 주어졌다. 나는 국비학원을 마치고 혼자서 작은 프로젝트를 몇 개 해보고 스타트업으로 취업하게 된 케이스이다. 학원에서는 자바, 스프링, 오라클DB, 자바스크립트, 제이쿼리를 위주로 배우며 프로젝트를 했었다. 그래서 취업준비를 할 때에도 똑같은 언어와 기술들을 쓰는 곳들을 지원했다. 이 기술들도 내가 완벽하게 알고 있다고 생각하지 않아서 다른 언어를 쓰는데는 아예 지원하지 않거나 연락이 오는 곳에도 거절을 하곤 했다. 지금 다니게 된 스타트업에도 내가 배운 기술들을 미리 말씀드렸고, 처.. 2021. 6. 26.

[패스트캠퍼스] node.js / 노드.js 강의 후기 진행 예정! Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다. 출처: 위키백과 패스트캠퍼스에서 node.js / 노드.js 강의를 들으려고 생각하고 있었는데 마침 서포터즈를 모집한다고 해서 신청해보았다. 너무 감사하게도 서포터즈로 활동할 수 있게 되었고 이번주에 첫 포스팅을 하게 되었다. 나는 최근 개발자로 첫 취업을 하게 되어서 지금 회사에서 리액.. 2021. 6. 9.

[React]Material-kit-react-main 활용 프로젝트 만들기 src폴더 App.js 파일 다음과 같은 코드로 theme과 style을 받아옴 Theme의 경우 { ThemeProvider } from '@material-ui/core'; 를 import 하여 사용 index.js 파일 App 컴포넌트 import 하여 사용함 해당 파일을 public폴더의 index.html 파일의 div id="root" 에서 사용 더보기 route.js 파일에 경로 정보 작성되어있음 경로에 따라 DashboardLayout과 MainLayout으로 레이아웃 구성이 달라짐 BrowserRouter 사용 => 경로, 라우팅 관련 추후 추가 공부할 것 (같은 경로 내 routes.js, serviceWorker.js 파일 추후 추가 공부할 것) src/theme 폴더 index.js.. 2021. 6. 9.

package-lock.json 이란, 필요한 이유 package-lock.json 파일은 npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일입니다. 이 파일은 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있습니다. PACKAGE-LOCK.JSON이 필요한 이유 package.json 파일의 의존성 선언에는 version range가 사용됩니다. version range란 특정 버전이 아니라 버전의 범위를 의미합니다. 가장 흔한 예로 npm install express를 실행하게 되면 package.json 파일에는 “^4.16.3”(Caret Ranges)로 버전 범위가 추가됩니다. 저 package.json 파일로 npm install을 실행하면 현재는 4.16.3 버.. 2021. 6. 9.

[React 문서] State and Lifecycle, 이벤트 처리 함수에서 클래스로 변환하기 function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000); 함수에서 클래스로 변환하기 다섯 단계로 상기의 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있습니다. React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다. render()라고 불리는 빈 메서드를 추가합니다. 함수의 내용을 render() 메서드 안으로 옮깁니다. render() 내용 안에 있는 pro.. 2021. 6. 3.

[JavaScript] setTimeout과 setInterval, var 와 let 과 const의 차이점 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 합니다. 호출 스케줄링을 구현하는 방법은 두 가지가 있습니다. setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 setTimeout이 함수를 단 한 번만 실행하는 것과 달리 setInterval은 함수를 주기적으로 실행하게 만듭니다. *setTimeout function sayHi() { alert('안녕하세요.'); } setTimeout(sayHi, 1000); *setInterval // 2초 간격으로 메시지를 보여줌 let timerId = setInterval(() .. 2021. 6. 2.

[React 문서] JSX, 엘리멘트 렌더링, Component와 Props (주요 개념 1~4) 가장 단순한 React 예시 ReactDOM.render( Hello, world!, document.getElementById('root') ); JSX 소개 const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX란? React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는.. 2021. 6. 2.

이전 1 2 3 4 5 6 7 ··· 15 다음

티스토리툴바