'전체 글'에 해당되는 글 278건

  1. 2021.11.18 ATOMY
  2. 2021.11.16 React
  3. 2021.10.18 Promise & Aysnc & Await
  4. 2021.10.14 체크박스(checkbox) 커스터마이징해서 사용해보기
  5. 2021.10.14 리팩토링, Refactoring
  6. 2021.10.06 [링크] JavaScript 번들러로 본 조선시대 붕당의 이해
  7. 2021.10.01 NPM vs. Yarn
  8. 2021.09.28 Eslint
  9. 2021.09.28 Git 서버 - SSH 공개키 만들기 ~ SourceTree 연결
  10. 2021.09.15 개발 방법론

ATOMY

|

.env.development .env.production

-> 거기에 상수 정의해서 저기서 키로 불러와서 처리할 부분

->개발과 운영이 다르다거나, api 서버 url이 다를경우 운영 

 

orgDataInspector : atomy 용 데이터 가공을 위한 데이터 추출하는 모듈(data gathering)

 

'SOFTIN' 카테고리의 다른 글

ATOMY  (0) 2021.11.18
추가하면 좋다고 생각될 것들  (0) 2021.04.09
Grunt, lint  (0) 2020.11.12
0108 - Slack, Trello, Sourcetree 사용법  (0) 2020.01.08
Trackback 0 And Comment 0

React

|

create-react-app 을 이용한 개발환경 구축

React Development Tools // 크롬확장프로그램에서 설치 -> 개발자도구에 React탭을 활용하면 더 좋다~

 

JSX

JavaScript를 확장한 문법

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

가독성을 위해 여러줄로 나누면 좋다.

 

React의 중요파일

src/index.js // 메인 프로그램, html템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시

src/App.js // 컴포넌트를 정의하는 프로그램. 실제로 화면에 표시되는 내용 등은 여기에서 정의, JSX형태로 표시

public/index.html // index.js에 의해 랜더링된 결과가 표시

 

폴더구조

public // 완성된 js파일들이 출력될 곳

src // 정적 파일

package.json // 프로젝트가 의존하는 패키지들이 나열

package-lock.json // 패키지들이 내부적으로 사용하는 의존성 트리에 대한 정보

 

CSS사용법

css-module // 컴포넌트 별 스타일 적용시 충돌방지가능

css-in-js // styled-components 사용

scss // node-sass패키지 설치

 

Component와 Props와 State

컴포넌트는 JavaScript함수와 유사

함수 컴포넌트, 클래스형 컴포넌트가 있음

사용자 정의 컴포넌트는 항상 대문자로 시작해야함

Props는 읽기 전용, 컴포넌트를 외부에서 관리

State는 내부적으로 상태를 관리

 

함수형 vs. 클래스형 구분

[함수형 컴포넌트]에서는 인수에서 비구조화 할당으로 {value} 를 통해 받아옴

  - hook?

[클래스형 컴포넌트]에서는 this.props.value로 참조.

  - set, setState 사용

 

react-router-dom 사용법

Browser // history API를 사용해 URL과 UI를 동기화하는 라우터

Route // 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치 시 해당하는 컴포넌트, 함수를 랜더링

Link // to 속성에 설정된 링크(url)로 이동<Link to='/test1'>

Switch // 사용하지 않을 경우 매칭되는 모두를 랜더링 or 사용시 하나의 매칭되는 요소만 랜더링

 

요소, 생성과정

react는 가상DOM을 이용하며, 실제 DOM과 비교해 변경된 부분만 실제 DOM에 반영

최초의 render단계는 ReactDOM.render에 의해 수행

그 이후의 render단계는 setState가 수행, 비교해서 필요한 부분만 업데이트

 

생명주기

초기화단계

  - constructor

  - getDerivedStateFromProps

  - render

  - componentDidMount

 

 

createRef vs. useRef

createRef // class형 컴포넌트에서 ref를 잡아야하는 경우

useRef // 함수형 컴포넌트에서는 둘다 사용가능하지만 createRef를 사용할경우 리렌더링될때마다 ref값이 초기화되므로 useRef를 사용하자.

 

------------------------------------------------------

 

npm run start // VS Code 터미널창에서 개발서버 실행

 

localhost:3000 에서 화면 보기 가능

 

npm run build // 해당 react-app 폴더 내 build폴더를 생성(deploy대상)

 

Taskkill /IM node.exe /F // 켜진 서버 종료 : npm stop으로 안됨...

 

'React' 카테고리의 다른 글

React  (0) 2021.11.16
Trackback 0 And Comment 0

Promise & Aysnc & Await

|

Promise

- 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값

- 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체

- chaning을 통해 비동기 작업을 순차적으로 실행할 수 있음. (콜백과 비교하였을때 원하는만큼 .then을 호출할 수 있음)

- resolve, reject는 async/await 문법이 생긴후로 쓸모없어짐. -> Promise.then / catch가 거의 필요없음.

 

Async

- function() 앞에 async 키워드를 추가하면 await 키워드가 비동기 코드를 호출할 수 있게 해주는 함수

- 언제나 promise를 반환함.

 

Await

- async 함수 안에서만 동작

- 자바스크립트는 await 키워드를 만나면 Promise가 처리될때까지 기다림.

- 최상위 레벨 코드에선 사용할수 없으나, 익명 async 함수로 코드를 감싸면 사용가능.

'JavaScript' 카테고리의 다른 글

Promise & Aysnc & Await  (0) 2021.10.18
[링크] JavaScript 번들러로 본 조선시대 붕당의 이해  (0) 2021.10.06
디바운스(Debounce), 스로틀(Throttle)  (0) 2021.07.19
$.data  (0) 2021.05.07
Predicate  (0) 2021.05.06
jQuery를 효율적으로 작성하는 방법  (0) 2021.05.06
Trackback 0 And Comment 0

체크박스(checkbox) 커스터마이징해서 사용해보기

|
/*
 * 웹 페이지 전체 체크박스를 커스터마이징 - CSS
 */

// 기본 체크박스를 안보이게 처리
input[type="checkbox"] {
    display:none;
}

// 커스터마이징 기본(unchecked인 경우)
input[type="checkbox"] + label {
    cursor: pointer; // 기본체크박스는 없으므로 추가해줌
    padding-left: 23px; // 패딩값은 21~23px가 적당
    background-repeat: no-repeat;
    background-image: url('../images/sap_chk0.png'); // 체크박스 이미지는 라벨 태그의 배경 이미지로 표시
}

// checked인 경우
input[type="checkbox"]:checked + label {
    background-image: url('../images/sap_chk1.png');
}

// 사용불가인 경우
input[type="checkbox"]:disabled + label {
    background-image: url('../images/sap_chk2.png');
}

// 체크+사용불가인 경우
input[type="checkbox"]:checked:disabled + label {
    background-image: url('../images/sap_chk3.svg');
}

/*
 * 웹 페이지 전체 체크박스를 커스터마이징 - html
 */
 <input type="checkbox" name="simul-save" id="simul-save"><label for="simul-save">시뮬레이션 저장</label>
 // label for로 사용을 해야 정상적으로 보여진다.

전체 라벨 너비에서 padding 영역에 라벨 배경이미지가 삽입되는 구조

'HTML & CSS' 카테고리의 다른 글

체크박스(checkbox) 커스터마이징해서 사용해보기  (0) 2021.10.14
ol, ul, li, dl, dt, dd  (0) 2021.07.09
SVG, Canvas  (0) 2021.06.20
구글 이스터 에그, keyframes, animation  (0) 2021.06.20
SASS, SCSS  (0) 2021.06.02
효율적인 CSS 작성법  (0) 2021.06.02
Trackback 0 And Comment 0

리팩토링, Refactoring

|

- 가독성, 유지보수성을 높이기 위해 내부구조를 변경하는 것

- 기능을 유지하되, 지속적으로 관리하기 편하게 소스코드를 재작성하는 것

- 성능 최적화를 말하는 것은 아님...

- 유사한 내용이 3번이상 반복될때 / 새로운 기능을 추가할 때 / 코드리뷰를 할때 ~ 리팩토리을 고려해보도록 하자

'etc' 카테고리의 다른 글

리팩토링, Refactoring  (0) 2021.10.14
NPM vs. Yarn  (0) 2021.10.01
개발 방법론  (0) 2021.09.15
개발 7년차, 매니저 1일차  (0) 2021.08.18
오픈소스 라이선스  (0) 2021.07.30
웹 렌더링  (0) 2021.07.22
Trackback 0 And Comment 0

[링크] JavaScript 번들러로 본 조선시대 붕당의 이해

|

https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html

 

JavaScript 번들러로 본 조선시대 붕당의 이해 - 재그지그의 개발 블로그

JavaScript 모듈 표준화의 제안부터 현대 모듈 번들러 등장까지의 역사를 정리해봅니다.

wormwlrm.github.io

 

CommonJS

- 동기적인 특징, SSR

- require/module.exports 사용(module은 예약어, 모듈에 대한 정보를 가지고 있는 객체)

- module.exports는 빈객체를 참조, exports는 module.exports 참조, require는 module.exports를 리턴받음

AMD

- 비동기적인 특징, CSR

- define/require사용

UMD

- CommonJS + AMD 모두 사용가능

ESM

- 자바스크립트 공식 모듈 시스템, import/export방식 사용

 

+@

<< module import/export 관련 >>

https://ko.javascript.info/import-export

 

모듈 내보내고 가져오기

 

ko.javascript.info

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

 

import - JavaScript | MDN

The static import statement is used to import read only live bindings which are exported by another module.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

 

export - JavaScript | MDN

export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다.

developer.mozilla.org

 

'JavaScript' 카테고리의 다른 글

Promise & Aysnc & Await  (0) 2021.10.18
[링크] JavaScript 번들러로 본 조선시대 붕당의 이해  (0) 2021.10.06
디바운스(Debounce), 스로틀(Throttle)  (0) 2021.07.19
$.data  (0) 2021.05.07
Predicate  (0) 2021.05.06
jQuery를 효율적으로 작성하는 방법  (0) 2021.05.06
Trackback 0 And Comment 0

NPM vs. Yarn

|

https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f

'etc' 카테고리의 다른 글

리팩토링, Refactoring  (0) 2021.10.14
NPM vs. Yarn  (0) 2021.10.01
개발 방법론  (0) 2021.09.15
개발 7년차, 매니저 1일차  (0) 2021.08.18
오픈소스 라이선스  (0) 2021.07.30
웹 렌더링  (0) 2021.07.22
Trackback 0 And Comment 0

Eslint

|

위와 같이 체크표시를 하면
ESLint가 강제로 알림창에 표시되도록 할 수 있다.

'DevTools' 카테고리의 다른 글

Eslint  (0) 2021.09.28
Markdown 쓰는 방법  (0) 2021.03.15
이클립스 톰캣 연동  (0) 2020.04.20
SourceTree  (0) 2020.04.03
Tomcat context 설정  (0) 2020.04.02
UML - 관련 정리  (0) 2020.03.30
Trackback 0 And Comment 0

Git 서버 - SSH 공개키 만들기 ~ SourceTree 연결

|

git-scm.com/book/ko/v2/Git-%EC%84%9C%EB%B2%84-SSH-%EA%B3%B5%EA%B0%9C%ED%82%A4-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

Git - SSH 공개키 만들기

많은 Git 서버들은 SSH 공개키로 인증한다. 공개키를 사용하려면 일단 공개키를 만들어야 한다. 공개키를 만드는 방법은 모든 운영체제가 비슷하다. 먼저 키가 있는지부터 확인하자. 사용자의 SSH

git-scm.com

0. /.ssh 폴더 존재여부 확인 -> 존재하지 않을경우 1번 / 존재할 경우 2번

1. cmd 혹은 git bash에서 key generate

ssh-keygen 입력

 

 

2. 해당 폴더 접근

 

3. id_rsa.pub 파일을 vs code에서 open

혹은 cat ~/.ssh/id_rsa.pub 입력하면 클립보드에 ssh key가 복사됨

pub파일은 공개키 / 다른 파일은 개인키

4. 복사된 ssh-key를 해서 git계정 - settings - SSH AND GPG Keys  - New SSH Key 들어가서

ctrl+v 후, Add SSH Key

 

5. sourceTree 리모트 설정 변경(기존 저장소가 존재하는 경우)

https://github.com/ -> git@github.com: 로 변경

 

* 혹은 저장소를 새로 추가하는 경우

git에서 ssh 를 복사해서 소스트리에서 

소스 경로는 위에서 복사한 값 / 목적지 경로는 일반적으로 d:/work/softin-board 형식으로 저장해서 사용한다

6. 여기까지 진행한 후 git 저장소 clone이 안되는(인증문제) 경우 아래 * - 5. 로 이동한다.

 

* 소스트리에서 Git SSH key 를 파일(.ppk)로 저장하는법

1. 소스트리 > 도구 > SSH Key 생성 또는 불러오기

2. load를 누른 후 아까 생성되었던 id_rsa 파일(.pub 아님)을 불러온다.

3. 올바르게 불러오면 다음과 같이 보여지고 우측 하단의 Save private key를 눌러서 .ppk파일로 저장한다.

4. 저장된 .ppk파일은 백업용으로 잘 보관한다.

 

<< 인증이 안될 경우>>

5. Pageant (PuTTY authentication agent) > Add Keys를 실행해서 위에서 생성한 ppk 파일을 불러온다.

6. view keys를 하면 다음과 같이 정상적으로 key가 등록된 것을 확인할 수 있다.

 

<< 여기까지 진행했는데 소스트리를 재시작하거나 컴퓨터 재부팅 후 소스트리를 실행했을때 인증처리가 안된 경우 >>

SSH 클라이언트 설정 > SSH클라이언트 > OpenSSH 로 변경(OpenSSH로 변경시 id_rsa를 자동으로 찾아준다)

'Git' 카테고리의 다른 글

Git 서버 - SSH 공개키 만들기 ~ SourceTree 연결  (0) 2021.09.28
Git Bash 사용법(2)  (0) 2021.08.30
Git 사용법  (0) 2019.10.02
Trackback 0 And Comment 0

개발 방법론

|

시나리오 주도 개발(Scenario Driven Development)

'etc' 카테고리의 다른 글

리팩토링, Refactoring  (0) 2021.10.14
NPM vs. Yarn  (0) 2021.10.01
개발 방법론  (0) 2021.09.15
개발 7년차, 매니저 1일차  (0) 2021.08.18
오픈소스 라이선스  (0) 2021.07.30
웹 렌더링  (0) 2021.07.22
Trackback 0 And Comment 0
prev | 1 | 2 | 3 | 4 | ··· | 28 | next