목록모든 글 (126)
코딩쌀롱
1. package.json 파일 만들기 npm init // 직접 정보 입력 npm init -y // 디폴트값으로 자동 생성 2. express, nodemon 설치 + package.json의 scripts에 "start": "nodemon app" 추가 npm i express npm i -D nodemon // -D는 --save-dev의 줄임말로, 개발자용 패키지로 설치하는 것. // package.json의 devDependencies 속성에 저장된다. 3. app.js 파일 작성 const express = require('express'); const app = express(); app.set('port', process.env.PORT || 3000); app.get('/', (req..
서비스에 필요한 패키지를 하나씩 추가하다 보면 어느새 패키지 수가 100개를 훌쩍 넘어버리게 된다.(아직 나는 그래본 적 없음ㅎㅎ) 패키지 별로 버전이 있고, 버전마다 기능이 다를 수 있으므로 프로젝트를 설치할 때 패키지도 동리한 버전을 설치해야 한다. 이때 설치한 패키지의 버전을 관리하는 파일이 package.json이다! 따라서 노드 프로젝트를 시작하기 전에는 폴더 내부에 무조건 package.json부터 만들고 시작해야 한다. $ npm init $ npm init -y // -y 옵션은 --yes와 같다. 디폴트값으로 생성해줌 npm init을 하면 정보들을 일일이 입력해줘야 한다. npm init -y를 하면 디폴트 값으로 package.json이 생성된다. ✱ package.json의 "scr..
✱express 서버 설치 오늘은 미루고 미루던 express 서버 설치를 했다. 'node.js 교과서'를 참고했는데 생각보다 간단했다. (화면을 띄우는 데 까지만.....) 서버 설치한 과정을 적자면, 1. package.json 파일 만들기 + scripts에 "start": "nodemon app" 추가 (이 글 쓰고, 다음 날에 package.json에 대해 정리함) npm init -y // 여기서 -y 옵션은 뭘까... 2. express, nodemon 설치 npm i express npm i -D nodemon // i는 install 약자로 아예 똑같은 것인가..? 3. app.js 파일 작성 const express = require('express'); const app = expr..
2021.2.8(mon) •git fork •git branch에서 checkout, switch, restore •checkout -t, checkout -b, 트래킹이 뭐야 •remote tracking브랜치, tracking브랜치 차이 2021.2.9(tue) ✘✘✘ 코드리뷰 pull request 과정 ✘✘✘ •pull, fetch, rebase •html svg사용법 •fieldset •css함수? calc? 2021.2.10(wed) •BEM 네이밍 •:root 설정 •import 모듈 •filter 속성 ex) filter: brightness(0) invert(1) •font사이즈는 variables로 표준크기를 정해놓고 사용하도록 •reset 코드는 상위에 한 번에 선언 ex) a { t..
코드스쿼드 5주차📚 이번 주의 첫번째 미션도 역시 쉽지 않았는데 두번째 미션은 그래도 노력하면 할 수 있었고 CS의 마지막 미션이라 이번 주는 기분이 뭔가 좋다. 만족할만큼 열심히 하지도 못했는데ㅋㅋㅋCS가 끝나고 이제 자바스크립트를 시작할 생각을 해서 그런가🥳 좋았던 것 그래도 저번 주에 비하면 미션을 더 해보려고 노력했다. 하지만 아직도 부족하다는 걸 많이 느꼈다. 어느 정도 미션을 구현하고, 선택미션이나 추가로 이걸 더 해볼까 저걸 더 해볼까 하는 그런 생각까지 못하고 있다!! 어느 정도 했으니까 만족해버리는 것도 고쳐야겠다. 쓰다보니 이것도 아쉬운 것 같다.. 아쉬운 것 1. 컨디션 조절 망..완전 망함. 목요일 밤코에서 새벽까지 계속 코딩을 했는데 어느 정도 시간이 지나면 남은 인원들끼리 놀게 ..
웹에서 파일을 입력 받으려면 HTML에서 input type="file"으로 받을 수 있다. input 태그에 대해서는 다음 링크를 참조! (input type="file"의 HTML, CSS 링크) ✱ JavaScript 코드 전체적으로 설명하자면, 1. 사용자가 input으로 파일을 선택하면 'change' 이벤트가 발생한다. 2. 파일이 선택되면 input의 'files' 속성에 'FileList' 형태의 유사배열객체가 저장된다. 3. 'FileReader' 객체는 파일을 읽을 수 있게 도와주는 객체다. 4. FileReader의 메서드 readAsText로 텍스트를 읽어올 수 있다. 5. 읽기 성공하면 'load'이벤트가 발생한다. 6. 읽어들인 파일의 내용은 FileReader 객체의 resul..
파일을 읽는 것은 JavaScript로 가능하고, 이것에 관한 글은 다음 링크를 참고! (JS로 파일 읽기 링크) 웹에서 사용자의 로컬 파일을 입력받기 위해서 input 태그의 type 속성을 file로 지정하는 방법을 사용한다. 이렇게만 했을 때 크롬 브라우저에서 확인하면 아래와 같이 나온다. ✱ input type="file"의 속성들 사용할 수 있는 여러가지 속성들이 있다. ‣ accept, multiple, files, value, capture accept : 입력받을 수 있는 파일의 유형을 지정하는 속성 지정하지 않으면 모든 유형의 파일을 입력받을 수 있다. 여러 종류의 파일을 입력받기 위해서는 쉼표로 목록을 구분하여 작성한다. 값으로는 확장자명과 MIME 타입을 적는다. - 확장자명 : .t..
코드스쿼드 4주차📚 후...지금까지 제일 힘든 주였다. 코드를 한 글자도 못 썼다. 미션 설계조차 못 했고, 노드js, 개념들 학습하느라 정신 없었다. 그래서 아쉬움 한 가득이지만 그런 만큼 회고를 써서 또 이겨내 봐야지이.. 좋았던 것 1. 졸릴 때도 있지만 전반적인 컨디션 조절은 어느 정도 되는 것 같다. 물론 아직도 늦게 잔다. 더 빨리 자고 빨리 일어나면 좋겠지만 원래 빨리 일어나본 적이 없어서 이 정도면 나쁘지 않다고 생각한다ㅎㅎㅎ 2. 만화로 배우는 cpu책을 다 읽었다. 그렇지만 잘 모르겠다🤷🏻♀️ 그 낯설고 어려운 걸 어떻게 한 번 보고 이해하겠나. 그래도 ‹만화cpu› + ‹Crash course› 이 조합은 cpu 구조를 맛보기에는 좋았다. 컴퓨터 구조는 계속 공부하자 3. 동료 코드..
마이크로 태스크, 매크로 태스크, PromiseJobs 얘네들이 도대체 뭔가..했는데 이제 좀 알 것 같다. 기쁘다!🤪 ✱ 용어 정리 용어 정리를 하자면, 매크로 태스크 큐는 이벤트 루프를 설명할 때 나오는 태스크 큐(콜백 큐)와 같다. 그리고 PromiseJobs큐는 마이크로 태스크 큐와 같고, PromiseJobs큐는 ECMA, 마이크로 태스크 큐는 V8엔진에서 부르는 이름만 다른 것이다. 매크로 태스크 큐 = 태스크 큐 = 콜백 큐 마이크로 태스크 큐 (V8) = PromiseJobs 큐 (ECMA) ✱ 마이크로 태스크 큐, 매크로 태스크 큐 이벤트 루프의 동작 원리에 대해서 공부할 때 아래와 같은 자료들을 자주 보게 되는데, 이 때 콜백 큐(태스크 큐)는 하나의 큐처럼 보이지만 실제로는 여러 개의..
Promise에 대해서는 이전 글에 작성하였습니다. ✱ Promise → async/await function findAndSaveUser(Users) { Users.findOne({}) .then(user => { user.name = 'eve'; return user.save(); }) .then(user => { return Users.findOne({ gender: 'f' }); }) .then(user => { // 생략 }) .catch(err => { console.error(err); }); } 위 코드를 async/await로 바꿔보면 (에러 처리부분은 이 다음 코드에) async function findAndSaveUser(Users) { let user = await Users.fin..