5_Clock

환경 OS: macOS IDE: vs code node: v20.6.0 생성된 앱의 src/app 폴더 밑에 global.css에서 전역 스타일링의 적용이 가능하다. :root 에서는 전체적으로 많이 쓰이는 색상을 미리 지정해 두어 다른 파일에서 --var(변수 이름)과 같이 불러와서 쓸 수 있다. :root { --font-family: sans-serif; --dark-blue: #0a1930; --light-blue: #1f93ff; --light-gray: #E7E7E7; --dark-gray: #767676; --border-gray: #CCCCCC; --table-border-gray: #EEE; --color-white: #FFFFFF; --color-primary: #0074e9; --co..

환경 OS: MacOS IDE: VS code Node: v20.6.0 1. 폴더 구조 react-next로 앱을 생성하게 되면 기본적으로 src/app 폴더가 생성된다. 해당 폴더에서 라우팅하고 싶은 url 경로명의 폴더를 생성해준 뒤에 page.jsx(page.tsx)를 생성해주면 해당 페이지로 라우팅이 된다. 다음처럼 src/app 폴더 하단에 test 폴더와 page.jsx 파일을 생성한 뒤에 간단한 페이지를 생성해주면, localhost:[포트]/test로 접속을 해보면, Test라는 컴포넌트에 작성한 내용을 확인 할 수 있다. React-next를 사용하게 되면 이전에 react만 사용했을때 처럼 복잡한 라우팅에 대한 코딩은 없어지게 된다.

환경 OS: macOS IDE: vs code node: v20.6.0 1. 일반 폴더 생성 대부분의 react 프로젝트를 생성할 때 처럼 기본 폴더를 생성해준다. 그리고 현재 나의 환경에서 vs code를 사용하고 있기 때문에 폴더를 vs code로 드래그 해준다. 2. react-next 프로젝트 생성 맥이라면 터미널, window라면 powershell등을 이용해서 해당 폴더의 경로로 이동하거나 vs code의 터미널로 이동하며 다음 명령어를 입력해주면 생성이 완료 된다. npx create-next-app ./​ 해당 명령어를 실행하게 되면 다음과 같은 질문이 몇개 뜨는데 자신에 맞는 것을 선택하여 생성하면 된다. 마지막으로 생성이 완료되면 다음과 같은 파일들이 생성된다. 3. 프로젝트 실행 아래..

최근에 부서를 변경하고, front-end(react)에 대해서도 시작하게 되었다. 이 회사에 오게 되어 맨 처음에는 infra(openstack)로 커리어를 시작하게 되었고, 소프트웨어 개발을 하고 싶다하여 data engineering(ETL)쪽의 업무를 배정받아 backend(spring)를 시작하게 되었다. 그리고 최근에는 전배를 통해서 조금 더 IT적인 업무를 하는 곳으로 옮기게 되었다. 그렇게 옮기게 된 새로운 부서에서는 역시나 어디에나 있는 사람 부족으로 인해서 서버를 하는 모두가 back, front, CI/CD까지 하고 있었다. 확실하게 느낀건 이전에 있던 부서를 비롯해 제조로 돈을 벌고 있는 회사라서 그런지, IT적인 업무의 인력보다는 제조쪽에 인력을 많이 투입하는게 맞다고 생각이 든다..

request를 받는 controller를 만들어보자 가장 초기의 형태로는 직접 request, response 객체를 받는 방법이다. @RequestMapping("/requset-param-v1") public void requestParamV1(HttpServletRequest request, HttpServletResponse response) throws IOException{ String username = request.getParameter("username"); int age = Integer.parseInt(request.getParameter("age")); log.info("username={}, age={}", username, age); response.getWriter().wr..

API란? 우선 Controller를 만들기 전에 API라는 개념을 알아야한다. API라고 하면 다들 Rest API를 떠올릴 것이다. 그럼 API중 Rest API는 뭘까? REST API란? API 또는 애플리케이션 프로그래밍 인터페이스는 애플리케이션이나 디바이스가 서로 간에 연결하여 통신할 수 있는 방법을 정의하는 규칙 세트입니다. REST API는 REST(REpresentational State Transfer) 아키텍처 스타일의 디자인 원칙을 준수하는 API입니다. 이러한 이유 때문에 REST API를 종종 RESTful API라고도 합니다. 출처: https://www.ibm.com/kr-ko/cloud/learn/rest-apis 위의 설명을 좀 더 간단하게 설명하자면 서로간 데이터나 정보..