프론트엔드58 webpack이란? Webpack 이란? [ 목차 ] 1. webpack의 등장 배경 2. Webpack의 개념 3. Webpack의 필요성 4. Webpack의 장단점 5. webpack의 Concepts 1. Webpack 의 등장 배경 webpack이 만들어진 배경을 보면 왜 webpack을 사용하지는 알수있습니다. 잠시 역사를 짚어보면, 약 2010년경부터 자바스크립트 프레임워크들의 경쟁과 함께 자바스크립트 웹 개발 추세가 치솟았습니다. 프론트엔드 업계에서 많이 사용되는 프레임워크인 리액트와 뷰만 하더라도 프로젝트 파일의 크기가 꽤 큽니다. 또한 최근에는 백엔드의 로직을 일부 프론트엔드로 옮겨오는 추세인지라 그 복잡도가 더 증가하고 있습니다. 따라서 이런 대규모 소스코드를 브라우저가 그대로 다운받아서 실행할경우, 너.. 2023. 8. 16. [OAuth2.0] OAuth 2.0이란? OAuth 2.0이란? 목차 1. OAuth 등장 배경 2. OAuth 2.0이란? 3. OAuth2.0 의 프로토콜 흐름(Protocol Flow) 4. OAuth2.0 의 프로토콜 권한 부여 방식 4가지 1. OAuth 등장 배경 요즘은 사용자가 서비스를 이용할 때 소셜 로그인으로 로그인을 하는 경우가 많습니다. 혹은 구글 캘린더에 일정을 추가하거나 소셜에 컨텐츠를 공유하는 등의 기능들도 할 수 있습니다. 이 기능을 구현하려면 사용자의 정보를 구글이나 카카오 등으로부터 제공받아 우리 서비스에 저장하고 활용할 수 있어야 합니다. 하지만 상대의 입장에서는 우리 서비스가 안전하게 사용자의 정보를 저장하고 관리할 거라는 확신이 없을 수 있습니다. 혹시 사용자의 정보가 유출될 경우 피해의 범위가 정보를 제공해.. 2023. 8. 15. [ JWT ] JWT(Json Web Token) 이란? Part.1 클라이언트 인증 방식 3가지 1. 쿠키 인증 2. 세션 인증 3. 토큰 인증 Part .2 JWT란? 1. JWT란? 2. JWT의 구조 3. Jwt를 이용한 인증 과정 4. 장단점 5. 왜 cookie 또는 session이 아닌 JWT를 사용할까? 6. JWT 사용시 주의사항 Part.1 클라이언트 인증 방식 3가지 JWT를 설명하기에 앞서 클라이언트 인증 방식 3가지에 대해 설명하고, 이를 바탕으로 왜 토큰 인증 방식을 사용하는지에 대해 설명하도록 하겠습니다. 서버가 클라이언트 인증을 확인하는 방식은 대표적으로 쿠키, 세션, 토큰 3가지 방식이 있습니다. 1. Cookie 인증 Cookie 인증이란? Cookie는 Key-Value 형식의.. 2023. 8. 15. [ OAuth 2.0 ] Access Token & Refresh Token 으로 보안 강화하기 [ OAuth 2.0 ] Access Token & Refresh Token으로 보안 강화하기 이전에 로그인 기능을 구현했던 방식에서 보완과 관련한 문제점을 발견하여 이를 해결하기 위해 로그인 기능을 수정하게 되었습니다. 이 과정은 기존의 방식이 왜 잘못되었는지를 분석하고, 더 안전한 방식인 [ OAuth2.0 ] Access Token & Refresh Token 방식에 대해 다루고있습니다. 1. 기존의 로그인 구현 방식과 문제점 2. 해결방안 : [ OAuth 2.0 ] Access Token & Refresh Token을 사용하자 3. Refresh Token 이란? 4. Refresh Token의 한계 5. Refresh Token은 어디에 저장해야 안전할까? 6. 기존의 문제점을 해.. 2023. 8. 14. 8월 2주차 회고록 /계속되는 개발자 취준 라이프 벌써 8월하고도 2주가 지났습니다. 원래의 계획보다 다소 늦어지고있는 취업 준비과정이지만 지치지않고 최선을 다하고 있습니다. 벌써 주변에서 취업했다는 동기들의 기쁜 소식들이 들려오고 있습니다. 이 넓은 땅에 제 자리도 어딘가는 있겠죠? 이력서 첨삭 후 포트폴리오 제작까지 정말 머리를 쥐어뜯으며 하나씩 채워왔습니다. 그동안의 제 노력들을 허투루 흘려보내고 싶지 않아 꼼꼼히 정리하다보니 계속 일정이 미뤄지고있네요. 어떻게 하면 나를 제대로 보여줄 수 있을까 고민하다보니 오히려 마음이 편해집니다. 내가 가진 패와 다른 사람의 패를 비교하는게 아니라 그저 내 패를 어떻게 잘 가꿔서 공개할까에 초점을 맞추니 불안함이 사그라들더라구요. 다 각자의 장점과 각자의 경험이 있으니 중요한건 나에게 맞는 좋은 자리를 찾아가.. 2023. 8. 12. [ React ] React Select library를 사용해 태그 생성 및 태그 추가 기능 구현 React Select library를 사용해 태그 생성 및 태그 추가 기능 구현 해당 기능을 개발하게 된 배경 인플루언서와 클라이언트를 매칭하는 광고 플랫폼 회사에서 인턴으로 근무할 당시 사내의 TF팀에서 진행하는 admin system 개발 프로젝트에 참여하게 되었습니다. 해당 프로젝트는 인플루언서 데이터를 효율적으로 관리하기 위한 내부용 admin page 개발이 목표였습니다. 기능을 개발하는 중간에 기획이 변경되어 동료가 맡았던 인플루언서 태그 기능의 볼륨이 초반 계획보다 커지게 되었습니다. 그러한 이유로 태그 생성하는 select box와 관련된 기능들을 구현해서 동료에게 전달하는 방식으로 업무가 수정되었습니다. 따라서 태그 생성과 관련된 코드들이 기존에 동료가 작성했던 코드를 수정하거나, 추가.. 2023. 7. 31. 한 달 만에 다시 돌아온 회고록 위코드 부트캠프 수료 후 한 달이라는 시간이 지났습니다. 7월1일 마지막 12주차 회고록을 올렸었는데 벌써 7월의 마지막이 되어 한 달 간의 회고를 해보려고 합니다. 우선 7월 첫주부터 본격적으로 취업준비에 들어갔습니다. 그동안 정리하지 못했던 지난 프로젝트들을 마무리 짓는 것으로 7월을 시작했습니다. 프로젝트를 단기간에 완성시키다보니 개인적으로 아쉬움이 남는 것들이 있었습니다. 그리고 새로운 프로젝트들을 경험하고 또 개인적으로 공부를 하면서 배우게 되는 것들이 많았습니다. 배움이 많아질수록 이전의 코드들이 어찌나 엉망진창이던지, 제가 작성한 코드이지만 충격적인 부분들도 있어 그런 아쉬움들을 하나씩 보완해나가고 있습니다. 그리고 이력서 세션과 면접 세션에서 얻은 팁들을 참고하여 이력서와 포트폴리오 작업에.. 2023. 7. 30. [ React ] textarea text 높이 따라 자동으로 높이 조절하기 (with Tailwind css) textarea text 높이 따라 자동으로 높이 조절하기 with Tailwind css 이 글은 비교적 동적 스타일 적용이 번거로운 tailwind css를 사용하는 과정에서 textarea의 높이를 자동으로 조절하는 방법에 대해 다루고 있습니다. tailwind css가 아니라면 이것보다 더 편리한 다른 방법도 있을 것 같습니다만, 우선 해당 조건에서 실행되어야만 하는 상황이기에 최선을 다해 방법을 찾아보았습니다. 이점 참고하시기 바랍니다. onChange 이벤트 리스너를 이용해 scrollHeight를 textarea.style.height에 직접 적용하는 방법 위와 같이 적용 한 후 콘솔로그로 높이를 확인해보면 이렇게 event.target.scrollHeight가 정상적으로 확인됩니다. 그리고.. 2023. 7. 30. [카카오 API] 카카오 맵 & 카카오 로그인 API 이용한 서비스 배포하기 카카오 맵 & 카카오 로그인 API 이용한 서비스 배포하기 [index] 1. 간략한 배포 전 과정 2. 카카오맵 API 연결하기 3. 카카오 로그인 API 연결하기 4. 배운점 1. 간략한 배포 전 과정 이번 프로젝트에서도 서비스 배포를 담당하게 되었습니다. 이전의 프로젝트에서는 외부 API를 사용하지 않아 비교적 수월하게 배포를 진행했었는데 이번 프로젝트에서는 외부 API를 사용하였더니 배포하는 과정에서 어려움이 있었습니다. 이 글에서는 배포하는 과정에서 마주했던 문제와 해결 방법에 대해 다뤄보려고 합니다. 우선 이번 프로젝트는 Amazon S3를 이용해 배포를 진행하였습니다. Amazon S3를 통한 배포에 대해 궁금하시다면 아래의 글을 참고해주세요. https://reveur1996.tistory.. 2023. 7. 27. 이전 1 2 3 4 5 6 7 다음
