전체 글

[Git] 업무용, 개인용 깃 계정 분리

https://www.daleseo.com/git-config/ git config 명령어 사용법 Engineering Blog by Dale Seo www.daleseo.com https://awesometic.tistory.com/128 깃(git) - 프로젝트/저장소마다 다른 계정 정보 사용하기 저장소별 계정 설정 Command line 에서 git을 사용하려면, git 설치 후 간단한 설정 두 가지 정도는 해줘야 편해요. 계정과 이름 설정을 해주면 git commit, git push 할 때마다 계정 정보를 입력하지 않아도 awesometic.tistory.com 레포마다 아래와 같이 글로벌과 로컬을 잘 구분해주면 된다. //개인 프로젝트 위치에서 $ git config user.email mim..

[React + Node 같이 때려잡기] (4) 위치 도시 기반 날씨 앱 (api 연결 기초작업, UI작업 )

1. 기능 명세서 //1. 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다. //2. 날씨 정보에는 도시, 섭씨, 화씨 날씨 상태 //3. 5개의 버튼이 있다 (1개는 현재 위치, 4개는 다른 도시) //4. 로딩 스피너 기능 추가 2. weather api https://openweathermap.org/api Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, ..

[리팩터링 2판] 12.11 슈퍼클래스를 위임으로 바꾸기

1. 슈퍼클래스를 위임으로 바꾸어야 할 때 기능을 온전히 사용할 수 없고 어울리지 않은 클래스를 상속했을 때, 상속을 먼저 적용했다가 문제가 생겼을 때 객체 지향에서 상속이 혼란과 복잡도를 키울 수도 있다. 상속을 잘못 적용한 예로는 자바의 스택 클래스가 유명하다. 자바의 스택은 리스트를 상속하고 있는데, 데이터를 저장하고 조작하는 리스트의 기능을 재활용하겠다는 생각이 초래한 결과다. 최악은 리스트(슈퍼클래스)의 연산 중 스택(서브클래스)에는 적용되지 않는 게 많음에도 그 모든 연산이 스택 인터페이스에 그대로 노출된다는 것 리스코프 치환 원칙 : 서브 클래스는 슈퍼 클래스 자리를 대체하더라도 잘 동작해야 한다. 자바의 스택처럼, 슈퍼클래스의 기능들이 서브클래스에 어울리지 않는다면 그 기능들을 상속을 통해..

[디자인 패턴] Repository Pattern

https://youtu.be/x6C20zhZHw8 리팩토링 2판을 공부하다가 Repository 패턴이 나와서 따로 정리해보려고 한다. Repository 패턴이란 데이터와 상호작용하는 데 필요한 논리를 캡슐화하는데 중점을 둔 클래스 모음으로 정의할 수 있다. 더 구체적으로 설명하자면, 데이터 출처(로컬 DB, 서버 API 응답 등)와 관계 없이 동일 인터페이스로 데이터에 접속할 수 있도록 레포지토리를 만들어 관리하는 것을 말한다. 도입 배경 데이터를 사용하는 Domain에서는 비즈니스 로직에만 집중할 수 있으며 ViewModel은 데이터 출처를 신경 쓸 필요가 없고 여러 Repository를 공유하더라도 일관된 Interface를 통해 데이터의 일관성을 유지할 수 있다. 비즈니스 로직은 프로그램의 핵..

[React + Node 같이 때려잡기] (3) 리액트 클래스 컴포넌트, 라이프 사이클

0. 한눈에 비교하는 클래스 컴포넌트 vs 함수 컴포넌트 1. 클래스 컴포넌트 생성 shortCut : rcc (함수 컴퍼넌트 생성은 : rafce : react arrow function component export) import React, { Component } from 'react' export default class AppClass extends Component { render() { return ( AppClass ) } } function이 class로 바뀐 것을 볼 수 있다. AppClass.js : 클릭수를 보여주는 버튼 그리는 예제 import React, { Component } from 'react'; import './App.css'; export default class ..

[React + Node 같이 때려잡기] (2) 리액트 가위바위보 게임

리액트 가위바위보 게임 Box 2개 만들기(나 버전, 컴퓨터 버전) src 아래에 component 폴더 만들고 Box.js 만들어줌 컴포넌트 생성 단축키 : 컴포넌트 만드는 단축키 : rafce 단축키가 안나올 경우 설치 extention 컴포넌트 만들시 주의사항: 컴포넌트 이름은 반드시 대문자로 시작 리액트가 컴포넌트와 일반 HTML태그(,등..)을 구별하는 방법은 태그가 대문자로 시작하는지 여부이다 따라서 소문자로 시작을 하면 일반 HTML태그로 분류해버리기 때문에 반드시 첫 글자는 대문자로! App.js / Box.js / App.css 코드 (1) 유저가 선택할 수 있는 가위, 바위, 보 버튼 (2) 유저가 선택한 가위, 바위, 보 이미지가 보여지는 UI 세팅 (3) 컴퓨터 출력 가위, 바위, ..

[React + Node 같이 때려잡기] (1) 리액트의 컨셉 state

React! 는 값의 변화에 react 반응하다란 컨셉에 걸맞게 변수 값이 바뀔 때 마다 getElementById~ innerText~ 일일히 해주던걸 해주지 않아도 된다. 값이 변하면 UI도 자동으로 바꿔준다. -> State state가 변하면 UI가 변하게 한다. 터미널 프로젝트 만들고 싶은 폴더 생성 mkdir react-test cd react-test npx create-react-app 폴더명 나같은 경우는 npx create-react-app rsp 로 함 생성하는데 시간 좀 걸림. cd rsp code . 하면 바로 세팅된 비쥬얼 스튜디오 코드 프로젝트가 열린다. 1. App.js App.css 정리 App.css 파일 안에 있는 모든 내용 지워준다. 아래와 같이 정리해준다. impor..