개린이의 학습장

도커는 리눅스 기반이기에 CLI로 작동한다. 따라서 도커를 사용하려면 명령어와 옵션을 미리 파악해야한다. 이 포스트에서 명령어와 옵션을 정리하고 실전에서 많이 쓸 예제를 작성하도록 하겠다. 기본 명령 Docker 버전 및 상세정보 확인 $ docker version Docker 버전 및 빌드 버전을 한줄로 간단하게 확인. $ docker -v Docker의 시스템 전체 정보 확인. $ docker system info 서버로 부터 실시간 이벤트를 받는다. $ docker system event 도커 디스크의 사용량 확인. $ docker system df 도커 허브에 로그인 $ docker login -u [ID] 이미지 도커 이미지 리스트 출력 $ docker image [옵션] -a, --all: 모..

도커는 서버를 관리할려면 반드시 알아야 하는 필수 기술 중 하나이다. 그러나 막상 도커에 대한 들으면 "그냥 vm 하나 더 만들기 귀찮아서 쓰는 거임?", "버전 차이 때문에 문제가 발생하면, 그냥 해당 버전만 쓴다고 미리 명시해두면 되는 거아니야?" 라는 생각이 있었다. 한마디로 편하기는 한데, 이게 필수? 라는 마인드가 있었다. 그러나 도커에 대해서 자세히 알아보자, 서버 관리자의 스트레스의 원인을 미리 제거하는 아주 중요한 도구임을 알 수 있었다. 만약 도커가 없었다면, 이 세상 모든 서버 관리자는 탈모가 되거나 줄없는 번지 점프 선수가 되었을 것이라는 확신이 들었다. 솔직히 하루에 한번씩 도커를 만든 개발자에게 절을 하는 것이 아깝지 않을 정도이다. 잡설은 여기까지하고 오늘은 도커에 대해서 알아보..

보통 프앤 개발자들은 github을 많이 사용하기에 토이 프로젝트같은 경우, github을 통해서 배포하는 경우가 많다. 그러나 react에서는 SPA를 위해서 react-router와 함께 사용하는 경우가 많고,이 때문에 초기 페이지를 렌더링 할때 빈 화면만 나오는 경험을 해본적이 있을 것이다. 그래서 react를 사용한다면 대부분의 경우, aws등을 사용해서 배포를 해야한다. 필자도 이런 경험이 많았지만, react를 git에서도 배포를 가능하게 해주는 라이브러리가 존재한다. 오늘은 gh-pages를 사용해서 react를 배포하는 법을 알아보자. gh-pages이란? 프론트엔드 프로젝트(예: React, Vue, Angular 등)에서 정적 웹사이트를 GitHub Pages로 배포할 때 사용되는 라이..

이번 메인 프로젝트에서 많은 것을 배웠지만, 가장 큰 성과는 useEffect의 구조에 대해서 확실히 알게 되었다는 것이다. 사실 지금까지 useEffect를 많이 사용하기는 하였지만, useEffect에 대해서 깊게 생각해 본 적은 없었다. 그저 "처음 렌더링시 실행되고, 의존성 배열에 있는 상태가 바뀌면 또다시 실행된다. 추가로 return으로 원마운트시에 clean-up 함수를 지정할 수 있다"라고 알고 있었다. 물론 저 말이 틀린 것도 아니고, 실사용시에도 저 정도만 알고 있어도 된다. 그러나 가끔 무한 루프가 발생할 때가 있었는데, 이게 useEffect에서 발생한다는 것은 알았지만, 왜 그런지는 알지 못했다. 추가로 실행 시점을 제대로 알지 못해서 저번 recoil게시글에서의 오류의 원인이 되..

이제까지 redux는 전역 상태 관리의 표준이라고 할 정도로 위세를 가지고 있었다. 실제로 다른 강의나 코드 스테이츠 같은 부트캠프도 redux를 우선적으로 가르친다. 그러나 redux는 사용하기 불편하다는 단점이 있었고, 이를 보완하기 위해 redux toolkit 같은 라이브러리를 주로 사용하지만, 그래도 불편하기는 마찬가지였다. 특히, 단순히 할당된 데이터를 다른 데이터로 바꾸려면, 일일이 액션을 만들어야 된다는 것도 편의성을 떨어뜨렸다. 이에 대항에 나온 전역 상태관리 라이브러리가 recoil이다. Recoil recoil을 간단히 정의하면 전역적으로 사용하는 usestate라고 할 수 있다. 이것은 초기값만 미리 설정하고, 데이터를 조회하거나 변경할 때 모두 usestate처럼 사용한다. 예를 ..

이번 프로젝트에서 우리 팀은 react-query를 도입하기로 결정했다. 솔직히 인프런이나 다른 강의 사이트에서 해당 내용을 다루는 강의가 없거나, 해외에서 한 강의를 번역한 것뿐이라 별로 하고 싶지는 않았다. 그러나 멘토 분의 강력한 추천과 실무에서 자주 사용된다는 것 때문에 이 생소한 라이브러리를 도입하였다. 솔직히 첫인상은 "어? 이거 그냥 axios함수 만들고, 거기에 넣으면 끝 아님? 개쉽네? 그리고 별 기능이 없어 보이는데? "라고 생각했다. 하지만 실제로는 유의미한 기능과 의외로 구현난이도가 조금 있었다. 솔직히 구현 난이도는 너무 생소한 라이브러리라서 그런 것도 있지만, 이후 설명할 "원티치 코드" 때문이기도 하다. 따라서 우선 react-query에 대한 간략한 설명과 실사용 예시와 후기..

메인 프로젝트를 진행하던 중 멘토 분께서 조언을 몇 가지 해주셨다. 여러 조언이 있었지만 오늘은 비동기 요청의 오류를 한 곳에서 관리하는 방법을 학습해 볼 것이다. axios.interceptors axios의 내장 메서드인 interceptors는 axios의 중앙 제어를 가능하게 한다. 이 메서드는 최상위 경로에서 주로 선언되며, 하위 경로에서 발생하는 axios 요청의 응답을 모두 가로챈다. 그리고 응답에 따라서 반환값을 달리 할 수 있다. 이를 통해, 오류 발생시, axios 요청부분에서 catch문으로 처리 하지않고 interceptors에서 처리할 수 있다. 대략적인 흐름은 다음과 같다. 먼저 axios.create로 axios의 인스턴스를 하나 만든다. 그 후 응답에 대한 intercepto..

KEEP 작업을 분배할 때, 사람이 한 페이지를 전부 작업 하는게 아닌 컴포넌트 단위로 담당구역을 정했는데, 이것이 시간 단축에 많은 도움이 되었습니다. 초기에는 충돌 걱정 때문에 조심스러웠지만, 충돌해결이 의외로 쉬웠서 적극적으로 다른 팀원의 작업을 도울 수 있었습니다. 한 디코방에서 계속 같이 상주하면서 의견을 나누는 것도 좋았습니다. 이러면 작업물에 대한 직척도를 바로 공유할 수 있고, 다른 팀원을 도와주기도 쉬웠습니다. Problem&Try 초반에 잠깐 팀원분들과 충돌이 있었습니다. 아무래도 팀장같은 직책을 맞은게 처음이 었다 보니까 마음이 너무 조급해 진 것 같습니다. 실제로 기한 안에 충분히 결과물을 낼 수 있던 것으로 보아 제가 너무 조급한게 맞았습니다. 또한 소통에 문제가 많았습니다. 제가..

Hoisting과 Temporal Dead Zone의 연관성에 대해 설명해 주세요. Hoisting은 JavaScript에서 변수 및 함수 선언을 스코프의 맨 위로 끌어올리는 것을 의미하고, Temporal Dead Zone은 변수가 선언되기 전까지 접근할 수 없는 범위를 말합니다. 따라서 Hoisting으로 인해 변수를 스코프 최상단에 끌어올려도 해당 변수의 선언문이 나오기 전까지는 TDZ에 존재하기, 값을 할당하거나 사용할 수 없습니다. Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요? Virtual DOM은 React에서 사용되는 가상의 DOM으로 실제 DOM의 가벼운 복사본이라 할 수 있습니다. Virtual DOM은 실제 DOM과 동기화되어 UI 변경을 추적하고 필..

CORS 에러를 해결하는 방법 브라우저에서 기본적으로 API를 요청할 때에, 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근할 수 있는 CORS가 존재합니다. CORS(Cross-Origin Resource Sharing) 에러는 웹 애플리케이션이 다른 도메인, 포트, 프로토콜로부터 리소스를 요청할 때 발생할 수 있는 보안 정책입니다. 만약 CORS 에러가 존재하지 않아 서비스 및 프로젝트가 모든 출처의 접근을 허락한다면, 라이브 데이터가 노출되어서 민감한 정보가 탈취될 수 있습니다. 때문에 보안 정책이 브라우저에서 클라이언트 측에서 적용되었고, 이는 웹 사이트의 리소스를 보호하기 위해 사용됩니다. CORS 에러의 주요 원인은 주로 도메인 불일치와 올바르지 못한 Cross-Ori..