반응형

전체 글 37

React 컴포넌트 Component 문법, html 치환하기

React에서는 긴 HTML을 한 단어로 치환할 수 있는 Component 문법을 제공한다 function App() { return( 123 ); } function 본문(){ return ( 제목 내용 ); } 이렇게 새로 만든 function 안에서 HTML 내용을 return 해주고 , 또는 으로 태그를 작성하면 만들어뒀던 함수안에 있던 내용들이 그 태그 안으로 들어가게 된다. Component를 만들때는 보통 작명할때 영어 대문자로 시작하는 관습이 있고, 새로 컴포넌트를 만들때는 function App() 밖에서 함수를 만들어야 한다. 또한 아래처럼 JavaScript ES6 신문법인 arrow function을 사용해도 된다. let 본문 = ()=>{ return ( HTML 본문 내용 ); }

개발/React 2023.09.04

React 오브젝트, 배열 형태의 State 변경하기

React에서 Object, array 형태로 만들어진 State 변경하는 방법에는 여러가지가 있다. 그중 가장 간단한 것은 원본 list 값을 변경하고 그 list를 다시 변경함수에 넣어주는 것이다. let [리스트, 변경함수] = useState(['123', '456', '789']); 리스트[0] = '100' 변경함수(리스트); 근데 이렇게 하면 아마 변경이 안될거임 왜냐하면 React에서 기존 State랑 신규 State가 같으면 변경을 따로 안해주는데 저렇게 하면 리스트라는 변수가 가르키는 포인터 값이 같기 때문에 변경을 안해줌 그래서 아래와 같은 방법으로 바꾸는게 정석이다. let [리스트, 변경함수] = useState(['123', '456', '789']); let 복사본 = [.....

개발/React 2023.09.04

React State란, 데이터바인딩한 변수 값 변경하기

https://logical02.tistory.com/27 React 기본 사용법 JSX 문법 기초 0. 리액트는 프로젝트 폴더 내의 src 내에 있는 App.js에다가 코딩하면 됨 JavaScript 문법으로 쓰는데 정확히는 JSX 문법으로 사용함. import './App.css'; function App() { return ( '여기다가 코딩하면 됨' ); } expo blog.hym2n.site 저번에 html 안에 변수를 넣는 데이터바인딩을 알아보았다 그런데 데이터바인딩한 변수를 바꾸면 어떻게 될까? 일반적으로 let이나 var로 선언한 변수는 변수 값을 바꿔도 html 안에 데이터바인딩했던 글자가 바뀌지 않는다. 그 이유는 렌더링이 이미 끝나고 변수가 바뀔 때 재랜더링이 되지 않기 때문. 따라..

개발/React 2023.09.04

React 기본 사용법 JSX 문법 기초

0. 리액트는 프로젝트 폴더 내의 src 내에 있는 App.js에다가 코딩하면 됨 JavaScript 문법으로 쓰는데 정확히는 JSX 문법으로 사용함. import './App.css'; function App() { return ( '여기다가 코딩하면 됨' ); } export default App; 대충 이런식으로 저 return 안에다가 html 방식으로 코딩하면 됨 return 안에는 하나의 태그만 써야하기 때문에 여러 태그를 쓸 때는 가장 바깥 쪽에 div 태그로 감싸주면 됨 CSS 스타일은 App.css 안에다가 작성하면 됨 .black-nav { background : black; ... } 1. JSX는 class 대신 className이라고 씀 코드를 짤 때 보면 평소 짜던 html과 다..

개발/React 2023.09.04

리액트 React 프로젝트 생성, 개발환경 셋팅

1. IDE 설치 우선 React는 Node.js 기반이기 때문에 Node JS를 설치해야함 구글에 Node JS 검색 후 설치 혹은 아래 사이트에서 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. IDE 설치 이 글에서는 VSCode를 사용함 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging moder..

개발/React 2023.09.04

apache2 SSL https 활성화하기

https://blog.hym2n.site/23 apache2를 이용하여 서브도메인에 포트 연결하기 Ubuntu Server 22.04 기준 예를들어 내 도메인이 example.com인데 굳이 http://example.com:3000/ 이런식으로 안해도 aaa.example.com 으로 연결했을때는 3000포트, bbb.example.com으로 연결했을때는 3001포트로 연결되게 ( blog.hym2n.site https://blog.hym2n.site/24 SSL 인증서를 발급받아 https 프로토콜을 활성화하자 - Let's Encrypt 와일드카드 인증서 암호화된 안전한 프로토콜 https 우리가 웹 페이지를 열때 보통 http나 https 프로토콜을 사용한다. https는 통신 과정에서 암호화 ..

서버(리눅스) 2023.02.03

SSL 인증서를 발급받아 https 프로토콜을 활성화하자 - Let's Encrypt 와일드카드 인증서

암호화된 안전한 프로토콜 https 우리가 웹 페이지를 열때 보통 http나 https 프로토콜을 사용한다. https는 통신 과정에서 암호화 단계를 거쳐 정보를 주고받지만 http는 그런거 없이 쌩 데이터를 주고받는다. 즉 중간에서 통신 정보를 가로채기만 한다면 사용자가 전송한 파일, 비밀번호 등을 암호화없는 쌩 데이터 그대로 도청할 수가 있다는 것이다. 이것은 클라이언트 기기가 보안이 철저하다고 해서, 또는 수상한 와이파이에 연결하지 않았다고 해서 괜찮은 것이 아니다. 수상한 와이파이에 연결하지 않았어도 무선전파를 잡아서 데이터를 그대로 읽을수도 있으며(실제로 방법도 그리 어렵지 않으나 이를 시도할 시 정보뭐시기법 위반으로 벌금 3000만원 나온단다), 기기자체의 보안이 아무리 뛰어나다고 해도 그것과..

서버(리눅스) 2023.02.03

apache2를 이용하여 서브도메인에 포트 연결하기(node.js 연동)

Ubuntu Server 22.04 기준 예를들어 내 도메인이 example.com인데 굳이 http://example.com:3000/ 이런식으로 안해도 aaa.example.com 으로 연결했을때는 3000포트, bbb.example.com으로 연결했을때는 3001포트로 연결되게 (주소창은 bbb.example.com으로 유지, 뒤에 뭐가 붙어있어도 그대로 가져감 예를들어서 bbb.example.com/testpage => example.com:3001/testpage의 내용 보여줌) 이렇게 서브도메인(3차도메인)에 포트를 연결하고싶다 하면 apache2를 이용하면 됨. 보통 node.js로 포트 여러개 열어서 웹 여러개 만들거나 웹사이트를 두 개 이상 만들때 아이피를 두 개 이상 할당받아서 서버를 ..

서버(리눅스) 2023.02.01

새 서버 장만기(우분투 서버 22.04/Dell Optiplex 3070 Micro)

내가 지금 사용중인 NAS 사양 인텔 셀러론 J3355.. 어떻게 보면 저전력이라 24시간 돌려야하는 나스용으로 전기세 부담이 적을 수 있겠지만 그만큼 느린 CPU이기도 하다. 전에 나스에 Docker을 설치해서 자바기반 마인크래프트 서버를 열기도 했었는데 서버 여는데만 9억년 걸렸다. 그마저도 열리고 나서 처음엔 잘 버티는듯 하다가 서버에 한 5명정도 동시접속하기 시작하면 CPU 사용량이 미친듯 치솟고 마크 세상이 멈췄다 돌아갔다를 반복한다. 마크 세상에 사는 동물과 플레이어는 무슨 죄인지 현실에서는 그런 일이 발생하면 안된다 지금 우리가 사는 세계도 누군가 서버에서 시뮬레이션을 돌리고있는 것일수도 있다. 서버관리가 제대로 되지 않으면 우리 세상도 멈춰버릴지도 모른다 그만큼 서버관리가 중요하다 그런 의..

서버(리눅스) 2023.02.01

iOS14 에어팟 프로 3A283 펌웨어 업데이트, 무엇이 달라졌을까?

9월 15일, 한국 시간 기준으로 애플 신제품 발표회를 하루 앞둔 상태에서 iOS 14 베타를 사용하고 있는 유저들의 에어팟 프로가 펌웨어 2D27 버전에서 3A283으로 업데이트 되었습니다. 해당 업데이트는 에어팟 1세대를 제외한 에어팟2, 에어팟 프로를 대상으로 진행되었는데요. 에어팟 업데이트는 자기도 모르는새에 반강제적으로 자동업데이트되는지라 사실 저도 업데이트가 된줄도 모르고있었습니다. 그러던중 아이패드에 연결중이던 에어팟 프로가 너무나도 자연스럽게 아이폰의 사운드를 연결딜레이 없이 바로 재생하길래 알게되었죠. ‘아.. 이게 설마 업데이트된다던 그건가..?’ 싶어서 설정>정보>Airpods에 들어가서 펌웨어 버전을 확인해보니 역시나 펌웨어가 업데이트된 것이었습니다. 이번 에어팟 프로 업데이트는 새..

애플/에어팟 2020.09.15
반응형