Web Programming
-
Web Programming/ReactReact 2. Emotion를 이용한 React component 스타일링 (with. CSS-in-JS)
안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 이 글에서는 저번 글에서 만든 List 컴포넌트에 스타일을 적용시켜보려고 합니다. html 문서에 css 스타일 코드를 추가하는 것처럼 css 파일을 연결할 수도 있지만 js 파일 안에서 컴포넌트에 바로 스타일을 적용시키거나, 스타일이 적용되어 있는 라이브러리에서 컴포넌트를 가져와 사용할 수도 있습니다. 아래 글에서 여러 방법들에 대해 하나씩 살펴보겠습니다. 이어지는 글 React 1. Component 렌더링 React 2. Emotion을 이용한 React component 스타일링 (with. CSS-in-JS) React 3. Redux, Redux Toolkit - Global UI Component 만들기 목차 CSS-in-JS Emotion 마..
-
Web Programming/ReactReact 1. Component 렌더링
안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 이 글에서는 React를 사용하면서 한 번은 들어본 함수형 컴포넌트와 클래스형 컴포넌트를 만들고 화면에 컴포넌트가 렌더링 되는 과정에 대해 하나씩 알아보겠습니다. 이어지는 글 React 1. Component 렌더링 React 2. Emotion을 이용한 React component 스타일링 (with. CSS-in-JS) React 3. Redux, Redux Toolkit - Global UI Component 만들기 목차 컴포넌트 렌더링 React 컴포넌트의 라이프 사이클 마무리 1. 컴포넌트 렌더링 우선, 리액트는 v18부터 ReactDOM.render를 더 이상 사용하지 않고 createRoot를 사용하여 root 엘리먼트에서 render 메서드를..
-
Web ProgrammingReact와 Vue
안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 새로운 프로젝트를 시작하면서, 프론트엔드 영역에서 어떤 뷰 프레임워크를 사용하는 것이 좋을지 고민하게 됩니다. 이번 글에서는 많은 프레임워크 중, React, Vue에 대해 비교해 본 점들을 정리해 보겠습니다. 참고로 이전에 html, css, vanila JS(or jQuery)만을 이용해서 뷰를 개발했고, React와 Vue를 이용하여 튜토리얼 코드를 작성해 본 경험이 있는 상태에서 두 가지를 비교해 보았습니다. 시작하기 전에 참고로, The State of JS에서 Front-end Frameworks 메뉴에서 확인 할 수 있는 순위들입니다. (2022.05.12) '2-2. 패키지와 커뮤니티 크기' 에 내용이 추가되었습니다. 목차 1. React v..
-
Web Programming/ASP .Net Core 3[Asp.net core MVC] 쿠키와 세션을 이용한 로그인 구현
안녕하세요, 씨앤텍시스템즈 황순호 연구원입니다. 이번 포스트는 ASP.NET CORE MVC 5.0에서 쿠키와 세션을 이용한 로그인과 그에 따른 접근 권한을 부여하는 방법까지 작성하도록 하겠습니다. 1. Startup.cs 미들웨어 추가 1-1. Configure 메서드에 다음 내용을 추가합니다. app.UseAuthentication(); app.UseAuthorization(); app.UseCookiePolicy(); app.UseSession(); 미들웨어를 등록할 때 순서를 신경 쓰도록 합니다. 위 미들웨어는 UseRouting()와 UseEndpoints() 사이에 위치해야 하고 UseAuthentication()이 UseAuthorization()보다 먼저 위치하도록 작성합니다. 미들웨어 등..
-
Web ProgrammingVanilla JS에서 웹 컴포넌트 생성, 사용하기
안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 이번 글에서는 지난 글에 이어서 웹 컴포넌트를 만들고 사용하는 가장 기본적인 방법에 대해 정리해보겠습니다. (이전 글) 2022.01.14 - [Web Programming/Design] - UI Component UI Component 안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 이번 글에서는 웹/앱의 UI 개발에서 Component에 대한 내용을 정리해 보겠습니다. UI에서의 컴포넌트 UI 컴포넌트를 개발하는 다양한 방법들 1. UI cntechsystems.tistory.com *이 글의 내용은 아래의 문서를 참고하여 작성되었습니다. - https://ko.javascript.info/web-components - https://github.com..
-
Web Programming/Flask[Flask] CentOS7에 Python 설치
안녕하세요. 씨앤텍시스템즈 이경빈입니다. 본 포스팅에서는 Flask를 설치하기 전 CentOS7에 Python 설치하는 방법을 소개하겠습니다. 글 구성은 다음과 같습니다. Python 설치 CentOS7에 python 명령어 적용 CentOS7에 Python 설치 CentOS7에는 기본으로 Python이 설치되어 있는데 기본으로 설치되어 있는 버전은 2.7.5 버전입니다. Flask를 사용하려면 3.x 버전이 필요하여 Python 3.x 버전을 재설치 해줘야 합니다. 필요한 프로그램 설치 우선, 필요한 프로그램을 yum으로 설치합니다. yum install gcc openssl-devel libffi-devel bzip2-devel 설치가 완료되었으면 Python의 최신 버전을 확인하고, 본격적으로 설치..