728x90

들어가며

 취직 후에 알고리즘을 놓아버리고 언젠간 다시 시작해야겠다고 다짐만 하고 있었는데, 마침 코드트리를 한 달 동안 체험할 수 있는 기회가 생겨서 신청하게 되었다. 간단하게 한 달 동안 사용하면서 느꼇던 코드트리의 장단점과 다른 플랫폼과의 차이점에 대해 정리해보겠다.

 

 참고로 코드트리는 유료 서비스이며, 글에서 언급할 백준과 프로그래머스는 무료 서비스다.

 

장점

 코드트리는 크게 6가지 커리큘럼과 각 커리큘럼에 여러 개의 챕터로 세분화하여 기초 문법부터 기본적인 자료구조와 알고리즘을 거쳐 심화 단계를 차근차근 배울 수 있다.

 다른 PS 플랫폼과 마찬가지로 다양한 코딩 문제를 제공해주는데, 백준과 프로그래머스의 경우에는 개념을 따로 가르쳐주지 않고, 직접 책이나 강의를 통해 학습해야 하지만, 코드트리는 언어별로 개념과 코드를 직접 가르쳐주기 때문에 알고리즘에 처음 입문하는 사용자도 쉽게 접근할 수 있다.

 IDE처럼 높은 수준의 자동 완성까지는 안되더라도 자신이 한 번 작성한 코드들에 한해서는 자동완성도 지원해서 반복적인 타이핑을 줄일 수 있다.

 백준을 가장 많이 사용하지만 개인적으로는 프로그래머스처럼 문제와 에디터가 한 페이지에 보이는 것을 더 좋아하는데, 코드트리의 UI가 한 페이지에 모두 보이고, 크기도 자유자재로 변경가능해서 편리하게 사용하고 있다.

 언어도 다양하게 지원하기 때문에 홍대병 말기 수준의 언어를 사용하는 것이 아니라면 사이트 이용에 지장은 없다.

 

단점

 문제를 풀고 나면 다른 사람이 제출한 코드들을 보면서 더 좋은 풀이와 다양한 접근 방식들을 배울 수 있는데, 필터는 언어와 상태별로 다양하게 제공되지만, 수행 시간이나 메모리 같은 것들에 대한 정렬을 제공하지 않아 페이지를 이동하며 직접 효율적인 코드들을 찾아야 하는 것이 불편하다.

 아직 기출 문제 서비스가 삼성 SW 역량 테스트만 제공한다.

 에디터만 라이트 모드와 다크 모드 전환을 지원하고 사이트의 전체적인 UI의 다크 모드는 지원하지 않는다.

 다크 모드가 아니면 숨이 안쉬어지는 사람들은 사이트를 이용하지 못할 수도 있다...

 

마치며

 아직은 서비스 기간이 짧다보니 대표적인 PS 플랫폼인 백준과 프로그래머스에 비해 커뮤니티의 활성화와 다수의 사용자들의 다양한 풀이를 볼 수 없는 부분이 아쉽지만, 한 달 동안 사용하면서 사이트 자체의 서비스는 매우 만족스럽게 사용했다.

 

 만약에 사용하는 언어가 아직 미숙하고, 알고리즘을 처음 접하는 사람이라면 다른 플랫폼들보단 코드트리를 더 추천하고 싶다. 유료긴 하지만 집중력과 긴장감을 부여하기 위해 자체 타임 어택 느낌으로 너무 긴 기간 결제하지 않고 4 ~ 6개월 정도 해보는 것도 좋다고 생각한다. 하지만 6개월 할거면 연간 결제가 더 효율적이다

 

 추가로, 작성자처럼 기존에 알고리즘을 해보았지만 오래 쉬다 다시 시작해보려는 사람들한테도 손실되었던 알고리즘 두뇌의 재활 치료 목적으로 추천하고 싶다.

728x90

취준 및 신입

백엔드 개발자를 꿈꾸는 학생개발자에게 | Naver D2

 

[배민스토어] 신입 개발자 배민스토어 6개월 생존기 | 우아한형제들 기술블로그

{{item.name}} 어떤글인가요? 안녕하세요. 작년 겨울, 우아한테크코스를 수료하고 올해 1월에 배민스토어서비스개발팀으로 입사한 유현호입니다. 이제 막 6개월간의 수습 기간을 마치고 배민스토어

techblog.woowahan.com

 

신입 백엔드 개발자 혼돈의 파일럿 프로젝트 돌아보기 (feat.정산플랫폼팀) | 우아한형제들 기술

{{item.name}} 안녕하세요. 이제 막 파일럿을 끝내고 정산플랫폼팀에 합류한 신입 개발자 김윤정입니다. 길고 고되지만 재밌었던 우아한테크코스 교육을 끝내고 마침내 우아한형제들에 입사

techblog.woowahan.com

 

기술 면접 준비 (3)

31. N+1 문제의 발생 이유와 해결 방법에 대해 설명해주실 수 있을까요? 해결 방법은 3가지 이상 말씀해주시면 좋습니다. N+1 쿼리는 JPA의 프록시로 인한 지연 로딩 때문에 발생합니다. 정확한 의미

leejincha.tistory.com

 

테스트

 

테스트코드 성능 개선기

들어가며 코드를 수정하면, 검토 요청(PR…

tecoble.techcourse.co.kr

 

서버사이드 테스트 파랑새를 찾아서 | 우아한형제들 기술블로그

현실에서 만난 테스트 문제와 트레이드 오프 그리고 더 효율적인 테스트 환경을 위한 여정

techblog.woowahan.com

 

Kotlin 테스트 코드 자동화 Intellij 플러그인 개발기 | 우아한형제들 기술블로그

{{item.name}} 개발을 하다 보면 코드의 신뢰성을 검증하거나 내용을 전달하는 목적으로 테스트 코드를 많이 작성하게 되는데요. 다른 테스트 코드를 작성하는 것보다 단위 테스트(unit test) 코드를

techblog.woowahan.com

 

스프링에서 코틀린 스타일 테스트 코드 작성하기 | 우아한형제들 기술블로그

{{item.name}} 안녕하세요 저는 공통시스템개발팀에서 플랫폼 개발을 담당하고 있는 김규남이라고 합니다. 이 글은 올해 사내에서 진행한 코틀린 밋업에서 스프링에서 코틀린 스타일 테스트 코드

techblog.woowahan.com

 

Gradle 프로젝트에 JaCoCo 설정하기 | 우아한형제들 기술블로그

{{item.name}} 안녕하세요. 상품시스템팀에서 서버 개발(..새발)을 하고 있는 연철입니다. 프로젝트 세팅 중에 찾아보고 삽질했던 내용들이 도움이 될까 하여 남깁니다. JaCoCo는 Java 코드의 커버리지

techblog.woowahan.com

 

실무에서 적용하는 테스트 코드 작성 방법과 노하우 Part 1: 효율적인 Mock Test | 카카오페이 기술

Mock 테스트 코드 작성 중에 마주한 문제들과 그 문제를 해결하는 방법과 노하우를 소개 드립니다.

tech.kakaopay.com

 

java-study/2018OKKYCON at master · david-learner/java-study

티스토리에 업로드될 문서입니다. Contribute to david-learner/java-study development by creating an account on GitHub.

github.com

 

로깅

 

로그 데이터로 유저 이해하기 | 우아한형제들 기술블로그

{{item.name}} 0. 들어가며 우아한형제들 데이터서비스팀 송훈화입니다. 제 업무는 로그를 설계/정의하고 데이터를 분석하는 것입니다. 궁극적으로, 유저가 남긴 로그로부터 유저의 경험을 추정하

techblog.woowahan.com

 

로그 및 SQL 진입점 정보 추가 여정 | 우아한형제들 기술블로그

SQL과 로그에서 해당 로그를 남기면서 그 코드/SQL를 유발한 진입점을 남겨서 추적성을 높였습니다.

techblog.woowahan.com

 

문서화

 

Spring REST Docs에 날개를… (feat: Popup) | 우아한형제들 기술블로그

{{item.name}} 안녕하세요? 우아한형제들에서 정산시스템을 개발하고 있는 이호진입니다. 2018년 12월 Spring REST Docs를 주제로 사내 블로그를 작성 후… 1년 이상이 지났습니다. Spring REST Docs를 적용 후

techblog.woowahan.com

 

[spring] Spring REST Docs - 3.공통화

[BY 호아비] spring rest doc는 테스트를 통해서 api 문서를 구성합니다. 결국 개발자가 각각의 테스트 ...

m.post.naver.com

 

자바

Java Reference와 GC (naver.com)

 

Java Enum 활용기 | 우아한형제들 기술블로그

{{item.name}} 안녕하세요? 우아한 형제들에서 결제/정산 시스템을 개발하고 있는 이동욱입니다. 이번 사내 블로그 포스팅 주제로 저는 Java Enum 활용 경험을 선택하였습니다. 이전에 개인 블로그에 E

techblog.woowahan.com

 

Understanding JIT compiler (just-in-time compiler)

he Just-In-Time (JIT) compiler is a component of the Java Runtime Environment that improves the performance of Java applications at run time. Nothing in the JVM affects performance more than the compiler, and choosing a compiler is one of the first decisio

aboullaite.me

 

☕ JVM 내부 구조 & 메모리 영역 💯 총정리

저번 포스팅에서는 JRE / JDK / JVM에 대해서 간략하게 알아보는 시간을 가졌다면, 이번 포스팅에서는 JVM의 내부 구조에 대해 좀 더 자세하게 알아보도록 할 예정이다. JVM(자바 가상 머신)은 자바 언

inpa.tistory.com

 

스프링

일반

 

Spring Boot에서 S3에 파일을 업로드하는 세 가지 방법 | 우아한형제들 기술블로그

Spring Boot에서 S3에 파일을 업로드하는 세 가지 방법 | 안녕하세요. 세일즈서비스팀에서 전자계약서 시스템을 개발하고 있는 박민규입니다. 최근 저는 Spring Boot + Kotlin을 활용한 프로젝트에서

 

 

techblog.woowahan.com

 

Java/Spring 위키, to2.kr/cGE

...

codepen.io

배치

 

누구나 할 수 있는 10배 더 빠른 배치 만들기 | 우아한형제들 기술블로그

{{item.name}} 최근 셀러시스템팀에서는 하루 한 번 주기로 실행되는 배치를 최적화하는 과제를 진행했습니다. 작업 결과 좋은 성과를 얻었고 최적화를 검토하는 의사 결정 과정 자체로도 의미 있

techblog.woowahan.com

클라우드

 

JPA

 

JPA 모든 N+1 발생 케이스과 해결책

N+1이 발생하는 모든 케이스 (즉시로딩, 지연로딩)에서의 해결책과 그 해결책에서의 문제를 해결하는 방법에 대해 이야기 하려합니다 😀

velog.io

 

JPA 성능 개선팁

인프런 김영한님 실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화 - 인프런 | 강의 스프링 부트와 JPA를 활용해서 API를 개발합니다. 그리고 JPA 극한의 성능 최적화 방법을 학습할 수 있습니

jiwondev.tistory.com

 

Hibernate Fetch Join시 메모리에서 페이징 처리 사전 차단하기

Hibernate (Spring Data JPA) 를 사용하다보면 종종 HHH000104: firstResult/maxResults specified with collection fetch; applying in memory! 의 WARN (경고) 로그 메세지를 만난다. 해당 로그는 페이징 처리할때 여러 엔티티를 Fe

jojoldu.tistory.com

 

33. JPQL - Fetch Join의 한계

0. 개요 - 이번 포스팅에서는 Fetch Join의 한계에 대해서 알아보자. 1. Fetch Join의 한계 - Fetch Join 사용 시, 하지 못하는 것 또는 하면 안 되는 것에 대해서 알아보자. a) 별칭, Where 절 사용 금지 - Fetch J

devraphy.tistory.com

 

[JPA] 페치 조인(fetch join) - 한계

📌 Topic

ym1085.github.io

 

빌드

 

검색

 

실시간 인덱싱을 위한 Elasticsearch 구조를 찾아서 | 우아한형제들 기술블로그

{{item.name}} 안녕하세요, 우아한형제들 검색플랫폼팀 이윤재입니다. 저희 팀에서는 배달의민족 검색 시스템을 담당하고 있고, 사용자가 원하는 실시간 결과를 빠르게 제공하기 위해 노력하고 있

techblog.woowahan.com

 

검색을 위한 데이터 다루기 | 우아한형제들 기술블로그

{{item.name}} 안녕하세요. 우아한형제들 검색개발팀 정철입니다. 배달의민족 검색시스템에서 검색에 사용되는 데이터를 적재하면서 경험했던 어려움과 해결했던 방법을 공유하고자 합니다. 검색

techblog.woowahan.com

 

블로그

 

팔만코딩경

 

80000coding.oopy.io

 

728x90

개요

공식문서들을 공부하며 접한 영단어들을 정리해두면 좋을거 같아

영어 공부 겸 앞으로 알게될 단어나 문법들을 추가해나갈 계획이다.

 

단어마다 여러가지 뜻이 있을 수 있지만 개발과 관련된 의미로만 정리해뒀다.

 

참고한 레퍼런스 : 스프링 / 스프링 부트 / 스프링 시큐리티 / 자바

 

A

authentication : 인증

authorization : 인가

arrangement : 배열. 준비

afford : 제공하다. 여유

among : ~ 중에. ~ 보다

as : ~처럼

abstract : 추상적인\

assume : 추정하다. 가정하다

allow : 허용하다

alternatively : 또는

as soon as : ~ 하자마자. 즉시

attractive : 매력적인

B

behavior : 기능. 동작

built-in : 내장된

C

covers : (내용을) 다루다

convenience : 편의

credential : 자격 증명. 인증 정보

comprehensive : 포괄적인

concrete : 구체적인

component : 구성요소

contain : 포함하다

configure : 구성하다

capability : 기능. 능력

capable : 유능한

consult : 참조

central : 핵심

D

dependencies : 의존성

discussing : 논의

describing : 설명

define : 정의하다

delegate : 위임하다

demonstrates : 시연하다

desired : 바라다

E

endpoint : 스프링에서의 경우 컨트롤러에 요청을 보내는 경로

expectation : 기대

expand : 확장하다

explicitly : 명시적으로

ensure : 보장하다.

entirely : 완전히

expose : 노출하다

examine : 살펴보다. 알아보다. 조사하다. 검증하다

encrypt : 암호화하다

F

figure out : 알아내다. 파악하다

flow : 흐름

G

grant : 승인하다. 부여하다

governing : 관리. 통치

H

handle : 다루다. 처리하다

I

indicates : 가리키다. 보여주다

in conjuction : ~와 함께

implementation : (자바에서 인터페이스의) 구현체. 구현

instance : 객체 지향 개념에서의 객체(정확하게 객체와는 좀 다르다)

interpret : 해석하다

instead : ~ 대신에

integrating : 통합

in practice : 실제로

invoke : 호출하다

in terms of : ~ 면에서

J

K

L

likely : ~ 일 것이다.

M

might : ~ 할 것 같다.

N

not surprisingly : 당연히

necessary : 필요한

O

overall : 전반적인

obtain : 얻다. 획득하다

optional : 선택적

obvious : 명백한. 확실한

P

publish : 프로그래밍에서의 이벤트를 발행하는 것을 뜻함. 발행하다. 출간하다

prefer : 선호하다

principal : 인증주체. 주요한

perform : 수행하다

populated : 채워진

purpose : 목적

parent : 상위

prevent : 방지하다. 예방하다

proactively : 능동적으로. 사전에

preceding : 선행

prescribe : 규정하다

Q

quite : 꽤. 상당히

R

refer : 참고하다. 참조하다. 제공하다

represent : 나타내다. 대표하다

retain : 유지하다

responsible : 담당하다. 책임이 있는

S

snippet : 공식문서에서의 스니펫은 보통 다음의 어떤 코드를 가리키는 의미

specific : 특정한

specifically : 특히. 구체적으로

suitable : 적합한

strategy : 전략

standalone : 독립형

spawn : 생성하다

serve : 제공하다

surprisingly : 놀랍게도

somewhat : 약간. 다소

sensitive : 민감한. 예민한

T

this lets : 이렇게 하면. 이를 통해

take ~ into account : ~를 고려하다

typically : 일반적으로

U

V

W

which : 어느

way : 방법

within : ~ 내에서

X

Y

Z

728x90

월페이퍼 엔진 프로젝트 만들기

우선은 편한 디렉토리에서 프로젝트 폴더를 하나 생성한 후에

HTML 파일을 하나 만들어준다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>

  </body>
</html>

위의 HTML 기본 양식을 html 파일에 작성해준다.

 

짧은 코드의 수정은 메모장을 사용해도 상관은 없지만

기능을 이것저것 추가하다보면 코드가 금방 길어지기 때문에

가급적이면 Visual Studio Code를 설치해서 사용하거나

자바 개발자라면 인텔리제이를 사용해도 무관하다.

기존 배경화면에 기능 추가하기

위의 방식처럼 백지에서 시작하는 방법도 있지만

창작마당에서 맘에 드는 배경화면에

기능만 조금 추가하는 방법도 있다.

 

 

우선 창작마당에서 [필터 - 유형 - 웹사이트]만 체크 한 후에

마음에 드는 웹 사이트 배경화면을 다운 받는다.

 

 

다운 받은 배경화면을 우클릭으로 [탐색기에서 열기]를 클릭하여

해당 폴더에서 html 파일을 편집하면 된다.

CodePen을 통해 꾸미기

프론트 개발자들이 HTML/CSS/JS 소스코드들을 공유하는 사이트다.

이쁘거나 화려하거나 신기한 디자인들이 많으니

이 사이트에 있는 코드들을 가져다 사용하기만 하면 된다.

 

https://codepen.io/

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

위의 사이트에서 자신이 추가하고자 하는 기능을 검색한 후

맘에 드는 기능들을 즐겨찾기나 로그인 후에 북마크에 추가해둔다.

 

Music Widget (codepen.io)

 

Music Widget

...

codepen.io

이번 글에서는 해당 코드를 추가해보겠다.

 

 

추가하고자 하는 코드에 들어가 오른쪽 하단의 Export를 누른 후에

Export.zip을 눌러서 코드들을 다운 받아준다.

 

 

압축을 푼 폴더의 dist 폴더에 들어가면 위와 같은 파일들이 있다.(캡처를 잘못해서 dist가 맞다)

index.html 파일은 디자인과 동작을 뺀 뼈대라고 생각하면 되고

script.js 파일은 동작

style.css는 디자인이라고 생각하면 된다.

 

이제 처음에 만들어두었던 html 파일이나

창작마당에서 받아둔 html 파일을 수정하면 된다.

 

우선은 html 파일을 열어보자

글에서는 창작마당에서 받아온 파일에 기능을 추가해보겠다.

 

 

이거저것 코드가 많아서  무슨 말인지 이해가 안되겠지만

기존 코드들을 알 필요는 없다.

 

우선은 기존 코드의 어느 부분에 추가해야하는지를 알아야하기 때문에

기존 코드를 브라우저에서 실행시켜본다.

 

 

엣지 브라우저 기준 우클릭 후 검사를 눌러서 페이지의 소스코드를 볼 수 있다.

 

 

페이지의 소스 코드에 마우스를 올리면 해당 코드가

어느 부분에 대한 영역인지 알 수 있다.

 

이렇게 코드마다의 영역을 파악하면

자신이 추가하고자 하는 기능을 어디에 끼워 넣어야할지 알 수 있다.

 

 

이제 마찬가지로 코드펜에서 다운 받은 코드를 열고

html 파일의 코드에서 복사할 부분을 선택한다.

 

 

<body> 태그 안의 내용들을 모두 복사하여

기존 html 코드에 추가하고자 하던 위치에 붙여넣는다.

 

마지막으로 js 파일과 css 파일도 옮겨주면 되는데

이때 파일의 위치를 잘 확인하고 옮겨줘야한다.

<head>
  <meta charset="UTF-8">
  <title>CodePen - Music Widget</title>
  <link rel="stylesheet" href="./style.css">
  <script src="./script.js"></script>
</head>

위의 양식처럼 head 태그 안에 css와 js를 추가할 수 있다.

 

이렇게 필요한 코드들을 추가하면서 만들 수도 있지만

대부분 서로 JS나 CSS 요소들이 겹치고 충돌하는 문제들이 생길건데

이 때는 각자 검색이나 챗지피티를 통해서 해결해나가야한다.

 

챗지피티에 코드를 알려주고 해결방안을 물어보는 것이 가장 편하긴 하다.

 

마치며

설명을 두루뭉술하게 하기도 했고

프론트 엔드 기술을 모르는 사람이라면 당연히 처음엔 어려울거지만

구글링이나 챗지피티의 도움을 받으며 한 번만 기능을 추가해보기만 하면

갈수록 기능을 추가하고 꾸미는 것이 쉬워질 것이다.

 

http://naver.me/FOhl2Jh7

 

음악플레이어+달력.zip

예준님이 공유한 파일을 확인하세요.

mybox.naver.com

위의 링크는 현재 기존의 비주얼라이저 배경화면에

구글 캘린더와 플레이어를 추가해서 사용하고 있는 배경화면이다.

 

혹시라도 사용할 사람이 있다면 사용하길 바란다.

 

압축을 푼 후에 [월페이퍼 엔진 - 배경화면 열기 - 오프라인 배경화면 열기(애니메이션)]을 클릭한 후

index.html 파일을 선택하면 된다.

 

마지막으로 다들 개발자스러운(?) 배경화면 만들기에

성공하길 바라며 글을 마치겠다.

728x90

월페이퍼 엔진

언젠간 배경화면 꾸미는 글을 써봐야지 마음만 먹고 미루고 미루다

드디어 글을 써보려한다!

 

우선은 동기부여를 위해 최종적으로 만들 수 있는 배경화면이

어떻게 생겼는지 한 번 영상으로 보는 것이 좋을거 같기 때문에

현재 사용 중인 배경화면을 소개하겠다.

 

 

이렇게 배경화면에 자신의 입맛에 맞게 필요한 기능들을 추가하여 사용할 수 있다.

배경화면을 만들거나 다른 사람의 배경화면을 사용하기 위해서는

스팀에서 WallPaper Engine이라는 유료 프로그램을 구매해야 한다.

 

 

작성일 기준 4500원에 판매 중이다.

https://store.steampowered.com/app/431960/Wallpaper_Engine/

 

Wallpaper Engine on Steam

Use stunning live wallpapers on your desktop. Animate your own images to create new wallpapers or import videos/websites and share them on the Steam Workshop!

store.steampowered.com

해당 페이지에서 구매할 수 있다.

 

배경화면을 꾸밀 수 있는 프로그램은 많이 존재하지만

월페이퍼 엔진의 장점은 웹페이지를 배경화면으로 쓸 수 있다는 것이다.

 

 

이렇게 HTML, CSS, JS를 사용하여 배경화면을

사용자의 능력에 따라 화려하게 꾸밀 수 있다.

 

창작마당

프론트엔드 개발자가 아니고 해당 기술 스택 경험이 없는 사람들은

이걸 어떻게 사용하느냐라고 생각할 수도 있다.

 

 

십덕그런 배경화면들이 많긴 하지만 정상적(?)인 배경화면들도 많으니

다른 사람들이 공유한 배경화면을 사용할 수도 있다.

 

하지만 다른 사람들이 만들어둔 배경화면 보다는

자기 입맛에 맞게 꾸민 배경화면을 사용하고 싶은게

개발자들의 로망(?)이다.

 

본인도 프론트 스택에 관해서는 얕게만 배워보고

깊게 공부를 해본 적은 없는 분야라

남이 짜둔 코드를 사용하는 정도만 가능한데

처음에 보았던 영상의 배경화면을 만들 수 있었다.

 

커스텀 배경화면

 

다행히도 인테넷에는 수많은 프론트 개발자들이 만들어둔

이쁘고 유용한 코드들을 공유해주는 사이트가 있다.

 

하지만 해당 사이트를 이용해서 배경화면을 직접 만드려면

어느정도 코드를 읽을 줄을 알아야한다.

 

C, C++, Java 같은 프로그래밍 언어 중 하나라도 할 줄 아는 사람이라면

결국 언어는 문법만 다르지 돌아가는건 비슷하고

코드의 흐름이 어떻게 돌아가는지 알테니 충분하다.

 

모르는 부분은 그때그때 구글링이나 챗지피티를 통해

배우거나 코드를 보완해 나가면 된다.

+ Recent posts