React는 웹 개발의 판도를 바꾼 프론트엔드 라이브러리로, 컴포넌트 기반 개발 방식과 Virtual DOM을 통해 효율적인 UI 개발을 가능하게 해왔다. 2022년 3월, React는 3년 만에 메이저 업데이트인 React 18을 발표하며 다시 한번 개발자들의 이목을 집중시켰다. Concurrent Mode, Server Components 등 강력한 기능을 선보이며 웹 애플리케이션 개발에 새로운 가능성을 제시했지만, 동시에 새로운 ...
-
2024년 6월 19일 -
2023년 5월 18일 React.js와 Node.js를 사용하여 SSR로 페이지별 SEO를 최적화
먼저 애플리케이션을 실행하는 데 사용할 프로젝트 폴더를 생성합니다.프로젝트 폴더에 package.json이라는 파일을 생성합니다.package.json 파일에 다음 코드를 붙여넣습니다. { "name": "react-ssr-app", "version": "1.0.0", "description": "A simple React SSR application", "main": "index.js", "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", "express": "^4.17.1", "react-ssr": "^1.1.0", "react-helmet": "^6.0.3" } } 터미널에서 npm install 명령을 실행하여 React, React DOM, React SSR 및 ...
-
2021년 10월 4일 React+Redux+Next.js vs Flutter+Firebase
꽤 오랜 시간을 리엑트로 작업을 해왔던 것 같다. 미국에 와서 유라임을 만드는 데에 처음에는 pure한 JS로 개발을 하다가 AngularJS를 알게되고, 처음으로 backend/frontend의 분리를 알게 되었다. 난 당시만 해도 이게 최선인 줄 알았다. 그러다가 dom에 더덕더덕 붙이게 되는 앵귤러에 특히나 퍼포먼스적인 부분에서 질리고 나서는 대안을 찾다가 리엑트를 알게 되었고, 지금까지도 프론트앤드는 ...
-
2018년 12월 10일 [Webpack] webpack-dev-server 가 느려졌을때
webpack-dev-server가 느려졌을 때, 일단 내 webpack.config.js의 경우 devServer: { contentBase: path.publicDir, stats: "normal", compress: true, clientLogLevel: "warning", filename: "[name].[hash].js", host: 0.0.0.0, port: 9444, disableHostCheck: true, hot: true, historyApiFallback: { disableDotRule: true }, headers: { "Access-Control-Allow-Origin": "*" } } 이런식으로 되있다. 최근에 webpack 3 -> 4로 업글하면서 아니 무슨 html하나만 바꿔도 ...
-
2018년 12월 10일 [Babel/Webpack] Webpack 3 -> Webpack 4 와 Babel 6 -> Babel 7에서의 주의사항
일단 기본적으로 에러가 겁나 많이 난다. 그래도 당황하지 않고 하나 둘 해나가다 보면 언젠간 에러는 잡히는 듯.. .babelrc의 preset확인 Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: Cannot read property ‘bindings’ of null 에러 우선 .babelrc 의 preset부터 체크. babel 7부터는 preset-es2015머시기.. 이런거 없다. 전부 @babel/preset-env로 통일 리엑트까지 쓴다면 { "presets": ["@babel/preset-env", ...
-
2018년 6월 9일 [React-Native] WebView에서 페이스북 로그인 처리하기
리엑트를 사용하는 이유 중 가장 큰 이유는 아마도 진정한 의미의 one-source-multi-use일 것이다. 패러다임은 크게 바뀌었지만, 그래도 예전에 HTML5가 한창 뜨면서 hybrid web app이 유행한 것과 마찬가지로, PhoneGap이나 Cordova의 그 지속적인 무거움과 세팅에 지쳐가는 사람들이 하나 둘 생각하는 것. 웹 개발 코드를 그대로 앱 개발에도 가져올 수 있다는 생각에서 그렇지 않았을까. ...
-
2017년 8월 29일 React와 React Native의 코드 공유의 한계
최근 열심히 리엑트를 실무에 적용하며, 어느정도 코어 코드가 나와서 이를 바로 리엑트 네이티브로 변경하려고 해봤다. 사실 리엑트를 사용하는 이유 자체도 스스로가 앱 개발에는 자신이 없었으며 웹으로 반응형 웹 적용해 두면 작은 화면에서도 열심히 나오지 않겠는가 해서 예전에 앵귤러 쓰다 ionic으로 바로 변경하려 했는데 JS들 때문에 결국 실패, 모듈화와 top-down구조도 마음에 ...
-
2017년 7월 27일 [React-Redux] redux-react-session 사용시 페이지 새로고침에도 default Header 값 유지하기
Redux-react-session을 이용시, 사용자 인증(로그인, 토큰 관리)을 라이브러리를 통해 하게 된다. 내 경우는 로그인 처리시에 완료 후, axios (RESTful API for React) 에 default header를 세팅하게 된다. AngularJS를 사용할 때 $resource를 사용하던 버릇이랄까. export function signinUser(headers, callback) { return function(dispatch) { axios.get(`login`, {headers}) .then(response => { const {token, userinfo} = response.data ...
-
2017년 7월 26일 [React-Redux] redux-react-session 사용, 페이지 새로고침시 계속해서 redirected되는 현상
리엑트는 라이브러리가 은근 많아서 사용하기 편한 경우가 있다. 앵귤러 사용때는 세션이나 토큰 관리를 수동으로 만들어 줬어야 했는데, 리엑트는 리덕스를 사용해서 State를 관리하다 보면 세션이 헷갈리는 경우가 많다. 그러다가 찾은 리액트와 리덕스를 사용하는 세션관리 라이브러리. 나 같은 경우는 리엑트-리덕스의 세션 관리 (사용자 정보, 토큰)를 위해 Redux-React-Session 이 라이브러리를 사용중이다. 다른건 다 좋은데, /Dashboard ...
Browsing category: ES6/ReactJS/Redux
![[Webpack] webpack-dev-server 가 느려졌을때](https://matthew.kr/wp-content/uploads/2018/12/1_oJj7VCITmRw4VLRm_ud8Sw-600x450.png)
![[React-Native] WebView에서 페이스북 로그인 처리하기](https://matthew.kr/wp-content/uploads/2018/06/1_FfpvCSSSYWNWDtvuuS0gVA.png)
About Matthew
Latest Posts
-
-
-
2024년 6월 18일 Play Framework, 2.x에서 3.x로 환골탈태! 새로운 아키텍처 마스터하기
-
2024년 6월 17일 Django 4.x, 비동기로 날개 달고 성능 UP! 놓치면 후회할 꿀팁 대방출!
-
