그냥

/opt/gitlab/embedded/bin/runsvdir-start &

gitlab-ctl start

gitlab-ctl reconfigure

gitlab 실행 과정 중 (gitlab-ctl reconfigure)

ruby_block[supervise_redis_sleep] action run
위 과정에서 멈춰서 장기간 행 걸린 경우,

다른 터미널을 실행하여 아래를 실행한다.

/opt/gitlab/embedded/bin/runsvdir-start &

* 모음집..?!

https://page.co.kr/@dev

* 카카오

https://tech.kakao.com/

* 카카오 엔터프라이즈

https://tech.kakaoenterprise.com/

* 우아한형제들

https://techblog.woowahan.com/

* LINE(라인)

https://engineering.linecorp.com/ko/blog/

* spoqa(스포카)

https://spoqa.github.io/

* NHN(nhn meetup)

https://meetup.toast.com/

* 레진코믹스

https://tech.lezhin.com/

* 쿠팡

https://medium.com/coupang-engineering

* 당근마켓

https://medium.com/daangn

* 티켓몬스터(티몬)

네이버 블로그가 있네... (https://blog.tmon.co.kr/ 여기는 없어졌나보다. 많이 힘든가.)

https://blog.naver.com/tmon_blog

* 네이버 D2

https://d2.naver.com/home

* 드라마앤컴퍼니

https://blog.dramancompany.com/

* 뱅크샐러드

https://blog.banksalad.com/tech/

* 마켓컬리

https://helloworld.kurly.com/

* 무신사

https://medium.com/musinsa-tech

* 버즈빌

https://www.buzzvil.com/ko/blog/buzzvillage

1. 자바스크립트는 뒤에서 어떻게 동작하는가

https://blog.devgenius.io/how-javascript-works-behind-the-scenes-88c546173f32

2. 개발자가 알아야 하는 자바스크립트 4가지 개념들

https://javascript.plainenglish.io/4-javascript-concepts-that-every-developer-should-know-a20f0d4c9dd8

3. 자바스크립트 코드를 더 좋게 만드는 방법

https://medium.com/@shubhavratkulkarni/make-your-javascript-code-better-9ef4f5136378

역시 알아야 써먹는다..무조건 알아야 한다

4. 2022년에 사용하면 좋을 8가지 VS Code Extension들

https://neelesh-arora.medium.com/8-vs-code-extensions-you-would-like-to-use-in-2022-1230df124527

스프링부트<->넥사크로N

투비소프트 기술지원 > 다운로드 페이지 에서 넥사크로 스튜디오 버전에 맞는 X-API 라이브러리 다운로드.

프로젝트에 라이브러리 추가.

아래 소스 참고하여 조회 기능 구현.

2022.04.08. 노마드코더 뉴스레터 메일을 읽고 (3/3)

프론트엔드 개발자를 위한 성공적인 이직 준비 팁 ?!

URL : https://hackernoon.com/how-to-ace-your-interview-assignment-to-land-your-next-front-end-job

굳이 이직 준비를 위한 팁이 아니라 개발자라면 알아야 할 것으로 생각되는 내용이라 남겨본다.

아래 한글 내용은 일부분 노마드코더 뉴스레터에서 가져왔으며 자세한 세부 내용은 위 링크에서 확인 바랍니다.

Stick to What You Know the Best

- 잘하는 것에 집중하세요.

- 구직을 위해 새로운 기술을 배우려 한다면 최고의 코드를 쓸 수 없습니다.

Make Your Project Easy to Review

- 프로젝트는 보는 사람을 생각해서 리뷰하기 쉽게 만드세요.

- 작동하는 링크를 보고, 예상한 대로 작동하는지 사용해보고, 코드에서 어떻게 문제를 해결하려고 노력했는지 봅니다.

- zip 파일로 보내면 절대 안 됩니다.

- README를 꼭 넣으세요

- 무슨 생각으로 만들었는지 생각의 흐름을 공유하세요.

- 패턴이나 예제를 사용한 거라면 솔직하게 밝히세요.

- 선택의 순간에 왜 그런 선택을 했는지 설명하세요.

Make Sure Your Project Works

- 잘 동작하는지 확인하세요.

- 단위 테스트를 하세요.

Make Your Project Shine

- 프로젝트를 매력적으로 만드세요.

- ESLint나 Prettier 같은 것을 사용하세요.

- commit 메시지를 의미있게 작성하세요.

2022.04.08. 노마드코더 뉴스레터 메일을 읽고 (2/3)

자바스크립트 8가지 팁

URL : https://javascript.plainenglish.io/8-javascript-tricks-to-make-you-a-better-programmer-948b5a3c35b4

1. Reduce if...else noodle code

누들 코드 사용을 줄이세요

const gerPriceByName = (name) => {
	if (name === 'one') {
    	return 30
    } else if (name === 'two') {
    	return 20
	} else if (name === 'three') {
    	return 10
    }
   	console.log(getPriceByName('1')) // 30
}

새로운 조건이 필요하여 추가하고 싶을 때, 위처럼 if...else문을 반복하는 것이 아니라,

아래처럼 map을 사용해보세요.

const gerPriceByName = (name) => {
	const map = {
    	'1': 30,
        '2': 20,
        '3': 10,
        ...
    }
    return map[name]
}
console.log(getPriceByName('1')) // 30

2. Use "filter" and "map" instead of "for" loops

for 루프 대신에 filter, map을 사용해보세요.

const foods = [
	{
    	name: 'Hamburger',
        group: 1,
    },
    {
        name: 'Icecrean',
        group: 2,
    },
   	{
    	name: 'Fries',
        group: 3,
    },
    {
    	name: 'Cake',
        group: 4,
    },
]

위 데이터에서 그룹 1에 속하는 음식을 찾으려면 어떻게 해야할까?

아래에서 for 를 사용 하는 것보다 filter, map을 사용하면 소스가 간단해집니다.

// X !! 안좋다
const names = []
for (let i = 0, len = foods.length; i < len; i++) {
	if (foods[i].group === 1) {
    	names.push(foods[i].name)
    }
}

// O !! 좋다
const names = foods
	.filter((food) => food.group === 1)
	.map((food) => food.name)
console.log(names)

3. Swap two values using destructuring

두 변수의 값을 교환하려면 어떻게 하는가?

// 소스가 길어진다..
let myFood = 'Hamburger'
let yourFood = 'Coffee'
let tempFood = myFood
myFood = yourFood
yourFood = tempFood
console.log(myFood, yourFood) // Coffee, Hamburger

// 이런 방법이 간편하고 좋다.
let myFood = 'Hamburger'
let yourFood = 'Coffee'
;[myFood, yourFood] = [yourFood, myFood]
console.log(myFood, yourFood)

4. Smarter Object.entries

맵에서 데이터를 가져올때 Object.entries를 사용하자.

Object.entries 사용 시 for 와는 다르게 prototype 데이터는 가져오지 않는다.

const foodMap = {
	'Hamburger': 30,
    'Icecream': 20,
    'Fries': 10,
    'Chocolate': 5,
}
Object.prototype['Sandwich'] = 40

// 보통
for (const key in foodMap) {
	console.log(key, foodMap[key])
}

// 좋은 방법
Object.entries(foodMap).forEach(([key, value]) => {
	console.log(key, value)
})

5. Easy way to flatten an array

배열간 병합?! 정렬?!에 더 편한 방법을 사용하자.

const foods = [['Hamburger', ['Chocolate']], ['Icecream', ['Fries', ['Cake']]]]
console.log(foods)
// 아이고 복잡하다
const flattenFoods = (foods) => {
	return foods.reduce((res, food) => {
    	return res.concat(Array.isArray(food) ? flattenFoods(food) : food)
    }, [])
}
console.log(flattenFoods(foods))
console.log('-----------------------------')
console.log(foods)
// 이 얼마나 편한가
console.log(foods.flat(Infinity))

결과는 같다.

6. Rounding Trick

소수점 처리에 '~~' 연산자를 사용하자.

const foods = [
	{
    	name: 'Hamburger',
        price: 30.89
    },
    {
    	name: 'Icecream',
        price: 20.71
    },
    {
    	name: 'Fries',
        price: 10.31
    },
]
console.log(foods)

const discountedFoods = foods.map((it) => {
	return {
    	name: it.name,
        price: ~~it.price
    }
})
console.log(discountedFoods)

7. Use reduce to calculate the sum

합 계산에 redeuce를 사용해보자.

const foods = [
	{name: 'Hamburger', price: 30, amount: 10,},
    {name: 'Icecream', price: 20, amount: 3,},
    {name: 'Fries', price: 10, amount: 5,},
    {name: 'Tea', price: 5, amount: 9,},
]

// 평소..
let sum = 0
foods.forEach((food) => {
	sum += food.price * food.amount
})
console.log(sum)

// 좋은 방법
let sum2 = foods.reduce((res, food) => res += food.price * food.amount, 0)
console.log(sum2)

같은 결과를 구할 수 있다.

8. Use console.table instead of console.log

console.log 대신에 console.table을 사용해보자.

const foods = [
	{name: 'Hamburger', price: 30.89, group: 1,},
    {name: 'Icecream', price: 20.71, group: 1,},
    {name: 'Fries', price: 10.31, group: 2,},
    {name: 'Tea', price: 5.98, group: 2,},
]

// 평소처럼
console.log(foods)

// 다르게!
console.table(foods)

테이블 형식으로 데이터가 출력된다. 이런 방법도 있었구나..

여러 언어로 코드를 변환해준다고?! (개발중인가봐요)

URL(github) : https://github.com/onelang/OneLang

DEMO(V1 live demo site) : https://ide.onelang.io/

DEMO(youtube) : https://www.youtube.com/watch?v=Rwo6KJ_Pa9Q 

메타태그를 만들어주는 곳

URL : https://metatags.io/

아래와 같이 채널 선택, 이미지 등록 및 타이틀/설명 입력 후 미리보기가 가능하다.

마지막으로 'GENERATE META TAGS' 버튼을 클릭하여 생성 할 수 있다.

아주아주 여러가지 툴을 하나로 합친듯한 사이트

URL : https://smalldev.tools/

인코더, 디코더, 포매터 등 편하게 사용 가능하다

공식문서들의 집합소! 일단 들어가보자. 검색해보자.

URL : https://devdocs.io/

빠르고 편하게 일단 찾아보고 구글링을 하자.

README를 간편하게 만들자

URL : https://readme.so/

github에 올릴 README.md 파일을 작성할때 써보도록 하자.

마이크로소프트의 오픈소스 아이콘 svg 모음

URL : https://fluenticons.co/

와! 이미지 찾겠다고 검색하고 고르고 그런 시간을 아낄 수 있다.

백엔드 - 이클립스 - Spring Boot (Build : Maven)

프론트엔드 - VS Code - vite, Vue.js

프로젝트 진행 중 생각했던 의문점이 있었다.

이클립스에서 스프링 부트 프로젝트 생성 시

별도의 창을 띄우지 않고 이클립스에서 구동을 시켰다.

그렇기에 외부에 배포시에는 백엔드 애플리케이션은 어떻게 구동해야 하는가에 대한 의문점이 생겼다.

이전에 단순 JSP를 사용한 프로젝트는 war 또는 압축파일로 내보내서 톰캣에서 사용해야 하는가?

프로젝트 내 파일인 mvnw (or mvnw.cmd) 사용하여 간편히 스프링 부트 프로젝트를 실행 할 수 있다.

메이븐을 이용하여 스프링 부트를 실행하기전 인스톨 과정을 거쳐야 한다.

실행 방법 및 결과는 명령어와 스크린샷 확인 바란다.

스크린샷은 윈도우즈 환경이지만 리눅스 시스템도 별 차이 없을 것이라 생각한다.

Unix System - Maven Install

./mvnw clean install

Windows System (batch command) - Maven Install

mvnw.cmd clean install

Spring Boot run

mvnw spring-boot:run

웹 프로젝트 실행 및 접속 후 스프링 부트로 실행된 백엔드에

데이터 전송 및 처리가 가능했다.

외부 첨부를 위한 참고용 업로드