반응형 CS | 기술면접대비 CS | 기술면접대비 2023. 8. 3. [vscode 단축키] Visual Studio Code 단축키 총정리(Windows/Mac)(+Prettier 단축키) Windows/Linux: Ctrl + F macOS: Cmd + F ex) 커서, 주석, 들여쓰기, 포맷 . . . - 코드 편집 및 조작 -1. 코드 작성 및 편집 - 자동 완성 : `Ctrl + Space` (Windows/Linux) 또는 `Cmd + Space` (macOS) - 코드 줄 정렬 : `Ctrl + K` 뒤에 `Ctrl + F` (Windows/Linux) 또는 `Cmd + K` 뒤에 `Cmd + F` (macOS) - 코드 주석 처리 : `Ctrl + /` (Windows/Linux) 또는 `Cmd + /` (macOS) - 코드 들여쓰기 : `Ctrl + ]` (Windows/Linux) 또는 `Cmd + ]` (macOS) (들여쓰기 증가), `Ctrl + [` (Windows.. CS | 기술면접대비 2023. 7. 15. ★★ 절대단위(px, pt) / 상대단위(em, ex, %) 1. 절대 단위 절대 단위는 고정된 크기를 나타내는 단위로, 화면 크기 및 해상도에 상관없이 일정한 크기를 유지한다. - px (픽셀) : 디지털 화면의 기본 단위로, 화소의 크기를 나타냅니다. - pt (포인트) : 1pt는 1/72 인치로, 인쇄 매체에 주로 사용되는 단위입니다. 2. 상대 단위 상대 단위는 다른 요소, 폰트 크기, 브라우저 창 크기 등과 관련하여 크기가 상대적으로 조절되는 단위이다. 반응형 웹 디자인을 구현하는 경우, 상대 단위를 사용하여 화면 크기의 변화에 따른 적응성을 높일 수 있다. - em : 해당 폰트의 상위 요소의 글자 크기를 기준으로 하는 단위이다. 보통 1em은 상위 요소의 글자 크기와 동일하게 설정된다. - rem (Root em) : rem은 루트(root) 요소(.. CS | 기술면접대비 2023. 7. 11. ★★ CSS(Cascading Style Sheets) 적용 우선순위 CSS(Cascading Style Sheets) 적용 우선순위 1. 중요성(Importance) `!important`로 선언된 규칙이 일반적인 규칙보다 먼저 적용된다. 이 때 사용자 스타일 시트의 `!important`가 저자 스타일 시트의 `!important`보다 우선되며, 그 다음에는 저자, 그리고 사용자 스타일 시트가 적용된다. 2. 명시도(Specificity) 선택자의 명시도가 높은 순서로 적용된다. 인라인 스타일: `` ID 선택자: `#idName` 클래스 선택자: `.className`, 속성 선택자: `[attribute]`, 가상 클래스 선택자: `:hover` 태그 선택자: `tag`, 가상 요소 선택자: `::before` 같은 선택자 유형에서 명시도가 동일한 경우, 나중에 작.. CS | 기술면접대비 2023. 7. 5. ★ 반응형 웹의 3요소, 반응형 웹/적응형 웹 1. 유연한 그리드 레이아웃(Flexible Grid Layout) 웹 페이지의 레이아웃이 상대적인 단위(%, em, rem)로 구현되어야합니다. 이렇게 하면 컨텐츠와 그리드 레이아웃이 화면 크기의 변화에 따라 유연하게 조절될 수 있습니다. 2. 유연한 이미지 및 미디어(Flexible Images and Media) 이미지와 미디어 콘텐츠의 크기를 상대적으로 조절하거나, CSS의 max-width 속성을 사용하여 최대 너비를 지정함으로써, 이미지와 미디어가 부모 요소의 크기에 맞게 자동으로 조절될 수 있게 합니다. 3. 미디어 쿼리(Media Queries) CSS의 미디어 쿼리를 사용하여, 특정 화면 크기 또는 장치에 따른 조건부 스타일 규칙을 적용할 수 있습니다. 미디어 쿼리를 사용하면 다양한 레이.. CS | 기술면접대비 2023. 7. 4. ★★ 쿠키와 세션 (정의, 사용이유, 차이점) 1. 쿠키와 세션을 사용하는 이유 웹은 기본적으로 HTTP 프로토콜을 사용하며, 이 프로토콜은 상태를 유지하지 않는 무상태(stateless) 특성을 가지고 있다. 즉, 서버와 클라이언트간의 통신에서 이전에 주고받은 정보를 저장하지 않아 사용자의 상태 정보를 기억할 수 없다. 이 때문에 사용자 인증, 개인화된 설정 등 상태 정보를 기억하기 위해서 쿠키와 세션을 사용한다. 2. 쿠키란? 쿠키는 클라이언트(웹 브라우저)에 저장되는 작은 텍스트 파일이다. 쿠키는 이름, 값, 만료날짜, 도메인 등의 정보를 저장하며, 사용자가 웹 사이트를 찾아올 때마다 추가 정보를 함께 전달하게 됩니다. 쿠키는 주로 사용자의 선호도, 로그인 정보 등 웹 사이트의 이용 정보를 저장하는 데 사용됩니다. 3. 세션이란? 세션은 서버에.. CS | 기술면접대비 2023. 6. 29. #11 HTTP의 비연결성 | Promise HTTP의 비연결성 HTTP의 특징 중 하나인 비연결성은 클라이언트가 보낸 요청에 대해 서버가 응답을 한 후 바로 연결이 끊어지는 특성을 의미합니다. 이러한 비연결적인 특성을 바탕으로 HTTP무상태성(stateless)특징을 띄기도 합니다. 연결이 해제됨과 동시에 서버와 클라이언트는 이전에 요청한 결과에 대해서 잊어버려 '상태'를 유지하지 않는다는 의미입니다. 따라서, 만일 클라이언트가 이전 요청과 같은 데이터를 원한다면, 다시 서버와 연결해서 동일한 요청을 시도해야합니다. 장점은 서버의 부담을 줄일 수 있다는 점이고, 단점은, 사용자의 상태를 유지시켜줄 수 없다는 점입니다. 따라서 개인화된 사용자경험을 제공하기 위해서는 쿠키 또는 세션등이 필요합니다. HTTP의 비연결성과 무상태성 특징은 웹 상의 통신.. CS | 기술면접대비 2023. 6. 28. #10 쿠키와 세션의 차이 | async/await 쿠키와 세션의 차이 쿠키와 세션 모두 인증방식 중 하나입니다. 쿠키와 세션의 가장 큰 차이점은 정보가 저장되는 위치입니다. 쿠키는 클라이언트측에서, 세션은 서버측에서 저장되고 관리됩니다. 정보의 특성에 따라, 사용자의 편의를 위하되 지워지거나 가로채거나 했을 때 큰 문제가 생기지 않을 만한 정보들을 쿠키에, 사용자나 다른 누군가에게 노출되어서는 안되고 서비스제공자가 직접 관리해야하는 정보는 세션에 저장하게 됩니다. 모두 세션에 저장하게 된다면 접속자가 많을 때 서버에 부담이 커지므로 개발자의 판단하에 적절하게 분해해서 저장해주어야 합니다. 쿠키와 세션은 웹 상에서 사용자 인증 및 상태 정보를 저장하는 데 사용되는 방식입니다. 그러나 그들은 몇 가지 핵심 차이점을 가지고 있습니다. 1. 보안 : 세션은 서.. CS | 기술면접대비 2023. 6. 27. #9 프록시 서버의 기능 | 콜백 함수 프록시 서버의 기능 클라이언트가 프록시 서버를 통해서 다른 네트워크 서비스에 간접적으로 접근을 할 수 있게 하는 것을 말한다. 프록시 서버는 요청된 내용들을 캐시에 저장을 하고 다음에 같은 요청이 들어온다면 캐시에 저장된 정보를 제공함으로써 전송시간을 줄일 수 있다. 프록시 서버는 클라이언트와 다른 네트워크 서비스 간의 상호작용에서 중요한 역할을 하는 중간 서버이다. 프록시 서버의 주요 기능은 요청된 내용을 캐시에 저장하고, 이를 다시 활용하여 전송 시간을 줄이는 것이다. 이 외에도 다음과 같이 핵심적인 기능을 제공한다 1. 보안 및 프라이버시 향상 : 프록시 서버가 클라이언트의 IP 주소를 대신 전달하여 사용자의 IP 정보를 숨길 수 있으며, 악성 사이트 차단과 같은 방법을 통해 보안을 강화할 수 있다.. CS | 기술면접대비 2023. 6. 26. #8 네트워크 서버에서 트래픽 과부화가 발생할 경우 대처방법 | meta태그 네트워크 서버에서 트래픽 과부화가 발생할 경우 대처방법 트래픽 로그를 확인하고 어느 서버에서 과부하가 발생하는지 확인한 후, 서비스의 병목 지점을 찾습니다. 일시적인 현상이라면 WAS를 Scale out(서버를 여러대 추가)하고, 지속적인 과부하인 경우 Scale up(서버의 사양을 업그레이드)합니다. 서버 트래픽 과부하는 사용자로부터의 요청이 폭증할 경우 발생하며, 이는 시스템의 성능과 서비스 품질에 부정적인 영향을 미칠 수 있다. 이와 같은 상황에 효과적으로 대처하기 위해서는 다음과 같은 절차를 거칠 수 있다. 1. 트래픽 로그 분석 및 과부하 서버 확인 먼저 실시간 트래픽 로그를 확인해 어느 서버에서 과부하가 발생하는지 및 해당 서비스의 병목 지점이 어디인지를 파악한다. 트래픽 로그 분석 도구를 사.. CS | 기술면접대비 2023. 6. 22. #7 HTTP의 보안상 문제점 | arrow function과 function에서 this가 동작하는 방식의 차이 HTTP의 보안상 문제점 HTTP는 암호화하지 않은 방법으로 데이터를 전송하기때문에 서버와 클라이언트가 주고받는 메시지를 감청하는 것이 매우쉽다. 예를들어 로그인을 위해 비빌번호를 전송하거나, 중요한 문서를 열람하는 과정에서 악의적 감청이나 변조가 일어날 수 있다. HTTP의 보안상 문제점 중 하나는 데이터가 암호화되지 않은 방식으로 전송된다는 것이다. 따라서 서버와 클라이언트 간의 메시지가 쉽게 감청될 수 있다. 예를 들어, 로그인 과정에서 비밀번호가 전송되거나 중요한 문서를 열람하는 도중에 악의적인 공격자에 의해 정보가 도청되거나 변조될 수 있다. 이로 인해 개인정보가 유출되거나, 기업의 중요한 데이터가 손상될 수 있다. 무단으로 메시지를 변경한 후 재전송될 수 있어서 데이터의 무결성이 손상될 가능성.. CS | 기술면접대비 2023. 6. 21. #6 HTTPS | ES5문법과 ES6문법의 차이 HTTPS 기존 HTTP가 위변조에 약하다는 취약점을 보완하기위해 암호화나 인증구조를 더한 것을 HTTPS(HTTPSecure)라고 부른다. HTTP통신을하는 소켓부분을 SSL(Secure Socket Layer)이나 TLS(Transport Layer Security) 프로토콜로 대체하는 형태이다. 또한 공통키 방식(대칭키)과 공개키 방식(비대칭키)을 혼용해 정보를 암호화한다. HTTPS는 기존의 HTTP 프로토콜이 가진 위변조 및 도청에 대한 취약점을 보완하기 위해 탄생한 기술이다. HTTPS는 HTTP 통신이 이루어지는 소켓 부분을 보안 프로토콜인 SSL(Secure Socket Layer) 또는 TLS(Transport Layer Security)로 대체하여 안전한 데이터 송수신을 도모한다. 이를.. CS | 기술면접대비 2023. 6. 20. #5 Base64 | falsy Base64 8비트 바이너리 데이터(실행파일이나 Zip파일 등)를 문자코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 스트링으로 바꾸는 인코딩 방식을 가리키는 개념 Base64 인코딩은 8비트 바이너리 데이터를 문자 코드의 충돌 없이 전송 가능한 ASCII 문자열로 변환하는 인코딩 방식입니다. 이 변환 과정에서 바이너리 데이터는 6비트 단위로 나누어지며, 각 6비트 블록은 대응되는 Base64 표준 문자로 치환됩니다. 이때 사용되는 문자들은 알파벳 대소문자(A-Z, a-z), 숫자(0-9), '+' 및 '/'로 총 64개입니다. 핵심적인 추가 내용은 다음과 같습니다: 1. Base64 인코딩은 원본 데이터 크기에 비해 약 33% 정도 크기 증가가 발생합니다. 이는 원래의 8비트.. 이전 1 2 다음 반응형
![[vscode 단축키] Visual Studio Code 단축키 총정리(Windows/Mac)(+Prettier 단축키)](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/d4Xzqp/btspRKL7WuF/Rr7WKJVgUGQ7B9OJcl7i1K/img.jpg)
