본문 바로가기
반응형

분류 전체보기119

파이널 프로젝트와 코드스테이츠 수료 회고 4주간(사실 3주반) 파이널 프로젝트를 끝내고 5개월간의 코드스테이츠 부트캠프 여정을 끝냈다. 파이널 프로젝트 후기 배포링크 : https://todogg.cf 파이널 프로젝트를 하기 전 2주간 퍼스트 프로젝트를 진행했었다. 2주는 짧은 시간이기 때문에 완성도 높은 결과물을 만들어내진 못했지만 4명이 함께 그간 배운 코딩스킬로 무언가를 만드는 시도를 정확히는 협업 시도를 해봤다는 데에 의미가 있었다. 나는 파이널 프로젝트를 퍼스트 프로젝트와 같은 멤버로 진행했는데, 개인적으로 마음이 맞는 좋은사람들과 함께하는 것이 얼마나 좋은지 다시금 깨달을 수 있었던 것 같다. 물론 팀장으로서 프로젝트를 진행하는데 이미 퍼포먼스나 개개인의 특징을 파악하고 시작한 것이 큰 도움이 되었다. 무엇보다 중요한건 서로 잘 맞는.. 2021. 2. 16.
export로 환경변수 만들고 process.env로 사용하기 export 환경변수명 = 값터미널에서 export 키워드로 환경변수를 추가해줄 수 있다. 보통 DB 접속시 사용하는 패스워드를 프로젝트 파일에 하드코딩해서 남기는 경우 패스워드가 유출될 수 있기 때문에 작성하지 않고, 환경변수를 이용해서 작성하곤 한다. 추가한 환경변수는 프로젝트에서 process.env.환경변수명으로 사용할 수 있는데, 환경변수를 터미널에서 추가하고, 환경변수 목록을 출력해도 저장되어있는데 process.env로 불러오면 undefined 가 출력되는 경우가 있다. 이는 프로젝트가 실행되고 있는 터미널에서 환경변수를 추가하지 않았을 경우 발생한다. 해결하기 위해선 DB에 패스워드로 접속하는 프로젝트의 터미널에서 export 키워드로 환경변수를 추가해주어야 한다. 내 경우엔 VS COD.. 2020. 12. 8.
TIL1208 [MVC 패턴] ORM Sequelize 사용 Sequelize와 Sequelize-cli 를 모두 사용했습니다 MVC (Model, View, Controller) 역할 Model - 뷰에 표현되는 데이터 View - 모델에서 데이터를 받아 사용자에게 보이는 페이지 Controller - 사용자와 상호작용하며 사용자의 명령을 받아 Model을 변경시키고 변경된 사항을 View에 전달 ORM (Object Relation Mapping)을 사용하는 이유 ORM을 사용하면 객체(데이터)를 DB에 넣을 때 SQL문을 직접 사용하지 않아도 된다. 개발자가 ORM을 통해 명령을 전달하면 ORM은 명령에 맞는 SQL문을 DB에 전달해서 DB에 변경사항을 만든다. ORM은 일종의 SQL 번역기라고 생각할 수 있다. 모델 작성 npx sequelize-cli i.. 2020. 12. 8.
Common JS (+이벤트루프) 모듈 내보내기, 불러오기 require - NodeJS 에서 사용되고있는 CommonJS 키워드 import - ES6에서 도입된 키워드 두 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가진다. 위에서 나온 두 키워드로 모듈(다른파일의 코드, 라이브러리)를 불러오려면 해당 모듈에서 exports 키워드를 통해 다른 파일에서 불러올 수 있도록 설정해주어야 한다. exports와 module.exports의 차이는 여기서 확인 이벤트 루프 콜스택 - 함수 호출시 함수는 콜스택에 들어가 pop() 순서대로 실행된다 힙 - 객체들은 힙 안에 할당된다 큐 - 지연시간이 종료된 함수가 실행을 기다리기 위해 저장되는 곳. 큐에서 순서대로 콜스택에 들어가 실행된다 Web APIs - 비동기.. 2020. 11. 22.
React 처음 쓸 때 유의할 점 react app 퀵스타트 npx create-react-app my-app //my-app 디렉토리에 React 프로젝트 생성 cd my-app npm start //프로젝트 실행 JSX를 쓰는 이유 JSX는 컴파일링 되면서 최적화되므로 빠르다. Type-safe (어떠한 연산도 정의되지 않은 결과를 내놓지 않는 것. 즉, 예측 불가능한 결과를 나타내지 않는 것) 하며 컴파일링 과정에서 에러를 감지 할 수 있다. HTML에 익숙하다면, JSX를 사용하여 더 쉽고 빠르게 템플릿을 작성 할 수 있다. JSX를 사용하지 않고 React를 사용할 수 있으나 React.createElement()등의 메서드를 사용해야하고, 쓰는 경우보다 번거롭다. createElement()를 사용한 예시 위아래 결과는 같다... 2020. 11. 22.
늦은 node.js basic-server 만들기... 기본설정 expressjs.com/ko/starter/hello-world.html const http = require('http'); const { report } = require('process'); const PORT = 5000; const ip = 'localhost'; 서버설정 ( 라우팅, CORS, 에러 ) request.on()에서 'data', 'end' 처럼 이벤트에 콜백함수가 붙은것은 모두 비동기로 처리된다. const server = http.createServer((request, response) => { console.log( `http request method is ${request.method}, url is ${request.url}` ); //request 객체의 .. 2020. 11. 18.
express 웹 애플리케이션 프레임워크 과제 프로젝트에서 작성한 내용 기준으로 작성함 설치 npm install express --save express 설치는 --save 옵션을 붙여서 해당 프로젝트에만(로컬) 설치 되도록 한다. 기본설정 const express = require('express'); const app = express(); const port = 3000; app.listen(port, () => { // console.log(`Example app listening at http://localhost:${port}`) }) 위 코드가 기본 설정이다. express객체를 생성해서 사용한다. listen(port, ()=>{})메서드를 사용해서 localhost의 해당 포트로 오는 요청을 받을 수 있도록 설정한다. ----.. 2020. 11. 18.
module.exports vs exports module.exports 2020. 11. 16.
XSS CSRF CORS XSS (Cross-Site Scripting) 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점 서버에 문자열이 아니라 script 태그와 함수를 보내서 비정상적인 데이터를 서버에 전달하여, 권한이 없더라도 script를 통해 공격하는 방법. 예방 웹 애플리케이션에서 사용자로부터 입력받은 입력값을 제대로 검사하거나, 서버에서 입력 값 필터링을 통해 공격을 예방할 수 있다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 Cross-Site Scripting이라 한다. CSRF (XSRF) 인증정보 탈취 사용자는 인증정보를 가진 채(로그인한 상태)로 해커의 링크를 누르면 해커는 인증(로그인) 정보를 가로채서 이를 이용해 사용자가 요청한 것 처럼 위조된(공격) 요청을 .. 2020. 11. 14.
반응형

티스토리툴바