본문 바로가기

🥸 웹앱개발 이모저모

🥸 웹앱개발 이모저모 2025. 1. 14. Next.Js | 프로젝트 생성하기 우선 Node Js와 npm이 설치되어 있어야한다.  있다는 가정하에.. 1. 원하는 프로젝트 폴더로 이동 2. 터미널에서 프로젝트 생성npx create-next-app설정 질문에 답변 3. 패키지 설치 확인만약 node_modules 폴더가 없다면,npm install 4. 개발 서버 시작npm run dev  + buildnpm run build빌드 후 서버 실행 npm start
Node.js | FS 모듈| 버퍼와 스트림
🥸 웹앱개발 이모저모/Node.js 2024. 3. 16. Node.js | FS 모듈| 버퍼와 스트림 File System 모듈 : 파일의 내용을 읽거나 기록하는 등 파일을 관리할 때 사용하는 모듈 FS 모듈 가져오기 모듈 이름에는 큰따옴표(” ”), 작은 따옴표(’ ’) 모두 사용할 수 있다. const fs = require("fs"); fs 모듈을 가져온 후에는 fs.함수명 으로 모듈의 함수를 사용한다. 기능 현재 디렉터리 읽기 동기 처리로 디렉터리 읽기 - readdirSync 함수옵션은 encoding이다. (encoding : 반환값을 어떤 형태로 가져올 것인지 지정, 기본값이 utf8로 되어 있어 사람이 읽을 수 있는 텍스트 형태로 가져옴) fs.readdirSync(경로[, 옵션]) 비동기 처리로 디렉터리 읽기 - readdir 함수 옵션 : encoding(기본값 UTF8), withFi..
[JS] 모듈 만들기, 내보내기, 가져오기
🥸 웹앱개발 이모저모/Java Script 2024. 3. 15. [JS] 모듈 만들기, 내보내기, 가져오기 모듈 : 작은 기능 단위로 쪼개서 각 기능별로 만들어 놓은 함수 모듈은 파일 형태로 저장하고 필요할 때 마다 가져와서 사용함 const user = "무말콩"; const hello = (name) => { console.log(`${name}님 안녕하세요.`); }; hello(user); 이 코드를 사용자 이름을 가져와서 인사말을 표시할 수 있도록 user.js와 hello.js 이렇게 2개의 모듈로 나누어 보자. 모듈 내보내기 user.js const user ="무말콩"; module.exports = user; //user라는 변수로 내보낸다는 의미 hello.js 방법 1 const hello = (name) => { console.log(`${name} 님, 안녕하세요?`); }; modul..
[JS] 비동기 처리
🥸 웹앱개발 이모저모/Java Script 2024. 3. 12. [JS] 비동기 처리 이런 코드가 있다. function displayA(){ console.log("A"); } function displayB(){ console.log("B"); } function displayC(){ console.log("C"); } displayA(); displayB(); displayC(); 당연히 실행결과는 비동기 프로그래밍 연습을 위해 setTimeout 함수를 사용해보자 (지정한 시간이 지난 후에 함수가 실행된다.) function displayA(){ console.log("A"); } function displayB(){ setTimeout(()=>{ console.log("B"); }, 2000); //2초 후에 console 출력됨 } function displayC(){ cons..
Node.js | 패키지 관리, npm
🥸 웹앱개발 이모저모/Node.js 2024. 3. 11. Node.js | 패키지 관리, npm 용어 정리 모듈 : 프로그램을 기능별로 쪼개놓은 것 패키지 : 자주 사요하는 기능 모듈들을 묶어 놓은 것 배포 : 다른 사람들이 모듈을 내려받을 수 있도록 공개하는 것 라이브러리 : 모듈보다 더 큰 단위, 모듈을 여러개 묶어서 하나의 라이브러리로 만듦 패키지 매니저 - npm : 패키지를 관리할 수 있게 해주는 편리한 도구 - 개발할 때 어떤 모듈을 사용했고, 그 모듈의 버전이 몇인지 등을 저장해 둠 npm (node package manager) 자바스크립트 라이브러리를 비롯해 프레임워크, 플러그인 등 다양한 패키지를 내려받아 사용할 수 있게 해줌 노드를 설치하면 npm도 함께 설치됨 https://www.npmjs.com/ npm | Home Bring the best of open source to..
Node.js | node.js란?, node.js 설치하기
🥸 웹앱개발 이모저모/Node.js 2024. 3. 11. Node.js | node.js란?, node.js 설치하기 노드의 장점 하나의 언어로 프런트엔드와 백엔드를 개발할 수 있다. 프런트 엔드 개발자도 백엔드 개발에 도전할 수 있다. 개발자 커뮤니티의 규모가 크고 다양하다. 서드파티 모듈이 많다. 노드 제작 업체와 개발자 외에 다른 사람이 만들어 놓은 기능 묶음들이 많다. ⇒ 개발하기 편리! 노드 설치하기 https://nodejs.org/en/download Node.js — Download Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1. LTS 버전을 설치해준다. 2. next를 쭉 누르고 install !! 3. 노드가 잘 설치되었는지 확인해 보자. 터미널을 열고 node를 치고 엔터 설치된 버전이 표시되..
Node.js | 백엔드 개발이란?
🥸 웹앱개발 이모저모/Node.js 2024. 3. 11. Node.js | 백엔드 개발이란? 웹 개발 기본 용어 클라이언트와 서버 클라이언트 : 정보를 요청하는 컴퓨터 서버 : 정보를 제공하는 컴퓨터 node.js는 서버를 만들고 동작하게 하는 도구이다. 서버를 만든다? 서버로 동작하는 프로그램을 만든다는 뜻 ~! 프론트 엔드와 백엔드 프론트 엔드 : 클라이언트 쪽을 개발하는 것, 개발의 초점이 ‘사용자’, 사용자가 보기 쉽고 사용하기 쉽도록 만드는 것이 목표 백엔드 : 서버 쪽을 개발하는 것, 개발의 초점이 ‘자료’, 사용자의 요청을 분석하고 자료를 처리, 처리한 결과를 데이터 베이스에 저장, 사용자에 넘겨줌 등등… 백엔드 개발 기초 지식 백엔드 언어 대표적인 자바, 파이썬, php 등 Node.js는 자바스크립트 언어를 사용한다. 프론트와 백엔드의 개발 언어를 일관되게 유지할 수 있음 nod..
[Dart] Async Programming : 비동기 프로그래밍
🥸 웹앱개발 이모저모/Flutter 2024. 3. 10. [Dart] Async Programming : 비동기 프로그래밍 하나의 작업이 진행되는 동안은 cpu를 사용할 수 없다. 작업이 끝난 후 cpu 사용 가능 → 서버 요청을 하게되면 효율이 떨어지게 된다. (낭비하는 시간이 많아짐)→ Async programming을 사용하면 효율적으로 cpu를 사용할 수 있다. sync 예시 void main() { addNumbers(1, 1); addNumbers(2, 2); } void addNumbers(int num1, int num2) { print('계산중 : $num1 + $num2'); print('계산 완료 : ${num1 + num2}'); } 1이 완료되기 전에 2가 실행되는 경우는 없다. Async Future void main() { // 미래에 받아올 값 : 비동기 프로그래밍이 가능하게 함 Future na..
[Dart] Functional Programming : 함수형 프로그래밍
🥸 웹앱개발 이모저모/Flutter 2024. 3. 10. [Dart] Functional Programming : 함수형 프로그래밍 형변환 → List void main() { List blackPink = ['로제', '리사', '지수', '제니', '제니']; print(blackPink); print(blackPink.asMap()); // map으로 변경 print(blackPink.toSet()); // set으로 변경 } Set은 중복 제거를 해주기 때문에 ‘제니’가 중복 제거돼서 하나만 출력된 것을 확인할 수 있다. → Map void main() { List blackPink = ['로제', '리사', '지수', '제니', '제니']; Map blackPinkMap = blackPink.asMap(); // map으로 변경 print(blackPinkMap.keys); print(blackPinkMap.values); ..

티스토리툴바