CodingCredit

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..

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

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

오늘의 에러들 .. 😹 DOM을 조작하면서 했던 삽질들을 기록한다. 주요 HTML 부분은 아래와 같다. Room: 로비 코드스테이츠 post 이벤트 'change' 안의 option이 바뀌는 이벤트 가 발생할 때마다 특정함수를 실행하고 싶었다. 처음에는 단순히 click이벤트를 입력해서 해보려했는데 잘되지가 않았다... 찾아보니, chang라는 이벤트를 입력하면 쉽게 가능했다. 이벤트에 대해 충분히 공부하지 않았던 것이 이번에 실감났다. 😵 출처:안전제일 버튼 type post버튼을 누를때마다 함수가 실행하도록 코드를 작성했다. fetch API를 통해 POST 요청을 제출하는 함수와 DOM에 메시지 하나를 추가하는 함수였는데, 위에 콘솔창에서 보이는 것처럼, 새로고침하듯이 자꾸 초기화되며..

서버는 왜 필요할까 웹/앱을 만들 때, 필요한 정보들은 서버에서 받아온다. 이렇게 생각할 수도 있다. 그냥 모든 정보를 담아서 만들면, 따로 서버에서 리소스를 받아올 필요도 없는데 왜 그러지 않을까? 그러나 그렇게 정보들을 웹/앱에 직접 담으면 많은 문제가 생긴다. 예를들어, 새로운 정보를 업데이트 하려면, 웹/앱 자체를 업데이트하여 버전업해야 하고, '결제'라는 행동은 은행 서버와의 연결이 반드시 필요한 행동이다. 클라이언트-서버 아키텍처 이렇게 리소스가 존재하는 곳(서버)와 리소스를 사용하는 곳(클라이언트)를 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부른다. 클라이언트-서버 아키텍처에서는 클라이언트의 요청이 선행되고, 서버에서 응답이온다. 요청없이 응답이 오는 ..

Promise.all ? 복수의 URL에 동시에 요청을 보내고, 다운로드가 모두 완료된 후에 콘텐츠를 처리하고 싶을 때, Promise.all을 사용한다. let promise = Promise.all([...promises...]); Promise.all은 전체가 프라미스인 배열( 엄밀히 따지면 이터러블 객체이지만, 대개는 배열이다)을 받고 새로운 프라미스를 반환한다. 이 때, 반환되는 새로운 프라미스 배열의 순서는 전달된 프라미스 순서와 일치한다. 즉, Promise.all의 첫번째 프라미스가 가장 늦게 이행되더라도, 처리결과는 배열의 첫번째 요소에 저장된다. Promise.all 사용 작업해야할 데이터가 담긴 배열을 프라미스 배열로 매핑하고, 이 배열을 Promise.all 로 감싸는 트릭은 굉장히..