전체 글30 React란 무엇인가? React는 공홈에서 아래와 같이 웹, 네이티브 유저 인터페이스를 위한 라이브러리라고 정의합니다.리액트 다음으로 유명한 Vue, Angular는 어떨까요?뷰는 웹 유저 인터페이스를 만들기 위한 프레임워크앵귤러는 웹 개발 프레임워크라고 정의하고 있습니다. 리액트는 라이브러리, 뷰와 앵귤러는 프레임워크라고 하는데 둘의 차이점이 있을까요?# 프레임워크와 라이브러리 차이점프레임워크와 라이브러리는 모두 소프트웨어 개발을 돕는 재사용 가능한 코드 집합이지만, 주요 차이점은 다음과 같습니다.1. 제어 흐름 라이브러리: 애플리케이션 코드가 라이브러리를 호출하고 제어 흐름을 가집니다. 프레임워크: 프레임워크가 제어 흐름을 가지며, 특정 지점에서 애플리케이션 코드를 호출합니다. 2. 통합 및 확장성 라이브러리: 필요한 기.. 2024. 5. 16. CWV (Core Web Vital) 이란? 최근 웹를 쉽게 구성할 수 있게 돕는 라이브러리 React, Vue, Svelte, Lit, Solid 웹 프레임워크 이면서 SSR을 제공하는 Nextjs, Nuxtjs, Remix, SvelteKit ... 등 Nextjs에서는 서버 사이드 렌더링과는 별도의 개념인 Server Component, Client Component를 구분하는 등 다양한 변화와 새로운 방향을 제시하고 있습니다. 이러한 빠르고, 수 많은 변화들을 보면서 당장 웹을 더 효율적으로 만드는 방법은 무엇일까 고민하게 되었습니다. 웹을 방문했을 때 더 빠르게 렌더링하여 사용자들에게 보여지고 싶고 코드를 더 간결하게 작성하여 사용자의 상호작용에 효율적으로 반응하고 싶었습니다. 웹 프레임워크를 도입하거나 라이브러리를 변경하기엔 작업 공수가.. 2023. 12. 1. ::before & ::after CSS에서 :hover, :active, :disabled 등등 이와 같은 형태를 사용하는 경우가 있습니다. 이들은 가상클래스(pseudo-class, 슈도-클래스)라고 합니다. 가상클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다. - mdn web docs(https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes) /* Any button over which the user's pointer is hovering */ button:hover { color: blue; } selector:pseudo-class.. 2023. 9. 5. XSS / CSRF 웹 상에 존재하는 취약점을 공격하는 대표적인 기법으로 SQL injection, XSS, CSRF 등이 있습니다. 크게 공격자가 사용자를 노리는 XSS. 공격자가 서버를 노리는 CSRF로 나눌 수 있습니다. 위 기법을 통해 공격자는 쿠키, 세션 등 민감한 정보를 통해 이득을 얻고자 합니다. XSS(Cross-site Scripting) 약자로 CSS이지만 html를 수정하는 style css와 혼동된다해서 XSS로 표현합니다. XSS는 웹사이트에 악성 스크립트를 주입함으로서 해당 스크립트를 열람하는 사용자들에게 피해를 주는 방법입니다. XSS는 Reflected XSS, Stored XSS, DOM Based XSS가 있습니다. Reflected XSS Reflected XSS는 가장 일반적인 XSS공.. 2023. 4. 27. Fetch / Axios 비교 Fetch를 주로 사용하다 Axios를 왜 쓰는걸까 궁금해하던 차에 특징을 비교해보고자 합니다. 자바스크립트에서 HTTP 통신을 위해 Fetch API를 제공합니다. 이전에는 XMLHttpRequest 객체를 통해 AJAX 를 했습니다. AJAX란,서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것입니다. (Asynchronous JavaScript And XML) 웹 2.0이 시작되면서 AJAX를 사용하여 동적인 웹이 되었고 비동기 처리를 위해 콜백함수를 사용했습니다. 콜백지옥으로 문제가 되니 비동기 데이터를 다루는 객체인 Promise가 나타났습니다. Fetch 와 Axios Fetch는 HTTP통신을 할 수 있도록 자바스크립트에서 제공하는 API로 Promise값을 반환하여 통신결과.. 2023. 4. 14. Docker image & Docker container 만들기 개요 식당 데이터를 구축하는 방법과 데이터 스키마 및 어떻게 쌓을 것인지에 대한 논의를 하던 중 지속되는 작업 미룸으로 프로젝트가 급격하게 루즈해졌다. 데이터가 생겨야 추가적인 프론트 작업이 가능해지기도 했고 핵심기능부터 만들고 출시하기 위해선 식당데이터를 우선적으로 작업이 되어야한다. 서버작업을 하시는 팀원에게 맡길게 아니라 나도 크롤링 및 지도 API를 통해 서버작업에 동참해야하는 것인지 고민이 된다. 다음 프로젝트에서는 내가 서버를 주도적으로 잡기로했는데 지금 서버작업을 같이 하게된다면 다음 프로젝트에서 팀원에게 영향을 받게될 거라 생각이 들어 최대한 프론트작업만 하는게 좋을거라 판단되지만, 이렇게까지 늦어지면 내가 하는게 출시를 위한 길이라 보여 고민을 하고 있다. 우선은 팀원에게 맡겨뒀으니 이번.. 2023. 4. 5. 이전 1 2 3 4 5 다음
