요즘은 프론트엔드 개발자도 UI를 맡게 되는 경우가 존재하기도 한다. html, css, javascript, jquery를 대다수가 사용하던 때가 있었다. 최근에는 React기반으로 개발을 진행하는 경향이 강하였다. 따라서 요즘 UI 개발을 진행할 때 대표적으로 어떤 방식으로 진행하는 리스트 5개를 알아보고자 한다. 1. 원시 css 말 그대로 순수 css로 개발을 하는 것을 말한다. 화면 개발 시 기본 베이스는 html, css, javascript로 구성하는 것을 의미한다. 하지만 어느 라이브러리를 사용하든 기본이 3가지 요소 중 하나이다. 2. bootstrap css 라이브러리 중 하나로 bootstrap으로 활용하여 개발이 가능하다. bootstrap만의 라이브러리를 활용하여 해당 클래스를 호..

Github 저장소 :https://github.com/BerkleyLim/project_board GitHub - BerkleyLim/project_board: Spring Boot + React CRUD형 게시판 만들기 프로젝트 안내서 Spring Boot + React CRUD형 게시판 만들기 프로젝트 안내서. Contribute to BerkleyLim/project_board development by creating an account on GitHub. github.com 개발 환경은 Front : React 기반 Back-End : Spring Boot 기반 DB : My-SQL 기반 Nodejs 및 npm 패키지 / java와 maven 이 미리 설치를 한 상태로 먼저 환경 설정을 셋팅을..

Github 저장소 : https://github.com/BerkleyLim/project_board GitHub - BerkleyLim/project_board: Spring Boot + React CRUD형 게시판 만들기 프로젝트 안내서 Spring Boot + React CRUD형 게시판 만들기 프로젝트 안내서. Contribute to BerkleyLim/project_board development by creating an account on GitHub. github.com 개발 환경은 Front : React 기반 Back-End : Spring Boot 기반 DB : My-SQL 기반 Nodejs 및 npm 패키지 / java와 maven 이 미리 설치를 한 상태로 먼저 환경 설정을 셋팅..

지난시간 CRUD의 읽기, 쓰기의 대해서 다뤄봤습니다. (4) Todo List 기본 기능 CRUD 추가 - 1 (읽기, 쓰기) : https://berkley.tistory.com/8 (4) Todo List 기본 기능 CRUD 추가 - 1 (읽기, 쓰기) 지난 시간 반응형 웹&앱 UI 작성편을 이어서 기능 추가를 진행하였습니다. 이 글을 보기 전, 아래의 링크를 먼저 수행 하신 후 다음 단계로 넘어가시면 되겠습니다. (3) 반응형 Todolist UI 작업 진행 berkley.tistory.com 이번 시간에는 갱신의 대해서 다뤄보겠습니다. 1. Todo List CRUD 중 갱신 기존의 state 변수 todoList에 필드 "title, contents" 만 설정 되어있다. 여기서 file에 is..

지난 시간 반응형 웹&앱 UI 작성편을 이어서 기능 추가를 진행하였습니다. 이 글을 보기 전, 아래의 링크를 먼저 수행 하신 후 다음 단계로 넘어가시면 되겠습니다. (3) 반응형 Todolist UI 작업 진행 : https://berkley.tistory.com/7 (3) 반응형 Todolist UI 작업 진행 지난 시간 (1) 시작하기전 : https://berkley.tistory.com/5 (1) 시작하기 전 1. 개발 환경 - Nodejs : 16.18.0 - npm : 9.6.3 - VScode - Prettier - SCSS/SASS - style-component - ReactStrap 2. 작업 셋팅 준비 1. 먼저 Nodejs를 설치합니 berkley.tistory.com 이번 시간은 ..

지난 시간 (1) 시작하기전 : https://berkley.tistory.com/5 (1) 시작하기 전 1. 개발 환경 - Nodejs : 16.18.0 - npm : 9.6.3 - VScode - Prettier - SCSS/SASS - style-component - ReactStrap 2. 작업 셋팅 준비 1. 먼저 Nodejs를 설치합니다. (안정버전 LTS가 붙힌 버전으로 설치합니다.) https://nodejs.org/ko 2 berkley.tistory.com (2) Todolist 작업 전 반응 형 웹&앱 설정 : https://berkley.tistory.com/6 (2) Todolist 작업 전 반응 형 웹&앱 설정 이전 시간에 사전 준비 작업 과정에서 React 설치하는 법을 먼저 ..