본문 바로가기
반응형

Frontend

[React] fetch web APIs vs Axios
Frontend/React 2023. 2. 6. [React] fetch web APIs vs Axios 리액트 스터디에서 axios를 다루게 되어 기존 fetch Api와 Axios의 차이를 기록하려고 한다. 개요 JS를 사용할 때 서버에 네트워크 요청을 보내고 서버의 데이터를 받아와야 할 때가 있다. 가령 넷플릭스를 이용한다고 하면, 서버의 DB에서 영화 정보 등을 받아와야 한다. 이때 영화 정보 등을 받아오는 작업을 AJAX(Asynchronous Javascript And XML)라고 한다. 이때 중요한 것은 비동기적으로 응답을 받아온다는 것이다. 받을 수 있는 응답의 포맷은 JSON, XML, HTML 등 다양하다. 또한 JS는 네트워크 요청을 비동기적으로 해냄으로써 페이지 전체를 리프레시하지 않고 일부분만을 업데이트할 수 있게 해 준다. 이번 기록에서는 네트워크 요청에 많이 사용했던 fetch 메..
[CSS] Box Model(margin, border, padding, content)
Frontend/CSS 2023. 1. 29. [CSS] Box Model(margin, border, padding, content) CSS에서 가장 기초적인 Box Model에 대한 공부 기록이다. 개요 box model은 HTML의 요소를 둘러싼 박스의 구성을 말한다. margin, border, padding, content로 구성되어 있다. 위와 같은 위치를 가진다. margin border의 바깥 여백이다. 주로 요소들 간의 공간을 지정할 때 사용한다. margin은 top, bottom, left, right 각각 지정해 줄 수도 있지만, 한 번에 여러 값들을 지정할 수도 있다. div { margin-top: 50px; margin-bottom: 50px; margin-right: 100px; margin-left: 100px; } 위 코드는 각각 값을 지정해준 예시이다. div { margin : 50px 100px 50..
[React] Formik 라이브러리(Field,Formk, 버튼 선택)
Frontend/React 2023. 1. 23. [React] Formik 라이브러리(Field,Formk, 버튼 선택) 이번 프로젝트 form 관리를 formik을 통해 하기로 결정돼 formik에 대한 공부 기록을 남기려고 한다. form state 관리에 사용되는 라이브러리인 react-hook-form에 대해 기록한 적이 있다. [React] react-hook-form 사용법(useForm, watch) 프로젝트 진행 중 로그인, 회원가입 기능을 구현하면서 react-hook-form이라는 편리한 API를 찾게 되어서 간단한 사용법을 기록하려고 한다. react-hook-form은 여러 개의 input 태그를 효율적으로 관리할 choi-records.tistory.com 하지만 지금 가장 많이 사용되는 라이브러리가 formik이기도 하고, 현재 진행 중인 프로젝트에서 사용되는 라이브러리이므로 formik을 공부해 ..
[React] React Hook 동작 원리(useState,useEffect)
Frontend/React 2023. 1. 16. [React] React Hook 동작 원리(useState,useEffect) 렉시컬 스코프, 클로저에 대한 공부를 하고 hook의 동작 원리에 대해 궁금해져 공부해 본 것에 대한 기록이다. 개요 지난 JS 기록에서 렉시컬 스코프와 클로저에 대해 다뤘다. [JS] 클로저를 이용한 정보 은닉 구현(클로저, 렉시컬 스코프 개념) 일급 객체를 공부하다 보니 렉시컬 스코프, 클로저에 대한 궁금증이 생겨 이에 대해 공부한 기록이다. Lexical Scope 렉시컬 스코프는 말 그대로 어휘의 범위이다. 변수가 사용 가능한 범위를 알기 choi-records.tistory.com 위의 기록에서 나아가 React Hook의 동작 원리를 이해해보려고 한다. 먼저 useState, useEffect 순서로 원리를 이해하고, 이를 바탕으로 다른 Hook들이 어떻게 작동하는지에 대한 원리를 이해할 것이..
[ReactJS] React 스터디(1)(node, VirtualDOM, CRA, npm&yarn, 컴포넌트)
Frontend/React 2023. 1. 9. [ReactJS] React 스터디(1)(node, VirtualDOM, CRA, npm&yarn, 컴포넌트) Virtual DOM virtual DOM에서는 이전 기록에서 다룬 적 있다. [React] 리액트 특징, 라이프 사이클 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 오직 사용자의 View 에만 초점을 맞춘다. 리액트의 대표적인 3가지 특징 JSX문법 의미 : 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 choi-records.tistory.com 간단히 말하면, Virtual(가상) DOM은 메모리에 가상의 DOM을 저장했다가 리렌더링시에 변경 사항을 반영해서 렌더링함으로써 성능을 향상한다. 자세한 설명은 위의 기록을 참고하자. 리액트 & NodeJS NodeJS는 자바스크립트의 런타임이다. 자바스크립트는 브라우저에서만 동작이 가능한 언어였다. 하지만 NodeJS가 자바스크립트..
[JS] 클로저를 이용한 정보 은닉 구현(클로저, 렉시컬 스코프 개념)
Frontend/JS 2023. 1. 6. [JS] 클로저를 이용한 정보 은닉 구현(클로저, 렉시컬 스코프 개념) 일급 객체를 공부하다 보니 렉시컬 스코프, 클로저에 대한 궁금증이 생겨 이에 대해 공부한 기록이다. Lexical Scope 렉시컬 스코프는 말 그대로 어휘의 범위이다. 변수가 사용 가능한 범위를 알기 위해 어디에서 선언되었는지 고려하는 것을 의미한다. JS는 선언자에 따라 다른 렉시컬 스코프를 가진다. var 전통적인 JS에는 함수 스코프와 전역 스코프 두 가지만 존재했다. var 선언자는 선언된 위치에 따라 다른 스코프를 가진다. 함수 내부 : 함수 스코프 함수 외부 : 전역 스코프 함수 외부에서 전역 스코프를 가지기 때문에 아래와 같은 문제가 발생할 수 있다. if (Math.random() > 0.5) { var x = 1; } else { var x = 2; } console.log(x); x는..
[JS] Javascript 일급 객체(First Class Object, First Class Function)
Frontend/JS 2023. 1. 5. [JS] Javascript 일급 객체(First Class Object, First Class Function) 함수를 변수에 할당하는 등의 작업이 함수가 일급 객체이기 때문이라는 것을 알고 일급 객체에 대한 공부한 기록이다. 일급 객체 JS에서 일급 객체는 아래의 3가지의 조건을 만족해야 한다. 변수에 할당할 수 있다. 함수의 인자로 전달할 수 있다. 함수의 결과로서 반환될 수 있다. 굳이 예제를 보지 않아도 이해할 수 있는 조건이다. 일급 객체의 조건을 보면 함수 또한 일급 객체라는 것을 알 수 있다. 일급 객체의 특성을 가지면서 함수가 구현할 수 있는 기능은 아래와 같다. 고차함수를 만들 수 있다. 콜백함수를 사용할 수 있다. 일급 객체의 조건을 하나씩 함수에 적용시켜 보자. 변수 할당 const foo = function(){ console.log("foobar"); }; foo(); //foobar 위의 ..
[React] 폰트 깜빡임 현상 해결(Global Style, CSS)
Frontend/React 2022. 12. 29. [React] 폰트 깜빡임 현상 해결(Global Style, CSS) 프로젝트 진행 중 폰트 적용이 늦어지는 깜빡임 현상을 해결한 과정을 기록하려고 한다. 문제 상황 위에서 말했듯 컴포넌트가 렌더링 될 때마다 폰트 적용이 늦어져 깜빡임 현상이 일어났다. 처음에는 리렌더링을 막는 방향으로 해결해보려고 했다. 메모제이션을 사용하고, 관련 문서들을 찾아보며 리팩토링 해봤지만 해결되지 않았다. 근본적인 문제가 폰트 관련 문제이므로 폰트 적용에 문제가 있는 것이 아닌가 생각이 들었다. 해결 전 원래 폰트 적용은 styled-components의 GlobalStyle을 이용해 적용했다. import { createGlobalStyle } from 'styled-components'; import reset from 'styled-reset'; import GangwonEdu_OTFB..
[React] Recoil(Atom, Selectors, Atom Effects)
Frontend/React 2022. 12. 18. [React] Recoil(Atom, Selectors, Atom Effects) Recoil 라이브러리의 Atom, Selectors, Atom Effects에 대한 공부 기록이다. Recoil 공식문서를 바탕으로 작은 프로젝트에 Reoil을 적용하는 과정을 기록할 예정이다. Motivation 컴포넌트의 상태는 공통된 상위 요소까지 끌어올려야만 공유될 수 있으며, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 가지는 여러 값들의 집합을 담을 수는 없다. 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 공식 문서의 첫 번째 동기에서는 전역 상태 관리 기능..
반응형

티스토리툴바