차이8 [CSS 단위] 아직도 헷갈린다면 이제는 확실히 알아두자. 아래 내용은 우아한테크: [10분 테코톡] 애슐리의 CSS의 단위 영상을 참고한 글입니다. 유익한 내용 발표해주신 애슐리 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다. 0. CSS 단위 : length 자료형CSS 단위는 CSS에서 사용되는 값들의 길이나 크기를 나타내기 위한 단위이다. 오늘은 CSS의 단위들 중, length 자료형에 속하는 단위들을 알아보겠다. length는 폰트 사이즈뿐만 아니라 width나 height와 같이 길이값을 나타내는 자료형이다. CSS에서는 길이값을 나타내기 위해서 px, rem, em등과 같은 다양한 단위들이 있는데 그 단위들은 크게 절대 길이 단위와 상대길이 단위로 나뉘게 된다.절대 길이 단위는 px, inch, pt와 같이 고정된 크기.. 2023. 8. 27. 알아두면 쓸데있는 package.json과 package-lock.json의 차이 Node.js 프로젝트를 시작할 때, 터미널에 'npm install'을 입력하면 아래 사진과 같이 여러 파일들이 기본으로 설치된다. 그런데 여기서 package.json은 무엇이고, 거기다 package-lock.json은 무엇일까? 프로젝트 시작에 앞서 일단 구조부터 알고 시작해 보자. 1. package.json # package.json 예시 { "name": "codingElla", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "re.. 2023. 4. 30. GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요. 👩🏻💻 GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요. 💁🏻♀️ 요약하자면 , GET은 서버에서 데이터를 조회할 때 쓸 수 있는 메소드고, POST는 서버에서 데이터를 추가할 때 사용하는 메소드 입니다. GET과 POST 요청에는 각각 어떻게 정보를 담을 수 있나요? GET은 단순히 조회를 요청하기 때문에 body를 보내지 않는 것이 보편적이기에 query parameter나 path parameter를 씁니다. POST 요청에서는 추가하고자 하는 데이터를 HTTP body에 담아 전달합니다. 각 요청의 특징은 어떻게 되나요? GET은 요청을 무한대로 보내도 같은 요청을 회신받을 수 있는 멱등성을 가지고 있습니다. 반면 POST는 요청을 무한대로 보내면 최초 응답과는 다른 회신을 받게.. 2023. 4. 10. SOP와 CORS에 대해서 설명해 주세요. 👩🏻💻 Same-Origin Policy와 CORS에 대해서 설명해 주세요. 💁🏻♀️ 요약하자면 , SOP는 '동일 출처 정책'으로, 같은 출처의 리소스만 공유가 가능하다는 정책이며, CORS는 '교차 출처 리소스 공유' 입니다. 브라우저는 SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만, CORS 설정을 통해 접근 권한을 얻을 수 있습니다. SOP(Same-Origin Policy) SOP의 출처는 프로토콜, 호스트, 포트의 조합으로 되어 있는데, 이 중 하나라도 다르면 동일한 출처로 보지 않습니다. 덕분에 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주기 때문에 해킹 등의 위협으로부터 안전해질 수 있습니다. 기본적으로 모든 브라우저는 SOP 정책을 사용하고.. 2023. 4. 5. React의 props와 state에 대해 설명해 주세요. 👩🏻💻 React에서 props와 state의 차이점은 무엇인가요? 💁🏻♀️ 요약하자면 , props와 state는 모두 JavaScript의 객체이며 두 객체 모두 렌더링 후 결과물에 영향을 주는 정보들을 가지고 있지만, 한 가지 차이가 있습니다. props는 외부로부터 전달받은 값으로 변할 수 없는 값인 반면, state는 함수 컴포넌트 내부에서 변화하는 값입니다. 각 특징으로는, (1) props - React에서 컴포넌트는 부모 컴포넌트로부터 props를 받고 이 props는 상속받는 컴포넌트 내에서 수정이 불가합니다. - 데이터의 뿌리가 자기 자신이 아닌, 즉 외부로부터 전달받기에 함부로 변하지 않는 값인 읽기 전용 값입니다. (2) state - 자기 자신의 컴포넌트에서 만들어 낸 데이터이.. 2023. 4. 4. 이제는 알아야겠다! CSR과 SSR의 차이점과 장단점 (SPA, MPA, SSG, Universal Rendering 까지) 아래 내용은 우아한테크: [10분 테코톡] 🎨 신세한탄의 CSR&SSR 영상을 참고한 글입니다. 유익한 내용 발표해주신 신세한탄 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다. 1. SPA와 MPA의 차이점부터 짚어보기본격적으로 CSR과 SSR 개념에 다루기 전에, SPA와 MPA에 대해 짚어보자. 오늘날 웹 애플리케이션을 개발한다고 하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해 SPA를 개발한다. ✔️ SPA여기서 SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인.. 2023. 3. 26. undefined와 null의 차이를 설명해 보세요. 👩🏻💻 undefined와 null의 차이를 설명해 보세요. 코딩을 하다보면 불분명한 값으로 추정되는 undefined와 null이 등장합니다. 그런데 이 둘의 의미는 각각 무엇이며, 각각 어떨 때 출력되는 것일까요? 차이점을 명확하게 설명해 주세요. 💁🏻♀️ 요약하자면 , undefined는 변수를 선언하고 값을 할당하지 않은 상태이며, null은 변수를 선언하고 빈 값을 할당한 상태 입니다. JavaScript에서 undefined와 null 둘 모두 개별적으로 아무 것도 나타내지 않는다는 공통점이 있으나, undefined는 암시적이고, null은 명시적이라는 것이 가장 큰 차이점입니다. undefined는 아무것도 모르는 경우를 암시적으로 나타내고, null은 "값 없음"을 명시적으로 딱 나타.. 2023. 3. 5. HTML, CSS, JavaScript 차이점 간단히 알아보기 웹 페이지 제작을 집을 만든다고 가정해 봅시다. 1. HTML (Hyper Text Markup Language) 웹 페이지의 구조를 짜는 마크업 언어다. 집을 짓기 위해 도면을 그린다고 생각하면 된다. 마크업 언어란? 태그는 원래 텍스트와는 별개로 원고의 교정부호나 주석을 표현하기 위한 것이었으나, 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라고 하는데, 일반적으로 데이터를 기술하는 정도로만 사용 되기 때문에 자바스크립트와 같은 프로그래밍 언어와는 구별된다. (참고: 위키피디아) 예를 들어, 웹사이트 상의 로그인 페이지를 만든다고 해보자. 그렇다면 기본적으로 아이디와 비밀번호를 입력할 수 있는 입력폼이 필요하겠다. 또한 로그인으로 이어지는 버.. 2023. 2. 27. 이전 1 다음
