FrontEnd
![[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 제공을 완전히 중단해버렸다. 이런 전략은 리액트 개발팀에게는 유용하겠지만 오래된 코드를 가지고 돌아가는 실제 웹 애플리케이션에는 그렇게 좋지 못한 일이다. 따라서 레..
[JS] [1차] 추석 트래픽
누적합과 Map 자료형을 활용해서 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/17676 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제는 단순하지만 ms까지 시간이 주어지는 바람에 조금 까다로웠고 생각할 거리가 조금 있는 문제였다. 해당 문제를 해결하기 위해서 누적합 개념을 적용해볼 수 있다. 시간은 0부터 1씩 증가하는 형태의 데이터로 생각할 수 있다. 0ms부터 10ms까지의 상태를 배열로 나타낸다면 0,0,0,0,0,0,0,0,0,0,0 과 같은 형태로 나타낼 수 있다. 여..
![[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와 같은 웹 서비스를 이용해볼 수 있다. 이러한 서비스들은 빠르고 쉽지만 애플리케이션을 자유롭게 커스터마이징하는 것은 힘들고 비용 또한 변동성이 크다는 단점이 있따. 과거에는 웹 애플리케이션을 배포하기 위해서는 장비준비,파일설치,소스설치,배포 등등을 직접 했었다고 한다. 하지만 요즘은 애플리케이션을 하나의 컨테이너로 만들어서 배포하는 것이 일반적이다. 이 컨테이너를 만드는 게 바로 도커이다. 도커 홈페이지에서는 도커를 아래와 같이 소개하고 있다. 도커는 개발자가 모던 애플리케이션을 구축, 공유, 실행하는 것을 도와줄 수 있도록 설계된 플랫폼이다. 도커는 지루한 설정 과정을 대신해줘 개발자가 코드 작성에 집중할 수 있게 해준다. 이 지루한 설정 과정..
[JS] 숫자게임
그리디 알고리즘을 활용해서 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/12987 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr A와 B를 우선 정렬해준다. 이후 각 팀의 가장 쌘놈부터 결투를 시킨다. 문제가 승점의 차가 최대의 격차로 나게하는 것이 아닌 절대적인 승점 자체를 가장 많이 받게 하는 방식이기 때문에 이게 가능하다. B에서 가장 쌘놈을 뽑아서 A에서 가장쌘놈과 싸우면서 이길수 있는 상대가 나올 때까지 선수를 교체시키면서 싸우면 된다. 조금 생각할 점은 A의 나머지 애들 다..
![[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을 사용하면 깃헙 저장소와 함께 사용하여 위 작업을 쉽게 할 수 있다. 깃헙에 푸시가 일어..