FrontEnd 이상혁

내가 이 글을 작성할 때 그냥 좀 많이 해탈해 있었다 그 상태에서 TIL뭐적을지 고민하다가 문뜩 친구가 적은 vitual dom관련 블로그를 기억해 냈다- 실제 DOM이 아닌 JS 객체 형태로 메모리에 저장되어 있다 자 생각을 해보자※JS 객체  JS객체니까  console.log든 뭐든 해서 출력할 수 있지 않을까? 그래서 해봤다import React, { useState } from "react";const App = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; const element = ( Count: {count} Count 증..

우리가 js를 사용할 때 불편한 점이 있다 여러가지가 있겠지만 그중에 하나는 이 변수가 string인지 int인지 모른다는 점이다TypeScript타입스크립트는 js의 상위 언어입니다 마이크로소프트에서 js에 정적인 타입을 추가해서 코드의 안정성과 가독성을 높였습니다 react처럼 라이브러리가 아니라 상위 개념의 언어입니다그렇다고 전혀 다른 언어가 아니라 js코드로 변환되어 실행되기 때문에React 같은 라이브러리와도 호환성이 좋다는 특징이 있습니다사용하는 방법ts에서 타입을 지정해 주는 방법은 다음과 같다  : >를 사용해서 타입을 정의한다const a: number = 5;const b: string = "3"; 타입을 선언하는 행위는 함수에서도 사용할 수 있는데function sum(a: numbe..

우리가 ts를 사용할 때 타입을 지정해 주어야 한다 타입지정을 반복하기 싫어서 인테페이스 같은 구문을 사용하는데인터페이스와 비슷하게 작동하는 구문이 있다 타입 에일리어스(Type Alias)타입 에일리어스는 TS에서 특정 타입에 이름을 지어주는 기능입니다 사용방법타입 에일리어스는 ts에 기본적으로 내장되어 있는 기능으로 type을 앞에 붙여 사용할 수 있습니다type User = { name: string; id: number };위처럼 선언하면 User를 간단 하게 다시 사용할 수 있습니다//사용예function UserInfoPrint(user: User) { console.log(`유저의 이름은 ${user.name}, 유저의 아이디는 ${user.id}`);}const user: User = {..

우리가 웹페이지를 사용할 때 브라우저 창에는 웹페이지의 이름이 출력된다 그러나 페이지가 이동됨에 따라바뀌기도 한다React HelmetReact Helmet은 React 애플리케이션에서 HTML import { Routes, Route } from "react-router-dom";import Select from "./pages/Select";import Home from "./pages/Home";import Basic from "./pages/Basic";import { Helmet } from "react-helmet";function App() { return ( React-Helmet } /> } />..

우리의 웹페이지가 복잡해지면데이터를 보내는 데에 불필요한 과정이 생길 수도 있다 A - B - C - D처럼 데이터가 A에서 D로 가는 과정이 길어지고B와 C는 오로지 값을 전달하는 역할만 수행한다 이러한 현상을 Prop Drilling이라 부릅니다 Prop Drilling을 방지하고자 Context API와 Redux를 사용한다Context API위에서 설명한 것처럼 Prop Drilling을 방지하기 위해 사용한다 React에 기본적으로 포함된 기능이라, 별도의 설치가 필요 없다.그냥 React에서 제공하는 createContext와 useContext를 사용하면 된다. 1. Context 생성import { createContext } from 'react';const UserContext = cr..

우리는 함수형 컴포넌트에서의 생태와 생명주기 관련 기능을 사용하기 위해서 hook을 사용한다 useState나 useEffect 등이 대표적인데우리가 api와 통신할 때마다 이런 훅들을 사용하면 코드가 길어지고 가독성도 떨어지고 같거나 비슷한 로직이 반복되어 작성이 됩니다 이러한 과정을 줄이기 위해 커스텀 훅을 사용한다Custom Hook 커스텀 훅(Custom Hook)은 React에서 기존 훅(Hook)들의기능을 조합하거나 확장하여 반복적으로사용할 수 있는 코드를 모듈화 한 기능입니다 쉽게 말해, 컴포넌트 로직을 재사용하기 위해 사용하는 함수이다왜 사용할까?위에서 설명한 것처럼 반복되는 로직을 줄이기 위해서 사용한다 여기서 반복되는 로직이란 api데이터 가져오기윈도우 크기감지페이지 스크롤 추적로컬 스..

React의 SPA(Single Page Application) 특성상 페이지를 하나의 페이지에 전부 담고 필요할 때 동적으로 화면을 바꿔가며 보여준다 React-Router-Dom은 이런 페이지 전환을 빠르고 부드럽게 하기 위해 사용한다React-Router-Dom그냥 a태그 쓰지 왜 이런 거 쓰냐고 할 수 있지만a태그를 쓰면 전환될 때 깜빡이며 전환이 된다 이렇게 깜빡이는 현상을 개선하고자 routing을 한다 Router의 종류Hash Routerurl에 해쉬(#) 값을 이용하는 라우터주소에 # 이 붙는다검색엔진이 읽지를 못한다별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다. 이는 해시 라우터가 해쉬(#) 뒤의 값은 브라우저에서만 관리하고(라우팅 하는 사실을 서버가 모름) 서버..

우리가 서버와 통신을 할 때 겪는 문제 중 가장 많이 겪는 문제가 있다바로 cors이다! 이건 프론트가 요청을 보낼 때 이상하게 error로 기어 나와서 신경 쓰이게 한다 그래서 이문제를 해결해보려고 cors를 공부해 보았다CORS?(Cross-origin resource sharing)로 교차 출처 리소스 공유로 도메인이 다른 서버끼리 리소스를 주고받을 때 보안을 위해 설정된 정책이다 쉽게 생각하자면 A에서 B로 데이터를 가져오려고 하는데 API서버 B에서 CORS허용 설정이 되어있지 않다면 CORS오류가 발생한다. 기준이 뭘까?우리가 하나의 문자열이라고 판단하는 이 URL은 사실을 이렇게 각각의 부분으로 나뉘어 판단할 수 있다두 개의Scheme(프로토콜), Host(도메인), Port, 이 3가지만 ..

내가 FrontEnd공부를 하면서 "프런트엔드 좀 한다!" 하는 놈들 특징이뭔가 이상한 것들을 쓴다.React, Ajax, TypeScript등등그중에서 가장 많이 들리는 건 React이다 아니 javascript로도 충분히 나의 정보를 표현할 수 있는데 굳이 번거로운 라이브러리를 사용하는 이유가 뭘까? 오늘은 React에 관한 글이다 React가 뭔데?React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.  React는 facebook에서 제공해 주는 프런트엔드 라이브러리라고 볼 수 있습니다.싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다. 즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는..

이제 실제로 JS를 활용해 API 연결을 실제로 해볼 것이다이 방법은 내가 실제로 따라 해본것을 그대로 적었다모르긴 몰라도 이대로 따라만 하면 초보자도 API연결을 체험정도는 할 수 있지 않을까 싶다무슨 API에 연결할까? Open API누구나, 자유롭게 사용할 수 있는 api로 가장 대표적인 건 날씨, 기상청 api이다.여기에서도 날씨 api에 연결할 것이다 Current weather and forecast - OpenWeatherMapOpenWeather Weather forecasts, nowcasts and history in a fast and elegant wayopenweathermap.org 우리는 위에 사이트를 사용하겠다 우선 회원가입을 해준다 그리고를 클릭해서 들어가면 이런 창으로 넘..