천천히 차근차근

build.gradle 설정 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' // 타임리프 템플릿 엔진 의존성 2-1implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' // 타임리프 템플릿 엔진 의존성 2-2 Thymeleaf 사용을 위한 의존성을 주입한다.  application.properties# 타임리프spring.thymeleaf.prefix=classpath:/templates/spring.thymeleaf.suffix=.htmlspring.thymeleaf.mode=HTML5프로젝트에서 타임리프 템플릿 엔진을 어떻게 사용할지에 대한 설정이 필요하다..

JPA 의존성을 build.gradle 에 추가 dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' testRuntimeOnly 'org.junit.platform:junit-platform..

Help.JPA: Java Persistence API스프링 부트는 JPA를 ORM 기술의 표준으로 사용하고 있다.JPA는 인터페이스 모음으로 이 인터페이스를 구현한 실제 클래스를 필요로 한다.JPA를 활용하기 위한 대표적인 실제 클래스로 하이버네이트: Hibernate 가 있다.* 인터페이스는 클래스가 구현해야 하는 메서드들을 정의한 틀이라고 볼 수 있다.   H2 데이터베이스 설치하기H2 데이터베이스는 주로 개발 환경에서 사용하는 자바 기반의 경량 DBMS이다.    DBMS 종류- MySQL- Oracle- PostgreSQL- MongoDB - .. 등  RDBMS: Relational Database Management System - DBMS의 하위 개념으로, 데이터를 관계형 모델로 저장하고 ..

선택: View -> Tool Windows -> Gradle    우측에 열린 Gradle 영역에서 Dependencies를 업데이트해 줘야 한다.1. 프로젝트 우클릭 2. Refresh Gradle Dependencies 선택

프로젝트 생성New Project로 새로운 프로젝트 생성    1. Name: 프로젝트 명2. Location: 프로젝트 관리 경로3. Language: 개발 언어 선택4. Type: 빌드 관리 타입5. Group: 프로젝트 그룹6. Artifact: 프로젝트 식별자7. Package name: 패키지 이름은 클래스나 파일이 속한 패키지 경로를 의미(.java 소스 파일 최상단에 선언된다.)8. JDK: JDK는 IntelliJ IDEA에서 제공하는 Oracle OpenJDK를 바로 설치해서 사용했다.9. Java: 설정한 JDK와 동일한 버전으로 설정10: Packaging: Spring Boot는 별도로 톰캣을 설치하지 않도록 톰캣을 내장하여 제공한다. Packaging을 Jar로 설정하면 애플리케이..

터미널 명령어ls /Library/Java/JavaVirtualMachines/ 위 명령어를 터미널에 입력하면, 여러 버전으로 설치된 JDK를 확인할 수 있다 👍

Prettier - Code formmater Extensions 설치prettier 익스텐션을 먼저 설치    Preferences: Open User Settings (JSON) mac -> comman + shift + p window -> ctrl + shift + p (확인 필요)  settings 파일을 열어 준다.   javascriptreact update  주석 처리한 부분을 아래와 같이 수정해준 후 저장해 주면 완료."editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true

nginx 실행 - nginx가 설치된 폴더로 이동하여 nginx.exe 실행 - cmd창에서 nginx가 설치된 폴더로 이동하여 아래 커맨드 실행 $ nginx nginx 윈도우 명령어 종류 nginx 실행 확인 - cmd창에서 호출하여 아래 커맨드 실행 $ tasklist /fi "imagename eq nginx.exe" nginx 종료 - cmd창에서 nginx가 설치된 폴더로 이동하여 아래 커맨드 실행 nginx 빠른 종료 $ nginx -s stop nginx 재기동 $ nginx -s reload nginx 로그파일 다시 쓰기 시작 $ nginx -s reopen

실무를 담당하며 나의 백엔드 java 실력과 프론트 엔드 기본기가 아주 형편 없다는 것을 더 미룰 수 없기에 초심을 되찾으려 노력하며 열심히 공부를 하려 한다. 맥북으로 vscode를 사용할 때, 편집창과 터미널을 자유롭게 이동하기 위한 단축키 설정 방법 1. 팔레트 열기 단축키 : command + shift + p 2. keyboard 검색 -> Preferences: Open Keyboard Shortcuts (JSON) 선택/열기 주의: Default 아님 3. 열린 파일(파일명: keybindings.json)에 아래 코드 추가 [ { "key": "cmd+;", "command": "terminal.focus", "when": "editorFocus" }, { "key": "cmd+;", "c..

이클립스(Eclipse)로 개발할 때 아주 유용한 단축키 모음 명령 단축키 제어문으로 감싸기 해당 블록 드래그, option + command + Z 계층관계도(참조되고 있는 파일) 보기 해당 클래스 위에서 command + T 긴 커서 만들기 [일괄 수정] option + command + A, 드래그, 수정 Start run server tomcat server 선택, option + command + R 현재 라인 아래에 라인 삽입 Shift + enter 현재 라인 위에 라인 삽입 Shift + command + enter 현재 라인을 위/아래로 복사 option + command + UP or DOWN 현재 라인을 위/아래로 옮기기 option + UP or DOWN To upper case S..

✅ flutter 공식 홈페이지에서 설치 파일 다운로드 https://docs.flutter.dev/get-started/install/macos macOS install How to install on macOS. docs.flutter.dev 나는 intel 이라 flutter_macos_3.10.6-stable.zip 다운로드. 일단 다운로드 폴더로 내려 받으면 된다. ✅ 적당한 위치에 development 또는 원하는 명으로 폴더 생성 후, 해당 폴더에 flutter 압축 파일 풀기 ✅ 환경변수 설정 vim ./.zshrc #Flutter export PATH="$PATH:/Users/[USER_DIR]/development/Flutter/bin" // .zshrc 파일 저장 후 $ source ..

인하우스 개발자로 일한지 횟수로는 3년차, 8월 초에 2년을 채웠다. 나에게 남은 것은,, ? 입사할 당시보다는 조금이라도 수준이.. 향상되었겠지만 사실 체계적인 성장은 없다고 본다. 내 자신이 한심하고 반성이 되며 뒤돌아보게 되는 요즘이다. 게다가, 연봉협상 동결이라니. 이 사실은 나에게 지금 너무나도 큰 충격으로 아무것도, 그 무엇도 할 수 없게 만든다. 더 이상 힘을 낼 수가 없고 내 자신이 한없이 작아졌다. 31살의 나는 다른 직군에서 즐겁고 보람있고 성취감 있을 것 같은 IT 직군으로 전향을 도전했는데, 지금의 나는 한없이 작아져있다. 하루하루 지쳐가며 남들과 비교하게 되고 주위 친구들과 비교하게 되고 개발자와 개발자를 두고 비교하게 되고, 인하우스 개발자로 나는 지금 회사에서 개발자로써 어떤 ..

앱 만들기 공부를 시작하면서 알게된 사이트인데 색상이 괜찮게 커스텀 된 것 같아 포스팅 해두려 한다 :) [참고 링크] https://m3.material.io/theme-builder#/custom Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. m3.material.io

리액트에서 상태를 관리하는 가장 기본적인 방법으로 useState라는 함수를 사용하는 것이다. 리액트에는 use로 시작하는 다양한 함수가 내장되어 있는데 이 함수들을 Hook이라고 부른다. Hook을 사용하여 상태 관리, 최적화, 컴포넌트 작동 흐름 관리 등 다양한 기능을 구현할 수 있다. 그 중에서 useState는 상태 값을 관리하는 함수이다. const App = () => { const [count, setCount] = useState(0); const onIncrease = () => setCount(count + 1); const onDecrease = () => setCount(count - 1); return ( ); }; useState 함수는 위 예시처럼 다음과 같이 사용한다. con..

컴포넌트에서 Props를 조회하는 코드를 더 짧게 구현하는 방법이다. 구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, '비구조화 할당' 이라고 부르기도 한다. 이 문법은 객체 안에 있는 값을 더욱 짧은 코드를 사용해 밖으로 추출할 수 있게 해준다. 객체를 참조해서 콘솔로 찍어보면 아래와 같이 사용된다. function print(params) { console.log(params.name); console.log(params.descr); } 구조 분해 할당을 사용한다면 아래와 같이 사용할 수 있다. function print({name, descr}) { console.log(name); console.log(descr); } 이렇게 사용하면 매번 객체를 참조하지 않고 코드를 간결하게 사용..

앱을 만들고 싶어서 react native 공부를 시작하려고 리액트 네이티브 프로젝트를 git에 push 했다. 알람 올 일이 없는데 알람이 보여서 확인해보니 보안이 취약하다고 친절히 안내해주는 알림이었다. 해결 방법 리엑트 네이티브 프로젝트가 존재하는 폴더에서 터미널을 열고 아래 명령어를 입력하여 해결할 수 있다. 프로젝트의 취약한 부분을 조회할 수 있다. $ yarn audit 0개의 취약한 부분을 발견했다고 한다. 업데이트 해줄 게 없는건가,, 흠... 빈 프로젝트여서 보안에 취약하다고 친절히 알려준걸까.. 만약 취약한 부분을 업데이트 해야 하는데 업데이트가 되지 않는다면 강제로 해줄 수 있다고도 한다. npm audit fix --force

index.js 프로젝트의 엔트리 파일로, 생성한 리액트 네이티브 앱은 이 파일에서 시작한다. 여기서 import 구문을 통해 코드들을 불러와 앱을 번들링한다. @format : 코드 스타일을 자동으로 정리해주는 Prettier라는 도구와 관련이 있다. /** * @format */ import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); 간단한 설명일지라도 가장 중요한 부분이 아닐까 싶다. App이라는 컴포넌트를 불러와서 AppRegistry.registerComponent..

리엑트 네이티브 프로젝트 생성 $ npx react-native init projectName npx란? Node.js와 함께 설치되는 도구로, Node.js 환경에서 구동되는 CLI 도구들을 간단하게 사용할 수 있게 해준다. package.json package.json 파일을 열어보면 위와 같이 scripts가 설정된 것을 확인할 수 있다. 이렇게 스크립트가 설정되면 yarn을 통해 아래와 같이 원하는 명령어를 실행할 수 있다. $ yarn 스트립트 종류 android : 안드로이드 환경에서 앱을 구동하는 스크립트 ios : iOS환경에서 앱을 구동하는 스크립트 start : Metro를 구동하는 스크립트 Metro란? 리액트 네이티브를 위한 자바스크립트 번들러로, 프로젝트에 사용된 자바스크립트 파일..

최근에 회사에서 운영하는 플랫폼 앱이 안드로이드 최신 기종에서 다운로드 되지 않는 문제가 발생했었다. 그래서 targetSdkVersion을 31로 업데이트해서 다시 배포한 적이 있었다. 2023.05.11 - [IT 유용한 정보 모음/IT 유용한 정보] - [Android] How to import a project that another person was working on into Android Studio / 안드로이드 스튜디오로 다른 사람이 작업하던 프로젝트 import하는 방법 [Android] How to import a project that another person was working on into Android Studio / 안드로이드 스튜디오로 다 회사에서 운영하는 플렛폼은 웹..

회사에서 사용하는 협업툴 Slack을 이용하다보면 알게모르게 신기한 기능들을 하나씩 접하게 된다. 예를 들자면.. 뭐, 워크플로부터 시작해서 지금 소개할 상태 편집하는 방법이랄까? 워크플로 생성하는 방법은 조만간 소개하도록 하겠다. 회사에서 사용하고 있는 Slack이다보니 상세하게 노출할 수 없기에 많은 부분을 가릴 수 있는 점 이해 부탁드리겠습니다 :) 내가 공유하고자 하는 Slack 상태 편집 결과물을 먼저 보여주려 한다. 화살표를 따라서 요기 조기 보면 'ON 업무중' 이라고 표시된 나의 Slack 상태를 확인할 수 있다. 분명 많은 사람들이 사용하고 있을테지만 아직 상당히 모르는 사람이 많아서 먼저 사용해본다면 아주 재미있을 것이다. 사이드바 다이렉트 메시지에서 보면 이렇게 작성자 본인과 다른 동..