본문 바로가기

프론트엔드174

React Native - 작동원리 그리고 UI 스레드 / JS 스레드에 대한 고찰 작동원리 그리고 UI 스레드 / JS 스레드에 대한 고찰 지금까지 React Native을 통해 개발을 하면서 알게 된 근본적인 작동원리 그리고 작동원리와 관련된 UI 스레드와 JS 스레드에 대한 고찰을 기록해보자고 합니다. 기존 OS별 Native 단에서 앱 개발을 했던 과거에 비하여 React Native라는 프레임워크를 통해 OS 둘 다 함께 개발이 가능하도록 하고 JS 언어와 ReactJs 문법을 사용하면서 개발 생산성을 매우 높게 해주었습니다. ReactJs로 개발 공부를 시작한 저로서는 앱도 개발할 수 있는 능력을 갖추게 해 준 매우 고마운 존재이기도 합니다. 물론 Native로만 개발하면 React Native보다 생산성 말고는 성능적으로나 기능 구현에서는 더 앞서 나가는 건 사실이지만 엄청.. 2023. 9. 22.

下 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 下 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 上 편에서 앞서 인도네시아(동남아) 국가 인프라 상황과 스마트폰 보급 상황 그리고 국내 상황과의 차이점 등등을 전반적으로 알아보았습니다. 上 편: 동남아 국가 인프라를 고려한 성능 최적화 개선 과정 上 편: 동남아 국가 인프라를 고려한 성능 최적화 개선 과정 현재 서비스 중인 MyVenus는 인도네시아 중심으로 동남아 국가들을 타겟팅한 뷰티 플랫폼 서비스 App입니다. 제 개발자 커리어의 첫 서 k0502s.tistory.com 다시 정리하자면 동남아(인도네시아) 국가의 인프라 및 상황은 아래와 같습니다. 동남아(인도네시아) 국가의 인프라 및 상황 1. 국내보다 불안정한 인터넷 환경. 2. 대략 90%가 Android 디바이스, 나머지 10.. 2023. 9. 22.

NextJs - 4편: SEO(검색 엔진 최적화)를 위한 종류별 세팅 SEO(검색 엔진 최적화)를 위한 종류별 세팅 이번에는 NextJs을 사용하는 이유 중 하나인 SEO에 대해 더 깊이 기록하고자 4편을 쓰게 되었습니다. NextJs의 SSR이라는 특징으로 SEO 엔진에 최적화되었다는 것은 사실이지만 여기서 끝나는 것이 아니라 SEO 엔진에 최적화를 위해 추가로 설정해야 하는 개발 및 환경 세팅이 존재합니다. NextJs만 쓰면 모든게 해결되면 좋겠지만 추가적인 최적화 세팅 및 개발이 없다면 NextJs을 사용하는 가치를 최대한으로 끌어올릴 수 없으니 필수라고 생각합니다. 현재 실제로 제가 서비스 운영 중인 MyVenus 인도네시아 뷰티 플랫폼의 NextJs 프로젝트로 구축한 서비스 메인 웹 페이지를 통해 예시 또한 보여줄 예정입니다. MyVenus - Aplikasi .. 2023. 9. 18.

上 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 上 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 현재 서비스 중인 MyVenus는 인도네시아 중심으로 동남아 국가들을 타겟팅한 뷰티 플랫폼 서비스 App입니다. 제 개발자 커리어의 첫 서비스 운영/개발이었는데 동시에 첫 해외 서비스를 운영하는 경험 또한 하게 되었습니다. 서비스 운영/개발을 하기 전 과거에는 SI 업무를 통해 App 개발을 해보았기에 App 개발에는 완전 처음이 아니었습니다. 하지만 SI 업무에서 했던 App 개발들은 모두 국내용이었고 사실 이것은 일반적이었습니다. 하지만 지금 이렇게 동남아 해외 서비스 App을 개발/운영하면서 국내용 서비스와 다르게 추가적으로 개발/운영하는데 꽤 많은 고려사항이 있었습니다. 이번 上편에서는 국내 서비스와 동남아 서비스를 하면서 알게 된 .. 2023. 9. 18.

NextJs - 1편: NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기 1편: NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기 NextJS는 ReactJs의 몇몇 한계점을 극복한 프레임워크라고 말할수 있습니다. ReactJs의 기반에서 더 좋은 SEO(검색 엔진 최적화), SSR을 통한 효율적으로 최적화된 랜더링 속도와 비용 절감 등등이 추가되었습니다. 하지만 그만큼 ReactJs에 비해 NextJs의 러닝커브가 올라갔다고 할 수도 있습니다. 그래서 NextJs에 대한 기본적인 이론과 알아야할점들을 기록하고자 합니다. ReactJs에 대한 개념이 우선적으로 알고나서 이 글을 보시면 NexJs에 대하여 더 디테일 하게 이해하는데 좋을거 같습니다. CSR과 SSR CSR과 SSR을 크게 두 가지로 비교할 수 있습니다. 1. 초기 화면 랜더링 방법. 2. 그 이후 페.. 2023. 9. 8.

프론트엔드 개발자의 백엔드 개발자/기획자/디자이너와의 협업과 투쟁 프론트엔드 개발자의 백엔드 개발자/기획자/디자이너와의 협업과 투쟁 프론트엔드 개발자는 필연적으로 백엔드 개발자 / 기획자 / 디자이너 등등 많은 다른 직군들과 협업하고 커뮤니케이션하며 업무를 진행해야 합니다. 개발자라는 직업이 혼자서 주로 일하고 사람들과 부딪히는 일이 별로 없다고도 합니다. 하지만 직접 프론트엔드 개발자가 되고 나서 일을 경험해 보니 개발자인 프론트엔드는 오히려 반대라고 생각합니다. 3년 가까이 프론트엔드 개발자로 일을 하면서 겪었던 커뮤니케이션 이슈, 협업 등등 깨달은 점들을 프론트엔드 개발자 관점에서 기록해보고자 합니다. 예비 프론트엔드 개발자 혹은 예비 기획자 / 디자이너 등등 IT 업계의 업무 방식이 궁금한 분들에게 많은 도움이 되고자 합니다. 왜 프론트엔드 개발자는 결국 부딪히.. 2023. 9. 6.

Front End 시점에서의 서비스 대량 트래픽 발생 그리고 대응 Front End 시점에서의 서비스 대량 트래픽 발생 그리고 대응 현재 제가 운영 중인 서비스 MyVenus는 아직 초기이기 때문에 대량 트래픽이 발생하지 않는 수준입니다. 대량 트래픽에 대한 걱정은 사실 평소에 많이 하지 않고 있었습니다. 하지 어느 날 운영팀에서 운영 중인 서비스 인스타그램 광고 계정의 하나의 릴스 영상이 1600만 뷰 이상의 조회수가 발생하면서 사건의 발단이 되었습니다. 이 릴스의 광고 효과로 지금까지 경험해보지 못한 대량 트래픽이라고 말할 수 있는 수치를 기록하게 되었습니다. 엄청난 유저들이 앱을 인스톨하고 회원가입 이벤트가 엄청나게 발생한 것이었습니다. 이때 일어난 일들을 Front End 관점에서 기록하였습니다. 물론 서버 쪽의 대응이 더욱더 중요한 시점이었지만 제 포지션은 F.. 2023. 8. 24.

프론트엔드 로드맵 2023 | Front End Road Map 2023 GitHub - Han-Kyeol/developer-roadmap-kr-: 2020년, 웹개발자가 되기 위한 로드맵 https://roadmap.sh 2020년, 웹개발자가 되기 위한 로드맵 https://roadmap.sh. Contribute to Han-Kyeol/developer-roadmap-kr- development by creating an account on GitHub. github.com 2023. 8. 17.

REST API( Representational State Transfer) REST API( Representational State Transfer) REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었습니다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했습니다. HTTP 프로토콜을 정확히 의도에 맞게 활용하여 디자인하게 유도하고 있기 때문에 디자인 기준이 명확해지며, 의미적인 범용성을 지니므로 중간 계층의 컴포넌트들이 서비스를 최적화하는 데 도움이 됩니다. REST의 기본 원칙을 성실히 지킨 서비.. 2022. 5. 10.

서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(SPA) 클라이언트 사이드 랜더링(CSR) 클라이언트 사이드 랜더링(CSR)는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미합니다. 클라이언트 사이드 랜더링(CSR)은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있습니다. 서버는 단지 JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행할 수 있습니다. 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 먼저 웹앱을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여주는 클라이언트사이드렌더링은 트래픽을 감소시키고, 사용자에게 더 나은 경험을 제공합니다. - 장점 트래픽감소.. 2022. 4. 23.

CSS 방법론 CSS 방법론 대표적인 CSS 방법론은 OOCSS, BEM, SMACSS로 정의할 수 있습니다. CSS 설계의 중요성 - CSS 개발의 문제점 CSS를 작성하는 것이 쉽지만 한 번 확장하고 관리하기는 어렵습니다. CSS의 전역환경 일관적이지 않은 코드 구조, 각자 다른 사고 방식 스타일 정의 지나치게 복잡한 선택자 동일 요소에 대한 중복 설정, 불필요한 CSS의 증가 CSS 셀렉터 우선순위 or !important 사용 CSS (표현), JS (동작), HTML (내용) 간 명확한 분리가 안됨 (높은 결합도) - 사이트 규모가 커질수록 문제가 발생합니다. 유지 보수가 불가능한 코드 -> 중복, 코드분석 시간 -> 새로운 기능의 개발 속도 저하 - CSS 작성 방법 적절한 의미 사용 (시맨틱) 중첩 선택자.. 2022. 4. 23.

브라우저 작동 원리 브라우저의 작동 원리 Browser 브라우저의 주요 기능은 사용자가 참조하고 싶은 웹페이지를 서버에 요청하고, 서버의 응답을 받아 브라우저에 보여주는 것이며. 흔히 사용하는 크롬, 인터넷 익스플로러 등 인터넷 프로그램입니다. 서버의 응답은 주소를 통해 요청하는데, 이 주소를 URI(Uniform Resource Identifier)라고 합니다. 웹 브라우저와 웹 서버 url을 주소창에 치고 나면 페이지가 이동하고 웹브라우저가 이동한 웹서버에 웹페이지 요청을 하면 웹서버는 웹페이지 응답을 합니다. 그리고 서버가 브라우저에게 전달한 응답인 HTML문서를 브라우저는 읽어들이고 해석한 후 사용자(Client) 에게 보여주고 HTML 및 CSS를 해석하는 구체적인 내용들은 모두 W3C, World Side Web.. 2022. 4. 21.

웹접근성(Web Accessibility) 웹접근성(Web Accessibility) 웹사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것이라고 말할 수 있습니다. 법적 관점에서의 웹 접근성은 모든 사용자가 신체적·환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것입니다. 여기서 신체적 조건이란, 일반 사용자는 물론, 장애를 가진 사람, 고령자 등을 의미하며, 환경적 조건이란 다양한 기기(PC, Mobile, PDA 등), OS(운영체제), 웹 브라우저(Internet Explorer, FireFox, Safari,Chrome, Opera 등) 또는 저사양 및 저속회선 사용자나 이미지, 동영상 등을 볼 수 없는 환경 등을 의미합니다. 예를 들어 일반인들에게 기본적으로 제공해야하는 정보들을 읽을 수.. 2022. 4. 17.

AJAX (Asynchronous Javascript And XML) AJAX (Asynchronous Javascript And XML) Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법입니다. 즉, 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것입니다. 비동기 방식의 장점 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 됩니다. 하지만 비동기식 방식을 이용할 경우 필.. 2022. 4. 17.

HTML/CSS HTML HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. 만약 어떠한 문장을 그냥 그 자체로 표시하고 싶다면, 태그 중 ()로 감싸 엘리먼트를 문단으로 명시할 수 있습니다. My Code is Good 특징 .. 2022. 4. 12.

Babel 바벨 Babel 바벨 공식문서에서는 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있으며 더 정확하게 말하면 트랜스파일러라고 말할 수 있습니다. 왜 바벨이 필요하고 바벨이 있어야만 자바스크립트의 최신 문법을 사용할 수 있는 이유는 자바스크립트가 실행되는 환경때문입니다. 다른 언어와 달리 자바스크립트는 정말 많은 환경에서 실행되는데 웹 브라우저, NodeJS, Deno 등에서 실행되는데 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 자바스크립트 코드를 읽게 됩니다. 게다가 이렇게 실행되는 환경의 버전에도 자바스크립트는 영향을 받으며 특정 버전 이상에서만 실행되는 코드가 있고 특정 브라우저에서는 실행되지 않는 코드도 있습니다. 그렇기 때문에 모든 자바스크립트 실행 .. 2022. 4. 12.

Webpack 웹팩 Webpack 웹팩 공식문서에서는 웹팩을 자바스크립트 애플리케이션을 위한 정적 모듈 번들러라고 소개하고 있습니다. 여기서 번들러란 의존성이 있는 모듈들을 하나의 파일로 통합시켜주는 도구라고 말할 수 있습니다. 특징 한번에 많은 요청을 하지 않아도 됩니다. 예를 들어 한 웹페이지에서 사용하는 자바스크립트 파일이 10개정도 된다고 가정해본다면 웹 페이지가 로드될 때 자바스크립트 파일 10개롤 모두 네트워크를 통해 요청해서 받아와야 해서 네트워크 병목현상이 발생할 수 있습니다. (물론 10개의 파일 정도로 병목현상이 발생하지는 않고 단순한 예시이다.) 모듈 단위로 개발하여 유지보수성을 높일 수 있습니다. 하나의 파일에 모든 자바스크립트 코드가 있다고 할때 그 코드가 몇 천 라인, 몇 만 라인인지는 모르지만 우.. 2022. 4. 12.

Npm Npm N은 Node는 Node.js를 의미하며 P는 package로 만들어진 것들을 의미합니다. package는 모듈이라고도 불리는데 패키지나 모듈은 프로그램보다는 조금 작은 단위의 기능들을 의미합니다. 그리고M의 Manager는 관리자를 의미합니다. 즉 npm이라는 것은 Node.js로 만들어진 pakage(module)을 관리해주는 툴이라는 의미를 가지고 있다는 것을 알 수 있습니다. 이름처럼 npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 공개된 모듈들을 설치하고 활용할 수 있고 프로그램보다 조금 작은 단위인 이 모듈들을 필요에 따라서 이런 저런 모양으로 쌓아서 활용을 할 수 있다고 하는데 필요한 기능을 적절하게 활용.. 2022. 4. 12.

ECMAScript2015(ES6) ECMAScript2015(ES6) ECMAScript 넷스케이프(NE)는 javascript를 지원했고 인터넷익스플로러(IE)는 Jscript를 지원 했었습니다. 윈도우즈에 끼워팔기 신공으로 점차 득세를 하기 시작한 인터넷익스플로러는 그만 자만심에 빠져 Jscript를 표준이 아닌 적당히 자기만의 기능을 추가하기 시작했습니다. 점유율이 높으니 모든 브라우저들이 내가 만든 기준을 따라 올 거라 생각을 했던 것입니다. 하지만 넷스케이프는 자신이 밀고 있던 javascript의 핵심 개발 언어를 ECMA 인터내셔널에 제출하고 표준화를 시도 하였고 1996년에 ECMA-262(ES1)으로 명명된 표준 스크립트 기술 규격이 발표되었습니다. 이때부터 ES3 -> ES5 -> ES6(ES2015) -> ES7(ES.. 2022. 4. 10.

DOM API (Web API) and Concept DOM API (Web API) and Concept DOM API DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성되며, 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 HTML.. 2022. 4. 10.

JavaScript의 동작 원리 JavaScript의 동작 원리 자바스크립트의 동작 원리를 보기 전에 먼저 전체적인 동작 구조를 살펴봐야 하는데 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요합니다. 자바스크립트는 엔진은 V8, Rhino, SpiderMonkey 등 다양하게 있지만 이 중에서도 가장 대표적인 예는 Google에서 만든 V8 엔진입니다. JavaScript 엔진 자바스크립트 엔진은 두 가지 구성요소로 구성됩니다. 하나는 Memory Heap(메모리 힙)이고, 다른 하나는 Call Stack(호출 스택)입니다. Memory Heap(메모리 힙)은 메모리 할당이 발생하고, Call Stack(호출 스택)은 코드 실행에 따라 스택이 하나씩 쌓이는 곳입니다. 자바스크립트를 사용하다 보면 setTimeOut() 같은 수.. 2022. 4. 10.

Git과 GitHub Git 형상 관리 도구(Configuration Management Tool) 중 하나이며 형상 관리 도구는 버전 관리 시스템이라고도 한다. 소프트웨어를 개발하는 기업의 핵심 자산인 소스코드를 효과적으로 관리할 수 있게 해주는 무료, 공개소프트웨어라고 불린다. 소스코드를 주고 받을 필요 없이, 같은 파일을 여러 명이 동시에 작업하는 병렬 개발이 가능하며, 즉 브랜치를 통해 개발한 뒤, 본 프로그램에 합치는 방식(Merge)으로 개발을 진행할 수 있습니다. 분산 버전관리이기 때문에 인터넷이 연결되지 않은 곳에서도 개발을 진행할 수 있으며, 중앙 저장소가 날라가버려도 다시 원상복구할 수 있고 팀 프로젝트가 아닌, 개인 프로젝트일지라도 GIT을 통해 버전 관리를 하면 체계적인 개발이 가능해지고, 프로그램이나 .. 2022. 4. 10.

React Native - 딥링크(Deep Link) Ios, Android 구현하기 딥링크란 딥링크는 특정 페이지에 도달 할 수 있는 링크를 말합니다. 그렇다면 모바일 딥링크란 모바일 어플리케이션의 특정 페이지에 도달 할 수 있는 링크를 말하는 것입니다. 가끔씩 모바일로 웹 서핑을 하다가, 어떤 버튼을 눌렀는데 네이티브 앱으로 바로 이동하는 기능을 해본적이 있을 것인데 그것이 바로 '모바일 딥링크'를 이용하여, 특정 앱 페이지로 들어가는 것입니다. 딥링크의 종류 친구들과 특정 웹 페이지를 공유할 때 자주 사용하는 웹 URL(예를 들어, https://k0502s.tistory.com/category/React%20Native) 처럼, 모바일에 어플리케이션에도 특정 페이지에 들어갈 수 있는 링크가 있는 것이라고 말할 수 있습니다. 딥링크의 형태는 앱 스킴(URL 스킴) 혹은 일반적인 ht.. 2021. 10. 6.

Typescript enum 타입 enum 타입 enum 타입이란 자바스크립트에는 없고 타입스크립트에만 있는 것인데 각각 enum 타입으로 열거형을 사용하여 이름이 있는 상수들을 정의할 수 있게된다. enum Fruit { Apple, Banana = 5, Orange, } console.log(Fruit.Apple, Fruit.Banana, Fruit.Orange) // 0 5 6 위의 코드를 보면 enum 타입을 이용하여 객체 형식의 열거형으로 타입들의 상수들을 정의할 수 있게되었다. 이때 초기화 되지 않은 열거형의 첫번째 값은 '0'으로 시작하며 만약 Apple = 1 이라고, 값을 지정해 주면, 다음부터는 자동증가하여 Fruit.Apple 은 1, Banana 은 2, Orange 는 3가 된다. "use strict"; Obje.. 2021. 5. 5.

Express - 라우터의 파일로 분리 정리 라우터의 파일로 분리 정리 관리하는 페이지가 많아짐에 따라서 코드의 복잡도가 급격히 높아지게 된다. 복잡도를 낮추는 방법이 라우터다. 주소체계변경 main.js var express = require('express') var app = express() var fs = require('fs'); var path = require('path'); var qs = require('querystring'); var bodyParser = require('body-parser'); var sanitizeHtml = require('sanitize-html'); var compression = require('compression') var template = require('./lib/template.js').. 2021. 1. 14.

Express - 에러처리 에러처리 app.use(function(req, res, next) { res.status(404).send('Sorry cant find that!'); }); app.use(function (err, req, res, next) { console.error(err.stack) res.status(500).send('Something broke!') }); 위의 코드들을 맨 아래에 적용하면 에러 발생시 설정한 값이 뜨도록 설정할 수 있다. main.js const express = require('express') const app = express() const port = 3000 var fs = require('fs'); var qs = require('querystring'); var templ.. 2021. 1. 14.

Express - 정적인 파일의 서비스 정적인 파일의 서비스 express에서 이미지, 자바스크립트, CSS와 같은 파일을 서비스하는 방법이 있다. app.use(express.static('public')); 위 코드를 추가시켜줘야 정적인 파일을 적용할 수 있다. main.js const express = require('express') const app = express() const port = 3000 var fs = require('fs'); var qs = require('querystring'); var template = require('./lib/template.js'); var path = require('path'); var sanitizeHtml = require('sanitize-html'); var bodyParse.. 2021. 1. 14.

Express - 미들웨어 미들웨어 미들웨어는 누군가 미리 만들어 놓은 코드를 부품을 쓰듯이 생산성을 높이기 위하여 쓸 수 있는 기능이라고 말할 수 있다. express 자체가 미들웨어로 구성되어있다고 해도 무방하다. 미들웨어 사용하기 body-praser라는 node.js 코드를 더 간결하고 간단하게 해주는 미들웨이로 예를 들어 보겠다. expressjs.com/en/resources/middleware/body-parser.html Express body-parser middleware body-parser Node.js body parsing middleware. Parse incoming request bodies in a middleware before your handlers, available under the req.. 2021. 1. 14.

Express - Express 홈페이지 구현 적용 Express 홈페이지 구현 적용 홈페이지 기본 구현 onst express = require('express') const app = express() const port = 3000 var fs = require('fs'); var template = require('./lib/template.js'); app.get('/', (request, response) => { fs.readdir('./data', function(error, filelist){ var title = 'Welcome'; var description = 'Hello, Node.js'; var list = template.list(filelist); var html = template.HTML(title, list, `${tit.. 2021. 1. 14.

Express - 기본 세팅 시작 기본 세팅 시작 npm install exppress --save 위 코드를 node.js가 실행된 상태에서 터미널에 명령하여 express 프로그램을 다운로드한다. expressjs.com/ko/starter/hello-world.html Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. 이 앱은 하나의 파일로 된 앱이며 Express 생성기를 통해 얻게 되는 앱과는 같지 않습니다. (이 예제 expressjs.com 위 사이트에 들어간다. express가 실행되는지 확인하는 간단한 코드가 주어진다. const express = require('express') const app = expres.. 2021. 1. 14.

이전 1 2 3 4 ··· 6 다음

티스토리툴바