stonesy

졸업 프로젝트를 진행했었을 때는 시간적 제약으로 인해서 배포까지 마치지 못하여 프로젝트를 끝냈었다. 로컬에서는 프로그램이 잘 동작하지만 배포하면 동작하지 않을 때가 많은 것 같다. 이번 창업 동아리 활동을 하면서도 로컬에서는 잘 동작했었는데, 배포를 하면서 백엔드 서버와 API 연결이 제대로 이루어지지 않는 문제가 생겼었다. 배포에 대해서 공부도 해볼겸 겸사겸사 정리해보았다🙌🏻 🔎Netlify 이번 창업 동아리 중간 프로젝트는 Netlify를 이용해서 배포했다. Netlify는 정적 웹 애플리케이션 및 싱글 페이지 애플리케이션(SPA) 배포에 특화되어 있는 서비스이다. 🔎Netlify를 통한 React 프로젝트 배포 방법 Netfliy를 통한 React 프로젝트 배포 방법은 다음과 같다. 1. React..

이것저것 정보를 찾다 보면 "웹 표준"이라는 용어가 자주 등장하는데, 항상 그 의미를 완벽히 이해하지는 못하고 넘어갔었다. 개강 전에 시간이 조금 남은 지금, “웹 표준”에 대해서 공부하고 정리해보았다!😀 🔎웹표준이란? 웹 표준(Web Standard)는 W3C에서 사용되는 기술과 프로토콜에 대한 규칙과 권고안의 모음을 말한다. 웹 표준은 웹 페이지와 웹 애플리케이션을 개발하고 구현하는데 일관성을 제공하며, 다양한 웹 브라우저와 장치에서 동일한 방식으로 작동하도록 보장하는 역할을 한다. 즉, 웹 표준에 따라 개발된 웹 사이트는 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라고 웹 페이지가 동일하게 보이고 정상적으로 작동해야 함을 의미한다. 따라서 웹 표준의 준수는 웹 접근성 준수를 위한 핵심이다...

Nomad Coders 강의는 예전에 들었었는데 노션에 정리한 내용을 블로그에도 정리하면 좋을 것 같아서 복습 겸 정리를 해보았다. React 프로젝트에 CSS를 적용하는 방식에는 직접 CSS를 적용하는 방식, module.css를 사용하는 방식, styled-components를 사용하는 방식 등이 있다. 1. 직접 CSS를 적용하는 방식 가장 단순한 방식인데, hover 등의 이벤트 등을 적용할 수 없다. function Header(){ return( Header ) } 2. module.css를 사용하는 방식 내가 프로젝트를 진행할 때 가장 많이 사용하는 방식이다. 파일이름.module.css라는 이름을 가진 파일을 만들고 styles를 불러와 사용한다. *Header.tsx 파일 import s..

이번 캡스톤을 하면서 일관성 있는 스타일 관리의 필요성을 깨달았다. 이때, 예전에 배웠던 Themes를 적용하면 좋을 것 같다고 생각하여 간단하게 복습할겸 정리해보았다. ✨ 🔎Themes를 React 프로젝트에 적용하는 방법 styled-components를 이용하면 된다. 설치하고 다음과 같이 파일을 작성한다. 1. theme 파일 작성하기 theme 파일에 사용할 스타일을 작성한다. import { DefaultTheme } from "styled-components"; export const theme: DefaultTheme={ bgColor: "#EFEFEF", subBgColor: "#FFFFFF", textColor: "#2f3542", primaryColor: "#22a6b3", secon..

캡스톤 프로젝트를 진행하면서 마주했던 에러 중 하나는 CORS 에러였다. 처음 백엔드 팀원분들과 연동을 시도했을 때  CORS 에러가 발생하여 조금 고생했다 히히 ~ 🥹😢 📖CORS(Cross Origin Resource Sharing, 교차 출처 리소스 공유)CORS란 다른 출처(origin) 간 리소스를 공유가능하도록 하는 매커니즘이다. CORS는 다른 출처의 자원의 공유를 가능하게 만들며, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려준다. 이때, CORS에러란 브라우저가 보안 정책 중 하나인 SOP 정책을 따르기 때문에 발생한다.  🔎SOP(Same Origin Policy, 동일 출처 정책)브라우저는 보안 정책 중 하..

https://github.com/seoyoung927/social_login_ex GitHub - seoyoung927/social_login_ex: social login with kakao and google social login with kakao and google. Contribute to seoyoung927/social_login_ex development by creating an account on GitHub. github.com 캡스톤 프로젝트를 진행하면서 소셜 로그인을 구현하는 방법을 공부해보았다. 여러 가지 이유로 결국 소셜 로그인 방식이 아닌 아이디/비밀번호 방식의 로그인으로 캡스톤 프로젝트 개발을 진행하였지만, 공부한 내용을 간단히 정리해보았다. 소셜 로그인을 구현하는 과정..