본문 바로가기

분류 전체보기

(93)

[ GitHub Action ] GitHub Action을 이용하여 프로젝트 CI/CD 세팅하기. GitHub Action GitHub Action은 빌드와 테스트, 개발 파이프라인을 자동화할 수 있는 CI/CD(지속적인 통합/지속적인 배포) 플랫폼으로, Git 저장소에서 발생하는 이벤트에 대한 자동화된 작업을 수행할 수 있는 기능이다. 이러한 작업은 Git 저장소의 상태 변경, 새 브랜치 생성, 코드 푸시, 이슈 등록, Pull Request 등을 대상으로 할 수 있으며 모든 레포지토리의 PR 또는 상용 배포를 위한 merged PR 빌드와 테스트 워크플로우를 생성할 수 있다. Git Action을 사용하면 저장소에서 이벤트가 발생하면 지정된 작업이 실행되어 소프트웨어 개발 및 배포 프로세스를 자동화할 수 있다. 예를 들어 코드 푸시 이벤트가 발생하면, 자동으로 코드 테스트, 빌드 및 배포를 수행할..

[ React ] React Props 알아보기. React를 처음 시작하는 사람들 또는 React의 경험이 많지 않은 사람들에게 비슷해보여서 어렵게 느껴질 수 있는 React Props와 React State에 대해 차이점에 대한 포스팅을 하려고 했지만 React의 Props를 먼저 이해해야 state에 대해 이해하기 더욱 쉬울 것 같아, props에 대해 먼저 알아보려 한다. props와 state는 React의 클래스 컴포넌트와 함수 컴포넌트에서 모두 사용된다. Props React에서 props란 "properties"의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하기 위한 방법으로, 부모 컴포넌트에서 자식 컴포넌트에게 전달하는 데이터는 props라는 객체 형태로 전달되며, 자식 컴포넌트는 이 props 객체를 통해 데이터에 접근할..

[ 책 추천 ] 이펙티브 타입스크립트 올해 1월 말부터 얼마 전까지 진행했던 Learning React(러닝 리액트) 책 스터디 팀과 러닝 리액트 책 스터디를 마치고, 3월부터 새롭게 시작하는 라는 책을 스터디 시작 전에 미리 훑어보았다. 타입 스크립트는 내가 실무에서도 자주 쓰고, 스터디에서 프로젝트를 할 때도 사용했었는데, 강의를 들은 것 빼고는 깊게 공부한 기억이 없어서 굉장히 좋은 기회가 될 것 같아서, 책 스터디가 기다려진다. 책의 목차를 간단히 소개하면 아래와 같았다. 1장 타입스크립트 알아보기 2장 타입스크립트의 타입 시스템 3장 타입 추론 4장 타입 설계 5장 any 다루기 6장 타입 선언과 @types 7장 코드를 작성하고 실행하기 8장 타입스크립트로 마이그레이션하기 사실 회사를 다니면서 매주 정해진 분량의 책을 읽고 내용 ..

[ webpack ] React(리액트)와 webpack(웹팩) React.js를 사용하거나, 다른 라이브러리 혹은 프레임워크를 사용하다보면 항상 webpack과 같은 모듈 번들러 툴을 사용하게 된다. 웹팩 공식 사이트에서 소개하는 컨셉은 현대 자바스크립트 응용 프로그램을 위한 정적 모듈 번들러라고 말한다. 모듈 번들러는 여러 다른 파일들(JavaScript, LESS, CSS, JSX, ESNext 등)을 받아서 하나의 파일로 묶어준다. 이렇게 여러 다른 파일들을 받아 하나의 파일로 묶어주어 생기는 이점은 크게 모듈성과 네트워크 성능이 있는데, 모듈성은 소스 코드를 작업하기 쉽게 여러 부분이나 모듈로 나눠서 다룰수 있게 해주어 팀 작업등의 협업에 유리하다. 또 네트워크 성능의 측면에서는 의존 관계가 있는 여러 파일을 묶은 번들을 브라우저가 1번만 읽기 때문에 네트워..

[ React ] React Element 와 Component의 차이점 React Element React 엘리먼트는 React 앱의 가장 작은 단위로, 브라우저 DOM 엘리먼트와 다르게 일반 객체(plain object)이며, 쉽게 생성이 가능하다. React 엘리먼트는 화면에 표시할 내용을 기술하며, React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트해준다. const element = Hello, world; React 엘리먼트는 불변객체이며, 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다. 사용자 정의 컴포넌트로도 React 엘리먼트를 나타낼 수 있다. (Welcome 컴포넌트를 엘리먼트로 사용) const element = ; React가 사용자 정..

[ Git / 삭제복구 ] 삭제한 파일이나 폴더를 commit에 추가하여 push 하기. 상황 설명 예를 들어 feature 작업을 진행하던 브랜치 A가 있다. 브랜치 A에서 example이라는 파일(또는 폴더)을 삭제했다고 치자. 그리고 example파일의 삭제에 대한 커밋을 하고, 원격 저장소에 push를 한 뒤, 브랜치A의 기능을 쭉 개발하고 커밋하여 원격 저장소에 push를 하여, example파일 삭제 커밋&push 이후에도 많은 커밋이 추가된 상태에서 브랜치A에 이전에 삭제했던 exmaple 파일이 필요하여 삭제에 대한 복구를 진행해야 하는 아래의 이미지와 같은 상황이라고 생각해 보자. 이런 상황에서 어떻게 삭제된 example파일을 복구할 수 있을까? 이럴 땐 맨 밑에 작업한 example 파일 삭제에 대한 커밋에 대해 revert를 진행하면 간단히 해결된다. git log gi..

[에러] 400 Bad Request Request Header Or Cookie Too Large 서비스의 QA를 진행하다가 아래와 같은 이슈가 나왔다. 400 Bad Request Request Header Or Cookie Too Large nginx 발생 원인 400 Bad Request Request Header Or Cookie Too Large nginx 에러는 HTTP 상태 코드 중 하나로, 요청 헤더 또는 쿠키가 너무 크기 때문에 웹 서버(nginx)에서 처리할 수 없다는 것을 나타낸다. 이는 웹 서버에 설정된 제한 크기를 초과한 것이기 때문에 이 문제를 해결하려면, 요청 헤더 또는 쿠키 크기를 줄이거나 웹 서버에서 제한 크기를 늘려야 하지만 방문자가 브라우저의 사이트 기록을 삭제하는 간단한 방법으로 해결할 수 있다. (모바일 웹도 마찬가지로 설정에서 해당 브라우저 앱을 선택하면 캐시를..

[ WEB ] AJAX에 대해 알아보기. AJAX란 무엇일까? 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)을 말하며, 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. AJAX는 페이지의 새로고침 없이 서버에 요청을 보낼 수 있고, 서버로부터 데이터를 받고 작업을 수행하는 특징을 가진다. 브라우저에서 제공하는 Web API인 XMLHttpRequest(HTTP비동기 통신을 위한 메서드와 프로퍼티를 제공) 객체를 기반으로 동작한다. 위의 그림은 전통적인 웹페이지의 생명 주기(왼쪽)와 Ajax(오른쪽)의 비교 이미지이다. 전통적인 웹페이지의 경우(왼쪽 이미지) html태그로 시작하여 html..

이전 1 2 3 4 5 6 7 8 ··· 12 다음

티스토리툴바