Me22 CI/CD가 무엇일까? 본격적인 개발을 하다보면 CI, CD라는 용어를 많이 접합니다. 대충 자동 통합, 자동 빌드라는 것만 알고있었지 명확히 설명할 수는 없었던 것 같습니다. 이번 기회에 한번 정리해보고자 합니다. CI가 뭘까? CI는 Continuous Integration, 즉 지속적인 통합을 의미합니다. CI는 빌드/테스트 과정을 자동화 해주는데요, 여러명의 개발자가 동시에 개발을 할 때 merge 시 발생할 수 있는 오류 등을 알려주는 기능을 합니다. "머지마다 빌드와 자동 테스트가 일어나고, 문제가 발생하지 않았는지 자동으로 알려주는 과정"이라고 보면 될 것 같습니다. CD는 뭘까? CD는 지속적인 배포를 의미합니다. 코드 변경 사항이 위의 CI단계를 통과하여 main에 머지가 되면, 따로 배포할 필요없이 프로덕션으.. 2022. 6. 21. [material-ui] ~~~ was not found in '@mui/material' 오류와 import level 개발 중 material-ui v5를 사용할 때 자꾸 import 단에서 오류가 났습니다. 분명 yarn add로 material-ui를 설치했는데 자꾸 Box나 Grid 같은 컴포넌트를 불러올 수가 없다는 것입니다. 혹시 import 문제가 발생했다면 참고해주길 바랍니다! import { Tabs } from '@mui/material'; //OK: 1st level import import Tabs from '@mui/material/Tabs'; //OK: 2nd level import import TabIndicator from '@mui/material/Tabs/TabIndicator'; //Error 3rd level import import Tabs from '@mui/material'; //.. 2022. 6. 4. [React] useRef로 Infinite Scroll 구현하기 예전 프로젝트에서 Infinite Scroll을 구현한 적이 있습니다. 까먹을까봐 정리하고 가겠습니다. Infinite Scroll이란? 페이스북이나 인스타그램의 피드를 본다고 생각해봅시다. 게시글이 만약 400개가 있는 계정이라고 하면, 과연 인스타그램은 그 400개를 다 불러올까요? 그렇게 되면 서버 로드도 엄청나고, 게시글 사진 그리는데 시간이 너무 많이 들게 됩니다. 따라서 우리는 페이지네이션을 통해서 데이터들을 나눠서 불러오게 됩니다. 이 페이지네이션의 구현 방법은 버튼식, 스크롤식 등이 있는데요. 버튼식은 일반 커뮤니티에서 '다음' 누르면 다음 10개의 게시글이 뜨는 방식입니다. 스크롤식은 스크롤을 끝까지 내리면 자동으로 다음 n개를 불러오는 방식입니다. Infinite Scroll은 페이지 .. 2022. 5. 23. 프로세스와 스레드의 차이 프론트엔드에 대한 내용은 아니지만, 지난 포스트에서 자바스크립트가 싱글 스레드라는 글을 쓰면서 '스레드'의 개념에 대해 좀 더 알아보아야겠다고 생각했습니다. 프로세스 프로세스는 '컴퓨터에서 연속적으로 실행되고있는 프로그램'입니다. 메모리 상에 올려진 프로그램의 한 개체라고 보면 됩니다. 운영체제(OS)로부터 자원을 할당받은 작업의 단위입니다. 이렇게 각 프로세스는 메모리를 할당 받습니다. 또, 각 프로세스는 서로의 영역의 자원에 접근할 수 없습니다. 사실 있긴 한데, 많이 귀찮고 무거운 과정인데 아래에서 더 설명하겠습니다. 간단히 말해서, 작업관리자를 켰을 때 주르륵 뜨는 목록들이 현재 실행중인 프로그램, 프로세스라고 보면 될 것 같습니다. 하드에 저장만 되어있고 실행하지 않은 프로그램을 실행하면 메모리.. 2022. 5. 20. [JavaScript] JS가 싱글스레드임에도 비동기 처리가 가능한 이유 자바스크립트는 싱글 스레드 언어입니다. 스레드가 하나라면 동시에 하나의 작업만 할 수 있다는 뜻입니다. 어떻게 비동기처리가 가능할까요? 또, 자바스크립트로 쓰여진 웹사이트들은 버튼 클릭, 애니메이션 실행, HTTP 요청 전송 등 여러가지 일을 한번에 처리합니다. 스레드가 하나임에도 이런 일이 가능한 이유를 알아보고자 하였습니다. 스레드가 하나임에도 동시성이 지원되는 이유를 알기 위해서는 '이벤트 루프'에 대해 알아합니다. 이벤트 루프는 무엇일까요? 이벤트 루프는 사실 자바스크립트 엔진이 담당하는게 아닙니다. 브라우저에서 담당하는 것이죠. (Node.js던가) 비동기처리를 위한 setTimeout 같은 함수는 Web APIs에서 정의가 되어있습니다. 뭔진 모르겠지만 Callback들도 Task Queue에.. 2022. 5. 19. [JavaScript] Promise와 async/await 지난 포스트에서는 콜백함수와 비동기처리에 대해 간단하게 알아봤습니다. 마지막에는 콜백함수 사용 시 발생하는 가독성 문제; 콜백 지옥에 대해서도 알아보았습니다. 이번에는 이를 해결하기 위한 Promise와 async/await 문법에 대해 정리해보겠습니다. Promise Promise는 비동기 처리를 좀 더 쉽게 하기 위한 객체입니다. 이 Promise 객체를 생성할 때, resolve, reject를 인자로 받아 resolve / reject 해주는 함수를 실행해주겠다고 '약속'해주게 됩니다. const foo = (resolve, reject) => { setTimeout(()=>{ resolve("Success"); }, 1000); }; conse getPromise = () => new Promi.. 2022. 5. 16. 이전 1 2 3 4 다음 728x90
