본문 바로가기

전체 글84

[React] 함수형 컴포넌트 VS 클래스형 컴포넌트 안녕하세요. 오늘은 컴포넌트에 대해서 알아보겠습니다. 컴포넌트는 인터페이스를 설계할 때 사용자가 볼 수 있는 여러가지 요소들을 뜻합니다. 컴포넌트는 props를 받아서 elelement를 출력하는 함수와 같습니다. 이러한 컴포넌트를 선언하는 방식으로는 두가지가 있습니다. 바로 함수형 컴포넌트와 클래스형 컴포넌트! 과연 둘은 어떤 차이가 있고, 어떤 기준으로 사용할 컴포넌트를 정하는게 좋을까요? 저는 이에 대한 내용을 '리액트를 다루는 기술' 책과 리액트 공식문서를 사용하여 공부했습니다. (ko.reactjs.org/docs/components-and-props.html#function-and-class-components) 제가 이해한 개념을 쓰는 것이기 때문에, 틀릴 수도 있다는 점! ✔코드비교 //함.. 2020. 12. 29.

[박씨네 정원 1, 2기] 방학 1일 1커밋 프로젝트 학회 TAB의 내가 주최하는 마지막 프로젝트인 1일 1커밋이다. 사실 내가 깃헙을 채우고 있지 못해서 하고싶은 생각에 구성하게 되었다. 이름은 박씨네 정원이라는 후보에 확 꽂혀서 바로 낙찰해 버렸다. 내 성과 잔디로 불리는 깃헙을 합쳐서 '박씨네 정원'으로 이름을 정하게 되었다. 슬랙으로 연동해서 하는 프로젝트와 달리, 우리 학회 TAB에서는 슬랙과 카카오워크 모두 연동시켜 카카오워크 알림이 갈 수 있도록 만들었다. 학회장으로서의 마지막 활동이 될텐데 마지막으로 성황리에 프로젝트를 마칠 수 있으면 좋겠다. 2020. 12. 27.

[React] JSX ❗아래 내용은 [리액트를 다루는 기술] 책에서 공부한 내용을 요약하였습니다. JSX란 자바스크립트의 확장문법이며, XML과 매우 비슷하게 생김 JSX를 사용하면,,, 편하게 렌더링 가능 HTML코드와 유사해서 보기 쉽고, 익숙 컴포넌트를 HTML태그 쓰듯이 사용하면서 활용도가 높음 예시) import React from 'react'; function App(){ return( 리액트 안녕! 잘 작동하니? ); } export default App; 위의 코드처럼 h1태그와 h2태그가 div태그 하나로 감싸져있다. 이렇게 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸는 이유? 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문 조건부 연산자 JSX 내부의 자바스크립트 .. 2020. 12. 23.

[React] 이벤트 핸들링 EVENT = 특정 '사건' 버튼 클릭 이벤트 => 사용자가 버튼을 클릭한 사건 HTML Activate Lasers HTML onclick이 소문자로 이루어져있음 이벤트를 처리할 함수를 큰따옴표("")로 묶어서 표현해놓았음 React Activate Lasers React onClick의 C가 HTML과 다르게 대문자로 나타냄 이벤트를 전달할 때 문자열이 아닌 함수(이벤트처리 함수)를 전달 Camel Case 파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위함 리액트의 함수 핸들링에서 사용됨 Event handler = Event Listener 이벤트를 처리하는 함수 어떤 사건이 발생하면, 사건을 처리하는 역할 이벤트 핸들링 공식 문서 쉬운 예시(onClick 사용) JS) onClick .. 2020. 11. 30.

Git 세미나 자료#2 (fork, clone) 커밋 메시지 커밋 메시지를 의도에 맞게 구체적이지만 깔끔하게 쓰는 것을 추천드립니다. 커밋메시지 쓸 때 생각하면 좋은 법칙 meetup.toast.com/posts/106 커밋메시지 예시 blog.ull.im/engineering/2019/03/10/logs-on-git.html Git clone(클론) 깃헙에서 소스를 최초로 다운받아서 사용할 때 자신이 다운받고 싶은 소스의 레포지토리에 들어가서 초록색 code라고 써져있는 버튼을 누릅니다. 사용방법 1. 링크복사 2. 파일 다운로드 Git Pull Request 사용하는 이유? 깃헙의 강력한 협업 기능 중 하나 새로운 작업의 시작을 위한 기능(branch와 비슷) 내가 작업한 코드가 있으니 보고 검토 후 병합해주세요! push 권한이 없는 오픈 소스 .. 2020. 10. 7.

Notion 세미나 자료 * 이 글은 개인적으로 학교 학회 세미나발표를 위해 만들어진 글입니다* Notion이란? 노션은 깔끔한 디자인으로 아기자기하게 꾸미기 좋은 노트앱입니다. / 로 많은 기능을 사용할 수 있다는 장점 /(슬래쉬)만으로 아래 사진과 같은 블록형식의 기능들을 쉽게 사용할 수 있습니다. 소스코드를 입력할 수 있는 장점 등등 투두리스트나 다양한 기능, 스프레드시트등이 제공된다 그리고 작성자공유로 협업할때 정리하게 좋게도 쓰이기도 한다 깔끔한 노션 활용 예시 bit.ly/lifebook0809 2020. 9. 19.

이전 1 ··· 7 8 9 10 11 12 13 14 다음

티스토리툴바