1. 새로운 프로젝트를 생성한다 yarn create react-app board-frontend 2. 라우터적용 yarn add react-router-dom 3. 컴포넌트생성 ( 로그인, 회원가입, 글쓰기, 포스트읽기, 포스트목록) (src / pages / 안에 넣어준다.) 1. LoginPage 컴포넌트 export default function LoginPage() { return 로그인; } 2. PostListPage 컴포넌트 export default function PostListPage() { return 포스트 리스트; } 3. PostPage 컴포넌트 export default function PostPage() { return 포스트 읽기; } 4. ResgisterPage 컴포넌..

최근에 깃을통해서 소스를 커밋하는상황이생겼다. 깃 머지하는방법도 모르고 헤매서 바보같아서 웃었다. 내모습이 너모 바보같은.... 일을 하면서 개발직종에 전문 직업으로 하고싶다는 생각이들었으면 프로정신을 가져야한다고생각한다. 이미 프로의세계에 몸담았으면 실력이 안받쳐줘도 어떻게든 배워서 빨리 따라가도록 매진해야한다. 내가 웃었던모습은 너무 해맑은 아이같았다. 그래서 부끄러웠다. 민망했다. 사람과의 관계에서 항상 호의적인내가 직업을 통해 사람과 관계에서 어떻게 대해야할지모르겠다. 하지만 난 프로정신을 가지고 임해야하기때문에 어떻게 변하게될진 모르겠다. 무튼.... 이부끄러움을 무기삼아서 계속 성장하고 발전해갈것이다. 너무 헤헤 거리지말고, 초보라고 기죽지말고, 당연히 모르는게아닌 알아서 갖춰야하는, 제말 자..

웹어플리케션을 만들다보면 비동기작접으로 처리해야할때가 필요하다 한가지일만하는것이아닌 여러 작업을 실행하는, 파일 다운로드 기능이라 보면된다 이렇게 서버 API를 호출할때 외에도 작업을 비동기적으로 처리할때가있는데 바로 setTimeout 함수를 사용하여 특정작업을 예약할때이다. function printMe() { console.log("hello world!"); } setTimeout(printMe, 3000); console.log("대기중 ..."); 비동기작업을 할때 가장 흔히사용하는 방법은 콜백함수를 사용하는 것이다. 1. 콜백함수 function increase(number, callback) { setTimeout(() => { const result = number + 10; if (ca..

1. 객체 자바스크립트의 거의 모든것은 객체이다. boolean, number, string, null, undefined 빼고 이를 제외한 모든 것은 객체이다. 하지만 boolean, number, string도 객체처럼 다룰수있다. 2. 함수 자바스크립트에서는 함수도 객체로 취급한다 3. 프로토타입 모든객체는 숨겨진링크인 프로토타입을 가진다. 이 링크는 해당 객체를 생선한 생성자의 프로토타입 객체를 가리킨다. 4. 실행 컨텍스트와 클로저 자바스크립트는 자신만의 방법으로 실행 컨텍스트를 만들고 실행이이뤄진다. 이 실행 컨텍스트는 자신만의 유효범위를 갖는데 이과정에서 클로저를 구현할수있다.

SASS는 css 전처리기로 복잡한 작업을 쉽게 할수잇도록 해주고 스타일 코드의 재활용성을 높여준다 실상에서는 SCSS가 많이 사용되고, 회사에서도 scss를 사용하고있으로 SCSS로 볼려고한다. 우선 yarn add sass 설치를 해준다. 1. scss 로 컴포넌트 스타일링하기 우선 SassComponent.js 컴포넌트파일을 만든다. import React from 'react'; import './SassComponent.scss'; const SassComponent = () => { return ( ); }; export default SassComponent; 그후 SassComponent.scss 파일을 작성해준다. $red: #fa5252; $orange: #fd6e14; $yellow:..

만약에 반복되는 코드를 작성해야한다면??? import React from 'react'; import PropTypes from 'prop-types'; const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; 이렇게 ... 반복되는 코드가있을수있다 그렇다면 파일용량도 증가되므로 낭비된다 그러면 어떻게 이런반복적인 내용을 효율적으로 보여줄까? 1. 배열의 map()함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용해 반복되는 컴포넌트를 랜더링해줄수있다. 문법 const numbers = [1, 2, 3, 4, 5]; const result = numbers.map((num) => num ..