react
-
[#1] React Portfolio :: 포트폴리오 2일차, 사진 및 경력 넣기사이드프로젝트/React Portfolio 2022. 4. 18. 23:03
오늘은 퇴근하고 돌아와서 포트폴리오를 마저 수정했다. 오늘 한일 1. 영문으로 되어있던 내용들 다 한글로 바꿨다. -> 나중에 영문,한국어 버튼을 만들어서 전환해서 볼수 있게 개발해보려고 생각중! 2. 내 프로필 사진 이미지를 바꾸어서 넣었다. 리액트 정말 쉽고 좋다! 3. 경력사항을 입력했다. 오늘 배운 것 JSX 문법 -> && 태그 || 태그 등을 배웠다. JSX는 react인데 되게 로직을 잘 녹여될 수 있게 되어있는 문법 같다. 정의되지 않은 변수가 들어오면 이런 데이터를 내보내라, 등을 || 태그를 이용해서 사용할 수 있다. JSX에서 줄바꿈하기 -> https://qgqg264.tistory.com/160 JSX :: React에서 데이터 줄 바꿈, jsx 데이터 줄 바꿈 오늘은 react로..
-
JSX :: React에서 데이터 줄 바꿈, jsx 데이터 줄 바꿈Programming/React 2022. 4. 18. 22:58
오늘은 react로 만드는 포트폴리오를 수정하다가 json데이터에서 줄바꿈을 하는 것에서 어려움을 겪었다. 여기 끝에 보이는 것 처럼 \n을 넣어서 줄바꿈을 시도했는데, 화면에 그대로 \n이 출력될 뿐 줄바꿈이 전혀 되지 않았다. 태그도 역시 마찬가지로 작동하지 않았다. 해결방법은 css에서 해결을 해야 한다. white-space:pre-wrap; 이 style 태그를 넣어주어야 한다. pre-wrap 또는 pre-line을 쓰면 되는데, 이 태그는 공백을 코드에 있는 그대로 표시하도록 하는 태그라고 한다. 이 둘의 차이점은 다음과 같다. pre-wrap : 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 됨 pre-line: 공백을 여러개 넣어도 1개만 표시한다. 코드에 줄바..
-
[#0] React Portfolio :: 리액트로 개발자 포트폴리오 만들기, template을 이용한 react portfolio 로컬에 띄우기사이드프로젝트/React Portfolio 2022. 4. 17. 23:19
이번에 진행할 사이드프로젝트?는 리액트를 이용한 포트폴리오를 배포하는 것이다. 기업 면접을 보거나 서류를 제출할 때 개발자 포트폴리오를 요구하는 경우가 꽤 있다. 그럴 때 마다 ppt로 제작해서 내고는 했었는데(다른 분들은 노션도 자주 이용하시는 것 같다) 이렇게 제출하기가 싫었다. 뭔가 깔쌈한 포트폴리오를 딱 링크로 내고싶었다. 그래서 리액트를 공부하는 김에 포트폴리오를 리액트로 만들어서 배포해두고, 포트폴리오 제출이 필요할 때 마다 제출해서 사용하려고 한다. 처음에 이 생각을 하고 밑 그림부터 내가 다 그리려고했었는데, 디자인 감각도 없고 프론트 개발은 더더욱 할 줄 몰라서 애를 많이 먹었다. 그래서 찾아보니까 react로 만들어둔 멋진 template이 이미 많이 풀려있었다! 열심히 free tem..
-
React에서 Event 처리하기Programming/React 2022. 1. 24. 22:29
React에서는 HTML과 달리 이벤트명에 camelCase를 사용하여야 하며, 함수 자체를 이벤트 핸들러에 전달해야 한다. 안녕하세요 button의 value값은 event 객체에서 접근이 가능함. 이벤트 핸들러(onClick, onSubmit ...)에 함수를 연결하면 함수의 첫 인자로 event 객체를 전달함. const handleClick = (e) =>{ console.log(e.target.value); } e라는 이벤트 객체에서 ⇒ target이라는 클릭이 된 특정 객체를 가져오고 ⇒ 그 객체의 value를 가져옴
-
JSXProgramming/React 2022. 1. 21. 20:47
JSX는 react에서 HTML을 쉽게 사용할 수 있게 해주는 문법 create react app 으로 처음 React 앱을 생성할 때 설치되는 라이브러러리인 babel이 JSX라는 문법 사용할 수 있게 해줌 JSX로 HTML을 작성하면 babel이 자동으로 JSX 코드를 브라우저가 이해할 수 있는 JS 코드로 변환해 줌 JSX의 작동 원리 ReactDOM.render 이 정해진 위치에 원하는 컴포넌트를 렌더링 해줌 ex ) ReactDOM.render(, document.getElementById("root")); 첫 인자로 component를 받고, 두 번째 인자로 실제로 Component를 그릴 위치를 받음 ⇒ public 폴더 안의 index.html 파일에서 id가 root인 div태그를 찾음...
-
React 설치 , 개발 환경 세팅 , React 첫 프로젝트 시작하기(Window)Programming/React 2022. 1. 21. 19:33
오늘은 리액트를 설치하고, 개발 환경을 세팅하고 React의 첫 프로젝트를 시작해보는 법을 정리해보려고 한다. 그리고 중간 중간 겪었던 문제점들도 해결할 수 있게 정리! 1. Nodejs 설치 우선 Nodejs를 설치해야 한다. 최신버전은 하기 링크에서 다운받을 수 있다. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치 경로는 자동으로 C드라브로 잡힐텐데, 변경하지 않고 그대로 두면 된다. 2. Visual Studio Code 설치 visual studio code를 설치한다. 설치 링크는 하기 링크에서 다운받을 ..