지헌이의 TIL by

230716 (일)

photo_114 — 2023-07-16 13:39:25 UTC

1.
import math
math.gcd #최대공약수 구하기
math.lcm #최소공배수 구하기

2.
코딩애플에 있는 React 강의 파트1을 다 듣고, 내 힘으로 todolist CRUD를 구현해보려고 했으나 업데이트에서 애를 먹음. 아직 흐름을 제대로 이해하지 못한 것 같다는 생각이 들어 [유튜브 - 생활코딩] 에 있는 React 강의를 최대한 빨리 듣고 다시 시도해볼 생각.

3.
git merge 합칠브랜치명
git branch 브랜치명 : 브랜치 생성
git switch 브랜치명 : 브랜치로 이동.

이번 주 피드백

photo_114 — 2023-07-16 13:46:02 UTC

유용한 사이트들

photo_114 — 2023-07-16 13:57:12 UTC

https://github.com/JaeYeopHan/Interview_Question_for_Beginner
- Tech Interview for beginner

https://github.com/jojoldu/junior-recruit-scheduler
- 주니어 개발자를 위한 취업정

https://github.com/brave-people/Dev-Event
- 개발자 세미나 행사 모음

https://velog.io/@woo0_hooo/%EC%BB%B4%EA%B3%B5-%EC%B7%A8%EC%A4%80%EC%83%9D%EC%97%90%EA%B2%8C-%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A7%81%ED%81%AC%EB%93%A4-%EC%A0%95%EB%A6%AC

https://github.com/h5bp/Front-end-Developer-Interview-Questions
- 프론트엔드 기술 질문 ( 영어 )

https://yozm.wishket.com/magazine/list/popular/
- 최신 IT 트렌드 얻기 좋은 사이트

패들렛을 이용해 TIL을 쓰는 이유

photo_114 — 2023-07-16 13:58:52 UTC

1. md 파일에 비해 좀 더 시각적으로 깔끔해서 내가 보기가 편함.

: TIL을 작성하는 이유는 무엇을 공부했는지 알리는 것도 있지만, 궁극적으로는 내가 공부한 내용들을 정리하고 복습하는 공간이라 생각하기 때문에 조금이나마 내가 보기 편한 방법으로 정리하기로 결심함.

2. 게시글이 직관적으로 쌓여서 뿌듯함을 느낄 수 있음. 시간이 지나고 돌이켜보면서 앞으로 나아갈 수 있는 원동력을 얻을 수 있을 것 같음.

3. 작성하기 쉬움

230717 (월)

photo_114 — 2023-07-17 13:38:29 UTC

# 유튜브 '생활코딩'의 리액트 강의 정리

리액트는 사용자 정의 태그(=컴포넌트)를 만드는 기술

### 컴포넌트 사용법

1. function App() 밖에 새로운 함수를 만든다.

- 이때 이 함수의 이름은 대문자로 시작하고 return 뒤에 원하는 것을 작성해줌.

function Article() {

return

Welcome!

Hello, WEB

}

2. 이후

이런식으로 사용하면 됨.

### props

```html

function Nav(props) {

const lis = [

html

css

]

for(let i=0; i

let t = props.topics[i];

lis.push(

{t.title}

)

}

return

{lis}

}

function App() {

const topics = [

{id:1, title:'html', body: 'html is...'},

{id:2, title:'css', body: 'css is...'},

{id:3, title:'javascript', body: 'javascript is...'}

]

```

### event

#### 이벤트의 타겟은 이벤트를 유발시킨 태그를 뜻함.

만약 a 태그가 event를 유발시켰다면

event.target.id : 이벤트를 유발시킨 a태그의 id값을 뜻함.

### state

`import {useState} from 'react';`

const [mode, setMode] = useState('WELCOME');

값을 바꿀때는 setMode('바꿀값');

a 태그나 submit 태그는 누르게 되면 href를 통해 이동하거나, 창이 새로고침하여 실행됨.

이떄, `preventDefault()` 를 사용하면 막을 수 있음.

참고로 `stopPropagation` 은 부모 태그로 이벤트를 전파하는 것을 막아줌.

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

Jira에서 Epik->story->task

230718 (화)

photo_114 — 2023-07-18 13:43:57 UTC

'코딩애플' 강의 듣고 정리한 내용 ( 리액트 1~5강 )

# React TIL

## 리액트를 쓰는 이유

- SPA ( Single Page Application ) : html 파일 1개만 쓰고 다른 페이지를 보여줄 때는 html부분만 바꿔서 보여줌. -> 부드럽게 동작

- html을 함수,array,object 이런 곳에 보관하고 재사용 가능.

- 리액트 네이티브 사용 가능

## React 설치 / 세팅

- Node.js 설치

- VS code 설치

- `npx create-react-app 프로젝트이름` : 프로젝트 생성

- App.js가 메인페이지니깐 거기다가 코드짜면 됨.

- `npm start` : 서버 실행

## 리액트의 간단한 JSX 문법

1. class가 아니라 className

2. 변수를 html에 넣을 때는 {} 중괄호 사용

3. `

스타일적용

` : 붙여쓸 때는 대문자로 치환

## State

`import { useState } from 'react';` 로 임포트 해와야 함.

let [값,값변경] = useState(저장할 값)

값변경(변경할 값)

Q. 왜 state씀?

A. state는 변동사항이 생기면 state를 사용하는 html을 자동으로 재렌더링

state에 값을 넣고 {} 로 변수처럼 사용하면 됨.

로고명 같은 경우는 바뀌지 않으니깐 굳이 state를 사용할 필요 X ( 결론적으론, 자주 바뀌는 값들만 state로 사용하면 좋음 )

state는 state변경함수를 써서 변경해야 함.

`/* eslint-disable */` 하면 브라우저/터미널 창에 warning 무시 가능

## onClick 사용법

html에서는

JSX에서는

-> 대문자 신경쓰자

실행할 함수에 들어갈 함수는 밑에처럼 그냥 만들어도 됨.

{ 실행할코드 } }>

혹은 바깥에서 함수를 따로 만들어도 됨.

요약)

1. 클릭시 뭔가를 실행하고 싶으면 onClick={함수}라는 이벤트 핸들러를 달아서 사용

2. state를 변경하려면 state 변경함수를 꼭 이용

array,object state 변경하는 법 이전까지 정리했음.

유용한 VS Code 익스텐션들

photo_114 — 2023-07-18 13:49:36 UTC

# Auto Rename Tag
: 여는 태그나 닫는 태그를 수정하면 반대편의 태그도 동시에 수정해줌.

230719 (수)

photo_114 — 2023-07-19 14:04:33 UTC

- UseEffect에 대해서 배웠음

공부하면서 깨달은 점.

useState는 함수 컴포넌트 상단에 선언하는 것. -> axios를 통해 데이터를 받아올거면, 함수 컴포넌트 상단에 useState를 만들어 놓고 state 변경함수를 통해 채워나가는 방식을 사용하면 됨.

VS code - 리액트 자동 줄 정렬

photo_114 — 2023-07-20 01:27:48 UTC

vscode에서 리액트 자동 정렬을 쓰려면 프리티어를 깔고 설정해줘야 함. 그러면 코드를 저장할 때 자동으로 줄정렬이 됨.

리액트 공부하면서 잡다하게 알게 된 것들

photo_114 — 2023-07-20 02:43:42 UTC

array [] / object {}

VScode 단축키 정리

photo_114 — 2023-07-20 12:59:30 UTC

Visual Studio Code 꿀템

Command Pallette
- 윈도우 : Ctrl+Shift+P, F1
- 다양한 기능들을 확인해보고, 단축키도 알아볼 수 있음

Quick Open
- 윈도우 : 컨트롤+P
- 해당하는 파일 빠르게 검색

Toggle Sidebar
- Ctrl + B

Terminal
- Ctrl + `

Keyboard Shortcuts
- Ctrl + K + S
- 키보드 단축키 확인 가능

Kite를 쓰면 좀 더 개발 빠르게 할 수 있음 (탭나인 느낌인듯 ?)

컨트롤 + Home/ End : 제일 위 / 아래로 이동가능
컨트롤 없이 Home / End : 제일 왼쪽 / 오른쪽으로 이동가능

컨트롤 + <- / -> : 단어별로 이동가능!
컨트롤 + 쉬프트 + <- / -> : 한 단어가 선택됨

코드 한 줄 위아래로 올리기 ( Move Line down / up )
- Alt + 위/아래 방향키

쉬프트+알트+위/아래방향키 => 원하는 방향대로 복사됨.

컨트롤+엔터 : 굳이 맨끝으로 커서 안 옮기고 엔터 눌러도 됨.

Multi Selection
- 컨트롤 + D : 같은 단어 선택 ( 동시에 수정 가능 )

이전 커서로 이동
- 컨트롤 + U

Insert Cursor
- 알트 + 클릭 -> 이러면 여러개를 동시에 변경 가능함.

웹,앱 디자인 무료 툴 5가지

photo_114 — 2023-07-25 11:32:40 UTC

https://dribbble.com
- 다양한 웹,앱사이트 디자인을 확인가능함.
- 아이디어,감각 얻기 좋은 사이트
- Website->Popular에 들어가면 현재 뜨고있는 디자인 확인 가능

https://mycolor.space/
- 색상팔레트 (메인 컬러 넣으면 그에 맞는 다양한 팔레트들 제공해줌 )

https://cssgradient.io/
- 그레디언트 컬러 만들기

https://shapedividers.com/
-꼬불꼬불 선나누기

https://haikei/app
- 다양한 SVG 만들기
- svg는 이미지보다 훨씬 가벼움. (로딩속도 빨라짐)

https://color.adobe.com/ko/create/color-wheel
- 컬러 팔레트

반응형 웹사이트 공부

photo_114 — 2023-07-25 11:41:40 UTC

프론트엔드 필수 반응형 CSS 단위 총정리 (EM과 REM) | Responsive CSS Units

230726 RTC 구현을 위한 OpenVidu 샘플 코드 분석

photo_114 — 2023-07-26 13:13:28 UTC

- 리액트도 잘 모르는데, 몇백 줄짜리 샘플코드를 분석하는 것은 엄청 어려운 일이었음.

- 그래도 한 줄 한 줄 뜯어보니깐 이해가 돼서 다행이었음.

myUserName : 화상통화와 참가자의 닉네임
publisher : 자체 로컬 웹캠 스트림
subscribers 배열 : 화상 통화에서 다른 사용자의 활성 스트림 저장

사용자가 App.js 템플릿에 정의된 제출 입력을 클릭할 때마다 joinSession() 메서드가 호출됨.

`Import 구문과 상수 설정`: 필요한 모듈과 라이브러리를 가져오고, 서버 URL과 관련된 상수를 설정

`App 컴포넌트 선`언: React 클래스 컴포넌트인 App 클래스를 선언. 이 컴포넌트는 영상 통화 기능을 관리.

`constructor 함수`: App 컴포넌트의 생성자. 상태 변수와 이벤트 핸들러를 초기화하고, OpenVidu 객체를 생성함.

`componentDidMount와 componentWillUnmount 함수`: 컴포넌트가 마운트(렌더링)되거나 언마운트(사라짐)될 때 발생하는 이벤트를 처리하는 함수들

`handleChangeSessionId와 handleChangeUserName 함수`: 세션 ID와 사용자 이름 입력 필드의 변화를 처리하는 함수들

`handleMainVideoStream와 deleteSubscriber 함수`: 메인 비디오 스트림과 구독자 스트림들을 관리하는 함수들

`joinSession 함수`: 영상 통화에 참가하기 위해 세션에 연결하고, 비디오 스트림을 생성 및 게시하는 함수

`leaveSession 함수`: 세션에서 나가는 함수로, 모든 속성을 초기화 -> 우리는 여기서 지도 화면으로 돌아가게 설정해주면 될듯

`switchCamera 함수`: 카메라를 전환하는 함수로, 현재 사용 중인 카메라를 변경. -> 핸드폰으로 테스트해 볼 필요가 있을 듯

`render 함수`: 컴포넌트의 렌더링 결과를 반환하는 함수. 조건부 렌더링을 사용하여 세션에 참가할 때와 참가하지 않을 때의 화면을 제어.

`getToken, createSession, createToken 함수`: OpenVidu 서버로부터 토큰을 가져오고 세션 및 연결을 생성하는 비동기 함수.

깃 관련

photo_114 — 2023-07-26 13:35:56 UTC

-git pull 을 먼저 진행하는 습관을 기르도록 하자.
-커밋 컨벤션을 배웠으니, 개인적으로 커밋할 때도 이를 활용해보면 좋을듯 ?

css flex

photo_114 — 2023-07-27 13:26:46 UTC

# 23.07.27 TIL

## CSS 레이아웃 정리

- 공부하는 이유 :본격적인 개발에 들어가기 앞서 Component를 구성할 때 레이아웃을 효율적으로 짤 필요가 있어서 이번 기회에 정리해보려고 함.

- CSS : Cascading Style Sheet

- Class : .class

- Id : #id

- Attribute : []

- 모든 태그

\*{

}

a[href] {

color: purple;

}

display : inline;

- div의 크기같은 건 무시하고, 안에 들어있는 물건의 크기만큼만 적용됨.

inline은 물건, inline-block은 한 줄에 여러개가 들어갈 수 있는 특별한 상자, block은 상자인데 한 줄에 하나씩 들어갈 수 있는 상자.

position은 기본값으로 static

`relative`는 원래 있던 자리를 기준으로 움직이는 것.

`absoule`는 내 아이템과 가장 가까이 있는 박스 안에서 위치 변경이 일어나는 것.

`fixed`는 상자에서 벗어나서 웹페이지 안에서 움직이는 것.

`sticky`

---

## CSS Flexbox 정리

### float

- 이미지와 텍스트를 배치하는 용도

![float](float.png)

### Flexbox

- jsbin.com 에서 실습

- viewport의 100% 다 쓰겠다 -> 100vh

## 알아보아야할 것

- container로 감쌀 때 주의해야할 점 알아보기.

- `div.container>div.item${$}*10` 이렇게 축약해서 한 번에 container 밑에 10개의 item 생성 가능

- %는 부모태그 대비 비율임.

- flex-direction : row 가 기본값. (왼쪽에서 오른쪽)

row-reverse

column은 위에서 아래로. 메인축은 수직축이 되는 것.

flex-wrap : nowrap이 기본값. 이걸 wrap으로 바꾸면 범위에서 벗어나면 자동으로 줄바꿈.

border 하면 글씨크기,선의 종류, 색깔을 한 번에 지정할 수 있듯이 flex-flow 하면 열,행과 wrap,nowrap을 한 번에 설정할 수 있음.

`column-reverse`를 쓰면 순서도 뒤집히지만, `justify-content: flex-end`를 쓰면 순서는 안 뒤집히고 방향만 위->아래 에서 아래->위 이런 식으로 바뀜.

`space-between` : 왼쪽과 오른쪽은 화면에 딱 붙게 하고, 나머지는 동등한 간격.

`space-evenly` : 모두 동일한 간격.

`space-around` : 요소들 사이에 동일한 간격을 둠. 요소들 (주위에) 간격을 동일하게 준다고 생각하면 좋을듯?-> 맨 왼쪽이나 오른쪽의 경우 간격이 좁음. 왜냐면 왼쪽만 간격이 존재하기 때문! 나머지 것들은 왼쪽,오른쪽에 간격이 있기 때문에 상대적으로 넓음.

`justify-content`는 중심축에서 아이템이 어떻게 배치되는지를 결정하는 것. (main axis)

`align-content`는 반대축에서.

`flex-grow` 비율인듯? 각 아이템에 숫자를 입력하면, 비율로 설정됨. 2:1:1 이런식으로 넣으면 원하는 비율대로 맞출 수 있음.

`flex-shrink` : `flex-grow` 와 반대. 더 줄어들고 늘어나는지를 정의하는 것.

`flex-basis` : 기본값은 auto. 비율을 적으면, 다른 애들과 상관없이 비율을 유지하게 됨. ex) 60%

### 오늘 배운 것들을 연습할 수 있는 사이트인 FLEXBOX FROGGY를 사용하며 배운 것들

- 주소 : flexboxfroggy.com

- flex-direction : column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀜.

- 그래서 내가 생각하기엔 `justify-content:flex-start`를 써야할 거 같았는데, 위에서 row-reverse를 사용했기 때문에 `flex-end`를 사용해야한다. 진짜 헷갈리니 주의하기.

리액트 공부

photo_114 — 2023-07-31 14:17:17 UTC

23-07-31 TIL

(조건부 렌더링1) 논리 && 연산자가 있는 인라인 조건

- 중괄호로 감싸면 jsx에 어떤 표현식이던 넣을 수 있음.

```javascript

{unreadMessages.length > 0 &&

You have {unreadMessages.length} unread messages.

}

);

}

```

- 위의 코드에서 unreadMessages.length > 0이 true이면 && 뒤의 표현식을 렌더링하고, 아니면 렌더링하지 않음.

- 자바스크립트에서 true && expression은 항상 expression으로 평가되고, false && expression은 항상 false로 평가됨.

(조건부 렌더링2) 조건부 연산자를 사용한 인라인 If-Else

- `condition ? true : false` 를 사용하는 것.

render() {

const isLoggedIn = this.state.isLoggedIn;

return (

The user is {isLoggedIn ? 'currently' : 'not'} logged in.

);

}

이벤트 제어하기

- React에서 기본 동작을 막기 위해 false 리턴을 사용할 수 없음.

- 반드시 명시적으로 `preventDefault`를 호출해야 합니다.

function ActionLink() {  function handleClick(e) {    e.preventDefault();    console.log('The link was clicked.');  }

ES6 자바스크립트 문법

Arrow function

- 원래 함수 만드는 방법 : function 함수(){}

- arrow function : `var 함수 = () => { //어쩌구 }`

- `var 두배만들기 = (x) => { return x * 2}`

파라미터가 1개면 소괄호를 생략가능

- `var 두배만들기 = x => { return x * 2 }`

중괄호 안에 return 한줄 뿐이라면 중괄호와 리턴도 생략 가능.

- `var 두배만들기 = x => x * 2 ;`

테일윈드 + CSS 공부

photo_114 — 2023-08-03 13:26:36 UTC

position 쓸 때는 top/left/bottom/right와 함께 씀.

static (default값) : 원래 있어야 하는 자리. ->작성된 순서 그대로 나타냄
- 이때는 top/bottom 이런거 다 무시

relative : 원래 있어야 할 위치 기준으로 t~r 설정 가능. 이 경우 겹치기도 가능함.

absolute : 어떤 요소의 display 속성.. 부모 요소의 속성은 relative로 지정해주는 것이 관례.

fixed : 항상 고정된 위치 / 뷰포트 기준 (top~ bottom~~~)으로 작성

----

테일윈드에서는 invisible / visible로 숨김 가능

- 조건부 렌더링 하는 방법

grid 쓸 때는

지금 떠오르는 내가 해야할 일들

photo_114 — 2023-08-21 02:32:33 UTC

- 자바스크립트 공부
- 영어 공부
- 리액트 복습
- 타입스크립트 공부
- 알고리즘 다시 잡기
- 인프런에서 김영한 http 강의 끊고 듣기
- sql 프로그래머스 고득점 kit 다 풀기

리액트를 다루는 기술 ( ~ 59p)

photo_114 — 2023-08-28 14:06:01 UTC

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다. 구조가 MVC,MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리.

렌더링 : 사용자 화면에 뷰를 보여 주는 것.

리액트의 주요 특징
- Virtual DOM 사용
: DOM 부터 알아야 하는데 DOM이란 Document Object Model의 약어. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성.

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행.

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용함.

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 밟음.
1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM에 리렌더링.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 DOM에 적용.

리액트는 정말 뷰만 신경 쓰는 `라이브러리` 이므로 기타 기능은 직접 구현하여 사용해야 함.
-> 대신 다른 라이브러리로 라우팅, 상태 관리, Ajax 처리 등의 빈 자리를 채울 수 있음.

Node.js
: 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있음.

babel-loader
: 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해 줌.

Q.왜 ES5 문법으로 변환함?
A. ES5는 이전 버전의 자바스크립트. 이렇게 변환하는 이유는 구버전 웹 브라우저와 호환하기 위해서. 구버전 웹 브라우저에서는 최신 자바스크립트가 실행되지 않기 때문에 사전에 변환해주는 작업이 필요.

JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

신한 해커톤 2일차

photo_114 — 2023-09-02 06:01:47 UTC

컴포넌트 라이브러리 https://tilnote.io/pages/637f934dbd82f57d88aaf711

어린이 UI/UX 참고사항
https://brunch.co.kr/@wepostit/6
https://three-stars.tistory.com/10

회원가입 UX/UI
https://yozm.wishket.com/magazine/detail/1508/

npm install primereact

npx create-react-app my-app --template pwa-typescript

CSS 중 BORDER-CSUTOM

photo_114 — 2023-10-12 15:44:45 UTC

개발자 면접 키트

photo_114 — 2023-10-16 23:36:02 UTC

아이디어 찾을 때

photo_114 — 2023-10-16 23:36:12 UTC

토이프로젝트 참고

photo_114 — 2023-10-17 00:50:21 UTC

다시 패들렛 작성하기

photo_114 — 2024-03-03 17:22:24 UTC

노션에 정리하는 것도 좋지만,

여기에 적는 것이 내가 다시 읽기에도 괜찮은 것 같아서 다시 차곡차곡 쌓아가보자.

개발블로그 잘 작성하는 법. ( 꼭 읽어보기 )

photo_114 — 2024-03-10 16:28:07 UTC

https://f-lab.kr/blog/developer-blog-tips

포트폴리오 작성할 때 참고할 곳

photo_114 — 2024-03-15 02:32:16 UTC