profile
안녕하세요 조성환 입니다!

[React]Styled Component

styled component 를 import 해준다사용하고 싶은 컴포넌트를 만든다const 뒤에 사용하고 싶은 컴포넌트명을 넣어준다(첫글자는 대문자로 사용) styled. 뒤에 원하는 element 태그명 작성 백틱사용해서 그 안에 원하는 style 작성원하는 곳에

2021년 9월 26일
·
0개의 댓글

[회고] 마담주 클론코딩

MANNAMCHU2021-08-30 ~ 2021.09.10총 5명Front-End 3명Back-End 2명Front-EndJavascript, React, SassBack-Endphython, Django, MySQLGithubTrelloSlack네브바로그인 상태를 이

2021년 9월 26일
·
0개의 댓글

[React] Hooks

Hooks란 함수 컴포넌트 안에서 State와, 생명주기 기능을 사용 할 수 있게 해주는 함수라고 생각하면 된다. 함수 컴포넌트 안에서 사용되는 것이기 때문에 class 안에서는 동작하지 않는다. class 컴포넌트와 함수형 컴포넌트는 섞어서 사용해도 되기 때문에 hooks를 사용하기 위해서 굳이 이전 class형 컴포넌트를 모두 함수형으로 바꾸지 않아도 ...

2021년 9월 18일
·
0개의 댓글

[WEB]AWS 에 배포 과정

AWS 에 깃 프로젝트 배포 하기 터미널 실행 우분투 서버 열기 ssh -i keyName.pem ubuntu@내 aws 퍼블릭 ip 우분투 서버에 node 설치 (npm 사용하기 위해서) curl -sl https://deb.nodesource.com/set

2021년 9월 12일
·
0개의 댓글

[React]개발 환경 초기 셋팅

개발 환경 초기 셋팅은 자주 경험 해보지 못할 것 같아 정리하였다 초기 셋팅을 잘 해야 하는 이유는 여러명의 팀원이 작업을 한 후 작업물을 합쳤을 때 작업 환경이 다르게 설정되어 있을 경우 레이아웃이 깨지는 것을 방지하기도 하고, 자주 사용하는 코드를 같이 공유하여

2021년 9월 12일
·
0개의 댓글

[React] 자식 컴포넌트에서 부모 컴포넌트 state 바꾸기

React 에서 props 는 읽기 전용의 값이다 그래서 부모 컴포넌트의 state 값을 자식 컴포넌트에 props 값으로 내려주게 되면 자식 컴포넌트에서는 props 값을 변경 할 수 없다 그렇지만 자식 컴포넌트에서 값을 변경 해야 하는 일이 생기는데 이때 사용하는 방법이 함수를 사용하는 방법 이다. ex) value2 값을 value1 로 바꾸고 싶...

2021년 9월 5일
·
0개의 댓글

[React] 라이프사이클

리액트는 라이프사이클 매소드가 있는데 이것은, 특정 시점에 원하는 것을 동작하게 하기 위해서 필요한 매소드 이다. > 라이프사이클에는 크게 5단계로 나눌수 있는데, > constructor render componentDidMount componentDidUpdate componentWillUnmount > 로 구분 할 수 있다. constructor ...

2021년 9월 5일
·
0개의 댓글

[프론트] 로그인 & 회원가입

로그인과 회원가입 로그인과 회원가입을 위해 백엔드와 통신하여 api를 사용하는 방법을 간단히 정리했다 fetch 함수를 이용한 로그인 및 회원가입 방법 클라이언트가 서버에 Request를 보내면 서버에서 인증과 인가의 과정을 거치고, 서버가 클라이언트에게 Response 하는 방식으로 진행이 된다. 프론트에서 백엔드와 통신해서 api를 통한 로그인 및...

2021년 8월 27일
·
0개의 댓글

[react] 구조 분해 할당

구조 분해 할당은 mdn에서는 배열 또는 객체의 속성을 해체하여 그 값을 개별 변수에 담을수 있게 하는 javascript 표현식 이라고 한다 쉽게 예를 들어서 설명하면, 아래의 코드 처럼 간단하게 바꿔 사용할수 있다. > 1방법 이렇게 해서 a에 10을 할당하고, b에 20을 할당 할 수 있지만, 구조 분해 할당을 사용하면 아래와 같이 변경하여, 똑...

2021년 8월 27일
·
0개의 댓글

[WEB]인증과 인가

인증이란? 웹사이트에서 유저가 누구인지 식별 할 수 있도록 하는 식별자를 생성하여 판단하는 것으로, 회원가입과 같은것을 통해서 인증을 할 수 있다 해싱 이때, 비밀번호 같은 경우는 데이터 베이스에 저장시에 개인정보를 암호화하여 복원 할 수 없도록 비밀번호를 관리 해야 한다 이 암호화 하는 것을 해싱이라고 한다 단방향 해시 비밀번호를 암호화 할 때에는 단...

2021년 8월 27일
·
0개의 댓글

[React]props와 state

props는 컴포넌트 사용시에 선언해주며, 부모 컴포넌트에 작성하면 자식 컴포넌트에게 전달되는 값입니다 state는 컴포넌트 내부에서 선언하여 사용하는 값입니다. > props 위의 코드는 ComponentName이라는 컴포넌트의 코드이다. ComponentName는 부모 컴포넌트이고, ChildComponentName은 자식 컴포넌트이다. > 이 부...

2021년 8월 21일
·
0개의 댓글

[Javascript] DOM 요소

JavaScript 를 사람들이 동적인 웹을 위한 언어라고 말했을 때, 그 말을 이해 하게 된 계기가 Dom 요소를 배우고 나서 였다고 생각한다. DOM(Document Object Model)이란, 프로그래밍 언어가 html 요소에 접근 할 수 있도록 해주는 역할을 한다 예를 들면 > HTML > JavaScript 이렇게 코드를 짜면, Jav...

2021년 8월 21일
·
0개의 댓글

[React]기본 개념

리엑트란, UI(user interface)를 위한 JavaScript기반의 라이브러리 이다. 말그대로 리엑트는 UI 요소를 위한 라이브러리 이며, render()를 이용해서 UI요소를 구성하고, Component 를 만들어서 UI 요소를 재사용 할 수 있다. react는 DOM, Event 를 대체 하기 위해서 나타난 것으로 HTML 파일에 Jav...

2021년 8월 21일
·
0개의 댓글

[WEB] http 통신

HTTP란, Hyper Text Transfer Protocol 의 약자로,문서와 문서가 링크로 연결 되어 서로 데이터를 전송하는 통신 규약을 말한다.http는 Request 와 Response 로 이루어 지는데,Request는 웹에서 서버로 데이터를 요청 하는 것이고

2021년 8월 14일
·
0개의 댓글

[Git] git의 개념과 github 사용법

Git 이란 버전을 관리하는 시스템으로, 버전을 관리 하는 이유는 수정할 때 마다 새로운 파일을 만들면 관리하기 힘들고, 이전 버전으로 돌아갈 수 있고, 누가 수정을 했는지 이력을 남길수도 있으며,(git blame) 하나의 프로젝트를 두고 여러명의 개발자들이 협업을 할 수 있기 때문이다. 하나의 프로젝트로 여러명이서 기능 별로 개발을 하고 하나에 합칠 ...

2021년 8월 14일
·
0개의 댓글

[Javascript] 함수의 기본개념

위의 코드는 자바스크립트를 배운지 2주차에 왜 실행이 안되지 하고 생각했던 코드인데,실제로는 DOM 요소를 사용하고 변수명들이 들어간 코드 였지만, 생각해보면 저 코드와 다를 것이 없었다. 결국 해결하지 못하고 멘토링 후 기본적인 것을 놓치고 있다고 생각했고, 함수의

2021년 8월 13일
·
1개의 댓글

[Refactoring] Self Refactoring

Refactoring 이란,겉보기 동작은 그대로 유지하고, 코드를 이해하고 수저하기 쉽게 내부 구조를 변경하는 것으로써,리펙토링을 하는 이유는유지보수를 하기 좋게 바꾸도록 refactoring코드의 가독성 및 확장성이 좋아야 소프트웨어를 계속해서 변화 시킬 수 있다le

2021년 8월 13일
·
0개의 댓글

[터미널]리눅스 & 터미널

리눅스는 운영체제 중의 하나로, 맥도 리눅스 계열이다.리눅스는 오픈소스라서 공개적으로 엑세스 할 수 있게 설계되어 있고, 누구나 수정이나 배포가 가능한 운영체제 이다오픈소스라서 서버를 구성할 때 무료로 설치가 가능 하기 때문에 서버에 리눅스를 많이 사용한다코드 배포를

2021년 8월 13일
·
0개의 댓글

[DB] 데이터베이스 모델링

데이터 베이스 모델링은최상위 데이터 부터 최하위 데이터로 모델링 하는 것이 좋다예를 들면스타벅스메뉴:음료, 음식, 상품음료 : 아메리카노, 카페라떼, 에스프레소음식 : 케이크, 쿠키, 샌드위치상품 : 텀블러, 카드, 머그컵이런식으로대분류를 먼저 고려하고, 소분류를 계속

2021년 8월 13일
·
0개의 댓글

[CSS] float: left, right, both

float 속성은 본문에 이미지 파일을 배치할 때에도 사용하지만, 본문들을 배치할 때에도 사용 할 수 있습니다.요즘에는 float 속성이 조작이 어렵고(복잡하고), 유지보수가 힘들어서 grid 속성이나, flex 속성을 많이 사용합니다.열 내부에 float하는 이미지를

2021년 8월 5일
·
0개의 댓글