다람쥐줘라줘

요새 댕기는 스터디카페 이벤트하길래 겸사겸사 글쓴당

처음에 어떻게 오게됐드라?

항해99할때 팀원이 종종 스터디카페 간다길래 난 그당시엔 너~~~~무 바빠서 집에서도 할거 개많은데 어떻게 카페랑 왔다갔다 하시징 했는데 항해 끝나니까 귀신같이 의욕 떨어져서 여기저기 카페 기웃거리다가 여기까지 오게된거같다.

뭐 여기가 종착역이었음. 

군자 열공다방

진짜진짜진짜 스터디하기 딱 좋은 환경 만들어 놓으셔서 '군자' 근처에 사시는 분 들은 꼭 이용해보세요 최고..b

우선 기본 독서실 장소와 노트북 장소가 나뉘어져서 나같은 노트북러들은 글로 가면되고 백색소음 같은 걸 알잘딱 볼륨으로 깔아두셔서 너무 사부작 거리는 소리는 잘 묻혀서 신경안쓰임  

커피머신 있어서 (심지어 원두 괜찮은거 씀..) 카페인 걱정 1도 없고 4종류나 되는 음료수랑 여러 티백들(히비스커스, 보이차 등등), 소소한 간식까지 있어서 간간히 분위기 전환하기도 쏠쏠하다.

난 카페에서 2시간 정도 작업할 때도 의자랑 책상 정말정말정말 중요하게 생각해서 괜찮은 카페 찾으면 거기 밖에 안갈 정돈데 여긴 의자도 편하고 아래에 드르륵 소리 안나라고 헝겊 같은걸로 덧씌워두셔서 정말 사장님 디테일 하나하나 확인하고 놀랐다. 뜬금없지만 분명 공부 엄청 잘하셨을듯 .

그리고 또 중요한게 고등학생 이상부터 이용가능해서 잼민이들은 컷이고(개좋음) 요렇게나 잘 해놓으니까 오는 사람들도 다들 간절하신 분들이라 집중력이 자동으로 업 된당.

디테일한 부분 말하면 끝이없는데 직접 안보면 장점이 다 안담기니께 오셔서 확인해보면 좋을거같당 :)

마지막으로 여기 오자마자 보고 기분이가 좋아졌던 열공러들의 포스팃..☆ (개 귀여움) 

열심히 하는거 이쁘다, 다들 화이팅하자구~

진짜 라이브러리나 npm install yarn add 설치할 거 진짜 댕같이 많은데, 그때마다 구글링하기 귀찮으니까 싹 정리해보자.

$ git clone (레퍼지토리에 있는거 받아오는 경우 많으니까) 

$ git clone [원격 저장소 주소!]

부트스트랩 설치

npm install react-bootstrap bootstrap

https://react-bootstrap.github.io/getting-started/introduction

styled-component 도 없으면 서운하지

npm install styled-components
import styled from 'styled-components'

Font awesome도 쓸꺼지?ㅎㅎ

$ npm i @fortawesome/fontawesome-svg-core
$ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
$ npm i @fortawesome/react-fontawesome

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

추천 페이지 https://ssddo-story.tistory.com/15

react-router-dom 설치

npm i react-router-dom

useNavigate() 쓸꺼면 index.js 에 <BrowserRouter> 잘 씌워주자.

redux & toolkit 설치

npm i redux react-redux
npm install @reduxjs/toolkit

https://translucent-bit-b63.notion.site/12-eefdf1c4d4434f329d29627a596dbe20

axios 설치

$ npm install axios

json-server 설치 & 활성화

$ npm i -g json-server
$ json-server --watch db.json --port 3001

react - JWT 설치

npm install react-jwt

https://www.npmjs.com/package/react-jwt

JWT Token 헤더나 payload 로 날라오는거 decode 하는 방법 등!

백엔드 없이도 다할 수 있다 Firebase

공식사이트 (https://firebase.google.com/docs/web/setup?hl=ko&authuser=0)

0. 일단 설치

npm install firebase

1. 이미지 업로드 (->Url로 뱉어줌)

2. Auth (로그인, 회원가입)

DB에 num & done 값 주기(플라스크)

아니 이게 뭐라고 생각보다 어렵네..?

위에 처럼 글별로 체크 하는 기능은 좋아요라던지 여기저기 범용성이 좋은데 (대댓글 기능? 도 쓸라나) 이렇게 하려면 client 쪽에서도 몇번째 완료표시를 누르는 건지 몇번째 글에 반영을 하는지 정해줘야 하고 server 쪽에서도 애초에 만들때 number를 붙여줘야 가능하다.

따라서 post 입력시에 num 값을 따로 반영하고(나는 len으로 처음꺼부터 0~n-1로 num값을 주었다)

get은 db 저장돼있는 done 값에 따라 temp_html 붙여주고 완료 버튼에는 각각 이름을 붙여줌.

그리고 ‘완료’ 버튼 클릭 시에 done 값에 1을 주는식으로 db값을 변환시켜서 위에 else부분을 활성화 시킨다. client 쪽에서는 위에 get 생성시 check 값에 주었던 번호를 아래에 변수로 받아 db로 넘겨줌.

넘겨준 num_give 순서로 db에도 저장을 했기때문에 클릭한 완료의 순서대로 db에 저장된 done 값이 바뀜.

스크랩핑 + 토론방 추가

flex 로 영역을 구분한뒤 row 형식으로 배치 → 왼쪽에는 이미지 모음 오른쪽에는 토론방 배치

flex-row로 영역 구분한 것 까지는 좋았는데 div로 영역영역 나눠주는게 헷갈렸음.

그리고 모듈? 가져오기 등 import로 조각조각 만든 값들을 불러오는 기능을 빨리 익히는게 좋아보인다. 혼자 작업하니까 이정도지 규모가 조금만 커져도 작성한 코딩내용을 읽을 수 없을 거 같음.

네이버 영화 url입력하면 해당 사이트 og태그 스크랩핑 해와 띄우는 페이지 만듬.(bs4 + 플라스크)

og 태그로 title, img, desc 끌어오고 간단한 코멘트는 본인 이 작성해서 db에 저장 → 카드형식으로 보여줌.

bs4를 통해 스크래핑한 코딩을 그대로 파이썬 함수로 가져오는게 아주 좋았음

app.py에 전부 담으려고 하지말고, scracping.py 로 스크랩핑 python 따로 만들고 app.py로 불러오는 방식 사용할것. (조각조각 만들어서 붙여야 어디에서 오류가 나는지 정확히 알 수있음)

1. 간단한 블로그 만들기 (Flask)

-직접 코드를 고민하고 적용하면서 응용력이 많이 올라감. 수동적으로 강의 듣기 절대 금지!

대댓글 기능만 추가하는 정도로 해당 블로그는 종료해도될듯

# 저장 - 예시

doc = {'name':'bobby','age':21}

db.users.insert_one(doc)

# 한 개 찾기 - 예시

user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)

all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시

db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시

db.users.delete_one({'name':'bobby'})