CodeHoon

안녕하세요 상훈입니다.

Javascript 에서 window.location 을 이용하여 개발/테스트/운영을 구분하기 위해서 쓸 수 있는 간단한 스크립트를 소개합니다.

물론 제약사항이 존재합니다.

예를 들어 devURL, tstURL, URL 이런식으로 접두 주소를 가지고 있어야합니다.

바로 보시죠

window.location 이용하기

//개발모드 확인하기
window.location.hostname.startsWith('dev')

//테스트모드 확인하기
window.location.hostname.startsWith('tst')

이런식으로 사용할 수 있네요. return 되는 결과는  boolean 입니다 ( true / false )

window.location.hostname.startsWith() 사용하기

// hostname 가져오기
const hostName = window.location.hostname

// hostName의 값에 따라 로직 분기하기
if (hostName.startsWith('dev')) {
  return 'this is dev'
} else if (hostName.startsWith('tst')) {
  return 'this is tst'
} else {
  return 'this is prod or else'
}

이런식으로 사용이 가능합니다.

여지껏 맨날 window.location.indexOf 등으로 찾았었는데 이런 좋은게 있다니,, 감동이네요.

감사합니다.

안녕하세요 상훈입니다.

해당 프로젝트는 Vue.js, React.js 등 SPA 의 공통적인 요소이기 때문에,
SPA 프로젝트를 빌드하여 같은 오류가 난다면 마찬가지로 진행해주셔도 무방합니다.

React.js 프로젝트를 build -> nginx server 에 배포하였습니다.

그런데, nginx 서버에서 index.html 파일을 정상적으로 불러왔는데, 새로고침했을 때 404에러가 떠버렸습니다.

기본적인 빌드 환경은 다음과 같습니다.

/var/www/html/build/index.html 

그렇다. build 라는 디렉터리가 또 껴있는 것이다. 

그래서 error.log 를 줄기차게 테스트해보면서 확인해봤다.

이제 에러를 확인했으니, 고쳐야지..

*참고 : error.log 는 /var/log/niginx/error.log  에 있다.

일단 Ubuntu, Nginx 를 이용하는 입장에서만 서술하도록 하겠습니다.

 /etc/nginx/sites-enabled/default  를 수정하면 되는데, 아래 이미지처럼 수정하면 된다.

server {
	root /var/www/html/build/;
    
    index index.html
    
    #... 이하생략
    
    location / {
    	#이부분을 수정해주시면 됩니다.
    	try_files $uri $uri/ /index.html;
    }   
}

저는 저 try_files 부분에서 index.html 로만 작성이 되어져 있었기에
build/index.html 이 아닌 buildindex.html 로 uri 호출이 되었더라구요.

그래서 위와 같이 수정해주고, (sudo nano default) 저장. 그리고 서버 재시작

 sudo service nginx restart 

그리고.....

새로고침 시 해당 페이지가 다시 호출되어 화면에 렌더링 되는 것을 볼 수 있습니다.

이게 뭐라고 계속 이렇게 끙끙 앓았다니 속상하네요.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

안녕하세요 상훈입니다.
이번 달 한빛미디어-나는리뷰어다 에서 제공 받은 도서는 소문난 명강의 : 김범준의 핸즈온 리액트 네이티브 입니다.

리액트에 대한 관심과 공부 시간이 어느 정도 들어간만큼 기초적인 리액트에 대한 개념은 안 상태로 이 도서를 전자책으로 얻게 되어, 작성하였습니다.

🙄 어느 정도 수준의 책인가요?

책 소개에서도 언급이 되었지만, 이 도서는 초급 수준의 리액트 네이티브 개발을 한다고, 말해주고 있습니다. 

그러나, 찬찬히 살펴면 어느 정도 개발을 하셨던 분들도 보시면 중간중간에 도움이 될 만한 내용들이 많이 있는 것 같습니다. 추천드려요!

🎆 목차

간략한 목차부터 말씀드리자면, 이 책은

1. Expo, React-Native, Node.js 등 기초 요소 설명
2. 프로젝트1 : 계산기
3. 프로젝트2 : TodoList
4. 프로젝트3 : 여행 사진 공유 앱 만들기 

로 구성되어져 있습니다.

🚩 Prettier, EsLint 

첫 번 째 챕터인 Expo, React-Native, Node.js 등 기초 요소 설명 부분에서 좋았던 부분은 Prettier, EsLint 를 어느정도 이해할 수 있게 설명해준 부분이었습니다.
예전부터 Prettier, EsLint 는 프론트엔드 개발자들을 꽤 속썩이는 역할을 하고 있었거든요. (물론 주관적인 견해입니다.)

저 또한 Prettier, EsLint 때문에 골치 아팠던 적이 한 두 번이 아니었는데, 우연찮게도 이를 어느정도 설명해주어 덕분에 Prettier, EsLint 에 대해 좀 더 알게되었습니다 😎

🚩 Expo

그리고 리액트 네이티브 개발 공부를 조금이라도 해본 사람이라면 모두 알고있는 Expo.

이 책 또한 편의성을 중점적으로 Expo를 사용하여 앱 개발의 초석을 만들었습니다.

덕분에 오랜만에 Expo를 다시 깔게 되었네요.

🚩 첫 번째 프로젝트 : 계산기

1. prop-types 라는 라이브러리를 처음 알게되었습니다.

npm i prop-types

TypeScript 처럼 javascript 에서도 타입을 명시하여 사용할 수 있게 해주는 라이브러리더라구요.
매우 유익했습니다!

그리고 계산기 앱을 한 개 만들어본 결과 느낀점 🚀

책을 받고 시간이 부족해 기간 내로는 클론 코딩이 어려울 것 같아 계산기 앱까지만 만들고, 리뷰를 시작하게 되었다.

React.js 를 사용하던 사람은 React-Native 를 확실히 조금만 더 공부하면 바로 사용할 수 있다.

React-Native 에 해당하는 새로운 컴포넌트 등이 많기에 그렇게 바로바로 사용할 수는 없다.

이 책은 하나하나 상세한 내용을 만들어주고, 전체적으로 오타도 거의 없는 것 같아 좋았다. 여러 개발 관련 도서들은 오타가 워낙 많아 오류도 많이 발생하게 되는데, 이 책은 그런 경우가 없었던 것 같다. (아닐 수도 있음..)

⚡ 제가 드리는 별점은요

⭐⭐⭐⭐⭐ 5개 드리겠습니다. 추천드립니다!

리액트 네이티브를 사용하고 싶으신 프론트엔드 개발자라면, 입문서로 봐도 무방하겠다는 생각이 들었습니다.

이상입니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

안녕하세요 상훈입니다.

한빛미디어의 '나는 리뷰어다' 활동으로 위 책을 받게 되었고, 직접 코드도 따라 짜보게 되었습니다.
e-book으로 받아 Google Play Book 에서 웹으로 읽으며 코딩 해보았습니다.

내가 별점을 매긴다면 ❔

★★★★★★★☆☆☆ ( 7/10 ) 점 드리도록 하겠습니다.

- 여러 API 에 대한 미흡한 소개 및 작성
- 프로젝트를 제대로 완료하지 못한 찝찝함

😎 결론부터

1. 어떻게 하면 좀 더 나은 환경의 로드 퍼포먼스를 볼 수 있을지 다시 생각하게 되었어요.
2. 몇 가지 우수한 API, Libraries 를 알게 되었습니다! (ex. Hygraph, auth0, ... )
3. 현업자들도 프로젝트를 진행할때 계정 관련 소스들을 직접 건드리려고 하지 않고 외부에서 따로 사용하려고 한다는 것을 알게되었어요! (기존엔 무조건 내가 만들려고했었음)

일단 잘 배웠습니다!

상세하게 배우지는 못했지만,,,
Nuxt.js는 해보았지만, Next.js는 아예 안해본 입장으로서 좋은 경험이었습니다.
(그렇다고 바로 적용하기는 어려울 것 같네요)

Nuxt.js 를 Vue.js 로 혼자 공부했던 적이 있었는데, 프레임워크의 기능들을 제대로 사용하지 못한 기분이 들었고, 이번 기회로 인해 좀 더 알게되었다는 생각이 듭니다.

이 책에서는 클론 코딩과 같은 느낌이 아니라, 대표적인 기능들만 잘게 쪼개어 몇 가지를 알려주신 듯한 기분이었습니다.

그래서 오히려 클론코딩 스러운 내용을 기대하고 보신다면 실망하실 수도 있어요ㅎㅎ.
- 그래도 읽어보시는 건 꽤나 멋진 선택이실 것 같습니다.

✔  책을 읽으며...

첫 번째로 중요하다고 느낀 것은, [서버와 클라이언트의 분리]🎎 부분이었습니다. (보안과도 관련되어있고)

서버에서의 역할과 클라이언트에서의 역할을 명확하게 구분 지을 수 있었습니다.

2번째로, Router를 이용하여 페이지에 로드 할때 기본적으로 동작하는 것들. (마치 Javascript 로 따지자면 document.ready~ 에 해당하는 내용과 같음) 이 생각보다 더 중요한 것처럼 느껴졌어요.

_app.js 와 같은 파일에서 Client 가 App을 사용할 때 기본적으로 실행되고, 거쳐야하는 것들. 등등...

마지막으로, React.js 에 대해 조금 더 알게되었습니다.

🤬  불편한 Styling

style 부분에서 너무나도 많은 컴포넌트를 import 하고 props를 내려주게 되어 오히려 불편하더라구요.
  → 리액트 자체가 아니라 ui 부분에서 특별히 공부를 많이 해야할 것처럼 느껴졌습니다. (내가 왜..? 라는 생각이 들정도)
  → 이 책에서는 css 파일을 git repo에 넣어놓고 독자들이 다운로드 할 수 있도록 진행했다면 더 편했을 것 같습니다. (서로가)

😥 내가 느낀 Next.js 의 단점

(책에 대한 비판이 아니고, Next.js에 대한 내용임을 미리 말씀드립니다.)

- React.js 기반이어서 그런지.. 코드가 Vue.js 에 비해서 너무 지저분합니다(대충 길어서 보기 힘들다는 뜻)  
  Typescript 까지 적용하면 얼마나 더 길어질지....무섭네요.

👍  마무리는..

제가 프론트엔드 개발자로서 아직 짧은 경력을 가졌지만, 음... Vue.js 에 익숙해진 눈과 머리가 살짝 React.js 의 코드를 불편하게 느끼는 것 같기도 하지만, 제가 기업급의 개발팀장이었다면 유지·보수 측면에서도 React 대신 Vue.js 를 선택할 것 같습니다.

그래도, React는 '자유롭다' 라는 장점이 있으니까요. 

이상입니다.

개발 내용

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Next.js + Auth0 를 사용하는데, 로그인 포맷을 띄우려고하는데 오류가 나왔습니다.

내 Application 에서 auth0의 issuerBaseURL == Domain 은 이렇게 써져있었고 [ dev-3c... ] 

🤬에러발생

저는 아무생각없이 그대로 복+붙 해서 .env.local 에 작성하였었습니다.

여기서 문제가 발생하더라구요

🚀 해결방법

https:// 를 써주는 것을 잊지말고...

base url 에 https:// 를 꼭 추가하자

이상입니다

안녕하세요 상훈입니다.

React.js 에서 onclick 이벤트로 state 값을 boolean 형태로 true/false 만들려고 하는데 아래의 무한 루프 에러가 발생하였다.

Too many re-renders. React limits the number of renders to prevent an infinite loop.

😎 결론부터

<button type="button" onClick={} >
  {state ? '숨기기' : '관련영상'}
</button>

//변경전
onClick = { !state }

//변경후
onClick = { () => { !state }}

이렇게 처리하여 에러가 발생하지 않았다.
그냥 콜백함수로 처리했어야했다.

😶 처리하고나서 곰곰히 생각해보았는데..

운동할때랑 자기 전, 그리고 출근할 때 문득 위 에러가 생각났는데,

Callback Function을 위 onClick 내에 넣어줘야 무한루프 에러가 발생하지 않는다는 것을 깨달았다.

만약 콜백 함수가 아니라, 그냥 함수를 바로 써준다면, 위 !state 기능이 렌더링 되자마자 동작해버리고 또 동작하여 무한루프가 발생하는게 아닌가 싶었다.

공식문서에서도 자바스크립(Javascript)의 onClick 과는 다르다! 라고 써있었는데 간과한 것 같았다.

그리고 테스트를 실시해보았다.

1) onClick 내부에 바로 썼을 경우

<button type="button" onClick={setUpdateitem(!updateitem)}>clickevent</button>

2) 함수로 따로 빼서 사용

const updateItemWithClickEvent = () => {
    setUpdateitem(!updateitem)
    alert(updateitem)
  }

<button type="button" onClick={updateItemWithClickEvent}>clickevent</button>

3) 함수를 따로 빼기 + 호출

<button type="button" onClick={updateItemWithClickEvent()}>clickevent</button>

-> 무한루프 발생

4) 콜백함수 return 으로 선언

<button type="button" onClick={() => updateItemWithClickEvent}>clickevent</button> 
// 동작하지않음

<button type="button" onClick={() => updateItemWithClickEvent()}>clickevent</button> 
// 정상동작

당연한 얘기지만, [함수] 로 사용해야 정상적으로 동작한다. 

2) 상수에 함수를 할당해놓았기 때문에 정상동작함
4) CallbackFunction으로 함수를 호출해야 정상동작함

참고

안녕하세요 상훈입니다.

React-Remix 프로젝트에서 개별 css 파일(스타일 적용)을 삽입하는 방법에 대해 포스팅하겠습니다.

app
ㄴcomponents
   ㄴNewNote.css
   ㄴNewNote.jsx
ㄴroutes
   ㄴindex.jsx
   ㄴnotes.jsx
ㄴstyles
   ㄴhome.css
   ㄴmain.css

파일 트리가 이렇게 되어져 있을 경우,

1. 기본 형태 
2. Surfacing Styles

두 가지를 작성하도록 하겠습니다.

1. 기본 형태 ✔

routes/index.jsx 의 경로에서 스타일(css)을 삽입해보도록 하겠습니다.

2가지만 적용해주시면 됩니다.

1️⃣ import
2️⃣ function declare

// 1
import homeStyles from '~/styles/home.css';

// 2
export function links() {
  return [{ rel: 'stylesheet', href: homeStyles }];
}

특별히 설정해줄 것?  - 없습니다.

links 라는 함수명을 remix <Links> 에서 감지하여 하위 요소로 끌고가줍니다.

root.jsx 파일에서 보시면,  @remix-run/react  에서 import 한 Link 컴포넌트가 있습니다.

그리고 이 컴포넌트는 html > head 태그 내에 들어가있습니다.

마치 html 에서 기본적으로 삽입하는 link, script 태그들 처럼요. (이해가 딱 되셨을겁니다😎)

그러면 곧바로 2번째 surfacing styles. 시작해보겠습니다.

2. Surfacing Styles - 개별 파일에서 import 하기 ✔

NewNote : 자식 컴포넌트
NotesPage : 부모 컴포넌트

자식 컴포넌트에서 선언한 스타일을 부모컴포넌트에서도 사용하려면 다음과 같습니다.

✔ 자식컴포넌트-NewNote 에서 export 한 links 를 부모에서 별칭으로 import 하여 links 함수 내에 넣습니다.

✔ 그리고 links 함수에서 spread연산자로 links를 return 시켜줍니다.

주절주절 이야기가 길어졌지만 내용은 생각보다 매우 간단했습니다. 흥미롭고 특이한 점(Surfacing😎)도 있었고요.

이상으로 포스팅을 마치도록 하겠습니다.