기존 리액트 코드에서 state 객체 안에 input의 값을 추가 할 때 onChange를 통해 값이 생성되면 state안에 키값과 밸류값을 넣도록 만들어 두었었다. // exconst inputHandler = e => { const { name, value } = e.target; setState(...state, ...{ [name]: value }); }; 이런 상황에서 리덕스를 사용할 경우 정의되지 않은 state의 키와 밸류를 추가 할 수 있을지와 의문이 들었다.문제는 리듀서에서 발생을 했다. 리듀서는 action과 state만을 인자로 받기 때문에 [name]의 값을 가져올 수 없었다.이를 해결하려면 action자체를 스프레드(...)하면 되지만 이경우에 action안에 있는 type의 값까..
기존 php 서비스 위에 react를 사용하여 페이지를 만들어야 하는 프로젝트가 생겼다.react-router-dom을 사용하여 react페이지를 만들었는데 qa서버(테스트 서버)에서 history.back 또는 url로 직접 접근하면 404에러가 나오는 문제가 생겼다.php 서비스는 apache위에 떠있었기 때문에 react-router-dom의 url을 apache에서 해석을 함으로써 생긴 문제였다. 예를 들면 react-router-dom을 통해 `/page`와 `/page/1`의 url을 router하고 해당 링크로 가게 되면 apache에서 `/page/index.html` `/page/1/index.html`을 찾기 때문에 404 error가 나타나는 것이었다. 이를 해결하기 위해서는 apac..
한글을 표현 할 수 있는 문자 인코딩 방식 중 많이 쓰는 것은 EUC-KR와 UTF-8가 있습니다.두 인코딩은 완성형 방식과 조합형 방식이라는 차이가 있습니다 EUC-KR - ex) 안 녕 하 세 요UTF-8 - ex) ㅇ ㅏ ㄴ ㄴ ㅕ ㅇ ㅎ ㅏ ㅅ ㅔ ㅇ ㅛ 무슨 뜻이냐하면 EUC-KR 경우에는 완성된 단어가 있어야만 표현이 됩니다. UTF-8의 경우에는 모음 자음으로 나누어져서 조합을 통해 글자가 완성되어 표현이됩니다. 이런 차이 때문에 EUC-KR의 경우 완성된 문자가 없을 경우에는 한글이 깨져 보일 수 있십니다. 요즘에는 이런 차이 때문에 UTF-8 방식을 많이 사용하고 있습니다. 문자 인코딩에 대해 더 자세한 내용은 위키 피디아에서 확인 할 수 있습니다https://en.wikipedia.or..
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 - 현재 글 Deploying a Next.js App▲ZEIT Now 를 통해 애플리캐이션을 매우 간단하고 확장 가능한 배포를 할 수 있습니다.Node.js를 통해서도 비교적 간단하게 가능합니다. 그럼 Next.js를 배포하는 방법에 대해 알아 봅시다 Setup아래의 예제를 다운로드해주세요git clone https://github.com/zeit..
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 - 현재 글Next js 튜토리얼 8편 : 배포 Styling Components지금까지 컴포넌트의 스타일링을 많이 하지 않았습니다. 하지만 앱에는 스타일이 필요합니다.리엑트 앱에는 스타일을 적용하는 많은 기술들이 있으며, 크게 두가지의 방법으로 분류할 수 있습니다 1. 전통적인 css 파일 기반에 스타일링 (SASS, PostCSS 등)2. CSS in Js 스타일링 전통적인 css ..
개발자라는 직업이 관심을 많이 받게 되고 개발자로 전직 하려는 분들이 많아지면서 국비 교육을 들을지 유료 학원을 갈지 고민하시는 분들이 많이 보여서 포스팅을 하려고 합니다 개발자로 진로를 결정하고 국비 학원과 부트 캠프를 모두 다녀보았고 각 교육에 대해 느낀점을 이야기 해보려 합니다. 굉장히 주관적일 수 있기 때문에 참고 정도만 하세요 개발자로 전직 전 생각해볼 점개발자는 쉬운 직업은 아닙니다. 하지만 기술 직군이기 때문에 잘 배워서 취업을 한다면 최저 시급을 신경 쓰지 않는 연봉을 받을 수 있습니다. 조리과를 나와서 바리스타로 일을 했었는데 초봉은 당연히 최저 시급이었고 경력이 쌓여 매니저가 됐을 때에는 2천 초반 정도의 낮은 연봉을 받았습니다. 그리고 이 그상으로 올라가려면 굉장히 큰 벽이 있었습니다..
목록Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 - 현재 글Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Fetching Data for Pages지금까지 next.js의 routing API를 활용하는 방법에 대해 배웠습니다. 이것만으로도 꽤 괜찮은 앱을 만들 수 있지만, 실제로 서비스 되는 앱들은 보통 데이터를 가지고 와서 앱에 뿌려주어야 합니다. Next.js에는 데이터를 가지고 오는 표준 API가 제공됩니다. 우리는 비동기 함수인 'ge..
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 - 현재 글Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 Clean URLs with Dynamic Routing이전 장에서 query string을 사용하여 동적 페이지를 만드는 방법에 대해서 배웠습니다. 이를 통해 링크를 눌러 이동하면 아래와 같이 나옵니다.http : // localhost : 3000 / post? title = Hello % 20Next.js 이번 장에서는 http : ..
목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 - 현재 글Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Create Dynamic Pages여러 페이지로 기본적인 next.js 앱을 만드는 방법을 알게 되었습니다. 그러나 실제 앱에는 동적 컨텐츠를 표시하기 위해 페이지를 동적으로 만들어야 합니다. next.js에는 여러 가지 방식이 있습니다 이번장에서는 query strings를 이용해 간단한 블로그 앱을 만들어 봅시다. Setup다음 예제를..