치악산 복숭아

nginx 간단하게 정리하기

Juliie — Thu, 23 Jan 2025 22:15:27 +0900

https 설정을 위해 이것저것 찾아보다가 nginx에 대해 새롭게 알게 된 것을 잊어버리기 전에 정리해본다.

nginx란?

공식 홈페이지에서는 이렇게 소개하고 있다.

nginx는 HTTP 웹 서버, 리버스 프록시, 콘텐츠 캐시, 로드 밸런서, TCP/UDP 프록시 서버, 메일 프록시 서버입니다.

HTTP 웹 서버: HTTP 요청을 받아 웹 페이지를 클라이언트(브라우저)에게 제공함
- 클라이언트 ‍ <(상품 목록이랑 가격 정보 좀 주세요 ) (넵! )> 웹 서버
리버스 프록시: 클라이언트와 백엔드 서버의 중간에 위치. 클라이언트의 요청을 받아 백엔드 서버로 전달하고, 백엔드 서버의 응답을 클라이언트로 돌려줌
- 보안 강화와 로드 밸런싱을 위해 사용 됨, 보안 강화, 캐싱, SSL 종료 등
  - 당연한 얘기(?)지만 서버 1대 + 리버스 프록시만 쓰면 로드 밸런싱 효과는 없음, 이 경우엔 보안 강화, 캐싱, SSL 종료 등의 기능을 제공하는 역할을 수행
  - 클라이언트의 요청이 역방향 프록시에 도달하면, 역방향 프록시가 백엔드 서버의 실제 IP 주소를 숨기고 요청을 처리. -> 이클라이언트는 백엔드 서버의 실제 IP 주소를 알 수 없음. -> 공격자가 서버의 실제 IP 주소를 알 수 없어서 디도스 공격 등의 위험으로부터 보호할 수 있음
  - 프록시 / 리버스 프록시를 쉽게 설명해주는 영상
    - 위 영상의 댓글에 The forward proxy and reverse proxy are two very confusing names.You just need to know that, from your perspective, forward proxy is outbound proxy , and reverse proxy is inbound proxy. 라는 내용이 있는데, 이해에 도움이 됐다!
콘텐츠 캐시: 자주 요청되는 데이터를 임시 저장소에 보관하여 빠르게 제공
- 서버 부담을 줄이고 응답 시간을 단축할 수 있음
- 개선 정도의 측정은 캐시 히트 비율 (Cache Hit Ratio)로 가능 -> 캐시에서 요청된 데이터를 성공적으로 제공한 비율, 서버 부하와 반비례 관계
로드 밸런서: 여러 서버에 트래픽을 분산시켜 서버 과부하를 방지, 서버 충돌 or 지연 시간을 최소화 하는 등의 성능 최적화
- 다룰 수 있는 주요 트래픽은 다음과 같음
  1. HTTP/HTTPS 트래픽
  2. TCP 트래픽
  3. UDP 트래픽
  4. SMTP/IMAP/POP3 트래픽
    - 메일 트래픽
  5. 웹소켓 트래픽
- 리버스 프록시와 로드 밸런서의 차이를 다룬 아티클

TCP/UDP 프록시 서버: 클라이언트와 서버 간의 TCP/UDP 통신을 중계하는 서버
- 네트워크 트래픽 중계, 보안 강화 및 성능 향상을 위해 사용
- NAT, 비디오 스트리밍, DB 연결 ...
메일 프록시 서버: 이메일 전송과 수신을 중계하는 서버
- 이메일 보안과 스팸 필터링을 강화. 캐싱 등등

[시스템 프로그래밍 기초] C 포인터

Juliie — Sun, 26 Mar 2023 20:26:56 +0900

1. &: Reference operator

변수의 메모리 주소 값
- 메모리 주소는 컴퓨터를 실행할 때마다 바뀜

2. *: Dereference operator

포인터가 가리키는 메모리 주소에 저장된 값을 반환

3. Pointers

C 프로그램에서 메모리에 접근, 주소를 조작하기 위해 사용됨
데이터보다는 메모리 주소값을 갖고있는 특별한 변수 타입
- 이러한 변수들을 pointer variable 또는 간단하게 pointer 라고 칭함

// *를 어디에 붙이던 같은 뜻
int* pval;
int * pval;
char *pch;

data_type* variable_name;

main() {
    int a;
    int *b;
    
    a = 38; // (O)
    b = 40; // (X), 포인터로 선언했기 때문에 정수X, 주소값을 넣어야 함 
    *b = 40; // (O)
}

예제 1)

#include <stdio.h>

int main() {
  int val = 10;
  printf("Value: %d, Address: %d \n", val, &val);
    return 0;
}

출력 결과:

Value: 10

Address: 1295815448

예제 2)

#include <stdio.h>

int main(void) {
  int *pv;
  int num = 20;
  printf("[pv] Address: %d, Content: %d \n", pv, *pv);
  printf("[num] Address: %d, Value: %d \n\n", &num, num);
  pv = &num;
  printf("[pv] Address: %d, Content: %d \n\n", pv, *pv);
  num = 11;
  printf("[pv] Address: %d, Content: %d \n", pv, *pv);
  *pv = 2;
  printf("[num] Address: %d, Value: %d \n", &num, num);
  return 0;
}

출력 결과:

[pv] Address: 2040457912, Content: 0
[num] Address: 2040457596, Value: 20

[pv] Address: 2040457596, Content: 20

[pv] Address: 2040457596, Content: 11
[num] Address: 2040457596, Value: 2

예제 3)

#include <stdio.h>

int main(void) {
  char c[4] = {'a', 'b', 'c', 'd'};
  int d[4] = {5, 6, 7, 8};
  int i;
  for(i = 0; i < 4; i++) {
    printf("Address of c[%d] = %x\n", i, &c[i]);
    printf("&c[%d] = %x, (d + %d) = %x\n",i, &c[i], i, (c + i));
    printf("c[%d] = %d, *(c + %d) = %d\n", i, c[i], i, *(c + i));
  }
  for(i = 0; i < 4; i++) {
    printf("Address of d[%d] = %x\n", i, &d[i]);
    printf("&d[%d] = %x, (d + %d) = %x\n",i, &d[i], i, (d + i));
    printf("d[%d] = %d, *(d + %d) = %d\n", i, d[i], i, *(d + i));
  }
  return 0;
}

배열의 주소값을 요청하면 대표 번지수가 리턴된다

출력 결과:

Address of c[0] = 72cb5c
&c[0] = 72cb5c, (d + 0) = 72cb5c
c[0] = 97, *(c + 0) = 97
Address of c[1] = 72cb5d
&c[1] = 72cb5d, (d + 1) = 72cb5d
c[1] = 98, *(c + 1) = 98
Address of c[2] = 72cb5e
&c[2] = 72cb5e, (d + 2) = 72cb5e
c[2] = 99, *(c + 2) = 99
Address of c[3] = 72cb5f
&c[3] = 72cb5f, (d + 3) = 72cb5f
c[3] = 100, *(c + 3) = 100
Address of d[0] = 72cb60
&d[0] = 72cb60, (d + 0) = 72cb60
d[0] = 5, *(d + 0) = 5
Address of d[1] = 72cb64
&d[1] = 72cb64, (d + 1) = 72cb64
d[1] = 6, *(d + 1) = 6
Address of d[2] = 72cb68
&d[2] = 72cb68, (d + 2) = 72cb68
d[2] = 7, *(d + 2) = 7
Address of d[3] = 72cb6c
&d[3] = 72cb6c, (d + 3) = 72cb6c
d[3] = 8, *(d + 3) = 8

예제 4)

#include <stdio.h>

int main(void) {
  int i, val[4], sum = 0;
  printf("Enter 4 numbers: \n");
  for(i = 0; i < 4; ++i) {
    scanf("%d", (val + i));
    sum += *(val + i);
  }
  printf("Sum = %d", sum);

  return 0;
}

val을 배열 자체로 접근한 뒤 int 값을 더하는 방법으로 변수의 메모리 주소값에 접근
scanf는 메모리 주소가 필요한 함수
참고 블로그

[C언어] scanf()함수에서 &(ampersand)를 쓰는 이유

[&(ampersand)에 대하여] c언어를 시작하면 printf에서는 &를 안썼는데, scanf에서는 &를 쓸때가 있고, 안쓸때가 있다.&의 역할은 무엇이며, &는 언제 쓰는 것일까. &(ampersand)의 역할- &(ampersand(앰퍼샌드))

security-nanglam.tistory.com

예제 5)

#include <stdio.h>

void swap(int *a, int *b);

int main() {
  int num1 = 5, num2 = 10;
  printf("Number1 = %d\n", num1);
  printf("Number2 = %d\n", num2);

  swap(&num1, &num2);
  
  printf("Number1 = %d\n", num1);
  printf("Number2 = %d\n", num2);
  
  return 0;
}

void swap(int *a, int *b) {
  int temp;
  temp = *a;
  *a = *b;
  *b = temp;
}

왜 직접 값을 안바꾸고 주소값을 넘겨서 바꿀까?
1) 값은 한 개 밖에 리턴되지 않음
2) 로컬함수에서 계산한 값이 메인 함수로 돌아왔을 때 남아있다는 보장이 없음

출력 결과:

Number1 = 5
Number2 = 10
Number1 = 10
Number2 = 5

[시스템 프로그래밍 기초] vi 명령어 정리

Juliie — Sun, 26 Mar 2023 16:05:07 +0900

1. vi 시작하기

vi filename

filename의 이름을 가진 파일이 존재한다면 open, 없다면 create 한다
리눅스, 유닉스에는 확장자라는 개념이 없음(r w x 개념만 있다)

2. vi 실행모드의 종류

(1) Command mode (명령 모드)

문자열을 검색할 수 있다
에디팅 모드에서 esc키를 눌러서 커맨드 모드로 진입할 수 있다

(2) Editing mode (수정 모드)

문자를 삽입, 수정할 수 있다
커맨드 모드에서 `a`(append), `i`(insert) 문자를 입력해서 에디팅 모드로 진입할 수 있다

3. vi 커맨드 모드에서의 명령어

(1) vi 종료하기

:q	에디터 종료
:q!	파일의 변경사항을 저장하지 않고 종료 ( ↔️ :wq)

:q의 경우변경사항이 있는데 이 명령어를 사용하면 아래의 에러메시지가 표출된다

(2) vi 변경사항 저장하기

:wq	변경사항 저장 및 종료
:w	변경사항 저장 (종료 X)

(3) vi 커서 이동하기

h	왼쪽으로 한 칸 이동
l	오른쪽으로 한 칸 이동
j	한 줄 아래로 이동
k	한 줄 위로 이동

맥os의 터미널은 영문자가 아닌 방향키로도 이동 가능하던데 리눅스는 다른걸까?

(4) vi 문자 지우기

x	커서가 가리키는 문자 한 개 삭제, (2x는 문자 두개 삭제...nx로 응용 가능)
u	실행 취소
dd	커서가 있는 라인 전부 삭제 (ndd로 응용 가능)
s	해당 문자 치환
d^	커서가 위치한 라인의 첫 문자열 ~ 커서 아래 문자열 직전까지 삭제 (사라진 문자열은 클립보드로 들어간다. 잘라내기 느낌?)
d$	커서 아래 문자열 ~ 커서가 위치한 라인의 끝 문자열까지 삭제
dw	커서가 위치한 문자열 삭제
p	현재 문자열 아래 붙여넣기
yy	한 줄 복사, (ny로 응용 가능)

(5) vi 커서 점프하기

:lineNumber	파일의 특정한 lineNumber번째 라인으로 이동
^f	다음 페이지로 이동
^b	이전 페이지로 이동
w	다음 단어로 커서 이동, (nb로 응용 가능)
b	이전 단어로 커서 이동
nG	n번째 라인으로 커서 이동

[Javascript] currentTarget vs target

Juliie — Mon, 20 Mar 2023 18:43:30 +0900

쓸 때마다 잊어버려서 기억하려고 메모하는 포스팅...

currentTarget : 이벤트를 등록한 요소

target : 이벤트가 발생한 요소

콘솔에 target을 찍어보면 클릭이 일어난 요소가 출력되지만

// 클릭한 각각의 요소가
<img src="https://uploads.codesandbox.io/uploads/user/1ca04d5e-d300-46f8-a6e0-13c8b8a087b1/qO3C-easter-bunny-24222955.jpeg" style="width: 200px;"></img>

// 출력되는 모습
<p>Good evening !</p>

currentTarget은 이벤트가 등록된 최상단 요소 button이 출력된다

<button class="App">
<p>Good evening !</p>
<img src="https://uploads.codesandbox.io/uploads/user/1ca04d5e-d300-46f8-a6e0-13c8b8a087b1/qO3C-easter-bunny-24222955.jpeg" style="width: 200px;"></img>
</button>

[React] svg에 스타일 입히기

Juliie — Mon, 11 Jul 2022 16:12:42 +0900

나는 보통 svg 파일을 쓸때 한꺼번에 import하는 방식으로 svg 파일을 가져왔다( ↓ 이런 방식)

import LogoImage from 'logo.svg'

그러다보니 svg의 스타일을 동적으로 설정할 수 없어서 각각의 이미지 파일을 생성해서 쓰는 등 매우 비효율적인 방식으로 asset을 관리하고 있었다

svg의 장점을 못살려서 고민이 많았는데 svg를 리액트 컴포넌트처럼 사용하는 방법을 알게됐다

이 방법을 사용하면 svg의 자식 태그들에 각각 스타일을 줄 수 있어서 효율적으로 관리할 수 있음!!

(next에서는 이 방법은 안되고 따로 라이브러리를 설치해야 한다고 함)

import { ReactComponent as LogoImage } from 'logo.svg'

이제 svg에 직접 스타일을 줄 수 있다!

svg 코드에서 바꾸고자 하는 요소를 "current" 로 바꿔주거나 아예 비우면 svg 태그의 props로 값을 넘겨서 커스텀 가능

이 방법을 사용해보니 살짝 스타일 코드가 복잡해질 수 있다고 느꼈지만 ... 하나의 파일로 깨짐 없는 여러 이미지를 만들 수 있다는 장점은 참을 수 없었음

그리고 내가 엄청나게 좋아하는 웹 svg 뷰어 사이트

https://www.svgviewer.dev/

SVG Viewer

Copy

www.svgviewer.dev

이걸로 svg 요소 확인하면 넘모 편함

[Git] 원격/로컬 태그 삭제하기

Juliie — Mon, 11 Jul 2022 15:49:23 +0900

우리 팀은 rebase로 커밋 이력을 관리하기 때문에 태깅이 중요하다

rebase는 수정 사항에 대한 정보는 얻을수 있지만 어느 시점에 어떤 브랜치가 머지되었는지는 알 수 없기 때문!

그래서 메인 브랜치에 머지하고 나면 꼬옥...태그도 달아줘야 하는데 가끔씩 태그를 이상한 곳에 잘못 다는 경우가 있어서 정리해둔다 ...

1. 로컬 태그 삭제하기

git tag -d 태그이름

2. 원격 태그 삭제하기

git push origin :태그이름
예) git push origin :v1.19.3

CRA 없이 리액트 개발환경 구축하기(feat. typescript, webpack, babel)

Juliie — Tue, 5 Apr 2022 00:45:34 +0900

1. 개발이 진행될 폴더를 만들어준다

cd 폴더를 만드려는 경로
mkdir 폴더 이름

2. npm init으로 package.json을 생성해서 초기화 해준다

(y 옵션을 붙여주면 별다른 질문(version, description ...) 없이 생성된다

npm init [-y]

3. 리액트를 설치한다

npm i react react-dom

4. 프로젝트의 시작점이 될 파일 위치를 잡는다

나의 경우는 프로젝트 루트 경로에 index.html을 생성한 뒤, src 폴더를 만들어서 그 안에 App.tsx와 index.tsx 파일을 생성했다

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typescript practice</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

// src/App.tsx

function App() {
  const test = (str: string) => {
    return str;
  };
  return <div>{test("hello")}</div>;
}
export default App;

// src/index.tsx

import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

5. typescript 설치 및 환경 설정

npm i -D typescript @types/react @types/react-dom

여기서 잠깐 !

왜 -D 옵션을 붙이지 ?
-D 를 안붙이면 -> 그냥 dependencies에 포함: 여기는 프로젝트를 실행시키는데 필수적인 라이브러리들이 포함되는 곳
-D를 붙여서 설치하면 -> devDependencies에 포함: 여기는 현재 프로젝트를 개발하고 테스트하는데 사용되지만 실제 런타임에서는 필요없는 라이브러리들이 포함되는 곳

라이브러리 앞에 붙은 @types는 뭐지 ?
@어쩌구 -> scoped packages
npm 라이브러리 중 타입 선언이 포함되어 있지 않는 것들도 있는데(ex: 리액트), definitelyTyped에서 유지보수 되고 있는 타입 정의가 있는지 확인할 수 있다. 만약 있다면 @types 를 붙여서 npm으로 설치가 가능하다. @types 라이브러리는 타입 정의만 있기 때문에(구현 x) 원본 라이브러리도 설치해줘야함!

--save 옵션을 따로 붙여주는 사람들도 있던데 ?
npm5 부터는 --save 옵션을 기본으로 적용되어서 안 써줘도 되지만! 예전에는 이 옵션을 안 써주면 node_modules에는 들어가지만 package.json의 dependencies에는 추가가 안됐다고 한다 (22.04.02 오늘의 나는 npm 7.5.4 버전을 쓰고 있다)

설치가 끝났다면 tsconfig.json 파일을 생성해서 typescript 환경 설정을 해준다

//tsconfig.json
{
  "exclude": ["node_modules"], // 1
  "include": ["**/*.ts", "**/*.tsx"], // 2
  "compilerOptions": { // 3
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "jsx": "react-jsx",
    "esModuleInterop": true
  }
}

1) exclude: 컴파일 제외할 대상 지정

2) include: 컴파일 할 대상 지정

3) compileOptions: 컴파일 할때 옵션들을 세세하게 정할 수 있음

target: 어떤 JS 버전으로 컴파일할지
module: 어떤 모듈 시스템을 사용할지
noImplicitAny: any 타입 허용 X
strictNullChecks: undefined 또는 null값 참조 방지
jsx: jsx 파일이 어떻게 만들어질지
esModuleInterop: 파일 가져오기에 대한 CommonJS와 ES 모듈 간의 상호 운용성을 제공

* esModuleInterop에 대해 조금 이해가 간 stackoverflow 답변 링크

https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file

Understanding esModuleInterop in tsconfig file

I was checking out someone .tsconfig file and there I spotted --esModuleInterop This is his .tsconfig file { "compilerOptions": { "moduleResolution": "node", ...

stackoverflow.com

5. webpack 설치 및 환경 설정

npm i -D webpack webpack-cli webpack-dev-server babel-loader html-webpack-plugin

webpack.config.js 파일을 생성해서 환경 설정을 진행해준다

//webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");

module.exports = {
  mode: "development", // 1
  entry: "./src/index.tsx", // 2

  resolve: { // 3
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },

  module: { // 4
    rules: [
      {
        test: /\.tsx?$/,
        use: ["babel-loader"],
      },
    ],
  },

  output: { // 5
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },

  plugins: [ // 6
    new webpack.ProvidePlugin({
      React: "react",
    }),
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

1) mode: 번들링 환경을 설정, 이에 따라 번들링 결과물의 파일 크기가 달라진다

2) entry: 번들링의 시작점이 될 파일

3) resolve:

extensions: 나열된 확장자를 순서대로 해석, extensions을 설정해주면 import 할때 확장자 생략이 가능하다!
modules: 절대경로 설정 가능

4) module: 자바스크립트로 작성되지 않은 파일들을 변환시켜 준다 - test 정규식의 조건에 맞는 파일들이 use에 나열된 로더들에 의해 변환되며, 만약 한개만 있다면 loader로 대체 가능 !

5) output: 번들링 결과물이 저장될 위치 지정

6) plugin: 번들링된 결과물을 처리

html-webpack-plugin: html을 동적으로 생성, html 파일에서 js 파일을 불러오는 부분이 빠져도 된다
provide-plugin: 자주 쓰이는 모듈을 등록해놓으면 import 하지 않아도 인식한다
더 많은 공식 플러그인은 여기

6. babel 설치 및 환경 설정

npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

babel은 최신 문법을 지원하지 않는 브라우저들에 대응하기 위해 사용하는 라이브러리다. 최신문법을 사용해서 특정 브라우저가 이해하지 못하는 부분을 babel이 이해할 수 있도록 변환해주는 것!

babel의 빌드 과정 중 실제 코드 변환 작업들은 플러그인들이 하는데, 이 플러그인들은 기능별로 분리되어 있어서 하나하나씩 설정해주기에는 넘모 번거롭다 (let, arrow function ... 등등 아주 많다)

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

그래서 사용하려는 목적에 맞는 플러그인들을 모아놔서 한 번에 설정할 수 있도록 한게 preset이다

난 preset을 사용해서 프로젝트 루트 경로에 babel 환경설정 파일(.babelrc)을 만들어줬다

// .babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

여기까지 진행했다면 파일 구조가 이렇게 구성되어 있을 것이다 ⬇️

이후 프로젝트 폴더에서 아래 명령어를 실행시켜주면 ~~~ !

별도의 설정을 하지 않았다면 http://localhost:8080/ 에서 내 프로젝트를 볼 수 있다

npx webpack-dev-server --mode development

package.json의 scripts에 등록해놓으면 더 편하게 사용할 수 있음 !

덩그러니...

CRA 없이 개발환경 구축하기 끝 ~

[error] Cannot use JSX unless the '--jsx' flag is provided.

Juliie — Mon, 4 Apr 2022 02:23:43 +0900

tsconfig 설정이 제대로 되지 않아서 발생한 문제였다!

tsconfig.json 파일의 compiledOptions에

"jsx": "react"

추가해서 해결 완료! 경우에 따라서 vscode를 재실행하는 과정이 필요할 수 있다

https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided?rq=1

Cannot use JSX unless the '--jsx' flag is provided

I have looked around a bit for a solution to this problem. All of them suggest adding "jsx": "react" to your tsconfig.json file. Which I have done. Another one was to add "include: []", which I hav...

stackoverflow.com

[엘리스 AI트랙] 엘리스 3기 마지막 팀 프로젝트 후기

Juliie — Sun, 13 Mar 2022 19:32:40 +0900

오늘은 엘리스의 마지막 프로젝트 발표가 있었다 !

사실 이번 프로젝트는 저번 두번째 프로젝트보다는 훨씬 시간적, 마음적으로 여유있게 진행했다

이게 완성도만 생각하면 좋은 방향이었는지는 잘 모르겠지만... 저번 프로젝트가 끝나고 몇주 동안 코딩 관련해서는 아무것도 보고싶지 않았었던 기억이 있어서...:) 생활 루틴을 잡는데에는 훨씬 나을거 같긴하다 앞으로 이 균형을 어떻게 잡느냐가 중요할것 같지만...!

마로니에의 메인 페이지

우리 팀의 주제는 양주 라벨 검색 + 칵테일 레시피 공유 서비스였다 서비스 특성 상 모바일로 먼저 진행했는데 중간 발표때 이 부분은 잘 했다고 피드백 받아서 기분이 좋았음 ☺️☺️ 하지만 끝으로 갈 수록 모바일용 페이지는 신경 쓸 부분이 많아서 힘들었다는 것... for 데스크탑 + 크롬 브라우저에서만 작업하던 나한테는 꽤나 도전적인 과제였다는 것...

그래도 전에 애먹었던 배포는 백엔드 분들이 힘써줘서 쉽게 할 수 있었다! 특히 deploy 브랜치 올리자마자 자동으로 배포되는건 너무 편해서 기절할뻔

그리고 나중으로 갈수록 잔버그가 조금씩 나와서 마음이 참 아팠다 흑흑 VM이 31일까지 살아있대서 이거는 계속해서 고쳐보는걸로

이번 프로젝트를 하면서 느낀 점 ⬇️

1) 그때그때 메모 하자

저번에 느꼈던 문서화의 중요성이랑 결이 좀 비슷하지만...극강의 P로써 투두리스트 작성조차 귀찮아하는 나에게 이번 프로젝트에서 남은건 짧은 메모들과 가끔 올렸던 위키들뿐... 기록을 안했던건 고대로 머리에서 날아가버렸다 그래도 앞으로 포스팅할거 메모해놔서 그거는 좀 다행인듯 헤헤（⌒▽⌒)ゞ

2월 25일의 나

3월 11일의 나

2) 기초의 중요성

코치님이 항상 강조하셨던 흰 도화지에 그린다고 생각하고 리액트 없이 순수 html, css만 써서 UI 그려보기! 기초 지식이 탄탄하면 얼마나 도움이 되는지 까먹고 있던 나에게 큰 깨달음을 주셨다 ‍♀️ 입사까지 한달 정도 남았는데 그 동안 html, css, javascript로 뭔가 만들어봐야겠다‼️(<-선언적 프로그래밍)

3) grid 조아

면접에서 무슨 태그 좋아하냐는 질문에 flex 정말 좋아합니다!!!^ㅇ^ 라고 당당히 말했던 나... grid 써봤냐는 추가 질문에 숙연해졌었는데...이번에 wishlist 페이지 구현하면서 써보게 되었다 그리고 신세계를 맛봄 진작 공부해서 써볼걸...옛날옛날 처음 웹 공부하면서 table로 이케저케 구현하려고 낑낑댔던걸 생각하니 참...많은 생각이 들었다...ㅎ 아모튼 그리드 태그 짱

4) typescript를 배우고 싶어졌다

이것도 코치님이 정말정말 많이 강조하신것 중 하나ㅎㅅㅎ 사실 난 타입스크립트에 대해서 그렇게 큰 장점이 있나?싶어서 나중에 배워야지 하고 미뤄놓고만 있었는데 배워야겠다는 생각이...확실히 예비 오류를 줄일 수 있다는 점은 매력적인것 같다

5) 프로젝트에 대한 애정

이거는 말이 좀 애매한데...애정을 갖고 프로젝트에 임하는 것, 어떻게 보면 서비스에 대한 책임감이라고 해야할까 그런 마음가짐을 가지는 것이 중요하다고 느꼈다. 이런것들이 모여서 더 좋은 사용자 경험, 더 탄탄한 서비스를 만들 수 있지 않을까... 써놓고보니 정말 당연한 얘기지만 아무튼 그렇기 때문에 앞으로도 회사에서 내가 맡을 부분에서 애정을 갖고 일해야지 라는 생각!

자괴감도 어려움도 많이 느꼈던 5주였다

하지만 정말 확실하게 말할 수 있는건 5주 전의 나보다는 심리적, 실력적으로 조금이나마 나아졌다는 점....~~!

아휴 증말 고생해따 이제 리팩토링하러 가자^-^

[error] the server responded with a status of 405 (Not Allowed)

Juliie — Sun, 30 Jan 2022 22:55:34 +0900

the server responded with a status of 405 (Not Allowed)

문제 발생 상황

팀프로젝트 배포를 마무리하면서 리액트에서 특정 페이지 접속시 405 에러가 발생했다

프론트엔드, 백엔드 모두 aws에서 배포 진행중이었고 각자 배포하는 방식이었음!

구글링 결과 문제의 원인

1. 프론트엔드와 백엔드의 api 메서드 방식이 서로 달라서 발생한다고 한다

2. 정적페이지로 POST 요청을 했기 때문에 (<- 내가 해당했다)

내 경우에는 api 메서드를 서버 주소로 안하고 프론트엔드 주소로 호출해서 그런거였다

머쓱한 웃음 ㅎ...ㅎ

https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteEndpoints.html

Website endpoints - Amazon Simple Storage Service

To request a specific object that is stored at the root level in the bucket, use the following URL structure. http://bucket-name.s3-website.Region.amazonaws.com/object-name For example, the following URL requests the photo.jpg object that is stored at the

docs.aws.amazon.com

공식 문서에서도 나와있는 Supports only GET and HEAD requests on objects ...

아무튼 이를 계기로 환경변수 설정의 중요성을 깨닫게 되었다

[엘리스 AI트랙] 13-02-01 Numpy

Juliie — Sun, 16 Jan 2022 18:06:15 +0900

1. Numpy란?

파이썬에서 사용되는 과학 컴퓨팅용 라이브러리
파이썬 언어에서 기본으로 지원하지 않는 행렬과 같은 데이터 구조 지원 및 수학/과학 계산 함수 포함

행렬이 왜 필요한가? -> 머신러닝에서 대부분의 데이터는 행렬로 표현되기 때문

2. 행렬 만들기

행렬

import numpy as np

A = np.array([[1, 2], [3, 4]])

print(A)
// [[1 2]
//  [3 4]]

이렇게 만들어진 행렬은 곱셈, 덧셈, 뺄셈이 가능

// 곱셈
print(A * 3)
// [[3 6]
//  [9 12]]

// 덧셈
print(A + A)
// [[2 4]
//  [6 8]]

// 뺄셈
print(A - A)
// [[0 0]
//  [0 0]]

print(A ** 2)
// [[1 4]
//  [9 16]]

print(3 ** A)
// [[3 9]
//  [27 81]]

print(A * A)
// [[1 4]
//  [9 16]]

3. dot 함수

np.dot(x, y)는 x * y와 다르다 !
2차원 * 2차원의 행렬곱으로 예시를 들어보자면 계산방법은
해당 행의 1번째 숫자 * 해당 열의 1번째 숫자 + 해당 행의 2번째 숫자 * 해당 열의 2번째 숫자가 된다

x = np.array([[1, 2], [3, 4]])
y = np.array([[3, 4], [3, 2]])

print(np.dot(x, y))
// [[9 8]
//  [21 20]]

print(x * y)
// [[3 8]
//  [9 8]]

4. 비교 연산

a = np.array([1, 2, 3, 4])
b = np.array([4, 2, 2, 4])

print(a == b)
// [False, True, False, True]

print(a > b)
// [False, False, True, False]

5. 논리 연산

a = np.array([1, 1, 0, 0], dtype=bool)
b = np.array([1, 0, 1, 0], dtype=bool)

print(np.logical_or(a, b))
// [True, True, True, False]

print(np.logical_and(a, b))
// [True, False, False, False]

6. Reductions

argmin: 최소값의 인덱스를 반환
argmax: 최대값의 인덱스를 반환

a = np.array([1, 2, 3, 4, 5])

print(a.min())
// 1
print(a.max())
// 5

print(a.argmin())
// 0
print(a.argmax())
// 4

7. Logical Reductions

all: Array 내의 모든 값이 True인가?
any: Array 내의 값이 하나라도 True인가?

a = np.array([True, True, True])
b = np.array([True, True, False])

np.all(a) //True
np.all(b) //False

np.any(a) //True
np.any(b) //True

8. Statistical Reductions

np.mean(x): 평균값
np.median(x): 중간값
np.std(x): 표준편차

x = np.array([1, 2, 3, 1])

print(np.mean(x)) // 1.75
print(np.median(x)) // 1.5
print(np.std(x)) // 0.82915619758884995

[엘리스 AI트랙] 엘리스 3기 첫 팀 프로젝트 후기

Juliie — Wed, 12 Jan 2022 04:57:27 +0900

영화밭

이제야 여유가 좀 생겨서 써보는 엘리스 3기의 두번째 프로젝트이자 첫 "팀" 프로젝트 후기!

총 3주에 걸쳐서 진행됐는데 마감일에 가까워질수록 하루가 36시간이였으면 하는 생각이 정말 절실하게 들었다...지이이인짜 바빴다...

지난 개인 프로젝트때도 마감하고나서 아휴 나 정말 그래도 열심히 했다!ㅠㅡㅠ 이 이상으로는 정말 못하겠다! 싶은 마음이였는데...그렇다 난 그 이상도 할 수 있는 사람이었던 것이었다..

실질적 코딩 기간은 2주+a 되는듯 하다(첫 커밋)

아무튼 나의 팀프로젝트 수행 과정을 되돌아보면서 느낀점을 적어보자면

1. 어느 부분이 부족한지 조금이나마 알게 되었다

주로 느낀 부분은 객체, 리액트의 생명주기, 그리고 hook이 실행되는 과정...이거는 다음 팀프로젝트 시작하기전에 어서 제대로 정리해놔야지

2. (내가 느낀) 같이 일하고 싶은 동료의 특징

의견을 적극적으로 낸다
정보나 코드를 넘길때 최대한 버그나 수정할 부분이 없게 준다

이 두개를 왜 격하게 느꼈냐면...내가 정반대의 특징인 사람이었기 때문...^___^

나랑 협업하신 분들은 나랑 일하는 과정이 즐거우셨을까? 물어본다면 난 자신이 없다 ㅋㅋㅋㅠㅠ

최대한 뇌에 힘주고 일해도 2n년을 얼레벌레 인간으로 살아온 사람...흑흑 죄송합니다

전 바보예요

3. 문서화를 하자

api 문서나 해야할 todo 기능을 쭉 정렬해 놓으면 한눈에 볼 수 있을것 같아서 좋을 것 같았다

api 문서는 맨날 이거는 이건가요? 여쭤보기가 너무 죄송했다 다른 팀프로젝트를 하게 된다면 구글문서로 실시간 공유하면서 적어나가면 좋을 것 같다는 생각을 함!

todo는 내가 얼만큼 했는지, 앞으로 얼만큼 남았는지 파악하기 쉬워져서 시간 관리 하기에 좋을것 같다...이번에는 시간 관리에 살짝 실패한 느낌이 없잖아 있기 때문에...

배포를 이제야 한 사람이 있다?!(0112 04:01)

문서화의 중요성을 느낀건 아무래도 역시 결정적인건 팀장님의 미친듯한 문서화 능력인듯하다...진짜 인간 노션...

이렇게 야무지게 노션을 쓰는 사람을 본적이 없어서 나중에 회의 내용 찾으러 다닐때마다 감탄했다ㅋㅋㅋ저도 노력할게요...

4. 배포는 미리미리 시도해보자

엄청난 삽질끝에 겨우겨우 배포 성공하고 느낀 점...ㅎㅎ 엘리스에서 준 azure 도메인은 결국 실패해서 대신 aws로 어찌저찌 했는데 여기까지 오는데 엄청난 시간이 걸렸다ㅋㅋㅋㅋ다음 프로젝트는 미리 배포 연습 좀 해봐야겠다ㅠㅠ 그래도 배포 경험치 쌓여서 만족...좋은게 좋은거다...트러블 슈팅도 어서 정리하자아아아

5. 개발자 도구...너무 좋아!!

전까지는 콘솔창이나 elements탭, 그리고 가아아아끔 스토리지때문에 application 탭만 썼는데 이번에 코치님이랑 오류 고치다가 network탭의 신세계를 맛봤다... 그리고 elements 탭에서 flex 태그 있으면 해당 엘리먼트가 차지하는 공간 보여주는데 너무 좋았다...!! 물론 flex 태그도 이번에야 본격적으로 쓰게 된거지만 아무튼 더 잘 활용할 수 있게 된거같아서 좋았음!

6. 좋은 UI는 뭘까

전체적인 디자인을 맡으면서 이 부분에 대해서 고민할 기회가 생겼다 (물론 다른 기능 구현에 밀려서 많이는 못했지만 ) 좋은 UI...좋은 디자인...이 부분에 대해서도 많이 생각해봐야 할것 같다

멋진 결과물, 그리고 첫 팀프로젝트가 좋은 기억으로 남을 수 있게 해준 13팀 팀원분들에게 너무 감사하다

그리고 내가 공부에 온전히 시간을 쏟을 수 있게 도와준 가족들 + 이슬쓰 고맙습니다

라부

[프로그래머스] 로또의 최고 순위와 최저 순위 - Javascript, python

Juliie — Wed, 8 Dec 2021 00:58:01 +0900

링크

programmers.co.kr/learn/courses/30/lessons/77484

코딩테스트 연습 - 로또의 최고 순위와 최저 순위

로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 1 순위 당첨 내용 1 6개 번호가 모두 일치 2 5개 번호

programmers.co.kr

문제 설명

로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다.

순위당첨 내용

1	6개 번호가 모두 일치
2	5개 번호가 일치
3	4개 번호가 일치
4	3개 번호가 일치
5	2개 번호가 일치
6(낙첨)	그 외

로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다.
알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니다. 당첨 번호 6개가 31, 10, 45, 1, 6, 19라면, 당첨 가능한 최고 순위와 최저 순위의 한 예는 아래와 같습니다.

당첨 번호	31	10	45	1	6	19	결과
최고 순위 번호	31	0→10	44	1	0→6	25	4개 번호 일치, 3등
최저 순위 번호	31	0→11	44	1	0→7	25	2개 번호 일치, 5등

순서와 상관없이, 구매한 로또에 당첨 번호와 일치하는 번호가 있으면 맞힌 걸로 인정됩니다.
알아볼 수 없는 두 개의 번호를 각각 10, 6이라고 가정하면 3등에 당첨될 수 있습니다.
- 3등을 만드는 다른 방법들도 존재합니다. 하지만, 2등 이상으로 만드는 것은 불가능합니다.
알아볼 수 없는 두 개의 번호를 각각 11, 7이라고 가정하면 5등에 당첨될 수 있습니다.
- 5등을 만드는 다른 방법들도 존재합니다. 하지만, 6등(낙첨)으로 만드는 것은 불가능합니다.

민우가 구매한 로또 번호를 담은 배열 lottos, 당첨 번호를 담은 배열 win_nums가 매개변수로 주어집니다. 이때, 당첨 가능한 최고 순위와 최저 순위를 차례대로 배열에 담아서 return 하도록 solution 함수를 완성해주세요.

제한사항

lottos는 길이 6인 정수 배열입니다.
lottos의 모든 원소는 0 이상 45 이하인 정수입니다.
- 0은 알아볼 수 없는 숫자를 의미합니다.
- 0을 제외한 다른 숫자들은 lottos에 2개 이상 담겨있지 않습니다.
- lottos의 원소들은 정렬되어 있지 않을 수도 있습니다.
win_nums은 길이 6인 정수 배열입니다.
win_nums의 모든 원소는 1 이상 45 이하인 정수입니다.
- win_nums에는 같은 숫자가 2개 이상 담겨있지 않습니다.
- win_nums의 원소들은 정렬되어 있지 않을 수도 있습니다.

풀이 방법 (JS)

1. 코드 설명

(1) lottos와 win_nums의 교집합 defScore를 구한다 (최소 당첨 확정인 숫자 집합)

(2) result = [가장 좋은 등수, 가장 안 좋은 등수]

(3) 가장 안좋은 등수의 경우(ㅇ이 하나도 당첨 안됨)

defScore가 2보다 많을 경우 7-defScore.length로 해당 등수를 구하고, 반대의 경우(당첨 숫자가 1개 이하) 6등 확정...!

(4) 가장 좋은 등수의 경우(ㅇ이 모두 당첨 숫자)

lottos를 오름차순으로 정렬하면 0이 마지막으로 있는 인덱스+1가 ㅇ의 개수가 된다

만약 ㅇ이 하나도 없다면 return값은 -1이니까 false 조건으로 넘어감 => 가장 안좋은 등수 = 가장 좋은 등수

ㅇ이 한개라도 있다면 7-(당첨 확정인 숫자+마지막 인덱스 숫자+1)로 등수를 구할 수 있다

하지만 보기 좋으라고 6-(당첨 확정인 숫자+마지막 인덱스 숫자)로 정리했다ㅎ

2. 코드

//0507
function solution(lottos, win_nums) {
    let defScore = (lottos.filter(item => win_nums.includes(item))); //당첨 확정
    let result = ["", ""]; //결과 저장
    //최악
    result[1] = (defScore.length >= 2) ? (7-defScore.length) : 6;
    //최선
    result[0] = (lottos.sort().lastIndexOf(0) >= 0) ? (6-(defScore.length+lottos.sort().lastIndexOf(0))) : result[1];
    return result;
}

그래도 구구절절 코드인건 변하지 않아...

//211208
function set_award(n) {
  switch (n) {
    case 6:
      return 1;
    case 5:
      return 2;
    case 4:
      return 3;
    case 3:
      return 4;
    case 2:
      return 5;
    default:
      return 6;
  }
}
function solution(l, w) {
  //매개변수 l에서의 0 개수
  let num_zero = l.filter((item) => item == 0).length;

  // l과 w 병합 (정렬 및 중복제거)
  let result = [...l, ...w].sort();
  let filtered_result = result.filter(
    (item, idx) => item > 0 && result.indexOf(item) === idx
  );
  //당첨된 숫자 개수 = l+w의 길이 - 중복제거된 l+w 길이 - 0의 개수
  let num_win = result.length - filtered_result.length - num_zero;
  return [set_award(num_win + num_zero), set_award(num_win)];
}

include 함수가 시간 많이 걸리게 할거 같아서 최대한 빠른 방법이 뭘까 + 가독성이 좋은 코드가 뭘까 고민하면서 풀어본 문제

정작 시간면에선 별 차이도 없었다...

파이썬 코드

def solution(lottos, win_nums):
    zero = lottos.count(0)
    cnt = 7
    for i in lottos:
        if i in win_nums:
            cnt-=1
    answer = [cnt-zero, cnt]
    return [6 if value==7 else value for value in answer]

다른 풀이 방법들 보니까 아예 rank 리스트를 만들어 놓고 풀었다...확실히 그게 더 깔끔하고 보기 좋은거 같다 나도 나중에 그렇게 해봐야지✏️

[엘리스 AI트랙] 엘리스 3기 첫 개인 프로젝트 후기 ⭐️

Juliie — Tue, 30 Nov 2021 22:37:31 +0900

더 이상 미루면 영영 못 쓸거같기 때문에 호다닥 쓰는 첫 개인플젝 후기ㅎㅅㅎ

3기 첫 개인프로젝트 발표가 이번주 일요일에 끝났다 시간이 넘모 빠른것,,,!

이번엔 프론트엔드: 직업심리검사 서비스 / 백엔드: 도서관 대출 서비스로 진행됐다 신청은 선착순 마감!

나는 백엔드를 살짝 많이 놓은 상태여서...^^ 백엔드로 밀려나면 진짜 난 끝이다 싶어서 3시 땡 하자마자 신청했다(약간 수강신청 느낌이 나서 대학생 된 기분이였음 ்́ꇴ ்̀ )

근데 나중에 알고보니 백엔드가 먼저 마감됐다고 한다 ㅎㅎ 의외였다 다들 프론트를 선호하지 않으셨던건가

아모튼 이번 프로젝트를 진행하면서 내가 제일 기대했던게 1. 오피스아워 2. 코드리뷰 였는데 나는 활용을 잘 못했다...

이게 좀 아쉬운 부분

오피스아워에서 모르는 부분을 질문하려고 타닥...타닥...질문글 열심히 쓰다보면 '아 이런 방법으로 이렇게 저렇게 해보면 괜찮지 않을까?' 싶어서 혼자 구글링 ➡️ 대강 깨닫고 혼자 코딩...의 반복이여서 질문글을 잘 안올리게 됐다ㅋㅋㅋ

그래도 다른 분들 글 보면서 호엥...이럴수도 있군 이건 왜 그러지 이러면서 생각의 폭이 좀 넓어진 부분은 있는 듯하다

총 2주간 진행되었고 나는 재밌다고 느낌 -> 계속 붙들고 있음 / 하...왜 그러냐... -> (뭔가 먹으면서) 계속 붙들고 있음의 반복이여서 기본+선택기능은 전부 구현했다 단지 시간의 효율성이 좀 떨어지지 않았나하는 아쉬움...투입된 시간 대비 로직이나 디자인이 좀 아쉽지 않나 하는 개인적인 늑김...

좋았던 점

1. 기획부터 배포까지 내 손으로 했기에 무언가 완성했다는 느낌이 들어서 좋았다!

내 힘으로 끝을 내는 프론트 중점 프로젝트는 사실상 이번이 처음이었기 때문에 + 좋은 퀄리티로 제출을 하고 싶어서 열심히 했던 부분이 빠르게 경험치를 쌓는데도 도움이 됐던거 같다

~~메이플 마을퀘스트 하나하나 깨는 것보다 사냥터가서 뺑뺑이 돌리는게 더 빨리 레벨업 할 수 있는거랑 비슷한걸까...?~~

2. 내가 부족한 부분이 어디인지 대강 알게되었다 바로바로...

리액트 hook 사용법
- hook이 어떤 상황에서 어떤 용도로 쓰이는지 아직 잘 몰라서 useState와 useEffect만 주로 쓰게 되었다
css 및 관련 라이브러리 사용
- CSS 라이브러리 유목민이 바로 저였습니다...라이브러리를 3번 바꿨더니 정말 시간이 아까웠다ㅜㅡㅜ
재사용성 높은 컴포넌트 짜는 법
- 이번에 컴포넌트를 구성하면서 어떤 기준으로 컴포넌트를 짜야하는지 참 헷갈렸다...다음번엔 여러번 쓸 수 있는거에 집중하면서 만들어보고 싶다

아쉬웠던 점

1. UI+ UX / 접근성을 잘 살리지 못했다

내가 생각해도 이번 프로젝트에서는 내가 관심있는 부분인 접근성을 별로 못살렸다...이게 참 속상했음

그리고 모바일 페이지에선 버튼이 작아지는 등등 좋은 UI는 아니였다 흑흑 이 부분은 책을 좀 더 읽거나 관련 자료를 공부해야 할듯싶다

2. 건강 챙기기

그래도 나는 마지막 일주일만 새벽 5시 - 오후 1시라는 기이한 수면 패턴이 생겼는데 참 피곤했다ㅠㅠ 같은 시간을 자도 밤낮이 바뀌면 뭔가 계속 피로가 쌓이는 듯 하다 나중에 회사 저녁 7시에 출근할거 아니니까 이 부분도 천천히 고쳐야지 그리고 하루종일 앉아있고 식습관 + 수면패턴도 불규칙하니까 소화불량과 약간의 위염 증상이 생겼다ㅜㅇㅜ 이번 프로젝트를 통해서 새삼 건강의 소중함을 느끼게 됨...

그래도 2주동안 이게 몰입이건가,,,! 라는 기분을 느낄 수 있어서 참 좋았다 ㅎㅎ

프로젝트를 그럭저럭 무사히 끝낸 이 영광을 우리집 얼룩고양이와 못 놀아줘서 힝구했던 갱얼쥐에게 돌립니다~

[엘리스 AI트랙] 07-04 Flask 기초 2

Juliie — Thu, 11 Nov 2021 23:02:04 +0900

1. 데이터베이스

데이터를 저장하는 공간
관계형 데이터베이스(RDB)와 NoSQL(Not Only SQL)로 나뉘어져 있음

관계형 데이터베이스(RDB)

키(key)와 값(value)들의 간단한 관계를 테이블화 시킨 데이터베이스
DML을 사용해서 데이터 간 결합, 제약조건 등의 설정을 통해 데이터를 추출할 수 있음
테이블 간의 데이터 관계를 설정할 수 있음
각 컬럼마다 데이터의 형태가 동일, 정형화된 데이터를 가짐
SQL 질의어(쿼리)를 사용

클라이언트와 서버 사이에서 일어나는 일

2. Flask와 DB 연동하기

순서

1) SQL import 하기
2) 데이터베이스 연결하기 con = sqlite3.connect("database.db")
3) 데이터를 불러올 수 있는 cursor 객체 만들기 cur = con.cursor()
4) 실행할 쿼리 작성하기 cur.execute(f"SELECT * FROM Board WHERE name='{result}' or context='{result}'")
5) fetch all 함수 실행(레코드를 배열 형식으로 저장) rows = cur.fetchall()
6) 데이터베이스 연결 해제 con.close()

con = sqlite3.connect('database.db')
con.execute('쿼리문')
con.commit() #DB에 반영
con.close()

# 또는

with sqlite3.connect("database.db") as con:
   con.execute("쿼리문")
   con.commit()

3. JWT(JSON Web Token)

웹 표준으로써 두 개체에서 JSON 객체를 사용하여 통신
JSON 포맷을 이용하여 사용자에 대한 속성을 저장하는 Web Token
토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안정적으로 전달
서버와 클라이언트 간의 인증을 도와주는 도구 중 하나

JWT의 형태

Header: 토큰의 타입과 알고리즘 저장
Payload: 토큰에서 사용할 정보(클레임, Claim)를 넣음
- 토큰 발급자, 토큰 제목, 대상자, exp(만료 시간), iat(발급된 시간), jti(고유 식별자, 토큰의 중복성 방지) 등
Signature: 헤더의 정보와 인코딩 값들과 관련된 비밀키가 들어 있음
- 토큰을 인코딩하거나 유효성 검증을 할 때 사용하는 고유한 암호화 코드

JSON 형태인 각 부분은 Base64로 인코딩되어 표현됨
각각의 부분을 이어주기 위해 . 구분자 사용

예시

import jwt # PyJWT 모듈 import

data_to_encode = {"name": "elice"} # jwt로 암호화 할 데이터
encryption_secret = "secrete" # jwt 모듈이 사용되는 곳을 특정하기 위해 비밀키를 넣어줌
algorithm = "HS256" # 암호화 알고리즘

encoded = jwt.encode(data_to_encode, encryption_secret, algorithm=algorithm)
decoded = jwt.decode(encoded, encryption_secret, algorithm=[algorithm])

4. ORM(Object Relational Mapping, 객체 관계 매핑)

데이터베이스에 객체를 통해 접근하는 방법
SQL 쿼리가 없어도 데이터베이스를 다룰 수 있도록 해줌
테이블 구조가 변경될 때 ORM 모델만 수정하면 됨
코드로 작성하기 때문에 쿼리를 직관적으로 이해 가능

# SQL 쿼리문
INSERT INTO 엘리스 (멤버, 나이) VALUES ('여왕', '18');

# ORM

class Members(db.Model): #db.Model은 SQLAlchemy 패키지 안에 들어가 있음 
	__tablename__ = 'my_user' # 데이터베이스 테이블을 명시
    # 데이터베이스 테이블의 컬럼을 명시, `어떤 형태의 데이터를 저장할 것인가`
    id = db.Column(db.Integer, primary_key=True, nullable=False)
    name = db.Column(db.String(20), nullable=False)
    age = db.Column(db.Integer, nullable=False)
    
member1 = Member() # DB의 테이블과 매핑되는 클래스를 모델이라고 함
member1.name = '여왕'
member1.age = '18'
# 또는 아래와 같이 한줄로 작성할 수 있음
member1 = Member(name='여왕', age='18')

db.session.add(member1)
db.session.commit()

db.session.query(Members)와 Members.query는 같은 의미(전자가 더 명시적)

5. SQL Alchemy

ORM을 쓸 수 있도록 도와주는 파이썬 라이브러리
파이썬 코드에서 Database와 연결하기 위해 사용할 수 있는 라이브러리

Query - CRUD 예제

db.session.commit: 데이터베이스에 수정사항을 반영할 것

1) Create

db.session.add: 내가 만든 변수들을 테이블 안에 넣어줄 것

2) Read

Members 모델의 쿼리를 사용할 것
all()을 붙이면 list 형태로 데이터가 반환됨, 한개여도 리스트
first() 제일 처음거 하나, 반환되는 객체는 Model(class)

3) Update

해당하는 데이터를 먼저 가져온(Read) 뒤 수정함

4) Delete

해당하는 데이터를 먼저 가져온(Read) 뒤 삭제함

Query 사용법 예시

1) equal

@app.route('/')
def list():
	member_list = Member.query.filter(Member.name == 'Elice')
    return " ".join(i.name for i in member_list)

2) not equal

@app.route('/')
def list():
	member_list = Member.query.filter(Member.name != 'Elice')
    return " ".join(i.name for i in member_list)

3) like

@app.route('/')
def list():
	member_list = Member.query.filter(Member.name.like('%Elice%'))
    return " ".join(i.name for i in member_list)

4) in

@app.route('/')
def list():
	member_list = Member.query.filter(Member.name.in_(['Elice', 'Dodo']))
    return " ".join(i.name for i in member_list)

5) not in

@app.route('/')
def list():
	member_list = Member.query.filter(~Member.name.in_(['Elice', 'Dodo']))
    return " ".join(i.name for i in member_list)

6) is null

@app.route('/')
def list():
	member_list = Member.query.filter(Member.name == None)
    return " ".join(i.name for i in member_list)

Null을 None으로 표현

7) is not null

@app.route('/')
def list():
	member_list = Member.query.filter(Member.name != None)
    return " ".join(i.name for i in member_list)

8)and

from sqlalchemy import and_
@app.route('/')
def list():
	member_list = Member.query.filter(and_(Member.name == 'Elice',
    								Member.age == '15'))
    return " ".join(i.name for i in member_list)

db.session.query(Member).filter(A, B, C) 도 가능한 방법

9)or

from sqlalchemy import or_
@app.route('/')
def list():
	member_list = Member.query.filter(or_(Member.name == 'Elice',
    								Member.age == '15'))
    return " ".join(i.name for i in member_list)

10)order by

@app.route('/')
def list():
	member_list = Member.query.order_by(Member.age.desc())
    return " ".join(i.name for i in member_list)

11) limit

@app.route('/')
def list(limit_num = 5):
	if limit_num is None:
    	limit_num = 5
    # ⭐️괄호에 있는 숫자만큼만 반환⭐️
	member_list = Member.query.order_by(Member.age.desc()).limit(limit_num)
    return " ".join(i.name for i in member_list)

12) offset

@app.route('/')
def list(off_set = 5):
	if off_set is None:
    		off_set = 5
    # offset 크기만큼 앞에서부터 생력하고 반환
	member_list = Member.query.order_by(Member.age.desc()).off_set(off_set)
    return " ".join(i.name for i in member_list)

13) count

@app.route('/')
def list():
	member_list = Member.query.order_by(Member.age.desc()).count()
    return str(member_list)

쿼리문 실행결과로 반환된 tuple 수를 반환

6. REST API

REST: 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것
- 자원(resource)의 표현(representation)에 의한 상태 전달

REST의 구성

자원: URI에 표현이 되어야 함 ➡️ 무엇을 서버에 요청할 것인지
행위: HTTP Method ➡️ 어떻게(어떤 방법을) 요청할 것인지
표현: Representations ➡️ API만 보고 무엇을 요청할 것인지 알 수 있도록

* URL과 URI의 차이

URL: http://nyamnyamexample.com/index.html

URI: http://nyamnyamexample.com/index

URL은 실제로 서버 폴더 내에 파일이 있지만 URI는 그렇지 않음(실제로 파일 존재 X)

REST API 디자인 가이드

1) URI는 자원을 표현해야 함

2) 자원에 대한 행위는 HTTP Method로 나타내야 함(HTTP Method는 Rest API에서 동작을 표현하는 방법)

GET: 리소스를 조회
POST: 요청된 리소스를 생성
PUT: 리소스를 업데이트
DELETE: 리소스를 삭제

REST API 디자인 예시

리소스 요청은 주로 동사보다는 명사를 사용
- GET/members/insert/10 보다는 POST/members/10
- GET/members/delete/1 보다는 DELETE/members/1 등등
슬래시(/)는 계층 관계를 나타냄
- http://elice.example.co.kr/lecture/python
파일 확장자는 URI에 포함하지 않음
긴 URI에서는 밑줄(_)보다는 하이픈(-)을 사용
- http://elice.example.co.kr/board/free-talk

HTTP 응답 상태(HTTP status) 코드

상태 코드	내용
200	정상적으로 수행
201	성공적으로 리소스 생성
400	클라이언트의 요청이 부적절할 때
401	인증되지 않은 상태에서 리소스 요청
404	응답하고 싶지 않은 리소스, 혹은 없는 리소스를 요청 ex) Page Not Found
500	서버에 문제가 생겼을 때

[엘리스 AI트랙] 06-04 SQL 2

Juliie — Wed, 10 Nov 2021 21:46:22 +0900

1. 데이터 그룹 짓기 - GROUP BY

SELECT user_id, COUNT(*)
FROM rental
GROUP BY user_id; # 그룹의 기준 컬럼

보통 limit, order by, group by가 SQL문의 맨 끝에 옴

2. 데이터 그룹(GROUP BY절)에 조건 적용하기 - HAVING

# rental 테이블에서 user_id가 같은 2개 이상의 데이터가 몇 개 있는지 검색

SELECT user_id, COUNT(*) # GROUP BY의 기준 컬럼 및 검색할 컬럼
FROM rental
GROUP BY user_id # 그룹의 기준 컬럼
HAVING COUNT(user_id) > 1; # 조건

3. 여러 테이블의 정보를 한번에 조회하기 - JOIN

1) INNER JOIN문의 기본 문법

SELECT *
FROM rental
INNER JOIN user; # 연결할 테이블, rental table + user table

2) JOIN에 조건을 적용하고 싶다면?

SELECT *
FROM rental
INNER JOIN user
ON user.id = rental.user_id
# user table의 id 컬럼과 rental 테이블의 user_id 컬럼이 같다면 연결

3) LEFT JOIN의 기본 문법

SELECT *
FROM user # 두 테이블 중 더 중요한 쪽
LEFT JOIN rental
ON user.id = rental.user_id
# user 테이블은 모두 출력됨
# 모든 user 테이블의 user_id와 rental 테이블의 id가 겹치도록 JOIN

4) RIGHT JOIN문의 기본 문법

SELECT *
FROM user
RIGHT JOIN rental # 두 테이블 중 더 중요한 쪽
ON user.id = rental.user_id

3. 서브쿼리

하나의 쿼리 안에 포함된 또 하나의 쿼리
메인 쿼리가 서브쿼리를 포함하는 종속적인 관계
한 문장에서 여러번 사용 가능

서브쿼리를 사용할 때의 주의사항

서브쿼리는 괄호와 함께 사용되어야 함
서브쿼리 안에서 ORDER BY 절은 사용할 수 없음
서브쿼리는 연산자의 오른쪽에 사용되어야 함
서브쿼리는 오로지 SELECT문으로만 작성할 수 있음

기본 문법

SELECT * FROM employee
WHERE 급여 > (SELECT 급여 FROM employee WHERE 이름='elice')

단일 행 서브 쿼리

결과가 한 행만 나오는 서브쿼리
서브쿼리가 결과를 1개의 값만 반환하고, 이 결과를 메인쿼리로 전달하는 쿼리
사용되는 연산자: = , <>(같지 않다), >, >=, <, <=

SELECT * FROM employee
WHERE 급여 > (SELECT 급여 FROM employee WHERE 사원번호 = 1)
# 이 경우 사원번호는 기본적으로 한 개만 있으므로 1개의 행만 반환함 = 단일 행

다중 행 서브 쿼리

서브쿼리가 결과를 2개 이상 반환하고, 이 결과를 메인쿼리로 전달하는 쿼리

SELECT * FROM employee
WHERE 급여 IN ( #IN -> 다중 행 연산자
SELECT max(급여) FROM employee GROUP BY 부서번호);

기호	뜻
IN	하나라도 만족하면 반환
ANY	하나라도 만족하면 반환 비교 연산 가능 내부적으로 모두 or 연산을 함
ALL	모두 만족하면 반환 비교 연산 가능 내부적으로 모두 and 연산을 함

예시

1 in (1, 2, 3, 4) # True
10 < any (1, 2, 3, 4) # False
99 >= all (99, 100, 101) # False

스칼라 서브쿼리

SELECT 절에서 사용하는 서브쿼리
오직 한 행만 반환
JOIN을 사용한 것과 같은 결과를 얻을 수 있음
데이터가 많을 때에는 JOIN을 사용하는 것보다 스칼라 서브쿼리를 사용하는 것이 더 빠르게 결과 반환 가능

예시

SELECT students.name, (
	SELECT math
    FROM middle_test as m
    WHERE m.student_id = students.student_id
) AS middle_avg
FROM students;

4. 데이터베이스

공유하여 사용할 목적으로 체계화하여 관리하는 데이터의 집합

관계형 데이터베이스(RDB)	비관계형 데이터베이스(NoSQL)
각 테이블 간 관계 O	각 테이블 간 관계 X
스키마 O	스키마 X
구조적으로 안정적이나 유연하지 못함	유연성을 가지고 있으나 구조 결정이 어려움

데이터 모델링이란?

효율적으로 데이터베이스를 구축하기 위해 데이터베이스의 뼈대를 세우는 작업

데이터 모델링 순서

1) 요구 사항 정리
데이터가 어떠한 형태, 어떤 목적을 가지고 있는지 정리
2) 개념적 데이터 모델 설계
핵심 개체를 찾고, 각 개체 간의 관계를 정리
3) 논리적 데이터 모델 설계
실제 데이터베이스로 구현하기 위한 모델링
4) 물리적 데이터 모델 설계
데이터가 어떻게 컴퓨터에 저장될 지 설계

데이터베이스 네이밍 규칙

유지보수와 의미의 명확성을 전달하기 위해 네이밍 규칙이 있어야함

줄임말 사용은 최소화
- 단, 사용할 경우 범용적으로 사용되는 줄임말을 사용 (ex: info)
테이블 명을 작성할 때는 파스칼 표기법(첫 단어 시작부터 대문자로 시작)
테이블, 뷰(View)임을 한 눈에 확인 할 수 있도록 테이블 명 앞에는 'tb_', 'v_'를 붙임

속성 네이밍 규칙

속성 명을 작성할 때는 스네이크 표기법 활용
유일키, 외래키 등은 한 눈에 알아 볼 수 있도록 속성명 앞에 'pk_', 'fk_'를 붙임
- 중복으로 설정되어 있는 경우 외래키 > 유일키

5. 키(Key)

데이터베이스에서 튜플(레코드, 행) 간 구분을 위한 값(속성)
- 유일키, 복합키, 외래키 ...
- 테이블 명, 속성 명, 유일키로 사용할 속성 명을 감싸줄 때는 `(백틱) 활용

1) 유일키(Primary Key)

테이블에서 튜플(레코드, 행)을 구분지어주는 고유 식별 값(속성)
유일키 값은 중복될 수 없으며, NULL값을 가질 수 없음

유일키(Primary Key) 선언하기

CREATE TABLE '테이블 명' {
    `속성명` 타입,
    `속성명2` 타입,
    ...
    PRIMARY KEY(`유일키로 사용할 속성명`)
}

2) 복합키(Composite Key)

두 개 이상의 속성을 활용하여 튜플(레코드, 행)을 구분지어 주는 방법

복합키(Composite Key) 선언하기

CREATE TABLE '테이블 명' {
    `속성명` 타입,
    `속성명2` 타입,
    ...
    PRIMARY KEY(`복합키로 사용할 속성명`, `복합키로 사용할 속성명`)
}

3) 외래키(Foreign Key)

다른 테이블의 키와 연결을 해주는 키
참조의 무결성^[각주:1]을 유지하기 위해 활용

외래키(Foreign Key) 선언하기

CREATE TABLE '테이블 명' {
    `속성명` 타입,
    `속성명2` 타입,
    ...
    FOREIGN KEY(`외래키로 사용할 속성명`) REFERENCES `참조하는 속성이 있는 테이블`(`참조할 속성명`)
}

6. View (뷰)

하나 이상의 테이블에서 여러 정보를 토대로 만들어지는 가상의 테이블
필요한 정보만 추출해서 제공함으로써 보안성과 속도를 높일 수 있음
실제 존재하지 않는 가상의 테이블이기 때문에 View를 삭제하더라도 원본 테이블에는 영향 X

뷰(View) 생성 방법

CREATE VIEW '테이블 명' AS
SELECT 가져오고자 할 속성명, 속성명2, ...
FROM 가져오고자 할 속성이 있는 테이블, 테이블2 ...
(WHERE 등 사용 가능)

뷰(View) 삭제 방법

DROP VIEW 삭제하고자 하는 View명

외래키 값이 참조 중인 테이블의 값과 일관성을 가지는 것을 의미 [본문으로]

[엘리스 AI트랙] (구구절절 뱁새의) 엘리스 3기 7주차 후기 ‍♀️

Juliie — Wed, 10 Nov 2021 01:59:50 +0900

엘리스 트랙에 탑승한지 벌써 두달이나 됐다니! 시간이 새삼 빠르다

사실상 이미 8주차 수업을 듣고 있는 중에 7주차 후기를 쓰는게 맞나 싶기도 하고...ㅎㅎ 아모튼 쓰는 7주차 후기

요즘 내 진도 상태는

- 백엔드 실강 놓쳐서 따라가는거 포기함

- 설상가상으로 프론트엔드 수업보다 흥미도 떨어져서 백엔드 온라인 수업마저 밀림

- 자료구조 + 알고리즘도 밀림 그냥 다 밀림

- 주차 테스트도 2번이나 안봄

- 배운내용 확인하기 응시 안한지 n주됐음

이거를 나름 오픈돼있는 공간에 써도 되나 싶긴한데...일단 솔직하게 쓰는게 목표니까 안지우고 그냥 쓰고 있습니다,,,

사실 몇일 전부터 매일 피곤하고 컨디션도 안좋고 공부하기 너무 싫어서 손을 놔버린 점도 영향이 있는듯 하다

숨도 쉬기 귀찮은거 보면 이게 번아웃인가 싶기도 하고...?

이러다가 곧 단위기간 끝난다는 공지봐서 오늘부터 다시 사슴공부법 뛰다가 새삼 느낀게 있었는데...

사실 이 마음가짐을 리마인드하려고 쓰는 포스팅입니다 헤헷

내가 가장 좋아하는 글 중 하나

백엔드 수업을 듣기 싫었던 이유 중 하나는 난 백엔드로 갈 것도 아닌데 왜.........왜 배워야 하지....... 이런 마음가짐이 있었던 것도 한 몫 했던것 같다

사실 엘리스 지원했을 때도 JS나 리액트 등등 프론트엔드 기술스택 부분을 내가 따로 구글링하면서 기초가 없는 상태로 무작정 독학하는게 질려서 기초가 탄탄한 상태로 정말 실무에서 쓰는 지식이 갖고싶었기 때문에 들어온 점도 컸으니까...

근데 미래에 직접적으로 도움이 될만한 것만 배웠다면 지금의 나는 있을 수 없었다

포토샵, 일러스트레이터같은 어도비 프로그램은 내 전공과 아무 연관이 없지만 IoT 회사에서 인턴으로 일할 수 있게 해줘서 어깨 너머로 많은 걸 배울 수 있었고, 관심도 없던 JAVA 수업은 나중에 졸프할때 정말정말 많은 도움이 됐다(덕분에 부트캠프 열심히 지원했던 시절 뭐라도 말할게 있었다 ) 지금 당장 생각나는건 이 정도지만 23년 인생 살면서 분명 더 많은게 있었겠지 흠흠

사실 다른 사람들이랑 비교하면서 더 조급해진 것도 컸던것 같다, 이 사람은 알고리즘 문제를 벌써 이만큼 풀었어...이 사람은 프로젝트를 이만큼이나 했어,,,,이 개념은 대체 어떻게 벌써 알고있는거야?!?ㅜㅡㅜ 등등 나도 완벽한 백지 상태로 트랙에 들어온건 아닌데 나보다 앞서가는 사람들이 너무너무 많으니까 내 자신이 너무 초라해졌다

그래도 어쩔 수 없다ㅜ뱁새는 뱁새만의 장점이 있다...ex: 귀여움

뱁새 귀여워

중구난방의 7주차 후기를 끝까지 읽어주시는 분이 있을지 모르겠지만

여러분 화이팅 나도 화이팅 우리존재 화이팅

저는 꼭 끝까지 완주하겠슴미다 내 꿈은 멋진 개발자니까

2줄 요약

1. 숲을 보자

2. 귀여운게 세상을 구한다

[엘리스 AI트랙] 07-02-01 ~ 07-02-02 Flask 기초 1

Juliie — Tue, 9 Nov 2021 15:31:56 +0900

1. Flask Framework란?

파이썬을 사용해서 웹 서버를 만들수 있게 도와주는 Web Framework
- 파이썬의 패키지
micro framework
- 기본적인 기능만 제공
Flask의 장점
- 나만의 서버를 쉽게 작성 가능
- 간단한 코드로 빠르게 실행 가능
- 원하는 기능을 유연하게 확장하기 편리함

2. Flask로 Web server 만들기

from flask import Flask
app = Flask(__name__)

@app.route("/")
def home():
	return "hello world!"

if __name__ == "__main__":
	app.run()

__name__은 파일이 다른 파일에서 실행됐는지, 아니면 직접 실행했는지 알게 해줌
app.route(url) 아래의 함수는 url에서 실행할 함수
if __name__ == "__main__"은 파일 이름이 main일 때만 app을 실행하도록 함

3. JSON 형식의 데이터 나타내기

from flask import Flask jsonify
app = Flask(__name__)

@app.route("/")
def home_json():
	blog_info = {"mountain":"chiak"}
    return jsonify(blog_info)

if __name__ == "__main__":
	app.run()

jsonify()

딕셔너리 형태의 데이터를 전달함으로써 JSON 형태의 데이터를 화면에 전달

4. HTML 형식의 데이터 나타내기

나타낼 html 파일을 templates 폴더에 넣어주어야 함
templates 폴더에 html 파일을 넣어놓으면 Flask가 자동으로 파일을 찾아서 연결해 줌

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def home_html():
	return render_template("index.html")
    
if __name__ == "__main__":
	app.run()

render_template은 templates 폴더 안의 html 파일을 불러와주는 역할을 함
trmeplates 폴더의 html 파일의 이름과 render_template() 안의 이름이 같아야 화면에 잘 전달할 수 있음

5. 여러가지 url 연결하기

@app.route("URL 주소")

1개의 @app.route는 여러개의 함수를 가질 수 있지만 1개와 연결하는게 가장 깔끔
함수의 이름은 중복될 수 없음

from flask import *
app = Flask(__name__)

@app.route("/")
def home():
	return jsonify("home")
    
@app.route("/admin")
def admin():
	return jsonify("admin page")

@app.route("/student")
def student():
	return jsonify("student Page")

@app.route("/student/<name>")
def user(name):
    user = {"name" : name}
    return jsonify(user)

if __name__ == "__main__":
	app.run()

6. REST API

HTTP URI을 통해서 데이터의 자원을 명시하고 HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것
DB, 이미지, 텍스트 등의 다양한 데이터에 적용할 수 있음
메시지가 의도하는 바를 URL에서 나타내므로, 쉽게 기능을 파악할 수 있음
HTTP 표준 프로토콜에 따르는 플랫폼에서 사용 가능
서버와 클라이언트의 구분을 명확하게 할 수 있음
REST API의 표준이 존재하지 않음(➡️ 권고사항만 있음, 단점)

7. HTTP Method

GET과 POST 등이 있음

GET		POST
데이터를 URL 뒤에 ?와 함께 사용	사용방법	특정 양식(form)에 데이터를 넣어 전송하는 방법
길이 제한 있음 주소창에 정보가 노출되기 때문에 보안이 상대적으로 취약	단점
http://사이트_주소?id=julie&pwd=1234	예시	http://사이트_주소

app.route()에 method 옵션 사용하기

# app.py

@app.route('url1', methods=["GET"])
@app.route('url2', methods=["POST"])
@app.route('url3', methods=["GET", "POST"])

app.route()에 methods라는 옵션을 추가해서 해당하는 HTTP Method만 사용할 수 있도록 적용할 수 있음
이렇게 나누면 좋은 점: URL1과 URL2가 같아도 상관 X -> methods 옵션이 다르기 때문

GET 요청만 사용하기

from flask import *
app = Flask(__name__)

@app.route("/", methods=["GET"])
def home():
    # localhost:5000?name=elice
    name = request.args.get('name')
    # name == elice
    result = "hello " + name
    return result

if __name__ == "__main__":
	app.run()

POST 요청만 사용하기

<html>
<body>
	<form action='/login' method='post'>
    	<p>
        아이디: <input type='text' name='id'>
        </p>
        <p>
        비밀번호: <input type='password' name='pwd'>
        </p>
        <button type='submit'  />
    </form>
</body>
</html>

# app.py

from flask import *
app = Flask(__name__)

@app.route("/", methods=["GET"])
def home():
	return render_template("index.html")

@app.route("/login", methods=["POST"])
def post():
	id = request.form['id']
    pwd = request.form['pwd']
    if id == 'julie' and pwd = '1234':
    	return 'Hello Julie!'
    else:
    	return 'Go away'
        
if __name__ == "__main__":
	app.run()

8. Blueprint란?

API들을 분류 / 관리할 수 있게 해줌
Flask의 기능이 점점 늘어날수록, 자연스럽게 코드의 양 ⬆️
이 때 Blueprint를 사용해서 길어진 코드를 모듈화
- 수정 개발과 유지보수에 용이하게 코드 관리 가능

1) Blueprint를 사용하지 않았을 경우의 코드

app.route의 개수 == API의 개수

from flask import Flask, jsonify
app = Flask(__name__)

@app.route("/", methods=['GET'])
def home_route():
	return jsonify('home')
    
@app.route("/first", methods=['GET'])
def first_route():
	return jsonify('first page')
    
@app.route("/second", methods=['GET'])
def first_route():
	return jsonify('second page')
    
@app.route("/third", methods=['GET'])
def first_route():
	return jsonify('third page')

# ... 중략 ...

if __name__ == '__main__':
	app.run()

2) Blueprint를 사용했을 경우

# 1 app.py
# 오직 서버 실행에 집중

from flask import Flask
from first_api import bp

app = Flask(__name__)
app.register_blueprint(bp)

if __name__ == '__main__':
	app.run()

# 2 first_api.py
# API들을 따로 모아놓은 파일

from flask import Blueprint, jsonify
bp = Blueprint('bp', __name__)

@bp.route('/first', methods=['GET'])
def first_route():
	return jsonify('first page')

@bp.route('/second', methods=['GET'])
def second_route():
	return jsonify('second page')

9. Jinja2

파이썬에서 가장 많이 사용되는 템플릿
서버에서 받아온 데이터를 효과적으로 보여주고 비교적 간략한 표현으로 데이터를 가공 가능

1) Jinja2 Template에서 데이터 넘겨주기 - 단일변수

# app.py

@app.route("/")
def home():
	return render_template(
          'index.html',
          data = 'elice'
        )

<!-- index.html -->

<html>
    <head>
    	<title> jinja example </title>
    </head>
    <body>
    	{{ data }}
    </body>
</html>

2) Jinja2 Template에서 데이터 넘겨주기 - list

# app.py

@app.route("/")
def home():
	my_list = [1, 2, 3, 4, 5]
	return render_template(
          'index.html',
          data = my_list
        )

<!-- index.html -->

<html>
    <head>
    	<title> jinja example </title>
    </head>
    <body>
    	{{ data }}
        {% for d in data %}
        	{{ d }}
        {% endfor %} # if문이 끝날땐 endif
    </body>
</html>

3) Jinja2 Template에서 데이터 넘겨주기 - dictionary

# app.py

@app.route("/")
def home():
	my_data = {'name': 'elice'}
	return render_template(
          'index.html',
          data = my_data
        )

<!-- index.html -->

<html>
    <head>
    	<title> jinja example </title>
    </head>
    <body>
    	{{ data.get('name') }}
    </body>
</html>

8. 로그인 기능 구현

1) 쿠키

클라이언트에 저장되는 키/값이 들어있는 데이터
- 쿠키는 내 컴퓨터의 브라우저에 저장이 된다
유효기간이 안에 저장되어 있으며 그 기간내에는 따로 삭제하지 않는한 계속 저장되어 있음
사용자가 따로 요청하지 않아도, Request 시에 자동으로 서버에 전송

2) 세션

쿠키를 기반으로 하지만 서버 측에서 관리하는 데이터
클라이언트에 고유 ID를 부여하고 클라이언트에 알맞은 서비스 제공
서버에서 관리하기 때문에 쿠키보다 보안이 우수함

http 통신의 한 사이클

http는 상태값을 저장하지 않음(stateless)
http의 이런 단점을 보완하기 위해 cookie를 담아서 전송하는 등의 방법 사용

3) 예제 코드

# 로그인

user_id = request.form['user_id']
user_pw = request.form['user_pw']
user = {'user_id' : 'julie', 'user_pw': '1234'}

if user is not None:
	if user_id == user['user_id'] and user_pw == user['user_pw']:
    	session['login'] = user.id
        return jsonify({"result":"success"})
    else:
    	return jsonify({"result":"fail"})

request로 받아온 로그인 정보(user_id, user_pw)를 변수에 저장
DB에 user_id와 가은 데이터가 있는지 찾아옴
입력된 user_pw와 저장된 패스워드가 같은지 체크

# 로그아웃

session['login'] = None

9. 로깅

프로그램이 작동할 때 발생하는 이벤트를 추적하는 행위
프로그램의 문제들을 파악하고 유지보수 하는데 사용
로깅을 통해 발생한 에러를 추적할 수 있음

1) 로거 레벨

DEBUG < INFO < WARNING < ERROR < CRITICAL
기본 로거 레벨 세팅은 WARNING이기 때문에 설정 없이 INFO, DEBUG를 출력할 수 없음
에러가 발생했을 때 Flask의 logger(기본 내장)를 사용하여 에러 확인 가능

DEBUG: 상세한 정보
INFO: 일반적인 정보
WARNING: 예상치 못하거나 가까운 미래에 발생할 문제
ERROR: 에러 로그, 심각한 문제
CRITICAL: 프로그램 자체가 실행되지 않을 수 있는 문제

2) 특정 에러 제어하기

@app.errorhandler(404)
def page_not_found(error):
    app.logger.error(error)
    return render_template("page_not_found.html")

app.route를 쓰는 것처럼 app.errorhandler를 사용하면 에러를 제어할 수 있다

[엘리스 AI트랙] React Hook으로 상태관리 하기

Juliie — Sat, 6 Nov 2021 15:15:53 +0900

1. useState

단순한 하나의 상태를 관리하기에 적합함
const [state, setState] = useState(initState | initFn)
리액트는 state가 바뀌면 state를 사용하는 컴포넌트를 리렌더함
useEffect와 함께, state에 반응하는 hook을 구축
패턴
- 상위 컴포넌트에서 state와 state 변경 함수를 정의
- 그 state나 변경 함수를 사용하는 컴포넌트까지 prop으로 내려줌
state가 변경되면 중간에 state를 넘기기만 하는 컴포넌트들도 모두 리렌더링됨

➡️ 상태와 상태에 대한 변화가 단순하거나, 상대적으로 소규모 앱에서 사용하기에 적합

2. useRef

상태가 바뀌어도 리렌더링하지 않는 상태를 정의함 ➡️ 상태가 UI의 변경과 관계없을 때 사용

리액트 컴포넌트에서의 상태는, 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있음

사용 예시
- settimeout의 timerId 저장
- 외부 라이브러리를 사용하여 생성된 인스턴스
- scroll 위치
- 결제 페이지에서 필수 정보를 입력하지 않았을 때 그 input 컴포넌트로 focus 하기
uncontrolled component의 상태를 조작하는 등, 리렌더링을 최소화하는 상태관리에 사용됨 (ex: Dynamic Form)
내부적으로 값을 업데이트하다가 외부적인 이유로 컴포넌트가 리렌더링 되면 그 때 변경된 값이 보여짐

3. useContext

컴포넌트와 컴포넌트 간 상태를 공유할 때 사용
부분적인 컴포넌트들의 상태 관리, 전체 앱의 상태 관리를 모두 구현
Context Provider 안에서 렌더링되는 컴포넌트는 useContext를 이용해 깊이 nested된 컴포넌트라도 바로 context value를 가져옴
context value가 바뀌면 내부 컴포넌트는 모두 리렌더링됨 ➡️데이터를 변경할 때 주의할 필요 있음
state를 넘길 필요가 없으며 컨텍스트를 참조하는 컴포넌트들만 렌더링됨
패턴
- Provider 단에서 상태를 정의하고, 직접 상태와 변경 함수를 사용하는 컴포넌트에서 useContext를 이용해 바로 상태를 가져와 사용
useReducer와 함께 복잡한 상태와 상태에 대한 변경 로직을 두 개 이상의 컴포넌트에서 활용하도록 구현 가능
state는 필요한 곳에서만 사용하므로, 불필요한 컴포넌트 리렌더링을 방지
Prop Drilling(Plumbing)을 방지하여 컴포넌트 간 결합도를 낮춤

4. useReducer

useState보다 복잡한 상태를 다룰 때 사용
별도의 라이브러리 없이 flux pattern에 기반한 상태 관리를 구현
const [state, dispatch] = useReducer(reducer, initState)
nested state 등 복잡한 여러 개의 상태를 한꺼번에 관리하거나, 어떤 상태에 여러가지 처리를 적용할 때 유용
상태가 복잡하다면 useState에 관한 callback을 내려주는 것보다 dispatch를 prop으로 내려 리렌더링을 최적화하는 것을 권장

[엘리스 AI트랙] 05-04 React UI

Juliie — Tue, 2 Nov 2021 23:13:18 +0900

1. 리액트와 사용하기 좋은 Styling 도구 종류

1) CSS Module

CSS 파일의 확장자를 .module.css 로 지정해서 사용

장점	단점
class, id 등에 random string을 달아주기 때문에 선택자가 겹치지 않음 스타일 충돌을 방지하고 코드를 격리하여 CSS 설계가 가능	스타일링을 일일히 직접 해야함

//App.jsx
import styles from "./app.module.css"

export default function App() {
	return (
    	<div>
          <h1 className={styles.title}>Pink Hello world</h1>
          <h1 className={"title"}>Normal Hello world</h1>
        </div>
    );
}

/* app.module.css */
h1 {
	font-size: 1.5rem;
}

.title {
	font-size: 2.5rem;
    color: palevioletred;
}

CSS Module 결과물

2) CSS in JS library

장점	단점
컴포넌트 재사용성이 쉬워짐 JS 값들을 props로 넘겨줘서 해당 JS 값에 의도된 styling을 바로 적용할 수 있음 class 이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없음	스타일링을 일일히 직접 해야함

//App.jsx
import styled from "styled-components";

const Title = styled.h1`
	font-size: 1.5rem;
    text-align: center;
    color: palevioletred;
`;

export default function App() {
	return <Title>Hello World</Title>
}

styled component 결과물

3) UI framework

ex) Ant Design, Material-UI ...

장점	단점
이미 다 만들어져 있기 때문에 간편하고 쉽게 사용 가능	컴포넌트들을 커스터마이징하기 어려움 해당 framework의 디자인 철학을 벗어나기 어려움

// App.jsx
import "antd/dist/antd.css";
import { Button } from "antd";

export default function App() {
	return (
    	<div>
        	<Button type="primary">Primary Button</Button>
            <Button type="secondary">Secondaray Button</Button>
            <Button type="danger">Danger Button</Button>
        </div>
    );
}

UI Framework 결과물

4) CSS framework

거대한 CSS 파일 하나를 가져오는 것
ex) Bootstrap, Tailwind CSS...

장점	단점
개발자가 따로 CSS 파일을 작성하지 않아도 HTML에 클래스만 적어주면 정해진 규칙대로 스타일링이 적용	CSS에 대한 이해력이 있어도 해당 framework를 사용하기 위한 학습이 또 필요함

// App.jsx
import { Helmet } from "react-helmet";

export default function App() {
	return (
    	<div>
        	<Helmet>
            	<link
                rel="stylesheet"
                href="https://www.w3schools.com/w3css/4/w3.css" />
            </Helmet>
            <div className="w3-container w3-green">
            	<h1>W3Schools Demo</h1>
                <p>Resize this responsive page!</p>
            </div>
            <div className="w3-row-padding">
            	<div className="w3-third">
                  <h2>London</h2>
                  <p>London is the capital city of England.</p>
                  <p> It is the most populous city in the United Kingdom,
                  with a metropolitan area of over 13 million inhabitants.</p>
              </div>
          </div>
      </div>
    );
}

CSS framework 결과물

[엘리스 AI트랙] 06-02-01 ~ 06-02-02 SQL 1

Juliie — Wed, 27 Oct 2021 14:36:51 +0900

1. 데이터베이스

여러 사람이 공유해 사용할 목적으로 통합하여 관리되는 데이터의 모음
ex) Maria DB, Oracle DB 등
SQL: 데이터베이스에 접근, 조작하기 위한 표준 언어
- Structured Query Language

1) 관계형 데이터베이스 / 비관계형 데이터베이스

관계형 데이터베이스: 하나 이상의 테이블로 이루어지며 서로 연결된 데이터를 가지고 있음
- SQL을 통해 제어 가능
비관계형 데이터베이스: 데이터들간의 연결이 없음

2) 테이블의 구성 요소

	⬇️컬럼(Column, 열)⬇️	⬇️컬럼⬇️	⬇️컬럼⬇️
레코드(Record)➡️	사번	이름	성별
레코드➡️	001	철수	남성
레코드➡️	002	영희	여성

컬럼: 주제, 제목
레코드: 내용, 값
모든 테이블은 고유의 이름으로 구분

명령어

https://julia98percent.github.io/2020/11/27/201127(%EA%B8%88).html

1) DESC(DESCRIBE) 테이블명

테이블의 구조를 출력
컬럼명, 데이터 타입, NULL 유무, KEY 등을 알아볼 수 있음

2) DISTINCT 컬럼명

해당 컬럼의 중복을 제거하고 보여준다
DISTINCT 뒤에 2개 이상의 컬럼을 적으면 한 쪽 컬럼에 중복이 있더라도 다른 쪽 컬럼의 값이 다른 경우 다르게 취급

3) SELECT 컬럼명 FROM 테이블명 WHERE 조건

ex) SELECT * FROM book WHERE title = '돈키호테';
조건이 여러개라면? ➡️ AND OR ! 사용 가능
그 외에도 BETWEEN a AND b IN, NOT IN...

4) LIKE 키워드

ex) SELECT * FROM 테이블명 WHERE 컬럼명 LIKE 조건
와일드카드를 사용할 수 있음
%: 글자 수 상관 없음
_: 1글자 의미

5) ORDER BY

SELECT * FROM 테이블명 ORDER BY 컬럼명 정렬 조건(ASC || DESC)

6) INSERT

INSERT INTO 테이블명(컬럼1, 컬럼2, 컬럼3...) VALUES (추가할 깂1, 값2, 값3...)
컬럼을 명시하지 않으면 순서대로 값을 삽입
테이블명과(컬럼이름 사이에 공백 있으면 오류 발생

7) UPDATE

관계형 데이터베이스의 테이블에서 이미 저장된 값을 수정하는 명령
UPDATE 테이블명 SET 변경할 값 WHERE 조건

8) DELETE

관계형 데이터베이스의 테이블에서 이미 저장된 값을 삭제하는 명령
DELETE FROM 테이블명 WHERE 조건
WHERE 조건이 없을 경우 모든 데이터 삭제
일부 수정: update
전체 삭제: delete

[MariaDB] mariaDB 설치하기 for MacOS

Juliie — Wed, 27 Oct 2021 03:39:52 +0900

부제: 에러 코드 수집하기ㅎ...ㅎㅎ ( ᵕ̩̩ㅅᵕ̩̩ )

엘리스 실습시간에 mariaDB 설치하려다가 안돼서 삽질끝에 성공한 과정 포스팅 ‍♀️

나는 예전에 백엔드 쪽을 깔짝대려고 mysql을 설치한 상태였다

이 상태에서 설치하려고 했더니 바이너리가 겹칠수 있다고 나한테 겁을 주길래 단순히 삭제하면 될줄 알았는데

...이 때부터 시작이었을줄 난 몰랐지...

원래는 https://mariadb.com/kb/ko/installing-mariadb-on-macos-using-homebrew/ 따라하면 되는건데

왜때문인지 나는 좀 험난했다...

Homebrew로 macOS에 MariaDB Server 설치

Homebrew 패키지 매니저를 이용해서 MariaDB Server를 macOS (이전 Mac OS X) 설치할 수 있습니다. MariaDB Server는 미리 컴파일된 Homebrew "bottle" 패키지로 이용 가능하며, 소스 빌드가 필요 없어 시간을 절약해

mariadb.com

만약 위 링크를 따라서 설치가 잘 됐다면

$ sudo mysql -uroot

처음에 sudo 없이 했는데 denied 당했다 password는 초기에는 그냥 엔터치면 진입 가능하다

감격 그 자체

$ use mysql
$ set password for 'root'@'localhost' = password('바꿀_비밀번호');

비밀번호 설정까지 끝 !!!

다음에 접속할때는 sudo mysql -uroot 대신

$ mysql -uroot -p바꾼_비밀번호

로 진입 가능하다✨

⬇️ 여기서부터 에러 로그

1) mariadb를 시작하려고 하는데 bootstrap 관련 오류가 뜬다

$ brew services start mariadb
-> Failure while executing; `/bin/launchctl bootstrap gui/501 /Users/j/Library/LaunchAgents/homebrew.mxcl.mariadb.plist` exited with 5.

이 경우에는 mariadb가 이미 실행중인 상태이기 때문에 발생할 수 있다

brew services restart mariadb 로 해결 가능!

2) mariadb가 종료가 되지 않는다

launchctl unload [plist경로]

나의 경우에는 /usr/local/Cellar/mariadb/10.6.4/homebrew.mxcl.mariadb.plist 였다

3) sudo mysql -uroot로 로그인을 시도했지만 실패!

Can't connect to local server through socket '/tmp/mysql.sock' (2)

나의 경우는 아까 brew install mariadb로 설치할 때 설정파일이 겹쳐서 postinstall 하라는 경고 메세지가 떴었는데 이게 문제였다

Warning: The post-install step did not complete successfully
You can try again using: brew postinstall mariadb

hoxy...설정 파일이 겹쳐서...?

$ brew services stop mariadb
$ brew uninstall mariadb
$ rm -rf /usr/local/var/mysql
$ rm /usr/local/etc/my.cnf

참고: https://walkingfox.tistory.com/89

macOS에서 homebrew로 mysql 을 깨끗하게 재설치

macOS에서 HomeBrew를 이용하여 mysql 5.7을 사용중에 validate_password 설정관련하여 문제가 생기면서 관련 plugin을 지웠는데 mysql이 제대로 구동되지 못하는 상태가 되었다. ERROR 2002 (HY000): Can't conn..

walkingfox.tistory.com

깨끗하게 삭제하고 재설치하니 성공 ⭐️

[엘리스 AI트랙] 엘리스 3기 5주차 후기

Juliie — Sat, 23 Oct 2021 19:49:28 +0900

1. 내가 생각하는 엘리스에서 가장 귀여운 캐릭터: 거북이

부기부기

열일하는 봇이라서 실강날이면 맨날 레이서님들~ QR 체크인 해주세요~ 체크아웃 해주세요~~ 하는게 넘모 귀엽다

난 강경토끼파지만 이렇게 귀여운 거북이는 못참지,,,

2. 스터디 후기

1) 블로그 글 꾸준히 쓰는 스터디: 정리 잘 하시는분들이 많아서 존경스러움,,,ㅠ 나도 벨로그로 시작할걸 좀 후회되지만 어차피 개인 정리용이니까 티스토리로 계속 가는걸로 최종 목표는 글 잘 다듬어서 깃허브 블로그에 하나씩 정리하기....!!!!

2) 알고리즘 스터디: 역시 다른 사람들이 쓴 코드 보는게 도움이 많이 되는거 같다...내일 첫 모임인데 호다닥 준비해야지

3) 하루 일과를 쓰는 스터디...까진 아니고 소모임 느낌?: 다른 사람들이 어떻게 시간을 쓰는지 볼 수 있어서 자극받게 된다 그리고 무엇보다 내가 뒹굴거리기만 하는거 같아서 책상에 앉게 됨...ㅎㅎ 역시 나는 약간 강제성을 띠는걸 해야 뭐라도 하나보다...이런 수동적 인간같으니라고

내 약점 알고리즘

3. 밀린거 겨우겨우 따라잡고 있는중,,,,이번주는 CSS 관련 내용이 있어서 그으으으나마 나은 느낌,,,(하지만 리덕스가 있다면 어떨까)

다음주부터 백엔드인데 크흡 벌써 눈물이 난다

하......일단 아무튼 화이팅........ ‍♀️ ‍♀️ ‍♀️ ‍♀️ ‍♀️ ‍♀️

[엘리스 AI트랙] 04-04-01 React 심화 1

Juliie — Fri, 22 Oct 2021 18:47:31 +0900

1. 자바스크립트 비동기의 등장

초기 웹 환경에서는 서버에서 모든 데이터를 로드하여 페이지를 빌드했기 때문에 JS에서는 별도의 비동기 처리가 필요하지 않았음

AJAX(Asynchronous Javascript And XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨

옛날옛날...에는 브라우저가 정보를 요청하면 서버는 해당 정보를 포함한 페이지 전체를 전달 ➡️ 브라우저는 서버로부터 받은 HTML을 새롭게 렌더링했다고 한다 ‍

XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨

2. 자바스크립트는 single-threaded language

자바스크립트는 하나의 스레드를 사용하는 언어다

자바스크립트는 메인 스레드가 하나인 single-threaded 언어이기 때문에, 서버 요청을 기다려야 하는 경우 브라우저는 멈춰있게 될것 (답답쓰) ➡️ 그렇기 때문에 비동기 처리를 이용해서 서버로 통신할 필요성이 있음
비동기 요청 후, 메인 스레드는 응답을 하염없이 기다리는 대신 ! 유저의 입력을 받거나 페이지를 그리는 등 다른 작업을 처리함
비동기 응답을 받게 되면, 응답을 처리하는 callback 함수를 task queue에 넣음
event loop는 메인 스레드에 여유가 있을 때 task queue에서 함수를 꺼내 실행

3. 비동기 처리를 위한 내부 구조

브라우저의 메인 스레드는
- JS 코드에서 동기적으로 처리되어야 할 코드 실행
- 웹 페이지 실시간 렌더링
- 유저 입력 감지
- 네트워크 통신 처리 등...수 많은 일을 처리
비동기 처리 코드를 감싼 블록은 task queue에 넣어지며, 메인 스레드가 동기 코드를 실행한 후에 제어권이 돌아왔을 때 event loop가 task queue에 넣어진 비동기 코드를 실행 (➡️ 때문에 setTimeout은 reliable하지 않다고 한다)

비동기 다이어그램

Task queue: 비동기 작업이 들어오는 곳
Event Loop: 메인 스레드에 여유가 생기면 Task queue에서 작업을 꺼내와 Call stack에 넣는 모듈

동기 & 비동기 설명은 실습 수업시간에 봤던 그 영상으로

4. Callback pattern vs Promise

(1) Callback pattern

비동시 처리 후 실행될 코드를 Callback function으로 보내는 것
비동기 처리가 고도화되면서 Callback hell 등의 단점이 발생
ex) setTimeout 함수

(2) Promise

비동기 처리의 순서 조작, 에러 핸들링, 여러 비동기 요청 처리 등을 쉽게 처리할 수 있음
Promise를 사용함으로써 얕은 depth로 비동기 처리를 할 수 있음

5. Promise

Promise 객체는 생성 당시에서는 알려지지 않은 데이터에 대한 Proxy
- 일단 data가 들어왔다고 가정하고 그 후의 로직을 작성
비동기 실행이 완료된 후에 '.then' '.catch' '.finally' 등의 핸들러를 붙여 각각 데이터 처리 로직, 에러 처리 로직, 클린업 로직을 실행함
then 체인을 붙여 비동기 실행을 마치 동기 실행인 것처럼 동작하도록 함
참고 사이트: https://promisesaplus.com/

Promises/A+

Here “platform code” means engine, environment, and promise implementation code. In practice, this requirement ensures that onFulfilled and onRejected execute asynchronously, after the event loop turn in which then is called, and with a fresh stack. Th

promisesaplus.com

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

(중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법

joshua1988.github.io

(1) Promise 객체의 상태

Promise 객체는 pending, fulfilled, rejected 3개의 상태를 가짐

fulfilled, rejected ➡️ settled라고 지칭
pending: 비동기 실행이 끝나기를 기다리는 상태
fulfilled: 비동기 실행이 성공한 상태
rejected: 비동기 실행이 실패한 상태
then, catch는 비동기(Promise), 동기 실행 모두 리턴 가능

(2) Multiple Promise handling

Promise.all(): 모든 프로미스가 fulfilled 되길 기다림
- 하나라도 에러가 발생하는 경우, 모든 프로미스 요청이 중단됨
- 특정 비동기 작업이 상대적으로 빠르게 끝나도 나머지 느린 처리를 끝까지 기다려야함
Promise.allSettled(): 모든 프로미스가 settled 되길 기다림
Promise.race(): 넘겨진 프로미스들 중 하나라도 settled(➡️ fulfilled or rejected) 되길 기다림
Promise.any(): 넘겨진 프로미스들 중 하나라도 fulfilled 되길 기다림

(3) Promise chaining, nested promise

Promise 객체는 settled 되더라도 계속 핸들러를 붙일 수 있음
핸들러(.then(), .catch(), .finally())를 붙인 차례대로 호출
.catch 뒤에 핸들러가 붙어있다면 에러를 처리한 후에 계속 진행됨
- ➡️ catch에서 리턴한 값이 then으로 전달됨

4. async / await

Promise chain을 구축하지 않고도 Promise를 직관적으로 사용할 수 있는 문법
많은 프로그래밍 언어에 있는 try ...catch 문으로 에러를 직관적으로 처리
async function을 만들고, Promise를 기다려야 하는 표현 앞에 await을 붙임
async function 안에서만 await 키워드 사용 가능
Promise.all과 달리 끝난대로 먼저 처리 가능(parallelism)

async는 함수 이름 부분의 제일 앞에,
await는 결과를 기다릴 함수 호출 부분 앞에 작성합니다.
async는 해당 함수에서 비동기 처리를 위한 Promise 동작을 한다는 것을 명시하는 것이고, await는 호출되는 함수가 적절한 결과를 반환할 때까지 기다리도록 동작합니다. 실질적인 동작은 await이고, awiat을 사용하기 위해 async를 명시해야 한다고 이해하시면 됩니다!

[BOJ] 9012 괄호 - Python

Juliie — Thu, 21 Oct 2021 01:49:23 +0900

링크

https://www.acmicpc.net/problem/9012

9012번: 괄호

괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고

www.acmicpc.net

문제

괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 부른다. 한 쌍의 괄호 기호로 된 “( )” 문자열은 기본 VPS 이라고 부른다. 만일 x 가 VPS 라면 이것을 하나의 괄호에 넣은 새로운 문자열 “(x)”도 VPS 가 된다. 그리고 두 VPS x 와 y를 접합(concatenation)시킨 새로운 문자열 xy도 VPS 가 된다. 예를 들어 “(())()”와 “((()))” 는 VPS 이지만 “(()(”, “(())()))” , 그리고 “(()” 는 모두 VPS 가 아닌 문자열이다.

여러분은 입력으로 주어진 괄호 문자열이 VPS 인지 아닌지를 판단해서 그 결과를 YES 와 NO 로 나타내어야 한다.

문제 풀이

처음엔 스택 쓸 생각 안하고 (그냥...스택 없이 풀고 싶었다...) 풀었는데 스택을 익히기 좋은 문제라는 설명을 듣고 결국 스택으로 또 한번 더 푼 문제...⭐️

# 스택 없이
def isVPS(ps):
    cnt = 0
    for i in ps:
        if i == '(':
            cnt += 1
        else: cnt -= 1
        if cnt < 0:
            return "NO"
    return "NO" if cnt else "YES"

def main(num):
    for i in range(num):
        i = input()
        j = isVPS(i)
        print(j)
    return

n = int(input())
main(n)

# 스택으로 풀기
def isVPS(ps):
    stack = []
    for j in ps:
        if j == '(':
            stack.append('(')
        else:
            if not len(stack):
                return "NO"
            else: stack.pop()
    return "NO" if len(stack) else "YES"

def main(num):
    for i in range(num):
        i = input()
        j = isVPS(i)
        print(j)
    return

n = int(input())
main(n)

별 차이는 없는듯 하다...아마도

[엘리스 AI트랙] 리액트 라우터(React-Router)

Juliie — Wed, 20 Oct 2021 15:46:33 +0900

Declarative Routing for React

리액트 라우터 공식 문서

공식 문서에서는 React Router를 Declarative Routing for React로 정의하고 있다

이게 머야,,,싶어서 검색한 끝에 잘 설명해주는 글 발견 ( ‍♀️ 멋진 코드 예제들이 있어요!)

https://stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js

Difference between declarative and imperative in React.js?

Recently I've been studying a lot about the functionality and the ways to use the Facebook JavaScript library React.js. When speaking of its differences to the rest of the JavaScript world often th...

stackoverflow.com

https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

Declarative vs Imperative Programming

Or wrong ways I was thinking about React

codeburst.io

https://egas.tistory.com/2

선언형 프로그래밍과 명령형 프로그래밍

React의 특징 중 하나에 선언형이 있다. 선언형은 무엇을 의미할까? 프로그래밍 패러다임은 프로그램을 작성할 때의 관점을 의미한다. 우리가 아는 객체지향도 프로그래밍 패러다임 중 일부이다.

egas.tistory.com

이런 느낌일까...?

// 1. 명령형 언어
if (손님 === '토끼') {
	집 청소하기()
    복숭아 사기()
    토끼 사료 사기()
    건초 사기()
    담요 깔아드리기()
} else if (손님 === '고양이') {
	말린 닭고기 사기()
}

// 2. 선언형 언어
if (손님 === '토끼') {
	return <토끼손님 />
} else if (손님 === '고양이') {
	return <고양이 />
}

생각해보니까 리액트는 선언형 언어라고 했는데! 까먹고 있었다

이제 선언형 뷰의 장점들이 이해가 약간 갔다

react-router의 기능

리액트 컴포넌트를 특정 path와 연결하면, 해당하는 path로 진입시 컴포넌트를 렌더링하게 함

<Route path="/yeolmoo">
	<YoungRadish />
</Route>

URL 파라미터(ex: query, path variable 등)를 얻어 활용 가능

조건에 맞지 않을 경우 redirect 함
페이지 이동 시, 이벤트 핸들러를 등록할 수 있음
- ex) history.listen()
/post/123 과 같은 nested route를 구현함
- /post ➡️ 1번 포스트(/1) , 2번 포스트(/2), 3번 포스트(/3) ...
- Route안에 Route가 들어가는 경우

react-router의 사용법

<BrowserRouter> 로 감싸 Router Context를 제공해야 함
Route로 path를 정의하고, 그 안에 렌더링하고자 하는 컴포넌트를 넣음
Link로 특정 페이지로 이동시, 리로드 없이 페이지가 이동함 (기본 기능)
Switch로 매칭되는 라우트 하나를 렌더링하게 함
- 자식들 중 처음으로 조건이 만족하는 하나의 컴포넌트만 출력하도록 함

<BrowserRouter>
	<Switch>
    	<Route path="about" />
        	<AboutPage />
        </Route>
        <Route path="contact" />
        	<ContactPage />
        </Route>
        <Route path="/" />
        	<HomePage />
        </Route>  
    </Switch>
</BrowserRouter>

react-router 컴포넌트

1. BrowserRouter

HTML5의 History API를 사용하여 UI와 URL의 싱크를 맞추는 역할
- ex) About 페이지로 들어가면 주소창에도 peach.com/ ➡️ peach.com/about 과 같은 식으로 주소가 변경된다
- 서버에서 페이지를 새로 받아온건 아니지만...이런 처리가 있어야 URL path가 변경되는 이벤트를 브라우저가 감지할 수 있음 ➡️ 이벤트 핸들러 처리가 가능해짐
모든 URL에 대해 일관성 있게 동작하게 하기 위해서는 동일한 클라이언트를 내려줄 수 있도록 서버 설정 필요
모든 path 앞의 basename을 지정할 수 있음
- ex) "peach.com/ko/users" , "peach.com/en/users", "peach.com/jp/users"...
forceRefresh로 페이지 이동 시 리프레시 할 것인지 지정할 수 있음

2. Swtich

여러 Route 중 가장 먼저 매치되는 Route를 선택하여 렌더링함
매칭 되는 Route가 없으면 아무것도 보여주지 않음
- fallback 용으로 404 not Found 페이지를 추가함
path="/" 의 경우 모든 path에 매칭
- 1) 가장 아래로 내림
- 2) exact 키워드 추가

3. Route

path와 컴포넌트를 매칭
매칭되는 컴포넌트는 ❗️
- 1) children으로 넣어주거나
- 2) component prop으로 넘김
exact 키워드로 정확하게 매칭하는 path 설정 가능

// 1번 + exact 키워드
<Route exact path="/watermelon">
	<Watermelon />
</Route>

// 2번
<Route component={Watermelon} path="/watermelon" />

Route로 렌더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받을 수 있음
render prop으로 매칭되었을 때 실제 어떤 컴포넌트를 렌더링할지 통제함

뭐야,,, 그럼 render나 component prop이나 같은거 아닌가? 라는 생각이 들었는데 코치님(feat. 공식문서)이 이해 쏙쏙 가게 설명 잘 해주셨다...❤️ 사...사랑합니다 코치님 최고 ( ⁎ᵕᴗᵕ⁎ )

우선 특정 path와 매치될 때 <Route>로 컴포넌트를 렌더링 할 수 있는 방법은 아래와 같습니다.

1. 자식 element로 넣는다(공식 문서에서 추천)
<Route exact path="/">
  <Home />
</Route>
1번 방법을 사용하지 않고 다른 rendering methods를 사용할 수도 있는데(component, render, children function), 이 경우는 hook이 소개되기 전에 이전 버전의 router로 만들어진 앱을 지원하기 위해서입니다.

2. <Route component> 사용
<Router>
  <Route path="/user/:username" component={User} />
</Router>
<Route> 의 component를 사용하면 router는 주어진 컴포넌트에서 새로운 엘리먼트를 만들기 위해 React.createElement 를 사용한다고 해요. 그래서 만약에 component={() => <User />} 와 같은 형태로 만들면, 렌더링이 될 때마다 새로운 컴포넌트를 만들게 됩니다. 근데 이건 원래 있던 <User /> 컴포넌트 마운팅이 해제되지 않은 상태에서 계속 새로운 컴포넌트가 마운팅 되는 거예요! 그러니까 만약 component에 인라인 함수를 쓸 일이 있다면(예: prop으로 뭔가 넘겨준다거나...) redner를 사용하는 게 좋아요.

3. <Route render> 사용
<Router>
  <Route path="/home" render={() => <div>Home</div>} />
</Router>
사실 2번 설명까지만 읽으셔도 '아 인라인 함수로 뭔가 prop을 넘겨주거나 할 때면 route의 component를 쓸 게 아니라 render를 쓰는 거구나! 근데, component나 render를 사용하기보다는 <Route path="/user/:username"><User /></Route> 처럼 자식 컴포넌트로 넣어주는 게 더 좋은 거구나!' 라는 걸 아실 수 있어요. 이까지만 아셔도 솔직히 무리 없습니다! 그래도 render에 대해서 조금 설명해보자면 render를 사용할 땐 component와 다르게, 우리가 원하지 않는 마운팅이 되지 않게 인라인 함수를 쓸 수 있어요. 그리고 하나 주의하실 점은 <Route component>가 <Route render>보다 더 중요하기 때문에 component와 render를 같은 <Route>에 쓰지 않아야 한다는 점이에요. 아래와 같이요!
<Route component={} render={} />
4. <Route children> function 사용 (설명 X. 필요하시면 찾아보기!)

공식문서쓰

4. Redirect

Link와 비슷하지만 렌더링 되면 to prop으로 지정한 path로 이동함

//선언적 코드
if (!users) {
	return (
		<Redirect to=“/abc” />
	)
}
return (
	div…

근데 Link도 to prop 있는거 아닌가...? 에 대한 답변...근데 플젝에서 직접 써봐야 이해가 갈것같다ㅜㅅㅜ

https://stackoverflow.com/questions/51116747/react-router-link-vs-redirect-vs-history

React-Router - Link vs Redirect vs History

There seems to be some confusion with what to use over the other: history.push('/some/path') I have been using React/Router for a li...

stackoverflow.com

Switch 안에서 쓰일 경우, from과 to를 받아서 이동하게 만듦
- ex) from "/" to="/login"

5. Link, NavLink(Link의 특별한 버전!)

to prop을 특정 URL로 받아, 클릭 시 네비게이션 함
anchor tag를 래핑함
NavLink의 경우, 매칭 시 style attributes를 추가해줄 수 있음 ➡️ Link와 가장 큰 차이점
to에 location object나 함수를 받을 수 있음

https://reactrouter.com/web/api/NavLink

React Router: Declarative Routing for React

Learn once, Route Anywhere

reactrouter.com

6. useHistory, useLocation, useParams, useRouteMatch

최상위 컴포넌트가 아니더라도 hook으로 react-router 관련 객체에 접근할 수 있음
history, location, params, match 객체에 접근

[엘리스 AI트랙] 04-02-01 ~ 04-02-02 React 기초 3

Juliie — Wed, 20 Oct 2021 02:06:40 +0900

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

1. form 태그 작성할땐 type들을 잘 작성해주는것이 좋다

2. 함수가 선언됐는지(존재하는지) + 타입 확인을 한번 더 함으로써 에러 방지!

if(typeof onInsert === "function" && inputValue) {
// onInsert가 정상적인 함수인 지 확인하여 에러 방지
	onInsert(inputValue);
}

3. 리액트에서 style은 object로 표현해야한다

<div className="greeting" style={{ padding: 10, color: 'red'}}>
	{name}님 안녕하세요 <br />
    반갑습니다.
</div>

위와 같은 inline style의 property name은 camelCase로 적는다
첫번째 중괄호는 자바스크립트 표현을 사용하겠다는 의미
두번째는 object의 중괄호

SPA와 라우팅

Single Page Application

하나의 페이지 요청으로 전체 웹앱을 사용하는 방식

SPA	MPA
전체 웹앱을 JS만으로 구성, 첫 요청 시 빈 페이지를 받게 됨	미리 서버에서 전체 페이지를 빌드해 브라우저로 전송 ➡️ 캐싱 불가능
여러 페이지를 하나의 앱의 구성 요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용 하는 방향으로 구현	페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기 힘듦
Client-side routing 기술을 활용, 페이지 진입 시 리로드 없이 라우팅	서버에 미리 여러 페이지를 두고 유저가 네비게이션 시 요청에 적합한 페이지를 전달
AJAX를 활용해 페이지 이동 시 서버에 데이터만 요청하여 JS로 페이지를 만듦	서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리

SPA의 장점
- 서버에서 페이지를 만들 필요가 없기 때문에 CDN에 캐싱 가능
- 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어듦 (제약 조건 줄어듦)
- 웹 사이트를 개별 페이지보다는 하나의 앱으로 보는 설계로 고도의 SW 설계(ex: 상태관리, 라우팅, 컴포넌트 재사용, Hook 등...)와 패턴 적용 가능
SPA의 단점
- SEO에 불리함
- 하나의 JS 앱이 지속하므로, 메모리 관리와 성능, 데이터 활용 등이 중요
  - 페이지가 리로드 되지 않으면 페이지가 뜬 상태로 유지되기 때문에
- 여러 페이지를 전송받는 것보다, 하나의 거대한 JS 앱을 전송받아야 하므로 코드가 많아질수록 로드 속도가 느려짐
  - 코드의 양을 줄이고 필요할때만 코드를 로딩하는 lazy loading 등의 처리를 통해 페이지 전송을 빠르게 할 수 있음
SPA에서 라우팅이 왜 중요하냐면...
- 유저가 다른 페이지로 이동했을 때, reloading이 없어야하기 때문에
- 라우팅 라이브러리는 reloading을 없애는 근원적인 기술
- 주로 History API or URL Hash를 이용해 페이지 리로드 없는 페이지 전환을 구현
  - 요즘에는 Hash 방식보다 History API를 통해 편리한 라우팅을 구현할 수 있음

[엘리스 AI트랙] 엘리스 3기 4주차 후기

Juliie — Sun, 17 Oct 2021 17:30:18 +0900

1. 음...진도 진짜 많이 밀려버렸어요...리액트 hook과 자료구조 큐가 특히 어려웠던 느낌...

아니 자료구조 분명 이해했다고 생각했는데 왜 문제 풀려고 하면 응용이 안되는건지,,,나는 모르게따

교수님...진도가 너무 빠릅니다

둘다 진도율이 100%여야 하는데.?

2. 파이썬이랑 JS랑 섞어서 문제풀이 하게 된다...0개 언어?

빨리 파이써닉한 코드 짜고 싶은데...!!!!!!

3. 융합전공을 했지만 주변에 프론트쪽 생각하는 사람이 없어서 항상 아쉬웠는데 여기는 넘쳐난다 정보 공유 감사합니다 다들...

4. 자괴감...사실 이번 주차테스트 0점인데요... 사슴공부법의 일환으로 생각하고 더 열심히 해야겠다...끝까지 살아남는 사슴 나야나...나야나...

일단 큐 문제 조지러 총총...⭐️

[엘리스 AI트랙] 03-05-01 ~ 자료구조

Juliie — Fri, 15 Oct 2021 18:48:02 +0900

1. 자료구조

자료를 저장하는 방법과 자료에 적용할 수 있는 연산을 구체적으로 제공한 것
각각 장단점이 있으며 구현하고자 하는 프로그램의 성능을 고려하여 알맞은 자료구조를 선택해야함

2. 추상적 자료형

어떤 자료와 그 자료에 대한 연산(동작)들의 수학적인 정의
이 정의를 구현하는 방법은 명시되어 있지 않음
추상적 자료형을 구체적으로 구현한 결과가 자료구조

3. 리스트 (추상적 자료형)

순서가 존재하며, 일렬로 나열된 값들이 들어있음

(1) 배열 (구현)

인덱스 가지고 있음
특정 위치의 자료 탐색 유리

(2) 연결 리스트(구현)

일렬로 저장된 값들이 노드의 형태로 저장되어 있음
자료의 삽입, 삭제에 유리

(3) 해시 테이블

충돌 해결 방법: 오픈 어드레싱
- 충돌이 발생했을 때 자료를 저장하기 위해 빈 공간을 탐색하는 방식
- 모든 원소가 자신의 해시 값과 일치하는 인덱스에 저장된다는 보장은 없

[error] create is not a function at commitHookEffectListMount

Juliie — Wed, 13 Oct 2021 18:08:46 +0900

리액트 실습하고 있는데 발견해서 쓰는 에러 로그,,,(._.

원인은 useEffect에 콜백함수가 안들어왔기 때문이라고 한다

//수정 전
useEffect(console.log(inputValue), [inputValue]);

//수정 후
useEffect(() => {console.log(inputValue)}, [inputValue]);

함수 넘겨주는걸로 문제 해결

[엘리스 AI트랙] 03-04-03 React기초 2 (Hook)

Juliie — Wed, 13 Oct 2021 00:23:51 +0900

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

1. Hook

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용
State Hook의 대표적인 예로 useState가 있음
다른 컴포넌트와 Hook 내에서만 사용 가능
이름은 반드시 use로 시작
최상위 level에서만(첫번째 중괄호) hook 호출 가능 ⭐️

왜 Hook이 등장했냐면...

기존에는 컴포넌트 내에서 state와 생명주기를 관리하기 위해서 반드시 클래스형 컴포넌트를 사용
다소 복잡한 클래스형 컴포넌트를 보완하고 함수형 컴포넌트에서도 해당 기능을 사용할 수 있도록 이후 추가됨

(1)State Hook

useState: 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook
state는 읽기전용! 직접 수정 금지
state를 변경할 때는 꼭 setState 이용하기, 이 때 자동으로 컴포넌트가 재렌더링 됨

(2)Effect Hook

side effect: 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 “side effects”(또는 짧게 “effects”)라고 합니다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문입니다."

컴포넌트가 최초로 렌더링될 때, 지정한 state나 props가 변경될 때 마다 이펙트 콜백 함수가 호출됨
Deps: 변경을 감지할 변수들의 집합(배열)
EffectCallback: Deps에 지정된 변수가 변경될 때 실행할 함수
https://ko.reactjs.org/docs/hooks-overview.html#effect-hook
예시 코드

useEffect(() => {
	console.log(`버튼을 ${count}회 클릭했습니다.`)
}, [count])

const App = () => {
	useEffect(() => {
    	    const intervalId = setInterval(() => {
        	console.log("안녕하세요");
        }, 1000);
        
        return () => {
        	clearInterval(intervalId);
        }
    }, [])
....

deps에 넘겨진 값이 없어도 컴포넌트가 생성될 때 한번은 실행이 됨(➡️ 컴포넌트가 생성될 때 한번만 실행해줘!)
useEffect의 이펙트 함수 내에서 다른 함수를 return할 경우 state가 변경되어 컴포넌트가 다시 렌더링 되기 전과 컴포넌트가 소멸할 때 호출할 함수를 지정하게 됨
컴포넌트를 재렌더링 하기 전에, 컴포넌트가 없어질 때 clearInterval 함수 실행

(3) 그 외의 Hook

① useMemo

지정한 state나 props가 변경될 경우 해당값을 활용해 계산된 값을 메모이제이션하여 재렌더링시 불필요한 연산을 줄여줌(변수 메모)
계산한 값을 메모리에 저장해야 하므로 성능 이슈 발생 가능성 있음

② useCallback

함수를 메모이제이션하기 위해 사용하는 hook
컴포넌트가 재렌더링 될 때 불필요하게 함수가 다시 생성되는 것을 방지
useMemo(() => fn, deps) 와 useCallback(fn, deps)는 같음

③ useRef

컴포넌트 생명 주기 내에서 유지할 ref 객체를 반환
다시 렌더링 되지 않아야 할 객체가 있을 때 사용
ref 객체는 .current라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있음
useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트는 재렌더링 되지 않음
일반적으로 리액트에서 Dom Element에 접근할 때 사용

[엘리스 AI트랙] 03-04-01 ~03-04-02 React 기초 2

Juliie — Mon, 11 Oct 2021 17:19:32 +0900

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

1. Props

컴포넌트에 원하는 값을 넘겨줄 때 사용
Javascript의 요소라면 모두 넘겨줄 수 있음(ex: 변수, 함수, 객체, 배열 등)
주로 컴포넌트의 재사용을 위해 사용
컴포넌트에 많은 로직이 들어가고 반환되는 jsx의 요소들이 많고 복잡하다면 props를 사용하는게 효율적
props는 읽기 전용⭐️

왼쪽처럼 props의 값을 직접 변경할 경우 리액트가 재렌더링하는데 문제가 생길 수 있음
오른쪽처럼 새 변수를 생성해 복제해서 사용합쉬다

HTML에서의 checked, value ➡️ 초기값
리액트에서는 현재값
초기값을 지정하고 싶다면 defaultChecked, defaultValue 속성 사용하기

2. State

컴포넌트 내에서 유동적으로 변할 수 있는 값을 저장
state 값이 변경되고 재렌더링이 필요한 경우 리액트가 자동으로 계산하여 변경된 부분을 렌더링

그렇기 때문에 이런식으로 state 값을 직접 변경하게 되는건 리액트는 못 참는다,,,(오류는 안남)
➡️ 리액트가 다시 렌더링할 타이밍을 적절하게 잡을 수 있도록 setState 함수를 사용하자(재렌더링 명령)

state를 변경하는 두 가지 방법

(1) setState 함수에 변경할 값 직접 넣기

넣은 값으로 state 값 변경

(2) setState에 함수 넣기⭐️

함수가 리턴하는 값으로 state 변경(현재값 기반으로 state 변경하는 경우 권장)

object를 갖는 state를 만들 때 주의 사항⭐️

기존 객체의 내용을 새로운 object에 담고 해당 내용을 변경한다 (헷갈리면 물류창고 비유)
전자의 경우 인식 및 재렌더링 불가

3. 이벤트

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
evenet object의 target은 이벤트의 원인이 되는 element를 가리킴(ex: e.target.value)

object의 key를 동적으로 할당하는 방법

const App = () => {
	const [user, setUser] = useState({ name: "민수", school: "피자스쿨"});
	
    const handleChange = (e) => {
    	const { name, value } = e.target;
        const newUser = { ...user };
        newUser[name] = value;
        setUser(newUser);
    };
    
    return (
    	<div>
        	<input name="name" onChange={handleChange} value={user.name} />
            <br />
            <input name="school" onChange={handleChange} value={user.school} />
            <p> {user.name} 님은 {user.school}에 재학중입니다. </p>
        </div>
    );
};

이벤트 작명: on+동사 / on+명사+동사
핸들링 함수 작명: handle+동사 / handle+명사+동사

[엘리스 AI트랙] 211006 TIL

Juliie — Thu, 7 Oct 2021 19:31:52 +0900

오늘은 7일인데 왜 6일자 TIL을 이제서야 올리냐면...흠흠

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

리액트

1. SPA(Single Page Application)

(1) 전통적인 페이지

서버에 특정 동작(ex: 로그인)을 요청 - 서버에서 HTML을 클라이언트에게 전달하면서 페이지 리로드

(2) SPA 페이지

JSON 형식으로 메세지만 서버로부터 받은 뒤 로그인 후에 바뀌어야 할 부분만 바뀌게 됨(ex: 로그인 -> 로그아웃 버튼)
페이지의 변경이 필요할 때 처음부터 모든 HTML을 불러오는게 아닌 변경된 부분만 바뀌게 된다.

2. Virtual DOM

가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념
React에서는 뒤에서 먼저 그려보고 사용자가 현재 보고있는 화면과 비교해 바뀐 부분만 새로 그려줌

최신 JavaScript 문법

1. Destructuring assignment(구조 분해 할당)

객체나 배열을 해체하여 개별 변수에 담을 수 있게 하는 표현식

const a = {i: 1, j: 2, k: 3};
const {i, j, k } = a; //객체 해체

const b = [1, 2, 3];
const [c, d, e] = b; //배열 해체

2. Shorthand property names

새로 선언하는 object에 key값과 동일한 변수명을 가진 변수를 할당할 경우 value 값 생략 가능

const username = "율리아"
const age = 17;
const school = "피자스쿨"

const person = {username, age, school}
//원래는 username: username, age: age ...

3. Optional chaining

객체나 변수에 연결된 다른 속성을 참조할 때 유효한 속성인지 검사하지 않고 값을 읽을 수 있게 해줌
-> 유효한 속성이 아닐경우 에러 대신 undefined를 반환하기 때문

//객체
const x = a?.b?.c;
//a 안에 b라는 속성이 없어도 에러가 뜨지 않음 (-> undefined 반환)

//배열
const y = arr?.[index]

[엘리스 AI트랙] 02-03-03 자바스크립트 2 (사실 제이쿼리 소개)

Juliie — Wed, 6 Oct 2021 02:00:12 +0900

WIL은 한 주간 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

1. 제이쿼리 선택자

$("h1")
$("#title")
$(".article")
$("~~~")

2. 제이쿼리 이벤트

$("h1").mouseenter // 요소의 경계 밖에서 안으로 마우스가 들어올 때
$("h1").mouseleave // 요소의 경계 안에서 밖으로 마우스가 나갈 때
$("h1").click // 마우스를 클릭할 때


$("h1").hide() // display 속성을 none으로 (감춤)
$("h1").show() // display 속성을 block으로 (보이게)
$("h1").toggle() //현재 상태의 반대로

$("h1").fadeOut() // 선택한 요소가 서서히 사라지게
$("h1").fadeIn() //선택한 요소를 서서히 나타나게
$("h1").fadeToggle() // 서서히 현재 상태의 반대로

$("h1").addClass() //선택한 요소의 클래스를 추가
$("h1").removeClass() //선택한 요소의 클래스를 삭제
$("h1").hasClass() // 선택한 요소에 클래스가 있는지 확인

3. this

(1) 정의

어떤 영역에 이벤트를 적용할 때 this는 선택된 영역만 의미

(2) 적용 방법

var $rabbit_icon = $(".rabbit_icon");

$rabbit_icon.click(function() {
	$(this).....
})

[엘리스 AI트랙] 02-03-01 ~ 02-03-02 자바스크립트 2

Juliie — Wed, 6 Oct 2021 01:24:42 +0900

WIL은 한 주간 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

1. DOM(Document Object Mode, 문서 객체 모델)

객체 지향 모델로써 구조화된 문서를 표현하는 방식
트리 구조
XML이나 HTML 문서의 프로그래밍 인터페이스
문서의 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함
종류: Core Dom(for 모든 문서 타입), HTML Dom, XML Dom

(1) Document 객체

웹 페이지를 의미
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야함

(2) HTML 요소의 선택 - 새로운 HTML 요소 선택을 위해 제공되는 메서드

메서드	설명
document.getElementById()	해당 아이디의 요소를 선택
document.getElementsByClassName()	해당 클래스에 속한 요소를 선택
document.getElementsByTagName()	해당 태그 요소를 선택
document.getElementsByName()	해당 name 속성값을 가지는 요소를 선택
document.querySelectorAll()	해당 선택자로 선택되는 요소를 모두 선택
document.querySelector()	해당 선택자로 선택되는 요소를 1개 선택

(3) HTML 요소의 생성 - HTML 요소를 생성하기 위해 제공되는 메서드

메서드	설명
document.createElement()	지정된 HTML 요소를 생성
document.write()	HTML 출력 스트림을 통해 텍스트를 출력

2. Node 객체

(1) 노드의 종류

문서 노드(document node): HTML 문서 전체를 나타내는 노드
요소 노드(element node): 모든 HTML 요소는 요소 노드로, 유일하게 속성 노드를 가질 수 있음
주석 노드(comment node)
속성 노드(attribute node): 요소 노드에 관한 정보를 가지지만 해당 요소 노드의 자식 노드에는 포함되지 않음
텍스트 노드(text node)

(2) 노드의 값

노드에 대한 정보는 nodeName(이름), nodeValue(값), nodeType(타입)으로 접근 가능

3. 이벤트

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생

//마우스 클릭 이벤트 예시
<p onclick=“changeText(this)”/>
// 여기서의 this는 p 태그 자기자신을 의미

그 외의 메서드

// 특정 지점으로 스크롤링
window.scrollTo({
	'behavior': 'smooth', // 부드럽게 이동
    'top': xxx.offsetTop
}): // 특정 영역 위에서의 좌표값
  
  
// 애니메이션 실행
zzz.animate({ keyframes }, {
	duration: 500,
    easing: "ease",
    iterations: 1,
    fill: "both"
 })


// 이전 요소 선택
zzz.previousElementSibling; // <-> zzz.nextElementSibling;

// 부모 요소 선택
zzz.parentElement;

// 첫번째 자식 요소 선택
zzz.firstElementChild; // <-> zzz.lastElementChild;

[엘리스 AI트랙] 02-02-03 자바스크립트 1

Juliie — Wed, 6 Oct 2021 00:25:02 +0900

WIL은 한 주간 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

1. 자바스크립트의 데이터 타입

String	문자열
Number	숫자
Function	함수^[각주:1]
Array	배열
Object	객체
Boolean	불린
undefined	정의되지 않음
null	널

1) 배열: 비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리

2) 객체: 프로퍼티, 메서드, 데이터로 구성되어 있으며 여러 종류의 데이터 타입 삽입 가능

3) undefined은 값이 정의되지 않은 것, null은 임의로 빈 데이터를 삽입한 것

2. 자바스크립트의 프로퍼티와 메서드

사실 두 개의 개념이 좀 헷갈렸는데 쉽게 정리한 글을 발견

https://www.codeit.kr/community/threads/22083

코딩이 처음이라면, 코드잇

월 3만원대로 Python, JavaScript, HTML/CSS, Java 등 1,600개 이상 프로그래밍 강의를 무제한 수강하세요

www.codeit.kr:443

document.write()도 있지만 document.writeln()도 사용 가능 -> 공백이 추가됨
== 연산자는 값만 비교하는 반면, === 연산자는 데이터 타입을 우선 비교한 후, 값을 비교함

매개변수(parameter)는 인자로부터 전달받은 값이 들어가는 통로, 인자(argument)는 함수에게 전달하는 데이터 [본문으로]

[엘리스 AI트랙] 엘리스 3기 2주차 후기

Juliie — Mon, 4 Oct 2021 22:44:50 +0900

1주차만 순삭이고 적응됐을 거라고 생각한 2주차...는 더 빨리 지나갔다.......ㅋㅋㅋㅋㅋ

저는...엘리스의 밀림의 왕입니다

토끼가 놀라고 애벌레가 땅을 치는...내 진도 상태

1. 엘리스는 스터디 제도가 있다...나는 시험 커트라인을 넘겨서 내가 듣고싶은 스터디를 들어갈 수 있게 돼따... 사실 아직 스터디 모집도 안해서 이거는 후기를 남길수 없다 개인적으로 난 알고리즘 스터디 들어가고 싶다 왜냐면 교수님이 투척하신 내 알고리즘 성적은.....(대충 작고 깜찍한 알파벳)

2. 코치님들이 각각의 개성이 뚜렷한 느낌이다ㅋㅋㅋ(내 기준) 일단 잘 가르치시는건 당연하고 특히 귀여우신 우리반 코치님...게다가 엄청나게 열정적이시기까지 그래서 공부할게 밀렸다 흑흑 분명 1주차 다 따라잡았었는데...이상하다...( ᵕ̩̩ㅅᵕ̩̩ ) 그치만 확실히 혼자 공부할때 놓친걸 많이 알아가서 넘모 좋다

3. 재밌는 사람들이 많음 ꉂꉂ(ᵔᗜᵔ*)

4. 의외의 복병인 제이쿼리... 현업에서는 많이 안쓰인대서 가볍게 하려고는 하는데 그래도 역시 어렵다ㅜㅅㅜ

5. 제 블로그 어케 아시고 들어오시는건가요,,,,,! 노션에 블로그 주소 적었구나 하핫

살짝 늦은 감이 있지만...3주차도 화이팅

[엘리스 AI트랙] 01-05-03 웹 프로그래밍 기초 (...근데 이제 리눅스를 곁들인)

Juliie — Sat, 25 Sep 2021 17:22:50 +0900

WIL은 한 주간 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

1. 정규 표현식

// 링크 추가 예정

2. grep

grep [option]^[각주:1] [pattern]^[각주:2] [파일명]

3. File Redirection

표준 스트림의 흐름을 바꾸어 일반적인 표준 입출력 및 오류를 사용하지 않고 다른 경로인 파일로 재지정 하는 것을 의미

→ 파일로 입력을 받거나 출력을 받을 수 있음

표준 스트림의 종류: stdin(키보드 입력), stdout(화면 출력), stderr(오류 내용 출력) ← 문자열로 콘솔에 출력되도록 설정되어 있음

> : 표준 출력을 재지정
- ls > ls.txt는 ls의 실행 내용을 ls.txt에 저장하겠다는 뜻
>> : 파일이 존재하지 않는다면 파일을 새로 생성하고, 존재한다면 파일내용에 덧붙여서 작성

4. mount - 리눅스의 경우 PnP 기능이 없어 사용자가 직접 mount 해야함

1) mount 실행 명령어: mount [option]^[각주:3] [device] [directory]

2) mount를 취소하는 명령어: remove [device] [directory]

3) 현재 mount 된 디스크 정보 출력: df

(etc/fstab: mount 설정을 유지시켜주는 설정 파일)

option
-i	대소문자를 구분하지 않고 검색
-v	패턴과 일치하지 않는 행을 출력
-c	패턴과 일치하는 행의 개수를 출력
-w	패턴과 단어 단위로 매칭 되는 경우만 출력

[본문으로]

패턴의 자리에 정규식을 넣을 수 있음 [본문으로]

-a	/etc/fstab에 명시된 파일 시스템을 마운트 할 때 사용
-t	파일 시스템의 유형을 지정, 생략할 시 /ect/fstab 파일 참조
-o	추가적인 설정을 적용할 때 사용 다수의 조건을 적용할 때는 콤마(,)로 구분

[본문으로]

[엘리스 AI트랙] 01-05 -01 ~ 01-05 -02 웹 프로그래밍 기초 (...근데 이제 리눅스를 곁들인)

Juliie — Thu, 23 Sep 2021 00:44:41 +0900

WIL은 한 주간 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

1. 리눅스의 구조

리눅스의 구조

1) Shell

커널과 사용자 사이를 이어주는 역할 수행
사용자의 명령을 해석하여 커널에 명령을 전달
ex) bash, zsh...

2. 리눅스 명령어

whoami	로그인한 사용자 ID 반환
passwd	로그인한 사용자의 비밀번호를 변경
pwd	현재 디렉토리 위치 출력
ls [[-a]^[각주:1], [-l]^[각주:2], [-al]^[각주:3]]	현재 디렉토리의 목록을 출력
cd	해당 디렉토리로 이동
명령어 --help	명령어에 대한 사용 방법 출력
chmod 파일권한^[각주:4] 변경할 파일 위치(or 이름)	파일의 권한 변경
chown 소유할 유저:소유할 그룹 소유권 변경하고 싶은 디렉토리(or 파일명)	파일의 소유권 변경(root 권한이 있어야 실행 가능)
mkdir 생성할 디렉토리 이름(or 디렉토리 경로/디렉토리명)	현재 디렉토리 위치(or 지정한 경로)에 새로운 디렉토리 생성
touch 생성할 파일 이름(or 디렉토리 경로/파일명)	빈 파일 생성
rmdir 삭제할 디렉토리 이름	비어있는 디렉토리를 삭제(비어있지 않다면 삭제 불가능)
rm [[-r]^[각주:5], [-f]^[각주:6], [-rf]^[각주:7], [-i]^[각주:8]] 삭제할 파일 및 디렉토리명	파일 및 디렉토리 삭제
cp[[-r]^[각주:9], [-p]^[각주:10]] 대상 위치 및 이름 복사하고 싶은 위치	파일 및 디렉토리 복사
mv 대상 위치/이름 이동하고 싶은 위치/이름	이동하고 싶은 위치에 같은 이름의 파일 / 디렉토리명이 존재하지 않을 경우 이동
cat [[-n]^[각주:11], [>]^[각주:12], [>>]^[각주:13]]	파일 내용 출력
find 파일 경로 [-name] [파일 이름] [-type d/f]^[각주:14]	지정된 파일 경로에서 이름이 파일 이름인 파일 및 디렉토리를 검색 및 출력

3. 패키지 관리자 apt(Advanced Packaging Tool)

데비안 리눅스(.dev) 또는 파생된 배포판(우분투)에서 SW를 설치, 제거, 업데이트 할 때 사용
최신의 우분투 버전에서는 기존 키워드인 apt-get / apt-cache를 합친 apt 키워드 제공

4. apt 명령어

apt install 패키지명	패키지 설치
apt remove 패키지명	패키지 제거
apt update	패키지 정보 업데이트
apt search 검색어	패키지 검색
apt show 패키지명	패키지 정보 확인

5. root

리눅스에서 모든 권한을 가지고 있는 최고 관리자를 의미
"sudo 명령어" 의 방식으로 권한 획득 가능

6. nano 텍스트 에디터

1) 실행

nano 편집하려는 파일 이름

2) 단축키

Ctrl + O	저장하기
Ctrl + X	종료하기
Ctrl + K	강조 표시된 영역을 잘라서 클립보드에 저장
Ctrl + U	클립보드의 내용을 현재 커서 위치에 붙여넣기
Ctrl + W	검색하기
Ctrl + Shift + 6	여러 줄 선택

숨겨진 파일이나 디렉토리를 포함하여 출력 [본문으로]
현재 디렉토리의 목록을 상세히 출력 [본문으로]
두 옵션을 한꺼번에 적용 [본문으로]
읽기(4), 쓰기(2), 실행(1)로 표현하며 777의 경우 모든 사용자가 모든 권한을 얻음을 의미 [본문으로]
디렉토리와 그 하부 파일까지 삭제 [본문으로]
삭제 여부를 묻지 않고 바로 삭제 [본문으로]
r옵션 + f 옵션 [본문으로]
삭제할 것인지 확인함 [본문으로]
하위 디렉토리와 파일 전체를 복사 [본문으로]
소유주, 그룹, 권한, 시간 정보를 그대로 복사 [본문으로]
왼쪽에 줄 번호와 함께 내용을 출력 [본문으로]
파일의 내용을 덮어씀 [본문으로]
파일의 내용이 있다면 뒤에 내용을 추가함 [본문으로]
find . -> 현재 디렉토리의 모든 파일 출력 [본문으로]

[엘리스 AI트랙] 엘리스 3기 1주차 후기

Juliie — Wed, 22 Sep 2021 23:33:05 +0900

바람같이 날아간 1주차를 보내고 느낀점을 까먹기 전에 대강이라도 써보려고 하는 포스팅

1. 열정맨 인 사람들이 아주 많다...!

수업도 다들 열심히 듣는다는게 느껴지고 무엇보다 내 작고 하찮은 질문도 왜 저런 질문을,,,이 아닌 친절하신 말투로 다들 어디선가 달려와서 대답해주심 나도 더 열심히 해야겠다는 생각이 자연스럽게 든다 그리고 자기가 알게된 사실을 공유해주는 사람들이 많아서 배움의 깊이가 더 깊어지는 느낌? 언젠가 나도 내가 *멋지게* 정리한걸 공유하고 싶다...

2. 공부 분량이...많다

OT때 7시간을 채울수 있는 공부량을 준다는게...과장이 아니였음...^^ 물론 공부할게 적은것보다는 많은게 좋으니까 좋긴하다만...아모튼 많음 더 열심히 해야 따라갈수 있을듯...이번주는 백신맞고 첫 알바가고해서 더 뒤쳐졌는데 다행히 전에 배웠던 부분이 아직 많이 나와서 버틸수 있었다 다음주...밀리지 말아야 살아남을수 있을것같은 느낌적인 늑김ㅎㅅㅠ

너 이름이 대체 뭐야

3. 그래서 이 토끼 이름은 백점토끼인가 흰색토끼인가 사실 분홍색인데 흰색토끼인건 말이 안된다 .oO(?)

이번주는 추석이라서 방학이여서 밀린거 정리하는중,,,다음주는 밀리지말자............................

[엘리스 AI트랙] 01-04 웹 프로그래밍 기초

Juliie — Wed, 22 Sep 2021 18:40:06 +0900

WIL은 한 주간 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

[01-04] 9 / 17

1. 모바일 <meta> 태그

<meta name="viewport" content="width=device-width, initial-scale=1.0">

name="viewport" content="width=device-width" : 보고 있는 기기 화면에 맞게 콘텐츠의 크기를 조정'
content="initial-scale=1.0": 실제 비율

2. position - 2차원과 3차원의 차이 ★ // 상속되지 않는다

2차원과 3차원을 결정짓는 position

	2차원	3차원
부모-자식 사이 margin 병합 현상 발생?	O	X
top, left, right, bottom (어느 위치에 위치시킬건지 직접 지정)	X	O
자식의 높이값이 부모의 높이값에 영향? (전제조건: 부모가 높이값을 갖고있지 않음)	O	X
z-index 속성 사용 가능?	X	O

1) static

position 속성의 기본값
따로 값을 지정하지 않은 경우 static이 적용

2) relative

2차원과 3차원의 특징을 모두 갖고 있음
static이었을 때의 위치(원래 위치)를 기준으로 위치 설정
→top, bottom, left, right 속성을 주지 않았다면 static의 위치와 같음

3) absolute

부모 엘리먼트와는 독립된 배치를 가진다
mdn 문서에서는...

absolute는 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않습니다.

롸?

See the Pen by JULIE (@jsg_8) on CodePen.

(parent와 grandparent의 position 요소를 수정해보세요! (◞ꈍ∇ꈍ)◞⋆**)

absolute는 position 요소가 static이 아닌 부모(relative, fixed 등...)를 기준으로 위치
부모가 static이라면 그 위에 있는 부모님(?) 조부모님(...??) 아무튼 이런식으로 끝(body)까지 찾아 올라감
body도 static이라면 그냥 body를 기준으로 함...^^
아모튼 absolute는 조건에 맞는 태그를 기준으로 위치 (스크롤하면 이동)

4) fixed

부모의 속성에 상관없이 화면에서 절대적인 위치를 가짐(스크롤해도 그 자리에 있음)

3. 그 외의 속성

1) z-index

숫자가 큰 순서대로 위에 위치 (포토샵 레이어 느낌으로 쌓임)

2) background-size

background-size 속성

contain: 배경 이미지 비율에 맞춰서(빈 공간 발생할 수 있음) 적용
cover: 배경을 꽉 채울 수 있도록 확대해서 적용

3) background-attachment

배경 이미지의 스크롤 여부 결정
scroll: 배경이랑 이미지랑 같이 움직임(평범한 상황)
fixed: 스크롤해도 이미지는 그 자리에 가만히 있음

4) y축 중앙 정렬 방법

... {
	top: 50%; /* 3차원 position만 가능 */
    	transform: translateY(-50%);
}

5) 배경 이미지 슬라이드 적용하기 - Full Clip 플러그인(jQuary 사용)

https://github.com/bdimitrovski/full_clip

GitHub - bdimitrovski/full_clip: Full Clip - fullscreen body background image jQuery plugin

Full Clip - fullscreen body background image jQuery plugin - GitHub - bdimitrovski/full_clip: Full Clip - fullscreen body background image jQuery plugin

github.com

6) box-shadow

음수	문법 요소	양수
왼쪽에 그림자가 만들어짐(가로)	offset-x	오른쪽에 그림자가 만들어짐(가로)
위쪽에 그림자가 만들어짐(세로)	offset-y	아래쪽에 그림자가 만들어짐(세로)
-	blur-radius	값이 클 수록 흐려짐
그림자의 크기가 작아짐	spread-radius	그림자의 크기가 커짐

그 외의 문법 요소
color	색 이름 / 색 코드 / rgb(r, g, b) / rgba(r, g, b, 불투명도) 등
inset	안 쪽에 그림자 생성
initial	기본값(none)으로 초기화
iniherit	부모 요소로부터 프로퍼티를 상속받음

See the Pen by JULIE (@jsg_8) on CodePen.

[엘리스 AI트랙] 01-01 ~ 01-03 웹 프로그래밍 기초

Juliie — Wed, 22 Sep 2021 17:12:27 +0900

WIL은 한 주간 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

[01-01] 9 / 14

□ 설치

□ 실행

□ 배포

1. 인터넷과 웹의 차이점

웹은 인터넷의 부분집합
인터넷이 도로라면, 웹은 그 위에 달리는 자동차
웹은 인터넷에서 운영되는 하나의 앱

2. 클라우드와 호스팅은 본질적으로는 같다

[01-02] 9 / 15

1. Emmet

HTML 단축 플러그인

[01-03] 9 / 16

1. 박스 모델

박스 모델의 구조

border를 기준으로 margin(안쪽) padding(바깥쪽) 나누기
margin과 padding의 작성 순서
- top / right / bottom / left (시계 방향)
- 상하 / 좌우

2. Block 요소와 Inline 요소

Block 요소: y축 정렬로 컨텐츠가 나타남
- p, div, h1 ~ h6...
- 줄바꿈 현상이 나타남
- width / height 값 사용 가능 → 공간 만들기 가능
- margin / padding 값 사용 가능 → 상하 배치 작업 가능
Inline 요소: x축 정렬로 컨텐츠가 나타남
- a, span...
- 줄바꿈 현상 X
- width / height 사용 불가
- margin, padding의 top / bottom 사용 불가

3. margin 병합 현상

형제지간의 margin 병합
- margin-bottom과 margin-top 중 값이 더 큰 값으로 적용

.older { margin-bottom: 150px; }
.younger { margin-top: 100px; }
/* 이 경우 적용되는 margin 값은? 150px (O) 250px (X) */

부모자식간의 margin 병합
- 자식에게 margin-top 값이 주어졌다면 부모에게도 영향이 간다

// HTML
<main>
	<article>안냐세요</article>
</main>

// CSS
article {
	margin-top: 100px;
}

/* 이 경우 부모인 <main>도 같이 밑으로 내려가게 됨*/

4. 레이아웃에 영향을 미치는 속성

display
- inline, block, inine-block

float
- left, right
- 브라우저를 기준으로 특정 방향으로 정렬하고자 할 때 사용
- 공중에 떠 있어 레이어층을 만들게 됨^[각주:1]
- 레이어가 겹쳐지지 않는 상태로 왼쪽에서부터 정렬시키고 싶은 경우 float: left 를 연속적으로 입력

clear
- left, right(한 쪽만), both(양쪽 다)
- float를 사용하면 레이어가 생겨서 이후 clear를 안 써주면 겹치게 됨
- → float를 다 쓰면 이후 정상적인 배치가 되도록 clear로 꺼주기!
  - float를 마지막으로 사용한 지점 그 다음 태그에 clear 넣기

브라우저와 공간 사이의 공백 제거하기
- ```
* { padding: 0; margin: 0; }
```
- html과 body 태그 및 다른 태그들도 margin과 padding값을 갖는 경우가 있기 때문에 *로 초기화하는 방법 추천

header / main - article / footer

z-index랑 관련이 있나...? [본문으로]

[프로그래머스] 카펫 - Python

Juliie — Thu, 9 Sep 2021 00:36:35 +0900

링크

https://programmers.co.kr/learn/courses/30/lessons/42842?language=python3

코딩테스트 연습 - 카펫

Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과

programmers.co.kr

문제 설명

Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다.

카펫

Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다.

Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요.

제한사항

갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다.
노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다.
카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다 깁니다.

문제 풀이

def solution(brown, yellow):
    area = brown + yellow # 넓이
    for i in range(3, (area//2) + 1):
        if area % i == 0: # 후보 찾는 중
            if 2*(area//i + i) - 4 == brown:
            # 2 * (가로 후보 + 세로 후보) - 4 == 둘레
                return [area//i, i]

뭔가 너무 수학적으로 푼거 같아서 이래도 되나...싶었던 풀이

파이썬 공부하다 보니까 자연스럽게 파이써닉한 코드에 더 관심이 가는것같다

[프로그래머스] 가장 큰 수 - Python

Juliie — Wed, 8 Sep 2021 18:52:51 +0900

링크

https://programmers.co.kr/learn/courses/30/lessons/42746#

코딩테스트 연습 - 가장 큰 수

0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰

programmers.co.kr

문제 설명

0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요.

예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다.

0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요.

제한 사항

numbers의 길이는 1 이상 100,000 이하입니다.
numbers의 원소는 0 이상 1,000 이하입니다.
정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다.

실패한 풀이 방법

1. 양쪽의 숫자를 합친 숫자를 저장하는 변수 temp1, temp2를 만들어 둘을 버블정렬했다

결과: 테스트케이스는 통과했으나 제출시 전부 오답처리됐다...시간 복잡도도 큰 방법이었기 때문에 다른 방법 시도함

2. key=str 방식으로 정렬하면 될 거라고 생각했지만 앞자리는 똑같고 자릿수가 다른 숫자 비교에서 오류 발생

1, 1[2], 1[3] / 9, 9[1], 9[2]
처음엔 단순히 맨 뒷자리를 반복하면 될거라고 생각해서(← 틀림...) ljust를 사용해서 자릿수를 똑같이 맞추려고 했다
이 방법이 틀린 이유
- 테스트 케이스 [401, 40]을 예로 들면 답은 40401이지만 실행 결과는 40140이 나오게 된다(401과 400으로 비교했기 때문)
그래서 내린 결론
- 통째로 반복하자~!!

문제 풀이

1)코드 설명

(1) int 리스트 n을 정렬한다

(2) 리스트의 int형 숫자들을 map 메서드를 이용해서 str형으로 바꿔준다

(3) 숫자들 중 가장 긴 숫자의 길이를 구해서 maxNum 변수에 저장한다

(4) 통째로 반복시킨 숫자들을 기준으로 정렬한 뒤, 거꾸로 뒤집는다 (큰 수부터 와야하기 때문)

(5) 리스트를 한 문자열로 join해서 result 변수에 저장한다

(6) int(result)가 0(false)이라면 '0'을, 0이 아닌 다른 값이라면 result를 그대로 반환한다

2)코드

def solution(n):
    n.sort()
    n = list(map(str, n))
    maxNum = len((n[-1]))
    newArr = sorted(n, key = lambda x : x*(maxNum), reverse=True)
    result = ''.join(newArr)
    return result if int(result) else '0'

근데 쓰면서 생각한건데 굳이 maxNum을 이용할 필요가 없는것 같다

제한 조건이 있으니까 자연수를 곱해도 될듯...

모범 답안에서 괜히 3을 곱해주는게 아니였다... 여기서는 숫자의 범위가 1 ~ 1000 → 2 자릿수 차이 → 3번을 반복해야 완벽하게 비교를 할 수 있다(범위가 1부터 시작하기 때문에 1000은 상관 없음)
만약 1 ~ 10000이었으면 4를 곱해야겠다

이 글을 보시는 다른 분들은 자연수를 곱하시길 바라면서,,,ㅎㅎ끝

[프로그래머스] 행렬의 덧셈 - Python

Juliie — Fri, 3 Sep 2021 22:01:10 +0900

링크

https://programmers.co.kr/learn/courses/30/lessons/12950?language=python3

코딩테스트 연습 - 행렬의 덧셈

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요

programmers.co.kr

문제 설명

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

제한 조건

행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다.

문제 풀이

def solution(arr1, arr2):
    answer = []
    for i in range(0, len(arr1)):
        answer.append([])
        for j in range(0, len(arr1[0])):
            answer[i].append(int(arr1[i][j])+int(arr2[i][j]))
    return answer