처음 해보는 타입스크립트,...화이팅!

npx create-react-app project-typescript --template typescript
// project-typescript부분은 프로젝트 이름으로, 원하는 이름으로 변경하여 작성

터미널에서 이런 명령어를 작성해준 후 [enter]를 눌러준 후

Success! Created typescript-test at [파일 경로]/project-typescript
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd typescript-test
  npm start

Happy hacking!

이렇게 나오면 생성 성공!

주의할 점은 폴더 경로에 한글이 들어가면 나중에 사이드이펙트가 생길 수 있으니 왠만하면 영어로 만드는 것을 추천!

finder에서 경로 따라 들어가면 

잘 만들어진 것을 볼 수 있음!

참고해준 블로그를 보면서 eslint와 prettier도 추가 해줌,

실행했는데

Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21

위의 에러가 발생!

해당 블로그는 2020년도라 지금은 prettier가 extend로 바뀌어서 .eslintrc에 있는 prettier extends를 제거 해줌!

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: ['plugin:@typescript-eslint/recommended'],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    // 추후 .prettierrc.js 파일에서 설정해줄 예정
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

이렇게!

[00:00] - 스파르톤 첫 시작

0918 스파르톤 3기가 시작되었다. 사실 어제 여행을 갔다가 오늘 와서 밤을 샐수 있을 지 모르겠지만 그래도 최대한 깨어있어봐야지

스파르타 코딩클럽에서 제공하는 무료강의가 있기는 한데 사실 엄청 많은 종류가 있던건 아니라서 결제를 해서 들어야하나 했는데 스파르톤 전용 무료강의들이 제공되어서 그 강의를 듣기로 결심했다.

내가 들으려는 강의는 파이썬 데이터 분석이다.

사실 데이터 분석을 공부해보고 싶긴 했는데 일에 치이고 이것저것에 치여 미뤄둔 상태였는데 이렇게 강의가 있어서 기쁜마음으로 들어보려고 한다.

여기에서는

를 사용한다고 한다.

아직 뭐하는 툴인지 살펴보지는 못했는데 써보면 알겠지 .

지금 12인데 남은 6시간 파이팅...!!

[01:00] 

가장 처음으로 파이썬의 기본 자료형화 함수들에 대해 공부했다. list와 dictionary등 js에서도 같은 내용으로 사용하는 것들이 많아서 신기했다. 그래고 jupyter notebook를 사용해보았는데 확실해 python 기본 editor에 사용하는 것보다는 확실히 편하다. 특히 출력할 떼 print를 쓰지 않아도 되는점! 실행 순서를 나타내는 점! 

등 이 너무 편리하고 좋았다. 빨리 anaconda의 새로운 기능들도 찾아봐야겠다

• 파이썬 설치

brew install pyenv

pyenv install --list //설치 가능한 버전들

pyenv install 3.x

python --version //2.x버전으로 나올 경우

vi ~/.bashrc

alias python="python3"

source ~/.bashrc

python --version

pip3 list

• 장고 설치

cd documents

mkdir DjangoProject //폴더명은 마음대로

cd DjangoProject

python -m venv venv_web //파이썬 모듈 venv "python -m venv 가상환경명"

cd venv_web

cd bin

source ./activate

pip install django

python3 -m pip install --upgrade pip

cd DjangoProject/ //필수 X

mkdir project //폴더명은 마음대로

cd project

django-admin startproject config .

ls ->config manage.py 이것들이 뜬다면 다음 실행

cd config

ls ->__init__.py   asgi.py   settings.py   urls.py   wsgi.py 요것들 생기면 성공

cd ..

python manage.py runserver //서버 실행

한국어로 변경

site/config/settings.py

맨 마지막 즈음

LANGUAGE_CODE = 'ko-kr'

TIME_ZONE = 'Asia/Seoul'

로 수정

나중에 다시 보기 위해 작성됨

참고

https://imksh.com/90

https://curryyou.tistory.com/140

물론 이게 맞는 법인지는 모르겠지만 야매로...

developers.channel.io/docs/web-installation

여기에서 채널톡을 삽입할 수 있는 스크립트를 준비해 주었다..!

1. 리액트는 single-page-application이기 때문에 해당 class 스크립트를 ChannelService.js로 저장해준다

2. 페이지를 구성하는 파일에서 저 ChannelService.js 파일을 "ChannelService"이름으로 import 해준다

여기에서 function component를 사용한다면 useEffect, class 컴포넌트를 사용한다면 componentDidMount를 사용해서 채널톡을 삽입해준다.

기본적인 구조로는

ChannelService.boot({

  "pluginKey":  "본인의 플러그인 키"

});

이다. 저 플러그인 키는 설정>채팅 설치 및 설정>채널톡 버튼 설치에서 확인 가능하다

 그 후에 기본으로 지원하는 버튼이 아닌 본인이 원하는 버튼을 사용하고 싶을 경우,

      "customLauncherSelector": ".nav-channeltalk-button",
      "hideChannelButtonOnBoot": true

를 저 ChannelService.boot({}) 안에 추가해주면 된다.

첫번째 줄은 자신이 지정한 버튼의 클래스나 아이디를 추가해준다.

나는 class="nav-channeltalk-button"에 지정해줄거기 때문에 저렇게 넣어주었고

아이디로 지정할 경우 "customLauncherSelector": "#nav-channeltalk-button"로 해줄 수 있다.

두번째 줄은 기존의 채널톡 버튼을 가려주는 버튼이다. 저게 없을 경우에는 기존의 버튼과 내가 원하는 버튼이 둘다 보이는 경우가...

이렇게 해서 

ChannelService.boot({

  "pluginKey":  "본인의 플러그인 키",
  "customLauncherSelector": ".nav-channeltalk-button",
  "hideChannelButtonOnBoot": true

});

이렇게 된다..!

채널톡(특히 리액트)의 정보가 많이 없어 이렇게 끄적끄적 작성을 해 보았다...

오롯이 나를 위한 설명이기도 하기 때문에 부디 미래의 내가 잘 이해해주길...

상위 태그에 position:relative; 넣기

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

See the Pen wvWjMpK by ddddd (@hkpyhpxh) on CodePen.

물론

MARGIN :0 AUTO;

를 사용해도 큰 불편함은 없지만 가끔 왜인지 안될 때가 있다. 

안 되는 이유도 모르겠고 설정하는 게 이것저것 힘들다(사실 힘든건 아니지만 귀찮음)

위의 방법을 쓰게 되면 세세하게 원하는 대로 조정이 가능하다.

개발은 정해진 방법이 없다.

그저 자신이 쉽고 자신 있는 방법으로 하면 되는 거 아닐까 :->