FrontEnd/Deep Dive
![[React] Deep Dive 모던 리액트(26) 리액트 18 추가된 훅](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvMQDS%2FbtsEvd8k0L6%2F5rvkhO9VP9shF9YHcJc7Rk%2Fimg.png)
[React] Deep Dive 모던 리액트(26) 리액트 18 추가된 훅
이전 글에서는 리액트 17의 변경점에 대해서 다뤘었다. 17이 점진적인 업그레이드를 위한 준비를 했다면 리액트 18에서는 다양한 기능들이 추가되었다. 변경점들을 하나씩 알아보자! useId useId는 컴포넌트 별로 유니크한 값을 생성해주는 새로운 훅이다. 컴포넌트 내부에서 사용할 수 있는 유니크한 값을 생성하는 것은 생각보다 쉽지 않다. 하나의 컴포넌트가 여러 곳에서 재사용되는 경우나 컴포넌트 트리에서 컴포넌트가 가지는 모든 값이 달라야 한다는 제약을 고려해야하기 때문이다. 만약 아래와 같은 코드가 서버사이드 렌더링이 된다고 생각해보자. export default function UniqueComponent(){ return {Math.random()} } 해당코드는 오류를 내보내게 된다. 하이드레이션..
![[React] Deep Dive 모던 리액트(25) 리액트 17 변경점](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOjTXF%2FbtsExOlP8dp%2F5hKWTUBFqaInvX4KQtki8K%2Fimg.png)
[React] Deep Dive 모던 리액트(25) 리액트 17 변경점
리액트 17버전은 추가된 기능은 없으며 호환성이 깨지는 변경사항 즉 기존 사용하던 코드의 수정을 필요로 하는 변경사항을 최소화 한 점을 가장 큰 변화로 삼는다. 리액트 팀 피셜로 10만개 이상 컴포넌트 중 호환성이 깨지는 변경사항에 영향을 받은건 20개 미만으로 대부분 어플리케이션이 문제 없이 17 버전으로 업그레이드 할 수 있을 것이라고 한다. 리액트가 버전을 업그레이드 하는 경우는 이전 버전에서 호환되지 않는 API가 있거나 새 버전을 사용하는데 있어 작동방식이 달라지는 경우다. 즉 리액트팀은 새로운 버전이 릴리스되면 이전 버전의 API 제공을 완전히 중단해버렸다. 이런 전략은 리액트 개발팀에게는 유용하겠지만 오래된 코드를 가지고 돌아가는 실제 웹 애플리케이션에는 그렇게 좋지 못한 일이다. 따라서 레..
![[React] Deep Dive 모던 리액트(24) 리액트 도커라이즈](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbveNsG%2FbtsEqw68LCC%2FtHi6qwI2kNOOnK2fmvBxC0%2Fimg.png)
[React] Deep Dive 모던 리액트(24) 리액트 도커라이즈
리액트 APP을 쉽고 빠르게 배포하기 위해서는 heroku와 같은 웹 서비스를 이용해볼 수 있다. 이러한 서비스들은 빠르고 쉽지만 애플리케이션을 자유롭게 커스터마이징하는 것은 힘들고 비용 또한 변동성이 크다는 단점이 있따. 과거에는 웹 애플리케이션을 배포하기 위해서는 장비준비,파일설치,소스설치,배포 등등을 직접 했었다고 한다. 하지만 요즘은 애플리케이션을 하나의 컨테이너로 만들어서 배포하는 것이 일반적이다. 이 컨테이너를 만드는 게 바로 도커이다. 도커 홈페이지에서는 도커를 아래와 같이 소개하고 있다. 도커는 개발자가 모던 애플리케이션을 구축, 공유, 실행하는 것을 도와줄 수 있도록 설계된 플랫폼이다. 도커는 지루한 설정 과정을 대신해줘 개발자가 코드 작성에 집중할 수 있게 해준다. 이 지루한 설정 과정..
![[React] Deep Dive 모던 리액트(23) gitHub Action CI](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fk8LT4%2FbtsEnhocSyo%2FXWr8rbR5cNpbskqJa9yD8K%2Fimg.png)
[React] Deep Dive 모던 리액트(23) gitHub Action CI
CI(Continuous Integration) 소프트웨어를 구성하는 코드는 여러 개발자들이 계속해서 기여하게 된다. 이러한 코드의 변화를 관리하는 저장소에서 코드들을 지속적으로 빌드하고 테스트하는 과정을 CI라고한다. 즉 저장소에서 변화가 있을 때마다 전체 소프트웨어의 정합성을 확인하기 위한 작업을 실행해야 한다. 이 과정들은 테스트,빌드,정적 분석, 보안 취약점 분석 등이 있다. 이 CI환경 구축을 위해서 가장 자주사용된 솔루션은 젠킨스였다. 이 젠킨스는 별도 서버를 구축해야 하고 서버안에서도 젠킨스를 설치해야 하며 저장소와 연결하는 작업 등 설치 및 유지보수가 번거롭다는 단점이 있었다. github action을 사용하면 깃헙 저장소와 함께 사용하여 위 작업을 쉽게 할 수 있다. 깃헙에 푸시가 일어..
![[React] Deep Dive 모던 리액트(22) Next.js 개발환경 구축](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FciaLTN%2FbtsEkC7sUfl%2FW0yfDTHSls3h7KrOr4G2A1%2Fimg.png)
[React] Deep Dive 모던 리액트(22) Next.js 개발환경 구축
create-react-app과 create-next-app은 리액트 애플리케이션과 Next.js 애플리케이션을 손쉽게 만들 수 있는 CLI도구이다. 이번에는 직접 프로젝트 파일들을 하나씩 설정해보며 개발환경에 대해 이해해보자. cra는 2023년 이후 유지보수되지 않을 가능성이 크다고 한다. CRA개발자 팀이 리액트 애플리케이션을 만드는 보일러플레이트가 아닌 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정이라고 한다. create-necxt-app 없이 하나씩 구축해보기 모든 Node.js프로젝트는 package.json을 만드는것으로부터 시작한다. 폴더를 하나 만들고 아래 명령어를 통해서 package.json을 만들어 보자. npm init (단순하게 프로젝트 이름만 설정해주고 나머지는 ..
![[React] Deep Dive 모던 리액트(21) 테스트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbNrXlS%2FbtsDA3Y19bw%2FAPrDqtFjF5CylIilA08W91%2Fimg.png)
[React] Deep Dive 모던 리액트(21) 테스트
테스트란 개발자가 만든 프로그램이 코딩을 한 의도대로 작동하는지 확인하는 일련의 작업을 의미한다. FE와 BE 모두 테스트 과정이 중요하지만 방법과 방법론은 조금 다르다. BE의 테스트는 서버,DB에서 원하는 데이터를 올바로 가져올 수 있는지 , 데이터 간 교착상태나 경쟁상태가 발생하지는 않는지 등등을 테스트한다. 이러한 백엔드 텍스트는 일반적으로 화이트박스 테스트이다로 GUI가 아닌 AUI에서 주로 수행하기 때문에 백엔드에 대한 이해도가 어느정도 있는 사람만 가능하다. 반면 FE는 일반적인 사용자와 동일하거나 유사한 환경에서 수행된다. 사용자가 프로그램에서 수행할 모든 경우의 수를 고려해야 하며 사용자가 FE코드를 알 필요가 굳이 없는 블랙박스 형태로 테스트가 이뤄진다. 특히 사용자는 개발자의 의도대로..