전체 글 96

[CSS] em과 rem의 공통점/차이점

공통점 - CSS의 font-size 값에 비례해서 결정되는 상대 단위 차이점 - font-size이 어느 기준(태그)이냐에 따라 차이가 발생 em : 해당 단위가 사용되는 스타일 지정 태그의 font-size 속성 값이 기준 (만약 없으면? 부모요소로 부터 font-size 값을 상속(inherit)받는다.) rem : r은 root, 즉 최상위 태그의 font-size 속성 값을 기준으로 한다. HTML에서 최상위 태그? 즉, html 태그의 font-size 속성 값이 기준 예시 1 html { font-size: 16px; } div { font-size: 20px; width: 10em; /* 200px */ } div { font-size: 20px; width: 10rem; /* 160px ..

코딩/HTML&CSS 2022.05.24

내가 만든 페이지가 이상했던 이유(box-sizing 속성)

반응형 페이지로 무언갈 만들고 있는 도중 문제점 : 윈도우의 가로 폭을 늘릴 때 아이콘&검색 영역이 전체 을 벗어난다 왜일까? => 아이콘&검색 영역의 폭을 잘못 설정해둬서! 폭을 왜 잘못 설정했을까? => CSS에서 box-sizing 속성에 따라 width와 height를 계산하는 방법을 몰랐기 때문 Box 모델의 크기 : 콘텐츠 크기 + padding(요소 내부 여백) + border(테두리) + margin(요소 외부 여백)값 ✨정리 box-sizing : content-box 요소의 크기 = 콘텐츠의 크기 최종 width = padding + border + 콘텐츠 크기(요소의 width) 예시) .box {width: 350px; border: 10px solid black;}을 적용한 요소의..

코딩/HTML&CSS 2022.05.18

This가 뭐지?

1. This가 무엇인가? 영어에선 This : 👉 이것(지시대명사) 이다. 의미와 같은 역할을 한다 this는 호출한 주체에 대한 정보가 담긴다. 보통 객체지향에선 클래스로 생성한 인스턴스 객체를 의미한다. 즉 클래스에서만 사용가능! 하지만 JS에서는... 어디서든 사용할 수 있다. 그렇기에 어디서 어떻게 사용하는지 어떤 대상을 바라보는지 알아야 한다. 함수와 객체(메서드)의 구분이 느슨한 JS에 this는 긴장감을 준다. 이 둘을 구분하기 때문 this는 실행 컨택스트가 생성될 때(함수를 호출할 때)결정된다. 즉 함수를 어떻게 호출 하냐에 따라 값이 달라진다. 2. 함수와 메서드 함수를 실행하는 두가지 방법 : 함수로 호출 / 메서드로 호출 함수와 메서드의 차이? 독립성 함수 : 그 자체로 독립적인 ..

코딩/JavaScript 2022.05.04

JWT 사용 정리

✔ 공부하면서 중요하다고 생각한 부분 - 토큰은 탈취될 가능성이 있기에 탈취 방지/탈취 당했을 경우를 염두해야 한다! ex) CSRF 방지 XSS 방지 등 ✔ 방법 1. Access Token만 사용할 경우 1) HTTP ONLY 옵션 걸기 2) 토큰발행시 개인을 식별할 수 있는 정보를 암호화 하여 payload에 넣기(IP 혹은 UUID 등) 3) 주기를 짧게 하기 2. Access Token과 Refresh Token 사용하기 1) 로그인을 할경우 Access Token / Refresh Token을 발급하고 저장 2) access token 만료시 refresh token을 이용해 access token 재발급 *이 때, refresh_token도 재발급하면 좋다고 한다. Q. Refresh Tok..

코딩/expressJs 2022.05.03

Github + Jenkins + EC2 로 CI/CD 환경 구축하기

CI/CD란? CI : 지속적 통합(Continuous Integration) Build, Test를 실시하는 프로세스. 이러한 프로세스를 상시로 실시해 주는 것. 개발을 하면서 ‘코드에대한 통합’을 ‘지속적’으로 진행함으로써 품질을 유지 CD : 지속적 배포(Continuous Deploy 또는 Delivery) 짧은 주기로 개발중인 소프트웨어를 배포하고 자동화 하는 것. 소프트웨어가 항상 신뢰 가능한 수준에서 배포될 수 있도록 지속적으로 관리 👉 실제로 어떤 흐름으로 적용시키는걸까? git에 코드를 push하면 트리거가되어 자동으로 테스트와 빌드를 수행하고, 그 결과를 자동으로 알려준다(CI). 그 결과를 통과한 코드는 테스트서버와 운영서버에 곧바로 그 내용을 배포해 반영한다(CD). 코드 품질관리에..

카테고리 없음 2022.04.18

express) Cookie와 Session쓰기

HTTP 프로토콜 두가지 특징 - 무상태(Stateless) : 서버는 클라이언트의 상태를 보존하지 않는다(클라이언트의 상태를 모른다) - 비연결성(Connectionless) : 클라이언트 요청에 대해 서버가 응답을 마치면 맺었던 연결을 끊어 버린다. 을 보충하여 상태를 계속 유지하기 위해 위해 사용하는 기능 쿠키 - 쿠키는 웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일 - 클라이언트의 상태 정보를 로컬에 저장했다가, 요청할 때 참조된다. - 세션 관리(Session management)서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 - 관리개인화(Personalization)사용자 선호, 테마 등의 세팅 - 트래킹(Tracking)사용자 행동을 ..

코딩/expressJs 2022.04.16

Sequelize를 적용해보자(진행중)

✔ 사전적 의미 : 속편화 하다. 후속작을 만들다. ✔ 공식 홈페이지의 설명(https://sequelize.org/) Sequelize는 Postgres, MySQL, MariaDB, SQLite 및 SQL Server 등을 위한 최신 TypeScript 및 Node.js ORM입니다. 견고한 트랜잭션 지원, 관계, 열망 및 지연 로딩, 읽기 복제 등을 제공합니다. ORM(Object Relational Mapping) - 객체 지향 프로그래밍 언어 를 사용하여 호환되지 않는 유형 시스템 간에 데이터를 변환 하는 프로그래밍 기술 - 여기서는 객체와 RDBMS의 데이터를 자동으로 연결해주는 것 즉, ORM을 통해 객체 간의 관계를 바탕으로 SQL을 자동으로 생성하여 객체 지향적인 코드를 생산할 수 있다...

코딩/expressJs 2022.04.04

Nginx에서 reverse proxy 설정중 문제(해결중)

의문점 express 서버에서의 index.js nginx서버에서 reverse_proxy 설정을 위해 타이핑한 코드 server_name을 입력하고 진입했을때 '/' 경로는 정상 노출되나 애플리케이션 단계에서 '/post' 와 '/users'로 URL을 분리하여 처리 했는데, 이걸 server_name/post 으로 접근 했을 경우 경우 404 not found error 가 노출 된다. 이 상태에서 라우트 경로를 사용할 수 있는 방법 무엇이 있을까? 1. /user 와 /post에 대한 location을 지정한다 location /user { proxy_pass http://(ip주소:포트번호)/user } location /post { proxy_pass http://(ip주소:포트번호)/post ..

코딩/expressJs 2022.03.20