안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 코너의 여섯 번째 정기 콘텐츠를 공개합니다! 이번 정기 콘텐츠는 모여라 협곡 친구들의 CI/CD에 대한 이야기인데요, CI/CD가 무엇인지, CI/CD 적용 후의 개발 과정 대해 알아봅시다!

Corner 코너 2022. 2. 23. 13:00

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 코너의 다섯 번째 정기 콘텐츠를 공개합니다! 이번 정기 콘텐츠는 Team Undefined의 가상 환경에 대한 두 번째 이야기인데요, 다양한 가상 환경이 존재하는 이유와 가상 환경의 주요 명령어에 대해 알아봅시다!

Corner 코너 2022. 2. 16. 13:00

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 코너의 4번째 정기 콘텐츠를 공개합니다! 이번 정기 콘텐츠는 Team de:Burger의 디자인 패턴에 대한 이야기인데요, 소프트웨어 아키텍처 패턴 종류에 대해 알아봅시다!

Corner 코너 2022. 2. 9. 13:00

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 코너의 세 번째 정기 콘텐츠를 공개합니다! 이번 정기 콘텐츠는 NOMAD의 가상 환경에 대한 이야기인데요, 해시 함수가 무엇인지, 어느 분야에서 응용되는 것인지에 대해 알아봅시다!

Corner 코너 2022. 2. 2. 13:00

리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있어 코드 유지 보수에 도움됩니다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수 있습니다. 리액트 애플리케이션에서 리덕스를 사용할 때는 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수(connext)와 컴포넌트(Provider)를 사용하여 리덕스 관련 작업을 처리합니다. 17-1 작업 환경 설정 1. create-react-app으로 새로운 프로젝트 생성 2. 리덕스와 react-redux 라이브러리 설치 $ yarn add redux react-redux 3. .prett..

21-22/21-22 리액트 스타터 -1 2022. 1. 31. 13:01

INDEX 17장 컴포넌트 스타일링 1. 작업 환경 설정 2. UI 준비하기 2.1 카운터 컴포넌트 만들기 2.2 할 일 목록 컴포넌트 만들기 3. 리덕스 관련 코드 작성하기 3.1 counter 모듈 작성하기 3.2 todos 모듈 만들기 3.3 루트 리듀서 만들기 4. 리액트 애플리케이션에 리덕스 적용하기 4.1 스토어 만들기 4.2 Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기 4.3 Redux DevTools의 설치 및 적용 5. 컨테이너 컴포넌트 만들기 5.1 CounterContainer 만들기 5.2 TodosContainer 만들기 6. 리덕스 더 편하게 사용하기 6.1 redux-actions 6.2 immer 7. Hooks를 사용하여 컨테이너 컴포넌트 만들기 7.1 u..

21-22/21-22 리액트 스타터 -2 2022. 1. 31. 13:01

INDEX 16장 리덕스 라이브러리 이해하기 1.개념 미리 정리하기 1.1 액션 1.2 액션 생성 함수 1.3 리듀서 1.4 스토어 1.5 디스패치 1.6 구독 2. 리액트 없이 쓰는 리덕스 2.1 Parcel로 프로젝트 만들기 2.2 간단한 UI 구성하기 2.3 DOM 레퍼런스 만들기 2.4 액션 타입과 액션 생성 함수 정의 2.5 초깃값 설정 2.6 리듀서 함수 정의 2.7 스토어 만들기 2.8 render 함수 만들기 2.9 구독하기 2.10 액션 발생시키기 3. 리덕스의 세 가지 규칙 3.1 단일 스토어 3.2 읽기 전용 상태 3.3 리듀서는 순수한 함수 4. Question 개념 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 리덕스를 왜 사용하는가? 컴포넌트의 상태 업데이트 관련 로직을 다른 ..

21-22/21-22 리액트 스타터 -2 2022. 1. 31. 13:00

16.1 개념 미리 정리하기 16.1.1 액션 액션(action): 상태에 어떠한 변화가 필요하면 발생하는 것으로, 이는 하나의 객체로 표현 { type: 'TOGGLE_VALUE' } 액션 객체는 위 코드와 같은 형식으로 이루어져 있습니다. 액션 객체는 type 필드를 반드시 가지고 있어야 하고, 이 값을 액션의 이름이라고 생각하면 됩니다. 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 개발자 마음대로 넣을 수 있습니다. 다음은 예시 액션입니다. { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } { type: 'CHANGE_INPUT', text: '안녕하세요' } 16.1.2 액션 생성 함수 액션 생성 함수(action creato..

21-22/21-22 리액트 스타터 -1 2022. 1. 31. 13:00

20.1 서버 사이드 렌더링의 이해 클라이언트 사이드 렌더링 : UI 렌더링을 브라우저에서 모두 처리하는 것 ⇒ 리액트는 기본적으로 클라이언트 사이드 렌더링! 서버 사이드 렌더링 : UI를 서버에서 렌더링하는 것 [서버 사이드 렌더링의 장점] 웹 서비스의 검색 엔진 최적화 초기 렌더링 성능 개선 자바스크립트 파일이 다운로드되지 않은 시점에도 html 상에 사용자가 볼 수 있는 콘텐츠가 있어 대기 시간 최소화, 사용자 경험 향상 클라이언트 사이드 렌더링은 로딩되고 실행될 때까지 빈 페이지를 보며 대기해야 함 [서버 사이드 렌더링의 단점] 서버 리소스가 사용된다 ⇒ 사용자가 동시에 몰릴 시, 서버에 과부하 발생 고려사항이 많아 개발 어려움 서버 사이드 렌더링과 코드 스플리팅 충돌 서버 사이드 렌더링과 코드 ..

21-22/21-22 리액트 마스터 2022. 1. 31. 13:00

서버리스(severless) : 서버를 클라우드 서비스가 대신 관리해주는 것 대표적인 서비스 AWS의 람다(Lambda) / API 게이트웨이(API Gateway) / S3 GCP의 앱 엔진(App Engine) / 파이어베이스(Firebase) / 클라우드 펑션스(Cloud Functions) / 클라우드 스토리지(Cloud Storage) FaaS(Function as a Service) : 람다와 클라우드 펑션스는 특정한 동작을 수행하는 로직을 저장하고 요청이 들어올 때 로직을 실행함 16.2 AWS S3 사용하기 AWS 홈페이지 - 제품 - 스토리지 - S3 클릭 버킷 만들기 혹은 시작하기 버튼 클릭 버킷의 이름과 리전 설정 이때 버킷의 이름은 각자 고유해야 함 리전은 가까울수록 이미지 로딩 속..

21-22/21-22 Node.js 2022. 1. 31. 13:00

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 코너의 두 번째 정기 콘텐츠를 공개합니다! 이번 정기 콘텐츠는 Team 모여라 협곡 친구들의 TDD와 BDD에 대한 이야기인데요, 테스트 기반 개발 방식인 TDD와 BDD로 개발하는 방법과, 두 방식의 특징에 대해 알아봅시다!

Corner 코너 2022. 1. 26. 13:00

Intro 리액트 프로젝트를 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포해야 한다. 빌드 작업에선 불필요한 주석, 경고 메시지, 공백 등을 제거해 파일 크기 최소화 JSX문법이나 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업 진행 이미지와 같은 정적 파일의 경로 설정 과 같은 일을 한다. 빌드 작업은 웹팩 이라는 도구가 담당한다. 프로젝트의 모든 자바스크립트 파일 하나로 합치기 프로젝트의 모든 CSS 파일 하나로 합치기 스플리팅이란? 파일을 분리하는 작업 CRA를 통해 React 프로젝트를 만들 경우 기본으로 탑재되어있는 SplitChunks 기능을 통해 스플리팅이 되지만, 단순한 캐싱 효과만 있을 뿐이다. 애플리케이션의 규모가 커질 경우에 기본적인 스플리팅 기능만 이용하면 로딩..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05