본문 바로가기

분류 전체보기83

intellij git 단축키 깃 커밋 사이드창 열기: ctrl 또는 command + k 깃 푸쉬하기 : ctrl 또는 command + shift + k 하지만 커밋창에 commit과 push를 같이할 수 있어서 잘 안쓰일것 같긴하다. 2022. 11. 30.

jshell 사용법 jshell 이란? JShell은 JDK 9에 도입된 Java *REPL 도구이다. 이를 통해 실행 가능한 클래스 생성, 코드 컴파일 등의 오버헤드 없이 Java 표현식을 대화식으로 평가할 수 있다. (*REPL: 한줄 씩 읽고(Read) 평가 후 (Evalution) 결과를 출력(Print) 하고 계속해서 다음 코드 입력을 대기(Loop)) https://dev.java/learn/jshell-tool/ jshell 사용법 실행: 터미널에 jshell 를 입력한다. 종료: /exit 이전 식 불러오기: 방향키 ↑ 무한반복문 빠져나오기: ctrl + c jshell 특징 세미콜론생략이 가능하다. 입력된 코드는 스니펫이라 부른다. 변수 선언시 리터럴값이 없으면 0으로 초기화된다. jshell> int i .. 2022. 11. 29.

build.gradle 바뀐 표기법 스트링부트와 AWS로 혼자 구현하는 웹 서비스(이동욱 저자)를 보며 실습을 하고 있다. 아직 생소한 단어들도 있고, 지금껏 VS studio만 써왔는데 새로운 IDE인 인텔리제이를 사용해보게 되었다. 요즘 자바를 공부하느라 이클립스를 살짝 사용해봤는데 확실히 인텔리제이 GUI가 이클립스보다 훨씬 낫다. 비쥬얼스튜디오도 인텔리제이로 만들어졌다고 한다. 그래서 더 익숙하게 느껴지는 부분도 있는것 같다. 다만 책이 출간이 된지 3년이 지나다보니 버전문제가 조금 있었다. Chapter01 의 build.gradle 작성부터 달라진 부분이 좀 있었다. 기존코드에는 buildscript와 apply plugin부분이 나뉘어져 있지만 개선되면서 plugins안에 기존apply plugin과 ext가 들어가게되었다. .. 2022. 11. 29.

[SCSS] SCSS 사용하기 SCSS란? SASS를 더 편리하게 수정한 버전. 확장자는 .scss 사용하며, 브라우저에서 SASS구문을 이해하지 못하기 때문에 컴파일하는 작업이 필요하다. 설치하기 npm install -g node-sass //에러나면 아래껄로 하기 sudo npm install --unsafe-perm -g node-sass 설치 후 파일확장자명을 .scss로 사용한다. 유용한 플러그인 Live Sass Compiler Sass와 SCSS를 컴파일 작업을 하지 않아도 실시간으로 확인이 가능, 문법오류 체크를 해줌 주요기능 중첩 //SCSS .section { width: 100%; .list { padding: 20px; li { float: left; } } } //컴파일 후 .section { width: 1.. 2022. 11. 29.

이클립스 단축키, 자동완성 단축키 ⌘ + shift + L 단축키 전체 목록보기 ⌘ + D 한 줄 삭제 ⌘ + ⌥ + down 행단위 복사 ⌥ + shift + A 멀티컬럼 편집 ⌥ + up, down 행단위 이동 ⌘ + i 자동 들여쓰기 ⌥ + spacebar (ctrl+spacebar였으나 바꿈 *하단참조) 탬플릿 자동완성 (예: sysout) 단축키 바꾸기 Preferences (commend + ,) - keys검색 목록에서 선택후 Binding에 새로운 단축키 입력 자동완성 기능 설정하기 1. Preferences (commend + ,) - java - Editor - Content Assist 2. .abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 입력하고 저장 2022. 11. 29.

이클립스 java프로그램 작성순서, build 메뉴설명 이클립스에서 자바 프로그램을 작성하는 순서 프로젝트를 생성한다. (메뉴 File> New > Java Project) 클래스를 생성한다. (프로젝트 이름 위에서 우클릭> New > Class) 소스파일의 작성 후 저장(자동 컴파일됨) 실행 (메뉴 Run> Run) Build 관련 메뉴 설명 Build란? → 소스 파일(*.java)로부터 프로그램을 만들어 내는 전 과정 Project > Build All workspace의 모든 프로젝트를 빌드 Project > Build Project 현재 프로젝트를 빌드(변경된 소스 파일만 새로 컴파일) Project > Clean 이전 빌드의 정보를 모두 삭제 (모든 소스 파일을 새로 컴파일) 간혹 프로그램이 실행이되지 않을 때 clean - build projec.. 2022. 11. 29.

java 개발도구 설치(mac m1) m1 Java 개발도구 설치 강의를 보며 자바8버전과 이클립스를 설치했지만 실행이 잘 안되서 댓글을 보니 m1이 문제라는걸 알게되었다. 자바17버전 부터 m1을 지원한다고 하니 아래 링크에서 17 Jdk를 다운받자! https://www.oracle.com/java/technologies/downloads/#java17 Download the Latest Java LTS Free Subscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts. www.oracle.com 이클립스도 최신 버전(AArch64) 를 다운받아주면 된다. Eclipse Packages | .. 2022. 11. 28.

자바란? 자바란? 자바는 C언어에 객체 지향적 기능을 추가하여 만든 C++과 달리, 처음부터 객체 지향 언어로 개발된 프로그래밍 언어이다. 자바는 자바 가상 머신(JVM, Java Virtual Machine)을 사용하여 운영체제와 독립적으로 동작할 수 있다. 따라서 자바는 어느 운영체제에서나 같은 형태로 실행 될 수 있다. 자바 특징 운영체제에 독립적이다 기존 언어는 한 운영체제에 맞게 개발된 프로그램을 다른 종류의 운영체제에 적용하기 위해서 많은 노력이 필요하였지만, 자바에서는 그런 노력을 하지 않아도 된다. JVM을 통해서 가능한 것인데, 자바 응용프로그램은 운영체제와 하드웨어가 아닌 JVM하고만 통신하고 JVM이 자바 응용프로그램으로부터 전달받은 명령을 해당 운영체제가 이해할 수 있도록 변환하여 전달한다... 2022. 11. 28.

[error]404 (Not Found) / Uncaught (in promise) 로그인창을 구현하던중 에러를 만났다. AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …} 오타도 꼼꼼히 확인해보고 import도 잘 되었는지 두번 세번 확인했는데 전혀 문제가 없었다. 왜 안될까... 다시 처음부터 찬찬히 확인하던중 proxy파일의 경로가 src가 아닌 밖에 위치해 있었다. ㅋㅋㅠㅠ 다시 src 폴더에 잘 넣어줬더니 작동을 잘 한다. 다음부턴 경로확인도 꼼꼼하게 확인해야겠다. 😂 2022. 9. 8.

MongoDB 회원가입 및 클러스터 생성하기 + mongoose로 연결하기 MonghDB란? MongoDB는 기존의 테이블 기반 관계형 데이터베이스 구조가 아닌 문서 지향 데이터 모델을 사용하는 교차 플랫폼 오픈 소스 데이터베이스이다. 이러한 유형의 모델을 사용하면 정형 및 비정형 데이터를 보다 쉽고 빠르게 통합할 수 있다. 비필수 스키마와 함께 JSON과 같은 문서를 사용하여 대량의 데이터를 저장하는 NoSQL(Not only SQL) 데이터베이스이다. 유연한 데이터 저장 모델을 통해 사용자는 쿼리를 더 쉽게 작성할 수 있고, 또한 개발자도 데이터베이스를 더 쉽게 관리할 수 있다. MongoDB 회원가입및 클러스터 생성하기 1.mongoDB사이트에 회원가입을 한다. 구글 연동도 되어서 구글아이디로 로그인을 했다. https://www.mongodb.com/ko-kr Mongo.. 2022. 9. 2.

[express]express.js 설치및 사용법 https://expressjs.com/ express란? Express.js는 Node.js에서 HTTP와 관련된 컴포넌트를 기반으로 하는 웹 애플리케이션 프레임워크입니다. express.js 설치 [준비사항] 1. Node.js 설치가 되어있어야 한다. 2. npm init 명령어로 패키지를 생성해준다. [설치] 위의 사항이 충족이 되면 터미널에서 설치를 해준다. npm install express express 실행 - Hello Word 1. index.js에 웹요청을 위한 코드를 작성한다. index.js const express = require("express"); const app = express(); const port = 3000; app.get("/", (req, res) => { .. 2022. 9. 2.

[Redux]리덕스의 기본개념 리덕스란? 모든 상태를 하나의 저장소(store)에서 관리하는 상태관리 라이브러리다. 리액트로만 프로젝트를 진행하게 될 시 규모가 클 수록 local state와 global state를 관리하기 어렵다는 단점이 있다. 하지만 리덕스를 사용하게 되면 하나의 store를 통해 모든 state를 저장, 유지할 수 있게 되며, 원하는 컴포넌트로 데이터를 전달 할 수 있게된다. 리덕스는 html, js 내에서도 사용이 가능하지만 컴포넌트간에 상태관리를 하는 리액트와 함께 쓰면 높은 시너지를 낼수 있기 때문에 리액트에서 많이 사용한다. 주요 키워드 액션 (Action) 액션 생성함수 (Action Creator) 리듀서 (Reducer) 스토어 (Store) 디스패치 (dispatch) 구독 (subscribe).. 2022. 8. 24.

[React]Hook: customHook Custom Hook이란? 사용자가 중복되는 로직을 하나로 묶어 언제든 재사용할 수 있게 만든 hook이다. 주로 자주 사용되는 input이나 fetch의 로직에 활용되기도 한다. - 사용 시 use를 앞에 적어준다. - return값으로는 배열 또는 오브젝트가 들어와야한다. (배열또는 객체의 수는 추가가 가능하다.) 예시 아래와 같은 input로직을 커스텀 훅으로 바꿔준다면.. App.js ... const [inputs, setInputs] = useState({ username:'', email: '', }) const {username, email} = inputs; const onChange = (e) => { const {name, value} = e.target; setInputs({ ..... 2022. 8. 24.

[React]Hook: useContext useContext 란? context는 부모가 자식컴포넌트에게 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 전달할 수 있게 해준다. useContext는 context를 좀더 편하게 사용할 수 있도록 도와주는 hook이다. Context API 3가지 주요 개념 - createContext(initialValue) - Context.Provider - useContext(Context) createContext(initialValue) -> 부모컴포넌트에 작성 context객체를 생성한다. Provider와 Consumer 를 반환한다. Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다. Consumer : context의 변화를 감시하는 컴포넌트이.. 2022. 8. 23.

[React] Hook: useReducer useReducer란? 복잡한 상태 관리가 필요한 컴포넌트에 적합한 Hook이다. useReducer 함수 const [state, dispatch] = useReducer(reducer, initialState, init) 파라미터 설명 state: 컴포넌트에서 사용할 State(상태). dispatch: reducer 함수를 실행시키며, 컴포넌트 내에서 state의 업데이트를 일으키기 위해서 사용하는 함수. reducer: 컴포넌트 외부에서 state를 업데이트하는 로직을 담당하는 함수. 현재의 state와 action 객체를 인자로 받아서, 기존의 state를 대체(replace)할 새로운 State를 반환(return)하는 함수. initialState: 초기 값 init: 초기 함수 인자로 들어.. 2022. 8. 16.

[React]Hook: useMemo()와 useCallback() / React.memo() useMemo 란? (Hook) 성능 최적화를 위하여 특정 결과값을 재사용 할 수 있다. (useMemo의 Memo는 Memoization을 뜻한다. 이것은 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다.) useCallback 이란? (Hook) 성능 최적화를 위하여 특정 함수를 재사용 할 수 있다. React.memo 란? (고차 컴퍼넌트(Higher Order Component, HOC) 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛴다. 오직 props변화에만 의존하는 최적화 방법이다. useMemo(function, deps) const value = useMemo(() => { return fn(); },.. 2022. 8. 16.

[React]Hook: useEffect() seEffect() 란? 컴포넌트가 렌더링 될 때 특정 작업을 한번만 실행하거나 의존성 배열이 있는경우 변경이 될때마다 실행을 도와주는 훅 입니다. useEffect(function, deps) import React, { useEffect } from "react"; //import하기 useEffect(() => { },[]); 파라미터 설명 function: 실행하고자 하는 함수(콜백함수) deps: 배열형태, function을 실행시킬 조건이다. 크게 세가지 경우로 나뉜다. deps에 특정값을 넣는경우: 컴포넌트가 mount 될 때 + deps 값이 업데이트될 때 useEffect를 실행한다. 빈 배열일 경우: useEffect 에 등록한 함수가 실행 될 때 최신 props / 상태를 가르키지 않.. 2022. 8. 15.

[Next.js]사용하기(pages, Link, style jsx) 📁pages pages폴더 안에 파일을 만들면 파일이름이 경로가 된다. (매우 간편!) (리액트에서 react-router-DOM의 역할을 간단하게 수행할 수 있다. 즉 routes를 설계하고 component를 import하는 등의 복잡한 과정이 생략된다.) 다만 예외사항으로, index.js의 경우에는 앱이 시작하는 파일이라고 보면 된다. 즉 localhost:3000 그 자체다 뒤에 /index 로 붙이면 안된다. ( localhost:3000/index(X) ) 중요한점! 꼭 컴포넌트를 export default 를 해야한다. 지키지 않으면 에러가 나게된다. 함수의 이름은 url과 상관이 없으므로 자유롭게 적어도 된다.(오직 파일명만이 url경로의 이름이 된다.) 경로이름을 변수로 설정해야한다면?.. 2022. 7. 18.

[Next.js] 설치하기 Next.JS란? React를 위한 프레임워크로 weback과 같은 번들러, Babel과 같은 컴파일러를 사용하여 코드를 변환해주거나 코드 분할과 같은 프로덕션 최적화 및 성능, SEO(검색 최적화), SSR(서버사이드 렌더링)등을 수행한다. 1. 설치방법 npx create-next-app 프로젝트명 2. 실행 npm run dev 브라우저에 http://localhost:3000에 들어가면 다음과 같은 화면이 표시된다. 2022. 7. 17.

Json-server 사용하기 (REST API 구축 라이브러리) Json-server란? 목업 REST API 를 구축해주는 라이브러리이다. 프로토타입이나 토이프로젝트에 사용하기 좋다. 설치 (1) json-server설치 npm install json-server --save-dev (2) json서버 실행. 실행을 해주면 db.json파일이 생성이 된다. json-server --watch db.json (3) 포트변경 (기본포트는 3000이다) http://localhost:4000/posts 에 들어가면 db를 볼 수 있다. json-server --watch db.json --port 4000 axios 설치 axios란 REST API Client이다. 데이터를 주고받는데 필요하다. npm install axios 2022. 6. 15.

[TS]에러해결(Argument of type '' is not assignable to parameter of type ''. Type '' is not assignable to type ''. ) 타입스크립트로 변환 도중 아래 사진과 같은 오류를 만났다. 이러한 에러는 typescript가 예상하고 있는 특정한 type이 아닌, 다른 type을 넘겨줬을 때 발생하게 된다. 해결방법은 아래와 같이 typeof를 활용하여 정확한 javascript의 value type을 확인 하면 해결이 된다. if (typeof token === 'string'){ validateToken(token); } 2022. 5. 30.

[React]git hub배포하기 1. 프로젝트에 gh-pages 패키지를 설치 npm install gh-pages --save-dev 2. package.json 파일을 열기 (1) "homepage" 주소를 추가 "homepage": "http://{사용자 이름}.github.io/{저장소 이름}" (2) script 부분에 predeploy, deploy 를 추가 "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" } 3. 터미널창을 열어 npm run deploy를 실행 npm run deploy 4. github의 repository에서 settings -> pages에 들어가 source를 gh-pages로 변경. 2022. 5. 28.

[React] 단위표시(콤마)가 있는 숫자 계산하기 프로젝트를 만들던중 가격을 입력하는 부분에서 문제점이 발생했다. 1. 천 단위로 콤마를 찍어줄것 2. 리스트에 있는 가격 합산하기 [1. 천 단위로 콤마를 찍어줄것 ] 이 부분은 처음에 react-currency-input (npm패키지)를 설치해서 자동으로 콤마를 찍어주는 방법을 사용했었다. 하지만 input에 입력할땐 잘 작동을 하는데 리스트로 올라가면 1,0000이런식으로 4자리 뒤에 콤마가 생성되고 console창엔 NaN가 나왔다. 타입문제인가 싶어서 number로 바꿔주었지만 해결되진 않았다. 아무래도 패키지 자체 오류인듯 싶어 정규식 방법을 쓰기로 했다. 아래처럼 함수식으로 만들고 사용을 했다. function priceToString(price) { return price.toString.. 2022. 5. 24.

[React] 천단위마다 쉼표 넣는 방법 금액을 입력하기위해 1,000단위마다 ,(콤마)를 찍어주는 방법을 찾아보는데 아래 사이트에서 npm만 설치하면 자동으로 콤마가 찍히는 아주 기똥찬 패키지를 발견했다. 개꿀~~!! https://www.npmjs.com/package/react-currency-input-field react-currency-input-field React component for formatting currency and numbers.. Latest version: 3.6.4, last published: 4 months ago. Start using react-currency-input-field in your project by running `npm i react-currency-input-field`. Ther.. 2022. 5. 23.

[React] Fragments 란? 기존 문제점: 를 로 감쌀 시 렌더링된 HTML은 유효하지 않는다. class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( // 자식요소인 를 div로 묶어 주게 된다면 Hello World ); } } // 의 출력 결과 // div로 자식들을 감싼다면 렌더링 된 HTML은 유효하지 않는다. Hello World Fragment 사용방법 // 첫번째 방법 // 두번째 방법(import하기) import React, { Fragment } from 'react' // 세번째 방법(단축키) :단점- key 사용을 못함. 장점 Fragment.. 2022. 5. 22.

[React] nanoid 나노아이디 https://www.npmjs.com/package/nanoid nanoid A tiny (116 bytes), secure URL-friendly unique string ID generator. Latest version: 3.3.4, last published: 18 days ago. Start using nanoid in your project by running `npm i nanoid`. There are 4339 other projects in the npm registry using nanoid. www.npmjs.com 나노아이디란? 자바스크립트용 작고 안전한 랜덤문자열 생성기이다. import { nanoid } from 'nanoid' model.id = nanoid() //=> ".. 2022. 5. 21.

[TS]08 제네릭+다형성+클래스+인터페이스 다형성: 다른모양의 코드를 가질수 있게 해준다. 다형성을 이루 수 있는 방법은 제네릭을 사용하는 것이다. 제네릭은 placehoder타입을 쓸 수 있도록 해준다. 예시-모든타입에 쓸 수 있는 로컬스토리지 API 시뮬레이션 interface SStorage { // Storage는 이미 내장되어 있는것이기 때문에 사용하게 되면 override가된다 그렇기 때문에 SStorage라고 할것임. [key: string]: T } class LocalStorage { private storage: SStorage = {} set(key:string, value:T){ this.storage[key] = value; } remove(key:string){ delete this.storage[key] } get(ke.. 2022. 5. 17.

[TS]07 type과 interface type - 타입스크립트에게 오브젝트의 모양을 설명해 줄 수 있다. - 여러방면으로 쓰일 수 있다. (오브젝트의 모양을 알려주는데 쓸 수도 있고 타입이 string이라고 알려줄 수도 있다. 또 타입 alias(대체명)를 쓸 수 있다. 등등 여러종류의 타입을 설명할 수 있다.) // 예시1: Alias를 알려줌 type Nickname = string type Health = number // 예시2: 오브젝트의 모양을 알려줌 type Player = { nickname:Nickname, helthBar:Health } const tom:Player = { nickname:'tom', helthBar:10 } // 예시3: 타입이 string이라는것을 알려줌 type Food = string; const .. 2022. 5. 16.

이전 1 2 3 다음

티스토리툴바