profile
TIL 기록 블로그 :: 문제가 있는 글엔 댓글 부탁드려요!
태그 목록
전체보기 (100)React(20)django(19)Backend(19)JavaScript(18)python(16)nodejs(9)프로젝트1차(6)typescript(6)git(6)express(5)github(5)graphql(4)클론코딩(4)redux(4)Crawling(4)vscode(3)shell(3)Database(3)scss(3)CSS(3)JWT(3)npm(3)CRUD(3)webpack(2)mysql(2)beautifulsoup(2)nextjs(2)http(2)인증인가(2)노마드코더(2)aws(2)authentication(2)CRA(2)Module(2)ESLint(2)예외처리(2)Prettier(2)bcrypt(2)gatsby(2)authorization(2)TIL(2)package.json(2)setState(1)is not a function(1)html(1)v8(1)front end(1)ORM(1)async(1)비동기(1)가상환경(1)vue.js(1)error(1)AWS S3(1)oAuth(1)pymysql(1)SSR(1)hook(1)code 명령어(1)destructuring(1)status code(1)iamport(1)transform(1)transition(1)blog(1)yarn(1)prefetch_related(1)set(1)import(1)package(1)sys.modules(1)sys.path(1)install(1)data structure(1)rebase(1)callback(1)fs(1)static file folder(1)express-handlebars(1)크로스브라우징(1)소수점(1)templete engine(1)Synchronous & Asynchronous(1)null(1)undefined(1)Virtual Environment(1)conda 명령어(1)function parameters(1)try except(1)core module(1)POST method(1)built-in modules(1)asterisk(1)URL Parameters(1)unpacking(1)Cross Browser Testing(1)connect()(1)유동라우터(1)Query parameters(1)AqueryTool(1)역참조(1)related_name(1)HashMap(1)정참조(1)package list(1)상태코드(1)결제(1)not defined(1)reference error(1)github blog deploy(1)github reset(1)grapyql(1)surge(1)graphDB(1)암호화(1)pip(1)Token(1)ref(1)interface(1)정규표현식(1)rds(1)async await(1)Absolute Path(1)Relative Path(1)router(1)miniconda(1)document.js(1)HTTPie(1)git remote(1)Request(1)Response(1)selenium(1)icon(1)coding convention(1)spa(1)웹 크롤링(1)nodemon(1)erd(1)node sass(1)tofixed(1)beautifulsoup4(1)데이터구조(1)parseFloat(1)Sync(1)queryset(1)gitignore(1)code convetion(1)try catch(1)비동기함수(1)input auto focus(1)gh-pages(1)getInitialProps(1)models(1)salting(1)flow(1)create repository(1)resetcss(1)version control system(1)CSS pre-processor(1)라우트(1)animation(1)git merge(1)squash(1)fontawesome(1)소스코드빌드(1)git stash(1)리액트기본세팅(1)key stretching(1)input outline(1)selectrelated(1)VCS(1)로그인(1)promise(1)리덕스(1)create react app(1)tutorial(1)decorator(1)js(1)frontend(1)MacOS(1)context(1)Sass(1)styled components(1)cors(1)react.js(1)tree(1)typeError(1)&&(1)클로저(1)

리덕스+리액트 redux with React #4 그래프 DB 도입

참고서적 : do it! 리액트프로그래밍정석컴퓨팅에서 그래프 데이터베이스(graph database, GDB)는 시맨틱 쿼리를 위해 노드, 엣지, 프로퍼티와 함께 그래프 구조를 사용하여 데이터를 표현하고 저장하는 데이터베이스이다. 이 시스템의 주 개념은 그래프(엣지 또

약 22시간 전
·
0개의 댓글
post-thumbnail

리덕스+리액트 redux with React #3 todo app 만들어볼까나!

Todo app 만들기 리덕스 슬쩍 훓어 봤으니, todo app을 만들어보자. redux 공식문서 : Todo app 만들기 에 내용 정리되어 있다. 천천히 만들어보면서 막힐때 슬쩍 보기! CRA프로젝트 $ npx create-react-app react-redux

5일 전
·
0개의 댓글

리덕스+리액트 redux with React #2 컴포넌트 구성과 connect()

리액트와 함께 사용 redux 공식문서 - redux with react 공식문서에서 리액트에서 리덕스를 사용할때 컴포넌트 구성을 어떻게 해야할지 가이드 되어 있다. 리액트 컴포넌트의 재사용을 쉽게 하기 위한 방식으로 재공한다 하니. 한번 읽어보고 적용할수 있게 노~

6일 전
·
0개의 댓글

Typescript #3 React & Webpack 연결

typescript 한국어 문서 : react & webpack 보고 따라하기npm init -y : 초기화npm i -D webpack webpack-cli : 웹팩설치npm i react react-dom : 리액트, 리액트돔 설치npm i -D @types/rea

2020년 5월 14일
·
0개의 댓글

Typescript #2 REACT에서 사용하기

타입스크립트와 리액트 프로젝트를 시작한다면 아래와 같이 설치하자npx create-react-app <프로젝트명> --template typescriptnpm i typescript @types/node @types/react @types/react-dom @ty

2020년 5월 14일
·
0개의 댓글
post-thumbnail

NEXT.js : 초기세팅 & 기본 설명 #2

앞서 1편 포스팅에서 \_document.js 파일에 대해 설명할 때 reset.css 와 common.css를 적용하는 법을 함께 언급하였다. \_document.js는 HTML 초기설정 파일정도로 생각하면 될것 같다. Next, react에서는 HTML문서를 작성

2020년 3월 16일
·
1개의 댓글

NEXT.js : 초기세팅 & 기본 설명 #1

NEXT.js? next.js는 리액트 서버사이드렌더링(Server Side Randering, SSR) 프레임워크로 다음과 같은 기능 & 장점이 있어 많이 사용되고 있다. 1. 검색앤진최적화(Search engine Optimization, SEO) 2. 빠른 첫페이

2020년 3월 14일
·
0개의 댓글
post-thumbnail

TIL : React Hook #1, 함수형 컴포넌트

목차 함수형 & 클래스형 컴포넌트 hook의 특징 hook 사용법 useState() useEffect() props 전달 ContextAPI 사용하기 함수형 & 클래스형의 사용차이 useContext() 함수형 & 클래스형 컴포넌트 리액트에서

2020년 3월 11일
·
0개의 댓글
post-thumbnail

Styled Components #1 Basic : 리액트 스타일 컴포넌트 기초

Styled Components? CSS나 SASS같이 class, id, tag name를 가져와 쓰지 않고, 스타일 지정된 컴포넌트 생성하여 Tag 쓰듯 스타일컴포넌트를 쓰는 것을 말한다. 즉, 리액트에서 ui단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하

2020년 3월 9일
·
0개의 댓글

PROJ-FOODLY-프로젝트를 마치며

2주간 진행됬던 프로젝트가 끝났다. 첫 주만 해도 여유부리며 블로그도 작성하고 했는데, 2주차가 되면서 시간이 촉박, 머리속은 복잡(..깨알라임) 블로그할 여유도 없어져 버렸다. 다 끝난 지금에서야 하루하루 꼭 정리할 걸 후회하며 마무리 정리 포스팅을 써본다.login

2020년 3월 7일
·
0개의 댓글
post-thumbnail

PROJ-FOODLY-DAY5 : setState()

프로젝트 4일차, react 팁 정리 비동기 & 동기 비동기 : 함수가 실행되면 동작이 예약되며 언제 시작하고 끝나는지 알 수 없다. ex) fetch(), setState() 동기 : 함수가 실행되면 setState()의 비동기처리 1번 인자 : state 변

2020년 3월 7일
·
0개의 댓글
post-thumbnail

React 프로젝트에서 Input Tag AutoFocus

프로젝트를 진행하면서 input창에 AutoFocus 되도록 하기 위해 리액트에서의 ref기능을 사용하게 되었다.(React 16.3 이후 버전) 리액트 공식문서를 살펴보면 ref 기능은 있지만 쓰지 말길 권하고 있다. 이게 무슨 상황인가?! 기능은 있지만 쓰지 말라

2020년 3월 7일
·
0개의 댓글
post-thumbnail

CRA 프로젝트에 ESLint & Prettier 추가하기

프로젝트를 시작하고 각 개인의 IDE의 설정을 각각 해주었는데, 알아보니 프로젝트에서 사용하는 코딩컨밴션을 맞추는 방법이 따로 존재했다! 이런 유용한 것 & 알아두면 좋은 것은 바로 정리해둬야징!자바스크립트 문법이나 코딩컨벤션을 검사하는 도구. 미처발견하지 못한 코딩실

2020년 3월 7일
·
0개의 댓글
post-thumbnail

PROJ-FOODLY-DAY4 : 인풋 아웃라인, SCSS공유, transform & transition

프로젝트 4일차 인풋 아웃라인 제거 인풋창을 만들고 내용을 입력하려 커서로 클릭을 하면 파란 줄이 인풋창을 감싸게 된다. 이것을 outline 설정으로 제어할 수 있다. 해당선택자를 통해 인풋창에 아웃라인 속성을 none으로 설정했다. 매번 하는 설정인데 왜 매번

2020년 2월 27일
·
0개의 댓글

PROJ-FOODLY-DAY3 : 리액트에서 이미지 임포팅

<img src='../../img' alt=''/>리액트에서 src속성을 사용하기 위해서는 import가 필수적이다. import를 통해 해당경로를 변수에 담아주고, 변수를 src속성값으로 사용한다.import 변수명 from '../이미지경로/파일명.확장자';

2020년 2월 27일
·
1개의 댓글
post-thumbnail

PROJ-FOODLY-DAY2 : 깃 적응하기 & 폰트어썸

프로젝트 2일차.첫날 로그인/회원가입 HTML, SCSS 까지 마무리하였고, 오늘은 MAIN CONTENT와 FOOTER 까지 끝내기가 목표. 하지만 다 못했지요프로젝트를 진행하면 각자 맡은 컴포넌트/기능에 맞춰 깃 브랜치를 생성하고 작업하게 된다. 나는 4가지의 컴포

2020년 2월 25일
·
0개의 댓글
post-thumbnail

PROJ-FOODLY-DAY1 : react 초기세팅, 코딩컨벤션

2주간 진행되는 클론코딩 프로젝트가 시작되었다. 내가 속한 팀은 Foodly 사이트를 클론 하게 되었고, Front 3, back 3명 총 6명의 인원이 참여하게 되었다.프로젝트 시작에 앞서 앞으로 1주간의 일정을 확인했다. front-end팀은 main/login/r

2020년 2월 24일
·
0개의 댓글
post-thumbnail

webpack 소스코드빌드 도전 - 01

webpack? 모듈번들러 웹팩 모든 파일을 공통내용을 나눠 분할하여 관리한다. 모듈/컴포넌트 단위로 모아 관리. webpack 설정 초기화 명령을 통해 을 만들어보자. npm init 프로젝트 폴더로 이동후 초기화 명령으로 package.json을 생성하였다

2020년 2월 22일
·
0개의 댓글
post-thumbnail

React Router 기본설정 & 유동라우터

먼저 React 프로젝트로 이동하고 npm install react-router-dom --save 을 통해 라우트를 설치하자. 마지막 --save는 package.json에 패키지를 자동으로 추가하기 위한 명령어다. 없어도 되지만 수고를 덜기위해 적어주자.App.js

2020년 2월 16일
·
0개의 댓글
post-thumbnail

create-react-app 으로 리액트 기본세팅

create-react-app create-react-app은 리액트 기본세팅을 돕는 도구다. 실무에서는 회사마다 달리 사용할수 있지만, 이제 막 입문한 초보 리액터인 나는 create-react-app를 아주 잘 사용할 예정이다! 제일먼저 아주 간편하고 훌륭한 도구인

2020년 2월 16일
·
0개의 댓글