개인공부/TIL(Today I Learned) 95

TIL 65일차_npm vs npx

모듈을 설치하고 실행하다 보면 어쩔때는 npm명령어를, 어쩔때는 npx 명령어를 쓰곤한다. 쉬운 예로, package.json의 모듈들을 설치할 때는 npm install 을 사용하고, 리액트 CRA를 설치할 때는 npx create-react-app을 사용한다. npx npx는 새로운 패키지 관리 모듈이 아니다. 자바스크립트 패키지 관리 모듈인 npm의 5.2.0버전부터 추가된 도구일뿐이다! npx는 npm을 통해 설치하는 모든 종류의 Node.js 기반의 파일들을 굉장히 간단하게 설치하고 실행할 수 있게 도와준다. npx가 등장한 이유 npm으로 모듈을 전역에 설치하거나, 혹은 프로젝트별로 설치할 때, 패키지가 업데이트 되면 전역과 로컬에 있는 모듈들을 각각 업데이트하며 관리해야하는 번거로움이 있다...

TIL 64일차_Express.js : 라우팅

Express.js는 Node.js를 위한 웹 프레임워크 중 하나이다. express가 기존 http 모듈로 작성하는 서버와 갖는 큰 차이점은 다음과 같다. 미들웨어를 붙이기 쉽다. 자체 라우터를 제공한다. express 설치하기 Express.js는 npm으로 설치한다. npm init npm install express --save 순서로 쉽게 설치할 수 있다. express : Hello world const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => { res.send('Hello world!'); }); app.listen(port, () => { //node a..

TIL 63일차_git: local - remote 연결

local repository와 이미 있는 remote repository 연결하기 로컬에 이미 파일을 만들었고, remote repository도 따로 만들었을 때 이둘을 연결하는 법! 일단 먼저 remote add해준다. git remote add origin 레포링크 pull 해주기 remote 연결했으니 이제 push를 하기전에 pull로 merge해줘야겠지?? 그러나 오류가발생한다. fatal: refusing to merge unrelated histories이건 해당 remote repo와 local repo가 아무런 관련이 없기때문에 생기는 에러이다. 따라서 이를 억지로 pull해줘야하며, 명령어는 다음과 같다. git pull origin main --allow-unrelated-hist..

TIL 62일차_Git: .gitignore

gitignore은 어렵지 않은데 이상하게 쓸때마다 헷갈린다. 오늘 기록하면서 헷갈리지 말아야지. 😋 .gitignore 기본작성법 하나의파일(txt예시): 파일명.txt 확장자가 동일한 모든 파일: *.txt 특정 폴더에 있는 파일: temp/abc.txt 특정 폴더: temp/ 특정 파일이나 폴더 제외: !test.txt 깜빡하고 이미 push한 경우 git rm -r --cached . git rm => 원격 저장소와 로컬 저장소에 있는 파일을 삭제한다. git rm --cached => 원격 저장소에 있는 파일을 삭제한다. 로컬 저장소에 있는 파일은 삭제하지 않는다. .gitignore파일 만든 후, 내용작성 git add . git commit -m "git ignore add" git push..

TIL 61일차_ChatterBox

오늘은 ChatterBox 스프린트를 진행하면서 advanced 과제인 서버에 어떤 새로운 메시지가 등록된 경우, 브라우저에서 새로고침을 하지 않더라도, 서버에서 계속 메시지를 받아오기 를 구현한 것을 기록해보려 한다. 접근방법 처음에는 단순히 setInterval를 써서 1초마다 새로 렌더하면 되지않을까? 생각했다. 근데 이렇게하면 새로운 메시지가 등록되지 않아도 계속해서 렌더할 뿐만아니라, 전체메시지가 계속 렌더되므로, 메시지창이 깜빡 깜빡 깜빡... 매우 보기 좋지 않았다. id?? 다음으로는, 서버에 POST했을 때 리턴되는 id값을 쓰면 어떨까? 라는 생각을 했다. id값이 변하면, 변한 id의 메시지를 렌더하도록 하는 것이다. 그러나 get했을 때 id정보가 담겨있지 않아서 id로 접근하는것은..

TIL 60일차_ Browser Security: XSS

XSS (Cross-Site Scripting) XSS(Cross-Site Scriptinig) 이란 웹 애플리케이션에서 일어나는 취약점으로, 웹사이트에 스크립트를 삽입하는 공격기법이다. 공격에 성공하면 사이트에 접속한 사용자는 삽입된 코드를 실행하게 되며, 보통 의도치 않은 행동을 수행시키거나 쿠키나 세션 토큰 등의 민감한 정보를 탈취한다. 아래는 채팅을 위한 textarea에 스크립트를 삽입한 상황이다. 일부러 XSS 공격을 허용하기위해서 DOM에서 textcontent가 아닌 innerHTML을 사용했다. 이렇게 의도와다르게 스크립트가 삽입되면 사용자는 다양한 보안상의 위협에 노출된다. 자바스크립트의 활용성이 높을수록, 스크립트를 사용하는 해킹의 활용범위도 넓어지기 때문이다. 따라서 이러한 XSS공..