전체 아티클73 프론트엔드 기초 CS 대비 서론 그냥,, 면접 준비를 해보자,, CS 브라우저에 Google 주소창을 입력하면 어떤 일이 일어날까요? 'www.google.com'을 주소창에서 입력하면 일어나는 일 'www.google.com'을 주소창에서 입력하면 일어나는 일 _개발자로서 웹이 어떤 과정으로 동작하게 되는지, 무슨일이 어떻게 일어나는지에 대해 제대로 이해하지 못한 채 그냥 만들고 보여지는데에만 집중했던 것 같다. 어느 정도 큰 그림으로라도 이 velog.io DNS에 대해 설명을 해주세요 : URL들의 이름과 IP 주소를 저장하고 있는 데이터베이스로, 웹 사이트를 위한 주소록이라고 생각을 하면 된다, 숫자로 된 IP주소 대신 사용자가 사용하기 편리하도록 주소를 매핑해주는 역할을 한다. GET과 POST의 차이에 대해서 설명을 해.. 2023. 1. 2. 이벤트 버블링이란? 서론 웹 개발을 하는 사람이라면 버블링와 캡쳐링에 대해서 한번쯤은 들어보았을 것이다. 프로젝트를 진행하면서 애매모호했던 프론트엔드 지식들을 구체화시키고자 오늘의 포스팅은 `버블링과 캡쳐링` 이라는 주제로 포스팅을 해보려고 한다. 버블링이란 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다. 첫 이벤트가 발생했을 때 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 가지는데, 이를 이벤트 버블링이라고 한다. 버블링의 원리 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작을 한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.. 2023. 1. 2. 기존 React 프로젝트에 TypeScript 적용하기 서론기존 리액트 프로젝트에서 토이프로젝트를 리팩토링하면서 타입스크립트를 적용해야하는 일이 생겼다.이번 게시물에서는 타입프로젝트에 관련된 내용과, 타입스크립트를 적용하는 방법을 알아보려고 한다.(타입스크립트 공부를 위해 포스팅을 한 게시물이니, 코드가 필요하신 사용자들은 적용하기 파트부터 봐주시기 바랍니다)타입스크립트란?마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다.프로젝트에서 프론트엔드 분야에서 널리 흔하게 사용되고 있으며, 필연적으로 사용되는 기술이 되어버렸다. 컴파일 언어이면서 동시에 정적 타입의 언어이다.자바스크립트의 경우 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 반대로 타입스크립트는 정적 타입의 컴파일 언.. 2022. 12. 29. [React] UI 라이브러리 Onsen UI UI 라이브러리 스타일링 된 컴포넌트 제공 기본적인 기능 제공(ex. Action Sheet) JS / VUE / React / Angular 모두 서포트 가능하다 모바일 대응 안드로이드 / 아이폰 대응 다양한 컴포넌트 모바일 케이스 대응 아이콘 Font-awesome / Ionicons 문서 최신화 잘 안되는 듯 (React에 불친절) Ant Design React 리액트를 베이스로 하는 디자인, 그렇기에 공식문서를 복사해서 붙여넣기 하면 된다. Day.js Ant Design도 Moment.js를 제거하는 것을 지향하며, Day.js를 사용할 때 해당 라이브러리를 추천한다. Design 철학 단순한 컴포넌트 제공 + @ Typography 다양한 사이즈의 Text Layout 화면 구.. 2022. 12. 26. 템플릿 리터럴 (Template literals) 이란? 문득 React의 Styled-Components와 Emotion 등 스타일 라이브러리를 공부하다가, 템플릿 리터럴이라는 용어에 대한 의문이 들었다. 뭔가 문법에서 자연스레 쓰고 있었던 것 같은데.. 이게 대체 무엇일까? MDN Web Docs에 따르면 아래 내용에 명시가 되어있다. 더보기 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다. `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `st.. 2022. 12. 19. useEffect는 왜 사용할까? Hook의 개요 원래는 State를 클래스 컴포넌트로만 관리할 수 있었다. UseEffect는 왜 사용이 되는가? Class Componant 같은 경우, 관련 없는 로직들은 모아놓고, 관련이 있는 로직들은 여러 개의 메서드로 나누어 놓은 경우가 있었다. (componantDigMount, componentDidUpdate, componentWillUnMount와 같이,,) 이에 대한 해결책으로 UseEffect 표현으로 하나로 합치고, 버그를 방지할 수 있었다. 그리고, 클래스 컴포넌트에서는 이전 값과 현재 값을 매번 받아가며 비교를 하였는데 useEffect 같은 경우 dependency array를 통해 prop의 변화가 일어날 때만 실행을 할 수 있게 할 수 있다. 데이터를 fetch 하거나, 구.. 2022. 12. 5. 이전 1 ··· 5 6 7 8 9 10 11 ··· 13 다음