티스토리

hustle-ing

검색하기

블로그 홈

hustle-ing

hustle-ing.tistory.com/m

허슬하는 웹개발자 지망생

구독자: 0

방명록 방문하기

주요 글 목록

git 명령어 모음 Git 설정 - 로컬 리포지토리와 연결할 유저 정보를 설정한다. # 버전 히스토리를 식별할 때 사용할 이름을 설정합니다. $ git config --global user.name "[firstname lastname]" # 각 기록과 연결할 이메일 주소를 설정합니다. $ git config --global user.email “[valid-email]” 도움말 보기 - help 명령어를 이용하여 각 명령어 및 옵션의 기능에 대해 살펴볼 수 있다. # Git에서 제공하는 모든 명령어를 볼 수 있습니다. $ git help -all # 특정 command에서 사용할 수 있는 모든 옵션을 볼 수 있습니다. $ git [command] -help 세팅 및 초기화 - 리포지토리를 초기화 하거나 존재하는 리포지토리.. 공감수 0 댓글수 0 2023. 6. 12.
Github action으로 CI/CD 구축하기 Github actions는 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화 할 수 있는 CI/CD 플랫폼이다. 레포지토리에서 Pull Request 나 push 같은 이벤트를 트리거로 Github 작업 워크플로우를 구성할 수 있다. 워크플로우는 하나 이상의 작업이 실행되는 자동화 프로세스로, 각 작업은 자체 가상 먼신 또는 컨테이너 내부에서 실행된다. 워크플로우는 .yml(혹은 .yaml) 파일에 의해 구성되며 테스트, 배포 등 기능에 따라 여러 개의 워크플로우로도 만들 수 있다. 생성된 워크플로우는 .github/workflows 디렉토리 이하에 위치하게 된다. Github action으로 CI/CD 구축하기 1. 나의 깃허브 계정에 새로운 레포지토리를 만든다. (publ.. 공감수 0 댓글수 0 2023. 6. 5.
YAML YAML Yet Another Markup Language의 약자로 사람이 읽을 수 있는 데이터 직렬화 언어를 의미한다. 파일로 작성 시 확장자는 .yaml 혹은 .yml 확장자를 가진다. YAML은 사람이 읽을 수 있고 이해하기 쉬워 프로그래밍 언어 중에서도 인기가 높다. 또한 다른 프로그래밍 언어와 함께 사용할 수도 있다. YAML은 그 유연성과 접근성으로 인해 자동화 프로세스를 생성하는 데에도 사용된다. JSON vs YAML JSON { "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Mol.. 공감수 0 댓글수 0 2023. 6. 4.
CI / CD CI / CD CI는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미한다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충동할 수 있는 문제를 해결할 수 있다. CD는 지속적인 서비스 제공(Continuous Delivery) 혹은 지속적인 배포(Continuous Deployment)를 의미하며 이 두 용어는 상호 교환적으로 사용된다. 두 가지 의미 모두 파이프라인의 추가 단계에 대한 자동화를 뜻하지만 때로는 얼마나 많은 자동화가 이루어지고 있는지를 설명하기 위해 별도로 사용되기도 한다... 공감수 0 댓글수 0 2023. 6. 3.
WAI-ARIA WAI-ARIA WAI(Web Accessibility Initiative) 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관 ARIA(Accessible Rich Internet Applications) 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 해주는 즉, 웹 접근성을 갖추기 위한 기술 RIA(Rich Internet Applications) 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것 처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다. WAI-ARIA의 필요성 HTML요소에 의미를 부여한 시멘틱 요소를 사용하는 것만으로도 웹 접근성을 .. 공감수 0 댓글수 0 2023. 4. 27.
웹 접근성 웹 접근성의 목적 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것 웹 접근성의 실태 우리나라는 높은 정보화 수준에도 불구하고 웹 접근성의 수준은 높지 않다. 2021년 기준, 일반 국민의 정보화 수준을 100점이라고 할 때, 장애인/고령층 등 디지털 취약 계층의 정보화 지수는 75.4점이었고, 우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점이었다. 모든 공공기관과 법인의 웹 사이트는 웹 접근성을 의무적으로 갖추도록 하는 법이 있음에도 불구하고, 다양한 장애 상황으 ㄹ모두 고려하여 웹 접근성을 확보한 경우는 찾아보기 어렵다. 특히 규모가 작은 웹 사이트에서 웹 접근성을 갖춘 사례는 더욱 찾기 힘들다. 웹 접근성을 갖추면 얻을 수 있는 효과 1. 사용자층.. 공감수 0 댓글수 0 2023. 4. 27.
Redux - 기초 Redux는 컴포넌트에서 상태를 분리하여 따로 관리할 수 있게해주는 상태 관리 라이브러리이다. 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 보다 단순한 함수 컴포넌트로 만들 수 있게된다. Redux의 상태관리 메커니즘 1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다. 2. 이 Action 객체는 Dispatch 함수의 인자로 전달된다. 3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다. 4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다. 5. 상태가 변경되면, React는 화면을 다시 렌더링 한다. Store Store는 상태가 .. 공감수 0 댓글수 0 2023. 4. 24.
Express Express Express는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기있는 프레임워크이다. Express로 구현한 서버가 Node.js HTTP 모듈로 작성한 서버와 다른 점은 다음과 같다. 미들웨어를 추가할 수 있다. 라우터를 제공한다. 라우팅(Rountig) 라우팅은 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것이다. 추가적인 라이브러리를 사용하지 않고, 순수한 Node.js로 코드를 작성하면 다음과 같다. 반면에 Express는 프레임워크 자체에서 라우터 기능을 제공한다. Express의 라우터를 활용하면 아래와 같이 직관적인 코드를 작성할 수 있다. 미들웨어(Middleware) Express의 가장 큰 장점인 미들.. 공감수 0 댓글수 0 2023. 4. 5.
Node.js - CORS CORS가 필요하게 된 배경인 SOP에 대해서 먼저 알아보자. SOP(Same-Origin Police) 동일 출처 정책이란 뜻으로, `같은 출처의 리소스만 공유가 가능하다`라는 정책이다. 여기서 말하는 출처(Origin)는 프로토콜, 호스트, 포트의 조합으로 되어있다. 이 중 하나라도 다르면 동일한 출처가 아니다. SOP는 잠재적으로 해로울 수 있는 문서를 분리함으로써 해킹등의 공격을 받을 수 있는 경로를 줄여준다. 모든 브라우저는 기본적으로 SOP 정책을 사용하고 있지만, 어떻게 하면 다른 출처의 리소스를 받아올 수 있을까? CORS(Cross-Origin Resource Sharing) 교차 출처 리소스 공유(CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른.. 공감수 0 댓글수 0 2023. 4. 4.
REST API REST(Representational State Transfer) API 로이 필딩(Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개 되었다. 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 뜻한다. REST API 디자인 로이 필딩이 제시한 REST 방법론을 보다 더 실용적으로 적용하기 위해 레오나르드 리차드슨(Leonard Richardson)은 REST API를 잘 적용하기 위한 4단계 모델을 만들었다. REST 성숙모 모델은 총 4단계(0~3)로 나누어진다. 실제로는 엄밀하게 3단계까지 지키기 어렵기 때문에 2단계까지만 적용해도 좋은 API 디자인이라고 볼 수 있고.. 공감수 0 댓글수 0 2023. 3. 29.
SSR vs CSR SSR(Server Side Rendering) CSR(Client Side Rendering) SSR vs CSR SSR과 CSR의 주요 차이점은 페이지가 렌더링 되는 위치이다. SSR은 서버에서 페이지를 렌더링 하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링 한다. CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리한다. SSR 사용 SEO(Search Engine Optimization)가 우선순위인 경우, 일반적으로 SSR을 사용한다. 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR이 적합하다. 웹 페이지가 사용자와 상호작용이 적은 경우, SSR을 활용할 수 있다. CSR 사용 SEO가 우선순위가 아닌 경우.. 공감수 0 댓글수 0 2023. 3. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.