개발 썸네일형 리스트형 next.js란? (next.js 서버 커스터마이징) 100% csr인 cra(create-react-app)으로 개인 프로젝트를 진행하다, next를 알게되었습니다. cra로 개발중에 데이터 관리를 redux store로 진행했는데, front와 back의 데이터 관리가 완전히 분리되 많이 불편했습니다. (로그인 state 값 설정시 front와 back모두 데이터를 가져야 한는 경우) 그래서 react 생태계에서 ssr 방식을 찾았고 next.js를 알게 되었습니다. docs에 적혀있는 공식적인 이용 방식은 'npx create-next-app' 을 이용해 next frame을 다운받고, package.json의 next용 script(build, start)를 이용해 개발하고 배포합니다. "scripts": { "dev": "next", "build".. 더보기 csr(client-side-render)와 ssr(server-side-render)차이 서버에서 렌더링을 해주는 ssr방식은 화면이동간 깜빡깜빡거리는 끉김이 있어 사용자 편의성이 떨어집니다. 페이지 이동이 매우 부드러운 앱의 등장으로 웹 생태계도 발전이 필요했고, spa(single-page-application)이 등장하게 됩니다. spa는 주로 csr(client-side-render)방식으로 client측에서 렌더링을 해줍니다. 클라이언트에서 스크립트를 통해 html태그들을 떼었다 붙이죠. 하지만 csr방식은 초기로딩속도가 너무 느리고, seo가 약하다는 단점이 있습니다. ssr: @ SEO(검색 엔진 최적화) good @ 초기로딩 속도 빠르다 @ 서버에서 렌더링 csr: @ SEO(검색 엔진 최적화) bad @ 초기로딩 속도 느리다. @ 클라이언트에서 스크립트로 렌더링 *렌더링 =>.. 더보기 node.js와 next.js가 눈에 들어온 이유 react에서는 효율적인 state관리를 위해 redux를 사용합니다. 특히 cra(create-react-app)은 서버와 완전히 분리되 state를 따로 저장할 redux같은 store 개념이 필수입니다. 하지만 프로젝트를 진행하면서 front, back을 모두 만지다보니 store가 많이 불편했습니다. 예를들어 로그인 로직만 해도, front와 back이 완전히 분리되어있어 변수가 더 늘어나고, 코드를 두번짜 유지보수가 쉽지 않았습니다. (물론 대규모 프로젝트시 역할분담으로 해소할수도 있습니다.) 좀더 편한 방식을 찾던중 ssr방식의 next.js를 알게 되었고, 써보니 제 갈증을 해결해주더라고요! 그래서 이제부터는 next.js와 node.js도 함께 작성하려합니다. 감사합니다. 더보기 promise pattern in javascript, react.js javascript(react, next...)개발시 비동기는 거의 필수입니다. 그리고 콜백함수 지옥에 빠지지 않기 위해 async await 패턴을 많이 쓰죠. (callback) => { callback((callback) => { callback((callback) => { callback((callback) => { callback() }) }) }) } 오늘은 async await 사용대신, promist pattern을 이용해 비동기 함수를 직접 만들어볼까합니다. #대표적인 경우 let asyncFunc = new Promise((resolve) => { setTimeout(() => {resolve("Success!")}, 10000); //ms 단위이기에, 10초뒤 resolve를 실행합니.. 더보기 for문 error in javascript, react.js, cra(create-react-app) react는 javascript로 구성되어있습니다. 그리고 javascript는 for문을 빈번히 쓰는데요. for(let i = 0; i< max_len ; i++) { console.log(i) } for문에 대한 결과가 아예 뜨지 않을때가 있습니다. 위 경우 콘솔이 찍혀지지 않는 경우죠. 위 코드를 좀더 확장시키면 다음과 같습니다. let max_len = ob.length; //이때 ob는 객체 console.log(max_len) //undefined for(let i = 0; i< max_len ; i++) { console.log(i) } 네..... 객체의 길이를 바로 구하다니.... 바보였죠.... max_len이 정의가 undefined로 되니, for문 자체가 실행이 안되고 있었습니다.. 더보기 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. input태그의 value를 this.state으로 지정할때가 있습니다. 하지만 수정도 안되고, 아래와 같은 에러가 뜰때가 있죠. 이는 value만 지정해주고 defaultValue나 onChange를 지정해주지 않았기 때문에 발생한다 쓰여있네요. #defaultValue 사용법 defaultValue은 위와 같이 해주면 됩니다. 하지만 화면에 대한 변화가 없으면 state은 변해도 그 값은 그대로 입니다. 가령 react-slick의 Slide에 this.state을 데이터로 사용할때 발생합니다. import React, { Component } from "react"; import Slider from "react-slick"; class test extends Component { this.stat.. 더보기 비동기 처리 in react 비동기: 요청 보내고 딴거 하다 응답오면 대답, 동기: 요청 보내고 기다리기. page이동 없이 데이터를 주고 받기 위해 주로 비동기 요청이 쓰입니다.(axios, xhr, fetch....) 오늘은 axios를 이용하는 두 형태를 보려 합니다. #callback함수 이용시 axios.post(url, data, { headers: { "Content-Type": `application/json`, }, }) .then((res)=> { console.log(res); }) console.log("응답 왔나요?") // 응답이 늦으면 "응답 왔나요?" 가 먼저 실행됩니다 응답에 대해 처리 하기 위해 callback함수를 이용한 형태입니다. 그런데 종종 res 값을 변수에 넣고 코드를 이어가고 싶을때가 있.. 더보기 비동기 처리 in react 비동기: 요청 보내고 딴거 하다 응답오면 대답, 동기: 요청 보내고 기다리기. page이동 없이 데이터를 주고 받기 위해 주로 비동기 요청이 쓰입니다.(axios, xhr, fetch....) 오늘은 axios를 이용하는 두 형태를 보려 합니다. #callback함수 이용시 axios.post(url, data, { headers: { "Content-Type": `application/json`, }, }) .then((res)=> { console.log(res); }) console.log("응답 왔나요?") // 응답이 늦으면 "응답 왔나요?" 가 먼저 실행됩니다 응답에 대해 처리 하기 위해 callback함수를 이용한 형태입니다. 그런데 종종 res 값을 변수에 넣고 코드를 이어가고 싶을때가 있.. 더보기 이전 1 ··· 13 14 15 16 17 18 다음