alswl alswl

JavaScript에서 동기 및 비동기 처리는 코드 실행과 흐름 제어가 어떻게 관리되는지에 대한 다른 방식을 나타낸다. 동기(synchronous) 처리 동기 처리에서는 코드가 순차적으로 실행되며 한 번에 하나의 문이 실행된다. 각 작업은 다음 작업이 시작되기 전에 완료돼야 한다. 동기 처리 예시를 실생활 서비스로 들어보자면, 오븐이 하나만 존재하는 빵집에서 하나의 빵을 구우면, 해당 빵이 모두 구워지기 전까지 다른 빵은 구울 수 없는 과정을 생각하면 이해하기 쉽다. 말 그대로 동시에 일어난다는 뜻으로, 요청과 결과가 동시에 일어난다는 것이다. 즉, 바로 요청하면 요청 시간에 관계없이 먼저 요청을 했던 것에 대한 결과가 주어져야 다음 요청을 수행할 수 있다는 것이다. 동기 처리의 실행 흐름 프로그램은 각..

GitHub workflow는 일반적으로 개발자가 소프트웨어 프로젝트의 버전 제어 및 공동 작업을 위해서 GitHub를 사용할 때 따르는 프로세스 또는 단계 집합을 나타낸다. 이는 GitHub에서 호스팅되는 프로젝트를 관리하고 기여하는 데 관련된 다양한 활동과 도구를 포함한다. 이는 GitHub Actions에서 가장 상위 개념으로, 쉽게 말해서 자동화 해놓은 작업 과정이라고 볼 수 있다. workflow는 코드 저장소 내에서 .github/workflows 폴더 아래에 위치한 YAML 파일로 설정하며, 하나의 코드 저장소에는 여러 개의 workflow인 YAML 파일을 생성할 수 있다. GitHub Actions란 GitHub에서 제공하는 CI(지속통합)와 CD(지속 배포)를 위한 서비스이다. 일반적인..

개발을 한 번이라도 해본 사람이라면 git과 github를 한 번쯤은 들어봤을 것이다. 개발을 하다보면 중간에 오류가 생겨서 이전 코드로 돌아가고 싶은 경우가 발생하게 되고, 협업 프로젝트에서 이러한 소스코드 혹은 파일 관리 등에서 여러 이슈가 발생하게 되는데, 이때 우리는 git과 github를 사용할 수 있다. git과 github 같은 경우에는 소프트웨어 개발의 버전 관리와 협업을 위한 서로 연관된 도구이다. Git? Git은 소규모부터 대규모까지 여러 프로젝트의 소스 코드 버전 관리 시스템으로 로컬 저장소와 원격 저장소를 연결하여 로컬의 소스 코드 변경 사항을 추적하고 원격 저장소에 push하여 업데이트하거나 이러한 업데이트된 소스 코드를 pull 또는 fetch할 수 있는 분산 버전 제어 시스템..

JSON과 XML, YAML은 모두 데이터를 구조화하고 표현하는 데 만이 사용되는 데이터 교환 형식이다. JSON(JavaScript Object Notation)? 자바스크립트 개체 표기법이라는 뜻으로 가볍고 읽기 쉬운 데이터 교환 방식 간단한 텍스트 형식을 사용하여 데이터를 키: 값 쌍으로 표현하게 된다. 다음은 JSON 형태 예시이다. { "name": "John Doe", "age": 30, "city": "New York", "isStudent": false, "hobbies": ["reading", "coding", "traveling"] } 데이터 유형에는 문자열과 숫자, 객체, 배열, 부울, null이 포함되고 객체는 중괄호 { }로 묶이고, 배열은 대괄호 [ ]로 표시된다. JSON은 보..

API(Application Programming Interface)? 두 개의 소프트웨어 구성 요소가 서로 통신할 수 있도록 하는 메커니즘이라고 할 수 있다. 여기서 메커니즘이란 쉽게 말하면 어떠한 일이 돌아가는 원리라고 생각하면 된다. 이전에 설명했던 UI(User Interface)는 사용자와 H/W 또는 S/W를 연결한다면, API는 프로그램 간의 연결을 도와주는 하나의 연결 다리라고 볼 수 있다. 어떻게 보면 데이터 자판기 같은 느낌으로 원하는 데이터를 뽑아낼 수 있는 데이터 창고 같은 느낌이다. 이해를 돕기 위한 쉬운 예를 들자면, 기상청의 소프트웨어 시스템에는 일일 날씨 데이터가 포함되어 있다. 사용자들의 휴대폰의 날씨 앱은 API를 통해 이 시스템과 통신을 하여 날씨 앱에 일일 날씨 업데이..

프론트엔드와 백엔드는 웹 애플리케이션의 서로 다른 두 부분을 나타내며, 각각은 애플리케이션 기능의 서로 다른 측면을 담당한다. 어떠한 웹 사이트에 방문하더라도 눈에 보이는 직접적인 화면이 있고 보이지 않는 숨은 부분이 존재하는데 이러한 두 부분을 프론트엔드와 백엔드로 나눌 수 있다. FE(Frontend)? 사용자와 직접적인 상호작용을 할 수 있는 눈에 직접적으로 보이는 화면을 담당한다. 일반적으로 프론트엔드는 HTML, CSS, JavaScipt 등을 사용하여 사용자 인터페이스(UI) 요소나 디자인 등 사용자와 직접적으로 상호작용할 수 있는 웹의 시각적인 부분을 담당한다. HTML(Hyper Text Makrkup Language): 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어이다. 프로그래밍 언..

웹 애플리케이션 구축에는 MPA와 SPA라는 두가지 아키텍처 옵션이 있다. MPA(Multi Page Application)? 직역하면 다중 페이지 애플리케이션, 사용자가 애플리케이션과 상호 작용할 때마다 새로운 페이지를 로드하는 방식 다수의 HTML 페이지로 구성된 웹 애플리케이션이여서 MPA는 블로그나 뉴스 웹사이트와 같은 특정 유형의 콘텐츠에 더 적합하다. MPA의 장점 각 페이지에 고유한 URL이 있고 별도로 색인될 수 있으므로 SEO에 좋다. 서버에서 미리 렌더링하고 가져오기에 첫 로딩이 매우 짧다. 초기부터 사용된 웹 애플리케이션 구축 방법이라 해결법과 프레임워크 등에 대한 많은 자료가 있다. MPA의 단점 프론트엔드와 백엔드 간의 개발 업무가 밀접하게 연관된다. 요청마다 전체 페이지를 다시 ..

CSR(Client Side Rendering) 클라이언트(사용자)의 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식이다. CSR의 동작 방식 1. User(사용자)가 웹사이트에 요청 보낸다. 2. 브라우저가 서버에 콘텐츠 요청한다. 3. 서버는 뼈대만 있는 HTML을 응답으로 전송한다. 4. 브라우저가 연결된 JS 링크 통해서 서버로부터 다시 JS 파일 다운로드한다. 5. JS를 통해서 동적으로 페이지 만들어서 브라우저에 띄운다. 즉, 서버에서 데이터 없는 문서가 사용자에게 반환되기에 JS가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 브라우저 상에서 볼 수 있는 것이 없다. CSR 장점 정적 파일 제공하기에, 서버 부하 적고 클라이언트 측에서 더 많은 작업 수행한다. 초기 구동 속도는 느리..