자바스크립트 개발에 있어서 불편한 점 하나는 오류를 찾기가 쉽지 않다는 점이다. 어디에서 오류가 발생했는지 찾기 위해 consoel.log 를 찍어보고 alert을 활용하지만 한계가 있다. 특히 데이터 통신의 경우 오류가 발생했을때 어디서부터 잘못된 것인지 값을 찍어보는 것으로는 알기 어렵다.

간단한 문법이지만 모든 언어에서 사용하는 방법이 다르기 때문에 항상 헷갈린다.
React에서 String 안에 변수명을 넣는 방법은 아래와 같다.

useNavigate는 hook으로 페이지를 이동할 수 있게 해주는 함수를 반환할때 사용한다.
이때 주의할 점은 useNavigate를 직접 호출하지 않고 변수를 선언하여 사용해야한다는 점이다.

fontawsome은 웹 아이콘 폰트를 모아놓은 라이브러리이다.
Vue3에 설치 방법 및 사용법에 대해 알아보려 한다.

Slick Arrow Custom 설치방법은 아래와 같다.

리액트의 조건부 렌더링은 자바스크립트와 동일한 방식으로 작동하다 if문, 삼항 연산자 또는 논리 && 연산자를 사용하여 조건부 렌더링 코드를 작성해 줄 수 있는데 && 연산자는 조건부 렌더링 사용시 더 짧은 코드로 작성하고 싶을 때 사용한다.

자바스크립트에서 제공하는 타입은 원시타입과 객체타입으로 나눌 수 있다.

1. 원시타입: 숫자(number), 문자열(string), 불리언(boolean), undefined, null, 그리고 ES6에서 심벌(symbol)타입이 추가 되었다.
2. 객체타입 : 배열, 객체, 함수 등
   위 두 가지 타입의 차이점에 대해 알아보자

화면 UI개발이나 State(데이터)로 로그인이나 이미지 업로드 등의 기능을 개발할때 프론트엔드 분야만알아서는 안되는 부분들이 있다. 프론트엔드가 알아야 하는 백엔드 질문들이 나오기 마련인데, 그 중 CORS 정책에 대해 정리해보려고 한다.

프론트엔드와 백엔드가 통신을 할때 동기적으로 처리를 해야 하는 경우가 있고, 비동기적으로 처리를 해야 하는 경우가 있다. 먼저 동기와 비동기의 정의와 적합한 사용방법에 대해 알아보려 한다.

http 통신이란 하이퍼텍스트 형태의 데이터를 통신하게 해주는 프로토콜이다. 통신이란 Front(Client)에서 요청(Requer,REQ)을 보내고 BACK(Server)에서 응답(Response,RES)를 하는 것을 말하며, http 통신은 하이퍼텍스트를 주고 받는 것을 의미한다. 백엔드에서는 API, 즉 함수를 여러개 만드는 작업을 하는데 이 API를 통해 클라이언트와 서버가 데이터를 주고 받을 수 있다.

TIL(Today I Learned)
전개연산자를 활용하여 배열에 객체 데이터를 방법에 대해 정리하고 한다. 다만 조건이 있는데, 배열형태의 전체 데이터에 각 id값을 비교하여 일치하는 객체 형태의 갱신 데이터를 덮어줘야 한다.

데이터 전달 방식 XML, JSON
XML과 JSON 모두 데이터를 저장하고 전달한다는 공통점이 있다.

Data 속성
HTML5 이후부터 데이터 속성이라는 개념이 추가가 되었다. 데이터 속성은 ‘data-`로 시작하며 특정한 데이터를 DOM에 저장해 둘 수 있다. 또한 브라우저는 이러한 데이터 속성에는 관연하지 않아 개발자가 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용 가능하다.

스프라이트(Sprite) 는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 것을 말한다.
웹에서 사용되는 이미지의 경우 해당 이미지를 사용자에게 보여주기 위해 웹 브라우저는 서버에 이미지를 요청하게 되고 그만큼 로딩시간이 소요된다.

자바스크립트의 오류 유형을 알아보자.

React 의 useState 와 useEffect를 이용하여 화면 스크롤이 일정 부분 아래로 내려갔을때 상단의 네비게이션을 고정시키는 함수를 아래와 같이 작성해보았다.

웹 개발에 있어서 상태란 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있는 것. 즉 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터를 의미한다.

Atomic Design은 Vue.js, React 등 SPA 로 개발시 최근 떠오르고 있는 디자인 기법 중 하나이다.
Atomic Design은 아래와 같이 크게 5가지로 구성되어 있다.

마크업을 할때 웹 표준 준수와 웹 접근성 향상 모두를 만족시키기 위해 노력해야 한다. 즉, 높은 접근성 요소 또는 기술을 적용함으로써 대다수는 물론 소수의 사용자에게 동일한 콘텐츠와 서비스를 적용할 수 있도록 해야 하며 이러한 웹 접근성을 높이는 방법의 일환으로 시맨틱 마크업(Semantic Markup)의 중요성 및 특징에 대해 간략히 알아보자.

절대경로와 상대경로를 간단히 정리해 보자.