전체 글 (63) 썸네일형 리스트형 5) React - JWT를 이용한 로그인 인증 - 1부 이전까지 Route를 이용한 페이지 전환에 대해 공부해 봤다. 이제 페이지 전환을 할때 로그인된 사용자만 볼 수 있는 Page와 그렇지 않도 되는 Page에 대한 구분을 하려고 한다. 그러면 먼저 로그인에 대한 처리를 해야 한다. 로그인에 대한 처리 방식은 1) BackEnd 서버에 Session 관리 방식. - 서버에서 session을 관리하여 session 시간이 만료 되면 다시 로그인 하는 방식. 다중 서버일경우 각 서버사이의 sesison clustring을 생각해야함. 2) JWT ( Json Web Token) 방식 - Token 방식으로 로그인을 하게 되면 인증서버에서 Access Token과 Refresh Token을 받아와 사용하는 방식 - 다소 복잡한 처리 Front에서 해야함. 3) .. 4) React - Route를 이용해서 메뉴를 만들어보자. 이제부터 실제UI를 만들어 보자. UI 구성은 단순하게 Login , Home , Sample1 로 세가지 화면으로 먼저 구성한다. 디자인 UI는 Bootstarp React 를 이용할 생각이다. React Route package를 설치하자. npm install react-router-dom Route package는 브라우저 주소에 따라 다른 View를 보여지게 해주는 기능을 한다. 응? 기존 SSR(Server Side Rendering)을 하면 당연히 주소에 따라 다른 View를 보여지게 되는데 React 같은 SPA(Single Page Application) 프레임워크는 한번에 모든 페이지정보를 서버에서 다운로드 받아서 브라우저가 보여지는 CSR( Client Side Rendering) 구.. 좋은 개발자란 ? 개발을 시작한지 15년 정도가 되면서 과연 나는 좋은 개발인가? 라는 생각을 자주 하게된다. 좋은 개발자는 어떤 개발자일까? 지금껏 참 많은 개발자분들을 만나고 애기해보고 간단한 교육도 진행해 봤지만 딱 정답이 있지는 않는것 같다. 나는 개발자는 계속 변화해야 한다고 생각한다. 기술적으로든 개발 환경으로든 환경에 맞게 변해야만 계속 발전하는 개발자로 살아 남을 수 있다고 생각한다. 1. 편하게 대화 할 수 있는 개발자가 되자! . 다른 사람이 나와 의견을 나누는것을 불편하게 생각지 않게 하는 개발자가 되자. 오픈마인드! 그래야 내 생각도 다른사람에 편하게 전달 할 수 있다고 생각한다. 2. 기술적인 우위를 점유하려고 하지 말자! 기술적인 부분은 사실 배우고 공부하면 금방 메울수 있는 부분이라 생각한다. .. 3) React - 간단한 Counter UI를 만들어보자. React의 작동 방식 및 개발 방식에 대한 이해를 하기 위해 간단한 예제를 하나 만들어 보자. 먼저 src/component 폴더를 만든다. 예제는 UI에 버튼을 클릭하면 숫자값이 증가하는 간단한 예제 Component를 만든다. import { useState } from 'react'; function Counter(){ const [countNum , setCountNum] = useState(0); function addCount(){ setCountNum(countNum + 1) } return( Counter : {countNum} Add Count ) } export default Counter; 위에서 만든 Component는 함수형 Component이다. Class형 Component도.. 2) React 설치 및 설치에 필요한 것들에 대해 알아보자. 개발을 하면서 항상 느끼는것이지만 개발 환경 세팅이 전체 개발에 최소 30% 는 차지 한다고 생각이 든다. 그만큼 환경세팅에 필요한 것들이 많고 알아야 할 것들이 많다는 말이 된다. 먼지 React를 설치하기 위해서는 아래와 같이 npm 이라는것을 이용해서 설치를 해야 한다. npm install -g create-react-app 1) npm은 뭘까? node package manager 의 약자로 간단히 이해를 하자면 java maven repository 같은 lib 저장소 같은 것으로 이해하면 된다. 2) cmd 창에서 위 커맨드를 실행시키면 'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 메세지가 뜨면서 실행이 안될것이다. 이유는 바로 npm.. 블로그를 시작하면서..... 내가 블로그(?) ( 그냥 공부한것들을 정리를 해볼까 하는...) 하게 된 이유는 최근 입사를 하고 싶은 회사에 지원을 하게 되면서 나를 개발자를 나를 모르는 사람들에게 말로만 어필하는 시대는 지났구나 라는것을 느끼게 됐다. 내가 어떤 사람인지 어떤 개발자인지 어떤 노력을 하고 있는지를 좀 더 구체적으로 알리고 싶은 마음으로 이 공부노트 겸 블로그를 시작하게 되었다. 지금 까지 알 된 내용을 들을 구체적으로 꼼꼼하게 정리하고 살펴보면서 하나하나 Why 라는 물음을 던지며 내용을 진행하고자 한다. 이 내용들을 보면서 실제 개발자로써 길을 가고자 하는 분들에게 아~~주 조금이겠지만 도움이 됐으면 한다. 1) React가 뭐하는거지? 왜 필요한거지? React는 뭘까?? React는 Front End 프레임웍중 하나이다. 그럼 Front End 프로임웍은 뭔가? Front End는 UI개발 부분을 말한다. JS , CSS , Html 등의 개발을 뜻한다. 그럼 Front End 프레임웍은 JS , CSS , Html 개발 프레임워크인가? UI 즉 사용자가 보는 화면을 개발하는데는 Web 디자인( image, css) 과 JS , HTML Web 개발 부분으로 나눈다고 봐도 될 듯 하다. Web 디자인은 말그대로 이미지를 포토샵으로 만들고 HTML을 디자인하고 CSS 라는 옷을 입히는 작업을 말한다. 이는 지금은 퍼블리셔라는 직업으로 좀 더 전문적이고 깊이 있는 부분으로 자리 잡았다고 생각 되어 진다. 그럼 Web 개발은 어떻게 변화 되었을까? Fro.. 이전 1 ··· 5 6 7 8 다음
