돈의 역사는 되풀이된다
기본정보 저자 : 홍춘욱 도서링크 출판사 : 포르체 완독일 : 24년 7월 17일 문헌노트 p.21, 금리가 상승할 때는 주택 구입의 기회비용이 상승해서 매수세가 약해지고, 반대로 금리가 하락할 때는 주택 매수세가 높아진다는 것을 기억하면 좋겠습니다. ...
github.io 블로그 개선
아직도 jekyll은 어렵다
- jekyll로 github.io 블로그를 쓴지 한달이 가까워져 가는데 글쓰기에 급급하고 있다.
- 매일 배운 것을 기록하는게 어려운 것은 아닌데, 배우는게 없어서일까?
- 그러다가 minimal mistakes로 꾸며진 어떤 분의 샘플블로그를 참고해서 조금 더 수정해 보았다.
메뉴에 categories 추가
- 상단 메뉴에 categories를 추가했다.
- categories 메뉴에 들어가면 이 블로그에 추가되고 있는 주제들의 목록을 볼 수 있다.
posts의 layout 변경
- 지금까지 포스팅을 하면서 글의 layout을 ‘posts’로 선언하고 있었다.
- ‘single’로 변경하였다
본문의 기본 heading을 2단계로 변경
- 글에 기본 heading을 1단계 ‘#’으로 하고 있었는데, 이게 글 타이틀과 같은 사이즈여서 제목이 중복된 것처럼 보인다.
- 본문의 기본 heading을 2단계로 하였다.
참고
- https://devinlife.com/categories/#howto-github-pages
- https://github.com/devinlife/devinlife.github.io
2024
객체지향 사고 프로세스
기본정보 저자 : 맷 와이스펠 도서링크 출판사 : 제이펍 완독일 : 24년 1월 6일 문헌노트 p.xx, UML 같은 모델링 언어를 배우는 과정도 중요하지만, 그보다는 먼저 객체지향 기술을 배우는 게 훨씬 더 중요하다. 객체지향 개념을 완전히 이해하기도...
2023
객체지향의 사실과 오해
기본정보 저자 : 조영호 도서링크 출판사 : 위키북스 완독일 : 23년 12월 23일 문헌노트 p.21, 객체지향의 목표는 실세계를 모방하는 것이 아니다. 오히려 새로운 세계를 창조하는 것이다. 소프트웨어 개발자의 역할은 단순히 실세계를 소프트웨어 안으...
세금의 세계사
기본정보 저자 : 도미닉 프리스비 도서링크 출판사 : 한빛비즈 완독일 : 23년 11월 30일 문헌노트 p.22, 협의형 정부를 원한다면 결정까지 복잡한 단계를 거쳐야 하고 시간도 많이 소요된다. 신속한 정부를 원한다면 어느 정도 독재를 받아들여야 한다...
가구, 집을 갖추다
기본정보 저자 : 김지수 도서링크 출판사 : 싱긋 완독일 : 23년 10월 16일 문헌노트 단어정리 빈티지 Vintage 라틴어 Vinum + Demere 라이프스타일 분야에서 대략적으로 30 ~ 60년 전에 나온 상품이나 오브제 앤티크 An...
jsonwebtoken 사용을 위해 gradle 에 api 추가하다가 만난 오류
오류 상황 jsonwebtoken 을 사용하기 위해 gradle dependency 에 api 를 추가하려고 하였다. 빌드 하였더니 아래 오류를 만났다. AbstractDynamicObject$CustomMessageMissingMethodException: Could ...
아틀라스 전차전
도서링크 https://www.yes24.com/Product/Goods/90925510 아틀라스 한국사 빌리러 도서관을 갔는데 없어서 ‘아틀라스’를 검색해보다가 찾게 되었다. 전차의 발전 이야기를 전쟁 때의 지도와 함께 보여주는 책이다. 전쟁터에서 전차가 왜 생겼으며, 어...
더 자바, Java 8 - 002
https://www.inflearn.com/course/the-java-java8/dashboard Optional 비어있을 수도 있고 값이 있을 수도 있는 상황 java 에서 종종 만나는 NullPointerException null 체크를 빼먹지 않고 개발하는 것...
더 자바, Java 8 - 001
https://www.inflearn.com/course/the-java-java8/dashboard 참고 https://www.oracle.com/java/technologies/java-se-support-roadmap.html https://www.javacodeg...
자바 마스터북 정리 - 003
파일 조작 기존의 File 클래스에는 제약이 있다. 파일의 메타 데이터와 심볼릭 링크를 취급할 수 없음 디렉터리 밑의 파일의 생성/삭제/갱신을 감시할 수 없음 이런 문제를 해소한 것이 Path 클래스와 Path 클래스의 유틸리티 클래스이다. 파일을 읽기 위해서 F...
자바 마스터북 정리 - 002
생각보다 정리할게 좀 많다. Stream API Stream API 는 작성, 중간 작업, 종료 작업의 세단계로 볼 수 있다. List<Student> students = new ArrayList<>(); students.add(new Student("Ha...
자바 마스터북 정리 - 001
자바 마스터 북을 읽고 인상깊었던 내용을 정리하였다. 비트연산자 기호 의미 & 비트 연산 AND | 비트 연산 OR ...
redis 기본 명령어 모음
Database database 선택하기 database 번호는 0 ~ 16 이 기본입니다. 기본값은 0 이고, 다른 번호를 선택하면 명령어 창에 해당 데이터베이스 번호가 표시됩니다. > select { DATABASE_NUMBER } # 다른 DATABASE_NU...
javascript callback 함수
“I will call back later!”A callback is a function passed as an argument to another functionThis technique allows a function to call another functionA call...
Synology 에서 Docker 로 redis 설치하기
Docker 레지스트리에서 redis 이미지 받기 redis 를 검색해서 나오는 이미지를 다운받습니다. redis 용 docker 디렉토리 만들기 /docker `- redis /docker/redis 에 redis.conf 파일을 추가합니다. 내용은 링크의 소스와 동일...
Synology 에서 Docker 로 Ghost 5 설치하기
Synology 에서 Docker 로 Ghost 5 를 설치해보겠습니다. Ghost 5 란 워드프레스와 유사한 CMS 입니다. Docker 레지스트리에서 이미지 받기 Ghost 5 설치를 위해서는 2개 도커 이미지를 받아야 합니다. Docker 를 실행하고 레지스트리 탭으로...
Synology 에서 ssh 로 Docker 에 접속하기
ssh 접속 설정 Synology 제어판에서 ‘터미널 및 SNMP’ 으로 접속합니다. ‘SSH 서비스 활성화’ 를 체크합니다. 이 때 포트번호는 임의로 변경합니다. 이제 ssh 나 putty 등으로 접속합니다. $ ssh -p {SSH_PORT} {NAS_ID}@{NAS_...
javascript 가 동작하는 방식
javascript 가 동작하는 방식을 알아보자. 브라우저에서 서버로부터 데이터를 조회하는 로직을 만든다고 한다면 javascript 에서 대충 이런 코드로 만들어진다. function greeting() { sayHi(); } function sayHi() { ...
Mac 에서 Docker 로 redis 설치하기
Mac 에서 Docker 로 redis 설치하기 Mac 에 Docker 설치하기 brew 를 이용해서 Docker 를 설치합니다. $ brew install docker # 설치확인 $ docker --version $ docker-compose --version 이미지...
피그마 - 001
피그마 단축키 [피그마] 알아두면 좋은 figma 단축키 모음 디바이스별 사이즈 https://screensiz.es 8px 그리드 디자인의 에셋의 사이즈, 간격 및 모든 수치를 8단위로 맞추면 모든 디바이스에서 픽셀이 깨지지 않고 개발 친화적인 디자인을 할 수 있다. ...
좋은 함수 만들기
좋은 함수 만들기 - 부작용과 거리두기 1. 좋은 함수 만들기 - 부작용과 거리두기 좋은 함수란 순수 함수 :::info 순수함수는 동일한 입력일 경우 항상 동일한 출력을 반환하며, 부작용이 없는 함수 ::: 리팩토링 될 함수 export async function s...
7장 스프링 핵심 기술의 응용 - 7.6 스프링 3.1의 DI
7.6 스프링 3.1의 DI 스프링이 처음 등장한 이후 많은 변화를 겪은 것은 사실이지만 스프링이 근본적으로 지지하는 객체지향 언어인 자바의 특징과 장점을 극대화하는 프로그래밍 스타일과 이를 지원하는 도구로서의 스프링 정체성은 변하지 않았습니다. 자바 언어의 변화와 스프링 D...
7장 스프링 핵심 기술의 응용 - 7.5 DI를 이용해 다양한 구현 방법 적용하기
7.5 DI를 이용해 다양한 구현 방법 적용하기 운영 중인 시스템에서 사용하는 정보를 실시간으로 변경하는 작업을 만들 때 동시성 문제가 가장 먼저 고려되어야 합니다. SqlRegistry 가 읽기전용으로 동작할 때는 동시성 문제가 발생할 일이 없습니다. 하지만 수정은 문제가 ...
7장 스프링 핵심 기술의 응용 - 7.4 인터페이스 상속을 통한 안전한 기능확장
7.4 인터페이스 상속을 통한 안전한 기능확장 서버가 운영 중인 상태에서 서버를 재시작하지 않고 긴급하게 애플리케이션이 사용 중인 SQL 을 변경해야 할 수도 있습니다. 지금까지의 SqlService 구현 클래스는 SQL 정보를 초기에 읽어서 메모리에 두고 사용합니다. SQL...
7장 스프링 핵심 기술의 응용 - 7.3 서비스 추상화 적용
7.3 서비스 추상화 적용 JaxbXmlSqlReader 를 개선할 부분입니다. 필요에 따라 JAXB 외에 다른 기술로 바꿔서 사용할 수 있게 한다. XML 파일을 임의의 파일위치나 원격지 등 좀 더 다양한 소스에서 가져올 수 있게 한다. 7.3.1 OXM 서비스추...
7장 스프링 핵심 기술의 응용 - 7.2 인터페이스의 분리와 자기참조 빈
7.2 인터페이스의 분리와 자기참조 빈 7.2.1 XML 파일 매핑 SQL 정보는 설정정보에 있기 보다는 SQL 을 저장해두는 전용 포맷을 가진 독립적인 파일을 이용하는 편이 바람직합니다. SQL 정보를 담는 XML 문서를 만들고, 이 파일에서 SQL 을 읽어뒀다가 DAO 에...
7장 스프링 핵심 기술의 응용 - 7.1 SQL 과 DAO 의 분리
스프링의 3대 핵심 기술인 IoC/DI, 서비스 추상화, AOP 에 대해 간단히(?) 살펴보았습니다. 7장_ 스프링 핵심 기술의 응용, 557. 이번 장에서는 스프링이 제공하는 세 가지 기술을 필요에 따라 응용해보면서 스프링의 개발철학과 추구하는 가치에 대해 알아보겠...
6장 AOP - 6.8 트랜잭션 지원 테스트
6.8 트랜잭션 지원 테스트 6.8.1 선언적 트랜잭션과 트랜잭션 전파 속성 트랜잭션 전파 속성은 유용한 개념이다. REQUIRED 전파 속성은 진행 중인 트랜잭션이 있으면 참여하고 없으면 새로운 트랜잭션을 시작해주는 속성이다. 이를 통해 비즈니스 로직상 코드가 중복되는 일...
6장 AOP - 6.7 애노테이션 트랜잭션 속성과 포인트컷
6.7 애노테이션 트랜잭션 속성과 포인트컷 세밀한 트랜잭션 속성의 제어가 필요한 경우를 위해 스프링이 제공하는 다른 방법이 있다. 직접 타깃에 트랜잭션 속성정보를 가진 애노테이션을 지정하는 방법이다. 6.7.1 트랜잭션 애노테이션 타깃에 부여할 수 있는 트랜잭션 애노테이션은...
6장 AOP - 6.6 트랜잭션 속성
6.6 트랜잭션 속성 TransacitonAdvice 의 트랜잭션 경계설정 코드를 다시 살펴보자 public Object invoke(MothodInvocation invocation) throws Throwable { TransactionStatus status = t...
6장 AOP - 6.5 스프링 AOP
6.5 스프링 AOP 지금까지 해온 작업은 비즈니스 로직에 반복적으로 등장하는 트랜잭션 코드를 깔끔하고 효과적으로 분리해내는 것이다. 6.5.1 자동 프록시 설정 부가기능을 적용하는 과정에서 있었던 문제는 대부분 해소되었다. 타깃 코드는 여전히 깔끔한 채로 남아있고, 부가기...
6장 AOP - 6.4 스프링의 프록시 팩토리 빈
6.4 스프링의 프록시 팩토리 빈 6.4.1 ProxyFactoryBean 자바에는 JDK 에서 제공해주는 다이내믹 프록시 외에도 프록시를 만들 수 있는 다양한 기술이 존재한다. 따라서 스프링은 일관된 방법으로 프록시를 만들 수 있게 도와주는 추상 레이어를 제공한다. 스프링...
6장 AOP - 6.3 다이내믹 프록시와 팩토리 빈
6.3 다이내믹 프록시와 팩토리 빈 6.3.1 프록시와 프록시 패턴, 데코레이터 패턴 단순히 확장성을 고려해서 한 가지 기능을 분리한다면 전형적인 전략 패턴을 사용하면 된다. 전략 패턴을 통해 트랜잭션 기능의 구현을 분리해냈지만 트랜잭션 코드는 그대로 남아있었다. 트랜잭션이...
6장 AOP - 6.2 고립된 단위 테스트
6.2 고립된 단위 테스트 가장 편하고 좋은 테스트 방법은 가능한 한 작은 단위로 쪼개서 테스트하는 것이다. 6.2.1 복잡한 의존관계 속의 테스트 UserService 의 구현 클래스가 동작하려면 세 가지 타입의 의존 오브젝트가 필요하다. 원래 UserServiceTest...
6장 AOP - 6.1 트랜잭션 코드의 분리
AOP 는 Ioc/DI, 서비스 추상화와 더불어 스프링의 3대 기반기술의 하나다. 스프링에 적용된 가장 인기 있는 AOP 의 적용 대상은 바로 선언적 트랜잭션 기능이다. 6.1 트랜잭션 코드의 분리 비즈니스 로직이 주인이어야 할 메소드 안에 이름도 길고 무시무시하게 생긴 트랜...
2022
5장 서비스 추상화 - 5.4 메일 서비스 추상화
5.4 메일 서비스 추상화 5.4.1 JavaMail을 이용한 메일 발송 기능 레벨이 업그레이드 되는 사용자에게 안내 메일을 발송하는 기능을 만들어보겠습니다. 먼저 email 필드를 추가하고 테스트를 해 봅니다. User 테이블에 email 필드를 추가 User 클...
5장 서비스 추상화 - 5.3 서비스 추상화와 단일 책임 원칙
5.3 서비스 추상화와 단일 책임 원칙 수직, 수평 계층구조와 의존관계 추상화 기법을 이용하면 특정 기술환경에 종속되지 않는 코드를 만들 수 있습니다. UserService, UserDao 를 관심사에 따라 어플리케이션 비즈니스 로직을 분리한 것을 수평적인 분리라고 합니다. ...
5장 서비스 추상화 - 5.2 트랜잭션 서비스 추상화
5.2 트랜잭션 서비스 추상화 사용자 레벨 조정 작업 중간에 문제가 발생하면 그때까지 진행되었던 모든 변경 작업을 모두 취소시키도록 하는 기능을 추가합니다. 5.2.1 모 아니면 도 작업 수행 중 예외가 던져지는 상황을 의도적으로 만들어서 테스트해 봅니다. 테스트용 User...
5장 서비스 추상화 - 5.1 사용자 레벨 관리 기능 추가
5.1 사용자 레벨 관리 기능 추가 UserDao 에 비즈니스 로직을 추가해 봅니다. 사용자 관리 기능에서 구현해야하는 비즈니스 로직은 다음과 같습니다. 사용자의 레벨은 BASIC, SILVER, GOLD 세 가지 중 하나다. 사용자가 처음 가입하면 BASIC 레벨이...
RSS 리더 Feedly
RSS 리더 Feedly https://feedly.com/ 피들리는 RSS(Rich Site Summary) 리더이다. RSS 리더는 블로그를 구독할 수 있는 서비스라고 보면 된다. RSS 리더를 이용해서 여러 개의 블로그를 구독해두면 새 글이 올라올 때 알림이나 표시를 ...
4장 예외 - 4.2 예외 전환
4.2 예외 전환 예외를 다른 것으로 바꿔서 던지는 예외 전환의 목적은 두 가지이다. 하나는 런타임 예외로 포장해서 굳이 필요하지 않는 catch/throws 를 줄여주는 것이다. 다른 하나는 로우레벨의 예외를 좀 더 의미 있고 추상화된 예외로 바꿔서 던져주는 것이다. 4....
4장 예외 - 4.1 사라진 SQLException
4.1 사라진 SQLException deleteAll() 메소드의 정의를 들여다보면 JdbcTemplate 적용 이전에 있었던 throws SQLException 이 사라진 것을 알 수 있다. // JdbcTemplate 적용 전 public void deleteAll() t...
3장 템플릿 - 3.6 스프링의 JdbcTemplate
https://www.yes24.com/Product/Goods/7516911 3장 템플릿 3.6 스프링의 JdbcTemplate 스프링의 템플릿/콜백 기술을 살펴보자. 스프링이 제공하는 JDBC 코드용 기본 템플릿은 JdbcTemplate 이다. UserDao 가 Jdb...
무료 백엔드 서비스
새로 발견한 무료 백엔드 서비스 유튜브를 보다가 무료 백엔드 서비스를 하는 곳을 찾게 되었다. https://www.youtube.com/watch?v=SGGebq48h3Y cloudtype 과 railway 이다. cloudtype https://cloudtype.io/...
openAI
openAI 스터디원으로부터 openAI 에 대해 알게 되었다. https://beta.openai.com/overview 회원가입을 하면 playgroud 에서 AI 테스트를 해볼 수 있다. https://beta.openai.com/playground 아래는 연속합 문...
heroku free dynos 종료
Heroku free dynos 가 종료되었다. 사실 몇번의 메일이 왔었지만 대충 읽어서 Postgres 와 Redis 만 유료대상이 되는줄 알았다. https://blog.heroku.com/next-chapter#focus-on-mission-critical We w...
PKM & GoodNotes 5 장비간 연동하기
PKM: Personal Knowledge Management Notion 을 대신할만한 PKM 을 찾고 있다. PKM 은 개인용 지식관리툴이다. PKM Tools Notion vs Obsidian vs LogSeq logseq 와 obsidian 이라는 PKM 이 유명한...
3장 템플릿 - 3.5 템플릿과 콜백
https://www.yes24.com/Product/Goods/7516911 3장 템플릿 3.5 템플릿과 콜백 전략 패턴은 바뀌지 않는 작업 흐름이 존재하고 그 중 일부분만 바꿔서 사용해야 하는 경우 적합한 패턴이다. 앞서 작성된 UserDao, StatementStrat...
3장 템플릿 - 3.4 컨텍스트와 DI
https://www.yes24.com/Product/Goods/7516911 3장 템플릿 3.4 컨텍스트와 DI 3.4.1 jdbcContext 의 분리 전략 패턴의 구조로 보면 UserDao() 메소드 : 클라이언트 익명 내부 클래스 : 개별적인 전략 jd...
3장 템플릿 - 3.3 JDBC 전략 패턴의 최적화
https://www.yes24.com/Product/Goods/7516911 3장 템플릿 3.3 JDBC 전략 패턴의 최적화 3.3.1 전략 클래스의 추가 정보 add() 메소드에는 부가정보인 User 가 필요하다. AddStatement 클래스를 만들고 생성자를 통해 ...
맥북 배터리 관리 프로그램 Aldente
homebrew 로 받기 $ brew install --cask aldente Aldente 는 배터리를 일정 % 이상 충전되지 못하게 하는 프로그램이다. 그래서 배터리 보호에 탁월하고, 맥북을 더욱 오래 쓸 수 있게 해준다. 지금 사용하는 맥북은 사이클 100에 성능 최...
UI/UX Design 관련 정보들
UI/UX Design 관련 정보들 유튜브를 통해 알게된 UI/UX Design 관련 정보들 디자인 시스템 구글: https://material.io/design 애플: https://developer.apple.com/design/human-interface-guid...
마크 다운에 Tip, Info 등 과 접을 수 있는 블록 작성하기
마크 다운에 Tip, Info 등 과 접을 수 있는 블록 작성하기 마크 다운 문서에 준수 사항 admonitions 을 작성할 수 있다. 노트 :::note All files prefixed with an underscore (_) under the docs director...
3장 템플릿 - 3.2 변하는 것과 변하지 않는 것
https://www.yes24.com/Product/Goods/7516911 3장 템플릿 3.2 변하는 것과 변하지 않는 것 3.2.1 JDBC try/catch/finally 코드의 문제점 try/catch 로 예외 시에 리소스를 반환하지 않고 종료되는 것은 해결했지만 ...
3장 템플릿 - 3.1 다시 보는 초난감 DAO
3장 템플릿 객체지향 설계의 핵심 원칙인 개방 폐쇄 원칙 OCP 을 다시 한번 생각해보자 템플릿이란 이렇게 바뀌는 성질이 다른 코드 중에서 변경이 거의 일어나지 않으며 일정한 패턴으로 유지되는 특성을 가진 부분을 자유롭게 변경되는 성질을 가진 부분으로 독립시켜서 효과적으로 활용...
docusaurus Algolia 적용하기
이 함수가 이해되는가? add2(3) 의 결과는 무엇일까? const calcWith2 = (op) => (num) => op(2, num); const add = (num1, num2) => num1 + num2; const add2 = calcWith2(...
나를 향해 걷는 열 걸음 - 열 번째 걸음
나를 향해 걷는 열 걸음 - 열 번째 걸음 유성룡의 ‘징비록’ 우리가 더 나은 사회로 도약하기 위해서는 생각하는 힘을 키워야 한다. 생각하는 능력을 발휘하는 자를 독립적 주체라고 한다. 스스로와 비교로 자기를 굳건히 세울 수 있는 사람이다. 성공하는 인간의 가장 큰 특징은...
나를 향해 걷는 열 걸음 - 아홉 번째 걸음
나를 향해 걷는 열 걸음 - 아홉 번째 걸음 루쉰의 ‘아Q정전’ 자기 자신을 향해 걷는 일이 제일 힘들다. 나는 내 속에서 스스로 솟아나는 것 바로 그것을 살아보려고 했다. 그것이 왜 그토록 어려웠을까? - 데미안 자기 자신을 향해 어려운 길을 걷는 사람에게는 건너가는...
나를 향해 걷는 열 걸음 - 여덟 번째 걸음
나를 향해 걷는 열 걸음 - 여덟 번째 걸음 이솝의 ‘이솝우화’ 이야기는 한 곳에 멈춰 있는 논증이나 논변과는 다른 표현 형식이다. 여행, 이야기, 질문하는 인간은 건너가기 위한 일이다. 옳은 것을 따르는 삶에 묶이지 않고 나만의 신화를 쓰는 삶을 살아야 한다. 내 스토리...
docusaurus Algolia 적용하기
https://docsearch.algolia.com/docs/legacy/run-your-own 문서를 보고 Algolia 를 적용했다. 만약 algolia 계정이 없다면 하나 생성하여야 한다. 설정파일인 config.json 파일을 만든다. $ ./docsearch boo...
2장 테스트 - 2.5 학습 테스트로 배우는 스프링
2장 테스트 2.5 학습 테스트로 배우는 스프링 자신이 만들지 않은 프레임워크나 라이브러리를 사용하기 위해 테스트 코드를 작성하는 경우가 있다. 이런 테스트를 학습 테스트 learning test 라고 한다. 학습 테스트의 목적은 기능에 대한 검증도 있지만 해당 기능을 얼마...
2장 테스트 - 2.4 스프링 테스트 적용
https://www.yes24.com/Product/Goods/7516911 2장 테스트 2.4 스프링 테스트 적용 현재까지 만들어진 코드로는 어플리케이션 컨텍스트가 각 테스트가 실행될 때마다 생성된다. 총 3번 만들어진다. 테스트를 가능한 독립적으로 하기 위해 매번 새...
나를 향해 걷는 열 걸음 - 일곱 번째 걸음
나를 향해 걷는 열 걸음 - 일곱 번째 걸음 조너선 스위프트의 ‘걸리버 여행기’ 영웅들은 전부 자기를 섬기는 사람들이다. 인간이 자기 자신을 향해 나아가는 일보다 더 하기 싫은 일은 없다 - 헤르만 헤세 익숙함 속에서는 적절한 거리를 유지하며 자기를 바라보는 것이 쉽...
나를 향해 걷는 열 걸음 - 네 번째 걸음
나를 향해 걷는 열 걸음 - 여섯 번째 걸음 조지 오웰의 ‘동물농장’ 자기를 섬기는 사람들이 정치적 행위를 할 때, 그들의 정치는 매우 건강하다. 자기를 섬기는 것이 정치에 있어서도 근본이 된다. 스스로 혁명한다는 말은 스스로를 섬긴다는 의미이다. 스스로 혁명하지 못한 사...
생활코딩의 ‘react 2022 개정’
생활코딩의 ‘react 2022 개정’ 강의와 따라하기 Repository https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 https://github.com/cmjeon/my-react-...
2장 테스트 - 2.3 개발자를 위한 테스팅 프레임워크 JUnit
2장 테스트 2.3 개발자를 위한 테스팅 프레임워크 JUnit JUnit 프레임워크는 폭넓게 사용되는 사실상 자바의 표준 테스팅 프레임워크이다. 2.3.1 JUnit 테스트 실행 방법 가장 좋은 JUnit 테스트 실행 방법은 IDE 에 내장된 JUnit 테스트 지원 도구를 ...
2장 테스트 - 2.2 UserDaoTest 개선
2장 테스트 2.2 UserDaoTest 개선 2.2.1 테스트 검증의 자동화 테스트를 눈으로 확인해야하는 부분을 개선해본다. 모든 테스트는 성공과 실패의 두 가지 결과를 가질 수 있다. UserDaoTest 클래스의 마지막 부분을 수정한다. public class Us...
나를 향해 걷는 열 걸음 - 다섯 번째 걸음
나를 향해 걷는 열 걸음 - 다섯 번째 걸음 어니스트 헤밍웨이의 ‘노인과 바다’ full commitment 완전한 전념 인생은 자기를 드러내고 단련하는 과정이어야 한다. 자기 삶을 살지 않으면 내 안의 진실성이 온전히 드러날 수 없다. 노인과 바다의 스토리는 단순하다. ...
2장 테스트 - 2.1 UserDaoTest 다시 보기
https://www.yes24.com/Product/Goods/7516911 2장 테스트 스프링이 개발자에게 제공하는 가장 중요한 가치는 객체지향과 테스트라고 말할 수 있다. 애플리케이션은 계속 변하고 복잡해져 간다. 그 변화에 대응할 수 있는 방법이 확장과 변화를 고려...
1장 오브젝트와 의존관계 - 1.8 XML 을 이용한 설정
1장 오브젝트와 의존관계 1.8 XML 을 이용한 설정 범용 DI 컨테이너를 사용하면서 오브젝트간 의존정보를 DaoFactory 같은 자바 코드로 만드는 것은 번거롭다.
1장 오브젝트와 의존관계 - 1.7 의존관계 주입(DI)
1장 오브젝트와 의존관계 1.7 의존관계 주입(DI) 1.7.1 제어의 역전(loC)과 의존관계 주입 스프링의 IoC 에 대해 깊이 알아본다. IoC 는 소프트웨어에서 자주 발견되는 일반적인 개념이다. DaoFactory 처럼 객체를 생성하고 관계를 맺어주는 등의 작업을 ...
1장 오브젝트와 의존관계 - 1.6 싱글톤 레지스트리와 오브젝트 스코프
1장 오브젝트와 의존관계 1.6 싱글톤 레지스트리와 오브젝트 스코프 스프링 애플리케이션 컨텍스트와 직접 만든 DaoFactory 에는 리턴되는 UserDao 에 결정적인 차이가 있다. 자바에서는 완전히 같은 동일한(identical) 오브젝트와 동일한 정보를 담고 있는(...
1장 오브젝트와 의존관계 - 1.5 스프링의 IoC
1장 오브젝트와 의존관계 1.5 스프링의 IoC 스프링의 핵심을 담당하는 건 ‘빈 팩토리’ 또는 ‘애플리케이션 컨텍스트’라고 불리우는 것이다. 이 두가지는 앞에서 만든 DaoFactory 를 일반화한 것이다. 1.5.1 오브젝트 팩토리를 이용한 스프링 IoC 스프링에서는 ...
1장 오브젝트와 의존관계 - 1.4 제어의 역전(IoC)
1장 오브젝트와 의존관계 1.4 제어의 역전(IoC) 1.4.1 오브젝트 팩토리 UserDaoTest 가 하던 UserDao 에 ConnectionMaker 을 등록하는 일을 맡길 UserDaoFactory 를 만든다. public class UserDaoFactory { ...
1장 오브젝트와 의존관계 - 1.3 DAO 의 확장
1.3 DAO 의 확장 관심사에 따라 분리한 오브젝트들은 제각기 독특한 변화의 특징을 가진다. 변화의 특징이 있다는 것은 변화의 이유와 시기 등이 다르다는 뜻이다. 추상 클래스를 만들고 이를 상혹산 서브클래스에서 변화가 필요한 부분을 바꿔서 쓸 수 있게 만든 이유는 변화의 성...
1장 오브젝트와 의존관계 - 1.2 DAO 의 분리
1.2 DAO 의 분리 1.2.1 관심사의 분리 객체지향의 세계에서는 모든 것이 변한다. 여기서 변한다는 것은 변수나 오브젝트 필드의 값이 변한다는 게 아니다. 오브젝트에 대한 설계와 이를 구현한 코드가 변한다는 뜻이다. … 사용자의 비즈니스 프로세스와 그에 따른 요구사항...
1장 오브젝트와 의존관계 - 1.1 초난감 DAO
스프링이 가장 관심을 많이 두는 대상은 오브젝트다. 오브젝트에 대한 관심은 오브젝트 설계 방법인 디자인 패턴, 구조를 개선하는 리팩토링, 검증하는데 쓰이는 테스트를 발전시켰다. 1.1 초난감 DAO 1.1.1 User 사용자 정보를 저장하기 위해 자바빈 규약을 따르는 Use...
docusaurus.config.js 설정
docusaurus.config.js 설정 script 와 stylesheet 추가하는 방법 module.exports = { // ... scripts: [ { src: 'https://cdn.jsdelivr.net/npm/mermaid/dist/me...
markdown 에 diagram 그려넣을 수 있는 mermaid
markdown 에 diagram 그려넣을 수 있는 mermaid markdown 에 표를 이용하여 로그인 개편 방안을 기록하려니까 Sequence Diagram 으로 그리고 싶어졌다. 이미 내가 알고 있는 Sequence Diagram 그리는 도구인 https://plantu...
docusaurus 에서 draft 문서로 남기는 법
docusaurus 에서 draft 문서로 남기는 법 문서를 쓰다가 잠시 저장하고 싶을 때는 frontmatter 에 draft: true 라고 남기면 된다. --- date: 2022-10-29 title: '2022년 10월 29일' authors: [cmjeon] tags...
드림투두 로그인 기능 개편
드림투두 로그인 기능 개편 드림투두 백엔드의 로그인 기능을 개편한다. 시나리오별 프론트엔드 / 백엔드 행동을 생각해보았다. 시나리오1. 최초에 Token 을 발급받는 경우 - Frontend Backend 비고 - 로그인을 한다. - Access/R...
Naver 서치어드바이저 활용하기
Naver 서치어드바이저 활용하기 Naver 에 서치어드바이저를 활용해서 사이트의 검색 최적화에 도움을 받을 수 있다. 먼저 사이트의 소유권을 확인해야 한다. Naver 에서 제공하는 값을 docusaurus.config.js 의 metadata 에 등록한다. module....
PWA 용 로고 만들기
PWA 용 로고 만들기 PWA 로고를 교체했는데 문제가 있는지 PWA 로 구동되지 않았다. A maskable icon ensures that the image fills the entire shape without being letterboxed when installi...
docusaurus Google Adsense 적용하기
docusaurus Google Adsense 적용하기 먼저 Google Adsense 에 접속해서 clientId 를 얻는다. 사이트를 등록하면 아래와 같은 스크립트를 제공해준다. <script async src="https://pagead2.googlesyndicat...
docusaurus navbar 에 github 아이콘 설정하기
docusaurus navbar 에 github 아이콘 설정하기 상단 내비게이션바에서 github 링크를 만드려면 docusaurus.config.js 에서 설정을 하면 된다. docusaurus.config.js 에서 navbar 설정을 한다. // ... const con...
docusaurus v2 pwa 설정하기
docusaurus v2 pwa 설정하기 docusaurus 에는 pwa 를 지원한다. PWA 는 Progressive Web App, 웹페이지를 앱처럼 쓸 수 있게 해주는 것이다. 웹페이지를 앱처럼 쓸 수 있게 해주기 위해 제공되는 기능 중 괜찮은 것은 휴대폰의 홈에 아이콘...
docusaurus v2 로 블로그 이전
docusaurus v2 로 블로그 이전 원래 github.io 에서 jekyll 을 사용해서 블로그를 쓰고 있었다. jekyll 은 간편하게 개인 블로그 생성, 내용을 작성할 수 있었고, github.io 에 배포되는 등 특별히 불편함을 찾을 수 없는 훌륭한 도구었다. 하지...
jwt 로 인증하기
jwt 로 인증하기 현재 쿠키안에 jwt 로 인증을 관리하고 있다. 테스트를 하는 과정에서 jwt 로 인증을 관리하는 방식에 문제가 좀 있다는 것을 알게 되었다. 무슨 문제냐면 jwt 는 최초 로그인할 때 서버쪽에서 유효기간을 써서 클라이언트에 발급을 해준다. 일단 발급된 ...
vue.js 에서 v-for force re-rendering 하기
vue.js 에서 v-for force re-rendering 하기 v-for 로 만든 자식 컴포넌트에서 사용자가 입력한 값을 부모 컴포넌트에서 확인하였더니 값을 잘못 입력한 경우, 원래의 값을 다시 표시해 줄 수 있는 방법이다. 처음에는 컴포넌트에 초기값을 보관한 뒤에 res...
vue.js 에서 Intersection Observer API 이용하기
vue.js 에서 Intersection Observer API 이용하기 https://velog.io/@kbpark9898/Vue-intersection-observer%EB%A1%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%ED%83%90%EC%A7%80%ED%9...
나를 향해 걷는 열 걸음 - 네 번째 걸음
나를 향해 걷는 열 걸음 - 네 번째 걸음 헤르만 헤세의 ‘데미안’ 자기만의 행복을 생산하려는 존재가 아니라 정해진 행복에 다가가려고 애쓰는 사람들은 오히려 소외된다. 행복이라고 하는 것은 이미 존재하는 관념이기 때문이다. 나만의 것이 아니다. 죽기 전까지 우리에게 부여된...
2022 우와콘 - 합이 좋은 PM과 디자이너, 비결이 궁금하신가요?
2022 우와콘 - 합이 좋은 PM과 디자이너, 비결이 궁금하신가요? https://youtu.be/3TDD_eJ0qOY?t=437 PM 과 프로덕트 디자이너는 직군은 다르지만 함께 고민하는 영역이 있다. 주문접수채널팀의 Frontend 와 배민사장님광장팀의 Backend 의...
나를 향해 걷는 열 걸음 - 세 번째 걸음
나를 향해 걷는 열 걸음 - 세 번째 걸음 알베르 카뮈의 ‘페스트’ 작품을 이해할 때 작가에 대해 살펴보는 것도 의미가 있다. 카뮈는 높은 수준의 사유와 시각을 가지고 있었던 것으로 보인다. 이방인, 시시포스의 신화, 페스트 등을 지었으며 “우리 시대의 인간의 정의를 탁월한...
나를 향해 걷는 열 걸음 - 두 번째 걸음
나를 향해 걷는 열 걸음 - 두 번째 걸음 생텍쥐페리의 ‘어린 왕자’ ‘어린 왕자’를 읽으면 인간과 인생에 대한 생텍쥐페리의 깊은 통찰을 느낄 수 있다. 생텍쥐페리에게 모험은 자신의 소명을 숭고한 단계로 승화하는 활동이었다. 우리가 하는 건너가기도 사실은 모험이다. 인간답...
나를 향해 걷는 열 걸음 - 첫 번째 걸음
https://product.kyobobook.co.kr/detail/S000061451086 나를 향해 걷는 열 걸음 - 첫 번째 걸음 미겔 데 세르반테스의 ‘돈키호테’ 지금 우리 사회에 ‘돈키호테’가 필요하다. 인간은 건너가는 존재이다. 건너가는 존재란 생각도 몸도 지...
Spring REST Docs
## 참고 https://docs.spring.io/spring-restdocs/docs/current/reference/html5/
Spring Class MockMvc
## 참고 https://docs.spring.io/spring-restdocs/docs/current/reference/html5/
Spring Mockito
## 참고 https://site.mockito.org/
assertj
## 참고 https://site.mockito.org/
JUnit 5 알아보기
JUnit 5 란? https://junit.org/junit5/docs/current/user-guide/ Junit 5 는 자바의 테스팅 프레임워크 5번째 버전임 The 5th major version of the programmer-friendly testing f...
TDD 알아보기
TDD 란? Test Driven Development 테스트 코드를 먼저 만들고 프로덕션 코드를 나중에 만드는 개발 방법 프로그램을 작성하기 전에 테스트를 먼저 작성하라 - 켄트 벡 짧은 주기의 피드백을 받으며 프로그래미가 더 큰 코드를 작성해 나가는 개발방법론 ...
JUnit 5 연습하기 - 001
JUnit 5 연습하기 인프런 강좌 “더 자바, 애플리케이션을 테스트하는 다양한 방법” 에서 Junit 5 부분을 발췌 강좌 URL https://www.inflearn.com/course/the-java-application-test/ 소개 JUnit 5 는 자바 개발자가...
UX/UI 시작하기 : UX 개념 - 003
UX/UI 트렌드 알기 UX 환경 분석 트렌드 트렌드 : 새롭게 인간의 삶에 영향을 미치는 경향이나 추세 트렌드 > 사람 > 제품/서비스 > 마켓 => 설득력있는 제안 fad > Trend > Mega Trend 기술 수용 주기 혁신가...
UX/UI 시작하기 : UX 개념 - 002
UX 디자인 프로세스 따라잡기 UX 디자인 프로세스 UX 디자인 프로세스 : UX를 분명한 목표로 문제를 해결하는 과정 제품 중심 프로세스 : 제품의 최종 및 중간 산출물 지향 착수 > 계획 > 실행 > 통제 > 완료 UX 중심의 프로세스 : 사용자 ...
UX/UI 시작하기 : UX 개념 - 001
UX/UI 시작하기 UX 디자인 기본 개념 UX User Experience : 서비스 전반에 대한 종합적인 경험 UI User Interface : 사용자와 기술이 만나는 인터페이스 이자 접점 UX 역할 : 기술이 일상에 정착하기까지 기술과 사용자간 거리를 좁히는 것 U...
정규표현식 실습해보자
정규표현식 실습해보자 정규표현식은 규칙에 맞는 문자열을 찾는 방법 /[A-Z]\w+/g : 대문자 A-Z 로 시작하는 아무 문자 앞 뒤의 / 는 정규표현식의 시작과 끝을 나타냄 g 위치는 flags g는 정규표현식에 맞는 모든 문자열을 찾는 것 flags 는 이번 내용에서...
리팩터링2 스터디 - 012 - 2
12장 상속 다루기 12.8 슈퍼클래스 추출하기 배경 비슷한 일을 수행하는 두 클래스가 보이면 상속 메커니즘을 이용해서 비슷한 부분을 공통의 슈퍼클래스로 옮겨 담을 수 있다. 상속은 프로그램이 성장하면서 깨우쳐가게 되며, 슈퍼클래스로 끌어올리고 싶은 공통 요소를 찾았을 때 ...
리팩터링2 스터디 - 012 - 1
12장 상속 다루기 12.1 메소드 올리기 배경 중복 코드 제거는 중요하다. 중복된 메서드가 지금 당장은 문제없이 동작하더라도, 미래에 벌레가 꼬이는 음식물 쓰레기로 전락할 수 있다. 무언가 중복 된다는 것은 수정 사항이 한쪽에는 반영 되지 않을 수 있다는 위험을 항상 수반...
리팩터링2 스터디 - 011 - 2
11장 API 리팩터링 11.7 세터 제거하기 Remove Setting Method // ASIS class Person { get name() { ... } set name(aString) { ... } } // TOBE class Person { get nam...
리팩터링2 스터디 - 011 - 1
11장 API 리팩터링 모듈과 함수는 소프트웨어를 구성하는 빌딩 블록이고, API 는 이 블록들을 끼워 맞추는 연결부다. 좋은 API 는 데이터를 갱신하는 함수와 그저 조회만 하는 함수를 명확히 구분한다. 클래스는 대표적인 모듈이고, 객체가 되도록 불변으로 존재하면 좋다. ...
리팩터링2 스터디 - 010 - 2
10장 조건부 로직 간소화 10.5 특이 케이스 추가하기 Introduce Special Case 배경 특정 값을 확인한 후 똑같은 동작을 수행하는 코드가 곳곳에 있으면 중복 코드이다. 특정 값에 대한 똑같이 반응하는 코드가 여러 곳이라면 그 반응들을 한 데로 모으는 게 효...
리팩터링2 스터디 - 010 - 1
10장 조건부 로직 간소화 10.1 조건문 분해하기 Decompose Conditional 배경 복잡한 조건부 로직은 프로그램을 복잡하게 만드는 가장 흔한 원흉에 속한다. 긴 함수는 그 자체로 읽기가 어렵지만, 조건문은 그 어려움을 한층 가중시킨다. 거북한 코드 블록이 주...
리팩터링2 스터디 - 009 - 1
9장 데이터 조직화 9.1 변수쪼개기 Split Variable // ASIS let temp = 2 * (height + width); console.log(temp); temp = height * width; console.log(temp); // TOBE const pe...
리팩터링2 스터디 - 008 - 2
8장 기능 이동 8.6 문장 슬라이드하기 배경 관련된 코드들이 가까이 모여 있다면 이해하기가 더 쉽다. 하나의 데이터 구조를 이용하는 문장들은 한데 모여 있어야 좋다. 문장 슬라이드하기 리팩터링으로 코드를 한데 모을 수 있다. 모든 변수 선언을 함수 첫머리에 모아두는 사...
리팩터링2 스터디 - 008 - 1
8장 기능 이동 8.1 함수 옮기기 Move Function 배경 좋은 소프트웨어 설계의 핵심은 모듈성(Modularity)이다. 모듈성이란 프로그램 어딘가 수정하려 할 때 해당 기능과 관련된 작은 일부만 이해해도 가능하게 해주는 능력이다. 모듈성을 높이려면 연관된 요소들...
리팩터링2 스터디 - 007 - 2
7장 캡슐화 7.6 클래스 인라인하기 Inline Class // ASIS class Person { get officeAreaCode() { return this._telephoneNumber.areaCode; } get officeNumber() { ...
리팩터링2 스터디 - 007 - 1
7장 캡슐화 모듈을 분리하는 가장 중요한 기준은 각 모듈이 다른 모듈을 상대로 자신의 비밀을 얼마나 잘 숨기느냐에 있다. 데이터 구조는 ‘레코드 캡슐화하기’와 ‘컬렉션 캡슐화하기’로 숨긴다. 기본형 데이터 역시 ‘기본형을 객체로 바꾸기’로 캡슐화할 수 있다. 임시 변수가 많...
리팩토링2 스터디 - 006 - 2
6장 기본적인 리팩터링 6.6 변수 캡슐화하기 Encapsulate Variable // ASIS let defaultOwner = { firstName: "마틴", lastName: "파울러" }; // TOBE let defaultOwnerData = { firstName...
클린코드 스터디 회고 - 002
클린코드 리뷰 - 002 오류처리에 대해 깨끗한 코드를 만들려면 오류처리를 잘 해야 한다. 오류코드를 반환하기 보다는 예외를 던지고 예외처리 함수에 예외처리를 맡긴다. 꼭 확인된 예외로 처리할 필요는 없다. 미확인 예외로도 소프트웨어 구현에 무리없다. 예외를 던질 때 연산...
클린코드 스터디 회고 - 001
클린코드 리뷰 - 001 21년 11월 3일부터 22년 1월 19일까지 클린코드 북스터디를 진행하였다. 4명의 동료들과 서로 의지하며 마무리한 정말 값진 경험이었다. 클린코드는 소프트웨어 설계원칙, TDD 등을 다시금 상기시켜주는 고마운 책이다. 나는 클린코드를 타인이 이해...
리팩토링2 스터디 - 006 - 1
6장 기본적인 리팩터링 가장 기본적인 리팩터링들로 시작한다. ‘함수 추출하기’와 ‘변수 추출하기’를 가장 많이 사용하게 된다. 이 기법의 반대인 ‘함수 인라인하기’, ‘변수 인라인하기’도 자주 사용한다. 추출은 결국 이름 짓기이며, 코드 이해도가 높아지면 이름을 바꿔야할 때가...
리팩토링2 스터디 - 005
5장 리팩터링 카탈로그 보는 법 리팩터링 설명 형식 이름 : 가장 먼저 이름이 나온다. 개요 : 리팩터링의 핵심 개념을 간략히 표현한 개요가 나온다. 나중에 다시 찾아볼 때 이 기법이 어떤 것인지 쉽게 떠올리게 도와준다. 배경 : 해당 리팩터링 기법이 왜 필요한지와...
클린코드 스터디 - 017
17장 냄새와 휴리스틱 휴리스틱(heuristics) 또는 발견법(發見法)이란 불충분한 시간이나 정보로 인하여 합리적인 판단을 할 수 없거나, 체계적이면서 합리적인 판단이 굳이 필요하지 않은 상황에서 사람들이 빠르게 사용할 수 있는 어림짐작의 방법이다. 마틴 파울러의 R...
클린코드 스터디 - 016
16장 SerialDate 리팩터링 SerialDate 는 org.jfree.date 라는 패키지에 있는 날짜를 표현하는 자바 클래스임 이 장에서는 SerialDate 를 리팩토링 해보겠음 p.448 부록 B-1 은 리팩토링 전 코드 p.512 부록 B-7 은 리팩토링 ...
리팩토링2 스터디 - 004
4장 테스트 구축하기 도입부 리팩토링을 제대로 하려면 불가피하게 저지르는 실수를 잡아주는 견고한 테스트 스위트(test suite)가 뒷받침돼야 한다 자가 테스트 코드의 가치 테스트를 작성하고 결과를 일일이 확인하지말고 결과값이 예상값과 같으면 화면에 “OK”만...
클린코드 스터디 - 015
15장 Junit 들여다보기 JUnit 은 Java 용 유닛 테스트 프레임워크 이다. https://ko.wikipedia.org/wiki/JUnit JUnit 프레임워크 들어가면서.. 이번 장은 JUnit 중 ComparisonCompactor 라는 모듈을 보이스카...
클린코드 스터디 - 014
14장 점진적인 개선 Args 를 만들었고 사용법을 확인해보자 Args 생성자에 형식 문자열(”l,p#,d*”)과 인수 문자열(args)을 넘겨 인스턴스를 생성한다. 생성한 인스턴스에 인수값을 질의해서 가져올 수 있다. public static void main(String...
클린코드 스터디 - 013
13장 동시성 객체는 처리의 추상화다. 스레드는 일정의 추상화다. 동시성과 깔끔한 코드는 양립하기 어렵다. 동시성이 필요한 이유? 동시성은 결합(coupling)을 없애는 전략이다. 즉, 무엇(what)과 언제(when)을 분리하는 전략이다. 무엇과 언제를 분리하면 애플리...
리팩토링2 스터디 - 003
3장 코드에서 나는 악취 리팩터링의 작동 원리를 아는 것 만큼 리팩터링 시점을 아는 것은 중요하다 이 책에서 리팩터링을 언제 해야하는지에 대한 명확한 기준을 제시하지는 않지만 문제의 징후를 제시해보겠다 기이한 이름 Mysterious Name 코드 이름은 단순하고 명료하게 ...
2021
리팩토링2 스터디 - 002
2장 리팩터링 원칙 리팩터링 정의 사전적 의미 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법 리팩토링의 특별한 원칙 코드가 항상 정상작동해야 한다. ...
리팩토링2 스터디 - 001
1장 리팩터링: 첫 번째 예시 자, 시작해보자 다양한 연극을 외주로 받아서 공연하는 극단이 있다. 극단은 비극과 희극을 공연해주고, 공연료를 받는다. 포인트는 공연료를 청구할 때 지급된다. 공연료 청구서를 출력하는 예시 프로그램은 https://github.com/cmje...
클린코드 스터디 - 012
12장 창발성 창발적 설계로 깔끔한 코드를 구현하자 착실하게 따르기만 하면 우수한 설계가 나오는 켄트 벡이 제시한 단순한 설계 규칙 4가지가 소프트웨어 설계 품질을 크게 높여준다. (Order by 중요도) 모든 테스트를 실행한다. 중복을 없앤다. 프로그래머 의도...
클린코드 스터디 - 011
11장 시스템 도시를 세운다면? 도시의 일상은 큰 그림을 그리는 사람도 있고, 작은 사항에 집중하는 사람이 있기 때문에 유지됨 도시가 잘 돌아가는 다른 이유는 적절한 추상화와 모듈화 이로 인해 큰 그림을 이해하지 못하더라도 개인과 개인이 관리하는 구성요소가 잘 돌아감 깨끗...
Webstorm 배우기 - 001
Webstorm 구매 Webstorm 은 Jetbrains 사의 javascript 용 IDE 임 Webstorm 유료툴이라 지금까지는 Visual Studio Code 를 썼기때문에 딱히 관심두지 않았음 최근 이직한 회사에서 Webstorm 이 지원되어, 회사에서는 Webs...
ffmpeg를 이용해 gif 파일 만들기 - 001
맥에서 캡쳐한 영상을 gif 로 만드는 방법 업무중에 구동되는 화면을 캡쳐해서 공유해야하는 일이 종종 생김 맥의 캡쳐프로그램으로 캡쳐를 하면 .mov 파일이 생기는데 이를 gif 로 변경하고 싶어서 알아봄 원하는 조건은 용량이 mov 보다 작고 사이즈 조절이 가능했으면 좋겠다...
클린코드 스터디 - 010
10장 클래스 클래스 체계 변수목록 : 정적 공개 상수 → 정적 비공개 변수 함수 : 공개 함수 → 비공개 함수 캡슐화 캡슐화를 풀어주는 결정은 항상 최후의 수단으로 사용한다. 테스트 코드가 함수를 호출하거나 변수를 사용해야 한다면, protected로 선언하여 ...
클린코드 스터디 - 009
9장 단위테스트 TDD 법칙 세 가지 첫째 법칙: 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다. 둘째 법칙: 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다. 셋째 법칙: 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작...
클린코드 스터디 - 008
8장 경계 외부 코드 사용하기 java.util.Map 의 예시를 살펴보자 Map 의 기능들은 확실히 유용하지만 위험도 크다 예컨데 map의 사용자라면 누구나 map 내용을 지울 권한이 있고, map 은 객체 유형을 제한하지 않음 한 번 Sensor 객체를 담는 Senso...
클린코드 스터디 - 007
7장 오류처리 뭔가 잘못될 가능성은 늘 존재한다. 뭔가 잘못되면 바로 잡을 책임은 바로 우리 프로그래머에게 있다. 깨끗한 코드와 오류 처리는 확실히 연관성이 있는데, 상당수 코드 기반은 전적으로 오류 처리 코드에 좌우된다. 코드 기반이 오류 처리만 한다는 의미가 아니라...
클린코드 스터디 - 006
6장 객체와 자료 구조 변수를 비공개로 정의하는 이유가 있다. 남들이 변수에 의존하지 않게 만들고 싶어서다. 자료 추상화 변수 사이에 함수라는 계층을 넣는다고 구현이 저절로 감춰지지 않는다. 구현을 감추려면 추상화가 필요하다! 그저 (형식 논리에 치우쳐) 조회 함수와 설정...
클린코드 스터디 - 005
5장 형식 맞추기 형식을 맞추는 목적 코드형식 —> 의사소통 —> 개발자의 의무 맨 처음 잡아놓은 형식 —> 용이성과 확장성에 지속적인 영향을 미침 원활한 소통을 장려하는 코드 형식 적절한 행 길이 유지 행의 크기는 클래스의 크기와 밀접하다. 즉, 행 길...
클린코드 스터디 - 004
4장 함수 나쁜 코드에 주석을 달지 마라. 새로 짜라. - 브라이언 W. 커니핸, P.J 플라우거 주석의 3가지 얼굴 잘 달린 주석은 그 어떤 정보보다 유용하다. 경솔하고 근거 없는 주석은 코드를 이해하기 어렵게 만든다. 오래되고 조잡한 주석은 거짓과 잘못...
클린코드 스터디 - 003
3장 함수 어떤 프로그램이든 가장 기본적인 단위는 함수이고, 따라서 함수를 잘 만드는 법은 중요함 작게 만들어라! 함수는 최대한 간결하게 만들어라 if/else/while 블럭을 만들면 내부에서 한 줄로 다른 함수를 호출해라 중첩구조가 생길만큼 함수가 커져서는 안된다 한...
클린코드 스터디 - 002
2장 의미있는 이름 의도를 분명히 밝혀라 int d; // 경과 시간(단위: 날짜) 이름 d는 아무 의미도 드러나지 않는다. 경과 시간이나 날짜라는 느낌이 안 든다. 측정하려는 값과 단위를 표현하는 이름이 필요하다. Int elapsedTimeInDays; Int days...
클린코드 스터디 - 001
1장 깨끗한 코드 나쁜 코드 나중은 결코 오지 않는다. 르블랑의 법칙 나쁜 코드로 치르는 대가 코드가 하도 엉망이라 프로젝트 진도가 안 나가는 경험도 있으리라. 나쁜 코드는 개발속도를 크게 떨어뜨린다. 프로젝트 초반에는 번개처럼 나가다가 1~2년만에 굼뱅이처럼 기어가는 팀도...
javascript-012 - 비동기의 꽃 Javascript async 와 await
async & await promise then 이어진 코드는 가독성이 다소 떨어짐 async 와 await 는 더 사용을 편리하게 하기 위한 syntactic sugar (ex. class) async function fetchUser() { // do netw...
javascript-011 - 프로미스 개념부터 활용까지 Javascript Promise
Promise Promise is a Javascript object for asynchronous operation State : pending -> fulfilled or rejected Promise 의 상태가 수행중(pending)인지, 수행완료(fulfilled...
javascript-010 - 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험
callback 자바스크립트는 동기적임 호이스팅(hoisting)된 이후 순서대로 실행됨 호이스팅(hoisting) : var, funciton 선언이 제일 위로 올라가는 현상 console.log('1'); console.log('2'); console.log('3');...
javascript-009 - JSON 개념 정리와 활용방법 및 유용한 사이트 공유 Javascript JSON
HTTP Client, Server 가 Request, Response 하는 프로토콜 ajax : asynchronous javascript and XML XHR : XMLHttpRequest ajax 요청을 생성하는 javascript API XML 은 HTML 와 같은 ...
My JSON Server 로 백엔드 API 서버 배포하기
My JSON Server 란 My JSON Server 는 db.json 이라는 하나의 파일로 API 서버를 구축할 수 있게 해주는 편리한 서비스임 db.json 을 github 에 업로드 함으로써 손쉽게 API 서버를 만들 수 있음 My JSON Server ...
nuxt.js 시작하기 - 005
쇼핑 상품 검색 UI 개발 검색 UI 컴포넌트화 components/SearchInput.vue 생성 <template> <div> <input type="text" /> <button>Search</butto...
nuxt.js 시작하기 - 004
쇼핑 상품 목록 페이지와 상세 페이지 개발 상품 목록 표시 기능 구현 pages/main.vue <template> <div> <p>상품 페이지입니다</p> <div> <ul> ...
nuxt.js 시작하기 - 003
Nuxt.js 의 데이터 호출 방식과 API 연동 백엔드 API 서버 구성 https://github.com/joshua1988/learn-nuxt/tree/master/backend 접속 $ git clone https://github.com/joshua1988/learn-...
nuxt.js 시작하기 - 002
Nuxt.js 프로젝트 시작하기 Nuxt.js 프로젝트 생성 프로젝트 생성 $ npm init nuxt-app learn-nuxt Project name : Enter Programming language : Javascript Package manager :...
nuxt.js 시작하기 - 001
Nuxt.js 소개 Nuxt.js 강의 소개 Server Side Rendering 을 구현할 때 가장 많이 사용되는 프레임워크 빠른 페이지 로딩 속도와 성능 최적화에 대한 해답 SEO 쇼핑몰 사이트를 제작하며 nuxt.js 기본 개념과 활용 방법 개발...
모든 개발자를 위한 HTTP 웹 기본 지식 - 009
다음으로 다음으로 HTTP 를 배우기 위해서는 기본적인 인터넷 네트워크에 대한 이해가 필요함 URI 와 웹 브라우저 요청 흐름 모든 것이 HTTP 클라이언트, 서버 구조 Stateful, Stateless : 가능한 무상태로 개발 HTTP API 와 HT...
모든 개발자를 위한 HTTP 웹 기본 지식 - 008
HTTP 헤더2 - 캐시와 조건부 요청 캐시 기본 동작 캐시가 없을 때 데이터가 변경되지 않아도 계속 네트워크를 통해 데이터를 받아야 함 인터넷 네트워크는 느리고 비쌈 브라우저 로딩 속도가 느려짐 -> 느린 사용자 경험 캐시 적용 클라이언...
모든 개발자를 위한 HTTP 웹 기본 지식 - 007
HTTP 헤더1 - 일반 헤더 HTTP 헤더 개요 HTTP 헤더 header-filed = field-name:OWSfield-valueOWS(ows:띄어쓰기 허용) field-name 은 대소문자 구분 없음 HTTP 헤더 분류 Request 헤더: 요청 ...
모든 개발자를 위한 HTTP 웹 기본 지식 - 006
HTTP 상태코드 HTTP 상태코드 소개 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 - 1xx (Informational) : 처리중 - 2xx (Successful) : 정상처리 - 3xx (Redirection) : 요청을 완료하려면 추가 행동 필요 - ...
모든 개발자를 위한 HTTP 웹 기본 지식 - 005
HTTP 메서드 활용 클라이언트에서 서버로 데이터 전송 데이터 전달 방식은 크게 2가지 쿼리 파라미터를 통한 데이터 전송 GET 주로 정렬 필터 메시지 바디를 통한 데이터 전송 POST, PUT, PAT...
모든 개발자를 위한 HTTP 웹 기본 지식 - 004
HTTP 메서드 HTTP API를 만들어보자 요구사항 회원 목록 조회 회원 조회 회원 등록 회원 수정 회원 삭제 API URI 설계? 회원 목록 조회 /read-member-list 회원 조회 /read-member-by-id 회원 등록 ...
모든 개발자를 위한 HTTP 웹 기본 지식 - 003
HTTP 기본 모든 것이 HTTP HyperText Transfer Protocol HTTP 메시지에 모든 것을 전송할 수 있음 HTML, TEXT image, 음성, 영상, 파일 json, xml(API) 거의 모든 형태의 데이터 전송 가능 서버간의 데...
모든 개발자를 위한 HTTP 웹 기본 지식 - 002
URI 와 웹 브라우저 요청 흐름 URI URI(Uniform Resource Identifier) Uniform : 리소스를 식별하는 통일된 방식 Resource : 자원, URI 로 식별할 수 있는 모든 것 Identifier : 다른 항목과 구분하는데 필요한...
모든 개발자를 위한 HTTP 웹 기본 지식 - 001
인터넷 네트워크 인터넷 통신 복잡한 인터넷 안에서 두 대의 컴퓨터는 어떻게 서로 통신할까? IP(인터넷 프로토콜) IP는 각 컴퓨터에 할당된 고유의 주소 지정한 IP 주소에 데이터 전달 패킷(Packet)이라는 통신 단위로 데이터 전달 IP 패킷은 전송 데이터를 감싼 ...
To-Do List 만들기 스터디 - 003
스터디 일지 스터디 일시 : 8/14 9시 ~ 13시 스터디 장소 : 강남역 12번 출구, 커피빈 스터디 내용 dailyToDoList 을 클론코딩해보기로 정함 요구사항 정의 로그인 Login 로그인 화면에서 이메일/비밀번호 입력하고 전송할 수 있어야 함 로그...
To-Do List 만들기 스터디 - 002
스터디 일지 스터디 일시 : 8/7 9시 ~ 13시 스터디 장소 : 강남역 12번 출구, 커피빈 스터디 내용 프론트엔드 로그인화면 레이아웃 유저모델 생성 백엔드 should, mocha, express...
heroku 에 expressjs api 서버 만들기 - 001
초간단 expressjs 서비스 만들기 서비스 요청 시 ‘Hello’를 응답하는 간단한 expressjs 서비스를 생성함 서비스를 생성하기 전에 nvm, nodejs 그리고 npm 이 설치되어야 함 nvm, nodejs, npm 설치하기 : https://cmjeon.git...
git 에 잘못 업로드된 파일 삭제하기
문제사례 gitguadian 의 메일을 받았음 내부 서버정보, 로그인정보 등의 내용이 github 에 올라오게 되는 경우 알림메일이 옴 이 경우 github에 올라간 파일을 삭제해야하는데 이미 github 에 올라간지가 오래되어서 삭제하는 방법이 쉽지않았음 검색하다가 git...
nvm, nodejs, npm 설치하기 - 001
nvm nvm 은 node version manager 임 각 프로젝트별로 다른 버전의 node를 사용할 수 있으니 여러 버전의 node 버전을 설치할 수 있음 mac, ubuntu 에서 설치 https://github.com/nvm-sh/ 에 접속하여 최신 버전 및 ins...
생활코딩 git 강좌 정리 - 001
git 이란 리눅스를 개발하기 위해 만들어진 분산버전관리시스템 문서의 version(commit)관리를 지원하는 시스템. 버전관리 & 백업 & 협업이 가능 git은 CLI(Git Bash), TortoiseGit, Sourcetree 로 학습&사용 가능 ...
To-Do List 만들기 스터디 - 001
스터디 일지 스터디 일시 : 7/31 9시 ~ 13시 스터디 장소 : 강남역 12번 출구, 커피빈 스터디 내용 스터디 목표 논의 To-Do List 만들기 개발방안 Frontend : iOS Backe...
테스트주도개발(TDD)로 만드는 NodeJS API 서버 - 006
데이터베이스 데이터베이스 소개 SQL MySQL, PostgreSQL, Aurora, Sqlite NoSQL : json 형식 MongoDB, DynamoDB In Memory DB Redis, Memcashed ORM 소개 쿼리 ins...
테스트주도개발(TDD)로 만드는 NodeJS API 서버 - 005
코드 리펙토링 라우터 클래스 역할에 따라 파일로 분리하자 api/user/index.js // 라우팅 로직 api/user/user.ctrl.js // API의 로직 api/user/user.spec.js // 테스트 코드 api/user 폴더 및 파일 생성 ...
테스트주도개발(TDD)로 만드는 NodeJS API 서버 - 004
TDD 로 하는 API 서버 개발 사용자 목록 조회 API 테스트 코드 만들기 1 성공 테스트 유저 객체를 담은 배열로 응답한다 index.spec.js // node-api/index.spec.js const app = require('./index.js'); c...
테스트주도개발(TDD)로 만드는 NodeJS API 서버 - 003
테스트 주도 개발 (TDD) 테스트 주도 개발이란? Test Driven Development 개발시간은 많이 걸리지만 유지운영 시점에는 큰 도움이 됨 모카(mocha) 1 https://mochajs.org/ 모카(mocha)는 테스트 코드를 돌려주는 테스트 러너 테...
테스트주도개발(TDD)로 만드는 NodeJS API 서버 - 002
익스프레스(ExpressJS) 기초 익스프레스(ExpressJS) 소개 ExpressJS 는 nodejs 로 만들어진 간결한 웹프레임워크 ExpressJS 기능 어플리케이션 미들웨어 라우팅 요청객체 응답객체 ExpressJS 설치 # node-api...
테스트주도개발(TDD)로 만드는 NodeJS API 서버 - 001
오리엔테이션 강의소개 노드로 API 서버 만들기 테스트 주도 개발 익히기 개발 환경 구성 nodejs 설치 확인 $ node -v $ npm -v 비쥬얼 스튜디오설치 NodeJS 기초 V8 엔진 브라우저 밖에서 자바스크립트 코드를 실행 할 수 있다 크롬에서 사...
만들면서 학습하는 리액트(react):사용편 - 031
사용편2 KeywordList, HistoryList 요구사항 번호, 추천 검색어 이름이 목록 형태로 탭 아래 위치한다 목록에서 검색어를 클릭하면 선택된 검색어의 검색 결과 화면으로 이동한다 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 현태로 탭 아래 위치...
만들면서 학습하는 리액트(react):사용편 - 030
사용편2 SearchForm 1 요구사항 검색 상품명을 입력할 수 있는 폼이 위치한다 검색어를 입력하면 x 버튼이 보이고 검색어를 삭제하면 x 버튼을 숨긴다 구현 src/components에 SearchForm.js 생성 // src/components/Sear...
만들면서 학습하는 리액트(react):사용편 - 029
사용편2 컴포넌트를 사용하는 이유 사용편1에서 React.Componet를 상속받은 App 컴포넌트를 사용하였음 App 컴포넌트는 큰 서랍에 모든 물건을 넣어놓은거와 다름없는 상황임 서랍을 잘 칸막이해둔다며 물건을 관리하기 쉬울 것임 현재의 App 컴포넌트는 역할에 맞게 ...
만들면서 학습하는 리액트(react):사용편 - 028
사용편 최근 검색어 1 요구사항 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 (추천 검색어와 비슷) 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면으로 이동한다 (추천 검색어와 같음) 구현 // store.js ... cla...
만들면서 학습하는 리액트(react):사용편 - 027
사용편 추천 검색어 1 요구사항 번호, 추천 검색어 이름이 목록 형태로 탭 아래 위치한다 구현 // main.js ... class App extends React.Component { constructor() { ... this.state = {...
만들면서 학습하는 리액트(react):사용편 - 026
사용편 탭 보여주기 요구사항 추천 검색어, 최근 검색어 탭이 검색폼 아래 위치한다. 구현 // main.js import store from "./js/Store.js"; const TabType = { KEYWORD: "KEYWORD", HISTORY: ...
만들면서 학습하는 리액트(react):사용편 - 025
사용편 검색 결과가 없을 경우 요구사항 검색 결과가 검색폼 아래 위치한다. 검색 결과가 없을 경우와 있을 경우를 구분한다. 구현 // main.js class App extends React.Component { constructor() { super()...
만들면서 학습하는 리액트(react):사용편 - 024
사용편 폼 초기화 요구사항 x 버튼을 클릭하거나 검색어를 삭제하면 검색 결과를 삭제한다 구현 // main.js class App extends React.Component { ... handleReset() { this.setState(() =>...
만들면서 학습하는 리액트(react):사용편 - 023
사용편 폼 제출 요구사항 엔터를 입력하면 검색 결과가 보인다 구현 // main.js class App extends React.Component { ... handleSubmit(event) { event.preventDefault(); c...
만들면서 학습하는 리액트(react):사용편 - 022
사용편 조건부 렌더링 요구사항 검색어를 입력하면 x 버튼이 보이고 검색어를 삭제하면 x 버튼을 숨긴다 조건부 렌더링 방식 엘리먼트 변수를 사용하는 방식 ```javascript // main.js class App extends React.Component { ...
만들면서 학습하는 리액트(react):사용편 - 021
사용편 Input 요소 사용하기 요구사항 검색 상품명을 입력할 수 있는 폼이 위치한다 main.js const element = ( <> <header> <h2 className="container">검색<...
만들면서 학습하는 리액트(react):소개편 - 020
소개편 시작점 브랜치 전환 $ git checkout intro/jsx 실무에서는 CRA(create-react-app) 같은 툴로 개발환경을 구성함 index.html 수정 <html> <head> ... <title>...
만들면서 학습하는 리액트(react):소개편 - 019
소개편 템플릿 언어 const h1 = document.createElement("h1") // 1 const header = document.createElement("header") // 2 header.appendChild(h1) // 3 엘리먼트 h1을 생성 ...
만들면서 학습하는 리액트(react):소개편 - 018
소개편 React vanilla js로 DOM element 만들고 추가하기 const p = document.createElement("p"); p.textContent = "hello world"; document.body.appendChild(p); DOM에 엘리먼트...
만들면서 학습하는 리액트(react):소개편 - Hello world - 017
소개편 Hello world 브랜치 이동 ```bash $ git checkout -f intro/hello-world ``` index.html 확인 ```html <!DOCTYPE html> <html lang="ko"> <head>...
만들면서 학습하는 리액트(react):소개편 - 가상돔 - 016
소개편 가상돔 상태변화를 UI에 반영하려면 DOM API 호출이 불가피 상태가 변하는만큼 DOM API 호출이 비례함 > 성능에 영향을 주게 됨 브라우져가 HTML과 css로 화면을 그리는 과정 - 주요렌더링경로(Critical Render Path) HTML 코...
만들면서 학습하는 리액트(react):소개편 - 리액티브 - 015
소개편 리액티브 특정 값에 의존해 자동으로 반응하는 것을 리액티브(reactive) 하다 고 함 데이터가 변경될 때마다 엘리먼트에 자동으로 반영시키는 방법 const state = { _data: "Hello world", }; const render = () =>...
만들면서 학습하는 리액트(react):소개편 - 데이터를 화면에 출력하는 방법 - 014
소개편 데이터를 화면에 출력하는 방법 리액트/뷰의 특징은 화면에 출력되는 유저 인터페이스를 상태로 관리할 수 있음 준비편에서 뷰는 템플릿 객체로부터 HTML 마크업 문자열을 가져와 엘리먼트의 innerHTML 속성에 저장 모델(store)의 데이터가 변경되면 컨트롤러...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 013
준비편 - 순수JS [순수JS 1] 최근 검색어 3 요구사항 검색시마다 최근 검색어 목록에 추가된다 구현 Store.js 수정 ... import { createNextId } from "./helpers.js"; ... export default clas...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 012
준비편 - 순수JS [순수JS 1] 최근 검색어 2 요구사항 목록에서 x 버튼을 클릭하면 선택된 검색어가 목록에서 삭제된다 구현 historyListView 수정 import { delegate, formatRelativeDate, qs } from ".....
만들면서 학습하는 리액트(react):준비편 - 순수JS - 011
준비편 - 순수JS [순수JS 1] 최근 검색어 1 요구사항 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 (추천 검색어와 비슷) 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면으로 이동한다 (추천 검색어와 같음) 구현 ...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 010
준비편 - 순수JS [순수JS 1] 추천 검색어 3 요구사항 목록에서 검색어를 클릭하면 선택된 검색어의 검색 결과 화면으로 이동한다 구현 SearchFormView.js 수정 ... export default class SearchFormView exten...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 009
준비편 - 순수JS [순수JS 1] 추천 검색어 2 요구사항 목록에서 검색어를 클릭하면 선택된 검색어의 검색 결과 화면으로 이동한다 구현 KeywordListView.js 수정 ... export default class KeywordListView ext...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 008
준비편 - 순수JS [순수JS 1] 추천 검색어 1 요구사항 번호, 추천 검색어 이름이 목록 형태로 탭 아래 위치한다 구현 index.html 수정 ... <html> ... <body> ... <div>...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 007
준비편 - 순수JS [순수JS 1] 탭3 요구사항 각 탭을 클릭하면 탭 아래 내용이 변경된다 구현 TabView.js 수정 ... export default class TabView extends View { constructor() { ... ...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 006
준비편 - 순수JS [순수JS 1] 탭2 요구사항 기본으로 추천 검색어 탭을 선택한다 구현 TabView.js 수정 import { qs, qsAll } from "../helper.js"; ... export const TabType = { KEYWO...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 005
준비편 - 순수JS [순수JS 1] 탭1 요구사항 추천 검색어, 최근 검색어 탭이 검색폼 아래 위치한다 구현 index.html 수정 ... <html> ... <body> ... <div> ...
알아두면 쓸데있는 VSCode 노하우
단축키 ctrl + k + s : 모든 단축키 보기 ctrl + shift + 좌/우 : ? alt(option) + 위/아래 : 줄이동 ctrl + shift + \ : 블럭의 맨처음/맨끝 F2 : 함수명, 변수명 리팩토링 F12 : 심볼 정의로 이동 ...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 004
준비편 - 순수JS [순수JS 1] 검색결과1 요구사항 검색 결과가 검색폼 아래 위치한다. 검색 결과가 없을 경우와 있을 경우를 구분한다. 구현 index.html 수정 ... <html> ... <body> ... ...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 003
준비편 - 순수JS [순수JS 1] 검색폼1 요구사항 검색 상품명을 입력할 수 있는 폼이 위치한다. 구현 index.html 수정 ... <html> ... <body> ... ...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 002
준비편 - 순수JS 비교와 대조를 통해 리액트에 대한 이해력을 높일 수 있음 리액트 라이브러리가 없으면 어떻게 개발할까 > 순수 자바스크립트, 바닐라 자바스트립트로 개발함 따라서 결과물을 순수 자바스크립트로 개발해봄으로 리액트의 역할과 이점을 더 확실하게 배워보려고 함 ...
만들면서 학습하는 리액트(react):준비편 - 001
준비편 백문이 불여 일타 배우는 방법은 두가지 : 이론을 배우고, 실습을 하는 방법, 실습을 해보고 이론과 맞춰보는 것 프로그래밍도 먼저 손으로 쳐보고 나중에 이론을 배운다면 프로그래밍이라는 것에 좀 더 편하게 다가갈 수 있을 것 결과물 미리보기 쇼핑몰의 상품검색화면 검...
javascript-008 - 유용한 10가지 배열 함수들. Array APIs 총정리
Array APIs Q1. make a string out of an array // join const fruits = ['apple', 'banana', 'orange']; console.log(fruits.join()); // apple,banana,orange conso...
javascript-007 - 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리
Array 자료구조 javascript === dynamically typed language 이지만 권장하지 않음 검색, 정렬, 삽입, 삭제의 속도를 고려 Declaration const arr1 = new Array(); const arr2 = [1, 2]; ...
javascript-006 - 오브젝트 넌 뭐니?
Object Literals and properties // primitive function print(name, age); functon print(name, age) { console.log(name); console.log(age); } const name = ...
React 기반 Gatsby로 기술 블로그 개발하기 001
Gatsby 알아보기 및 개발 환경 구성하기 Gatsby란 무엇일까? JAM Stack javascript, API, MarkUp Stack 빠르다 : JAM Stack은 렌더링할 화면들을 모두 Pre-Render하여 제공되기 때문 안전하다 : API를 통해 정적 ...
정적 사이트 생성기 gatsby 배우기 - 002
정적 사이트 생성기 gatsby 배우기 - 002 Gatsby 사이트 S3에 배포하기 AWS CLI 설치하기 https://awscli.amazonaws.com/AWSCLIV2.pkg 다운로드 symlink 생성 $ sudo ln -s /usr...
정적 사이트 생성기 gatsby 배우기 - 001
정적 사이트 생성기 gatsby 배우기 001 준비사항 v12.13 버전 이상의 node.js git Visual Studio Code Gatsby CLI Gatsby CLI 설치 $ npm instal...
스스로 구축하는 AWS 클라우드 인프라 - 기본편 005
Auto Scaling으로 확장성 및 탄력성 구현하기 Application Load Balancer 생성 EC2 서비스 선택 Load Balancing > Load Balancers 선택 Create Load Balancer 선택 ...
스스로 구축하는 AWS 클라우드 인프라 - 기본편 004
RDS for MySQL 생성하기 RDS 서비스 선택 Databases 선택 Create Database 선택 Standard Create 선택 Engine Info : MySQL 선택 ...
스스로 구축하는 AWS 클라우드 인프라 - 기본편 003
VPC와 중계 서버(Bastion) 구성하기 Custom VPC-Subnet 생성하기 VPC 생성하기 VPC 서비스 선택 Your VPCs 선택 Create VPC 선택 Name tag : lab-vpc 선택 ...
스스로 구축하는 AWS 클라우드 인프라 - 기본편 002
EC2-LAMP-ELB 구성하기 Amazon Linux 2에 LAMP 웹 서버 설치하기 NOTE LAMP 웹 서버 설치방법 EC2에 접속해서 명령어로 개별 프로그램 설치 EC2 생성단계에서 User Data 스크립트 추가하여 자동 설치 LAMP 웹 서버가 설...
스스로 구축하는 AWS 클라우드 인프라 - 기본편 001
서버리스 웹 호스팅과 CloudFront로 웹 가속화 구성하기 서버없이 구성가능한 정적 웹 호스팅을 만들고, 웹 속도를 높이기 위한 콘텐츠 전송 네트워크(CDN) 서비스를 연동 S3 정적 웹 호스팅 구성하기 S3 Bucket 생성 S3 서비스 선택 Creat...
javascript-005 - 클래스와 오브젝트의 차이점, 객체지향 언어 클래스 정리
class & object class fields, methods로 구성 template declare once no data in object instance of a class created many times data in Ob...
javascript-004 - Arrow Function은 무엇인가? 함수의 선언과 표현
Function fundamenta lbuilding block in the program subprogram can be used multiple times performs a task or calculates a value Function declaration...
javascript-003 - 코딩의 기본, operator, if, for loop 코드리뷰 팁
String concatenation console.log('my' + ' cat'); // my cat console.log('1' + 2); // 12 console.log(`string literals: 1 + 2 = ${1 + 2}`); // string literals:...
javascript-002 - 데이터타입, data types, let vs var, hoisting
Varilable, rw(read/write) let : ES6에서 추가됨 mutable let name = 'ellie'; console.log(name); // ellie name = 'hello'; console.log(name); // hello block...
javascript-001 - 콘솔에 출력, script async와 defer의 차이점
chocolatey 설치 > @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-O...
react navigation 기초 배우기 005 - Drawer Navigator 2
[Drawer] Custom Component /src/my_drawer.js 생성 import React, { Component } from 'react'; import { StyleSheet, ScrollView, Image, View, Text, Bu...
react navigation 기초 배우기 004 - Drawer Navigator 1
[Drawer] 설치 및 화면 Linking 화면 좌측이나 우측에서 나오는 새로운 스크린 햄버거 메뉴나 쇼핑몰 상품목록의 필터로 쓰임 drawer navigator library 설치 $ npm install @react-navigation/draw...
react navigation 기초 배우기 003 - Stack Navigator 2
[Stack] Header Bar 설정 Header Bar의 title은 Screen의 name이 기본값임 options 으로 속성 수정 가능 App.js 수정 // App.js ... <Stack.Navigator initialRouteNa...
react navigation 기초 배우기 002 - Stack Navigator 1
[Stack] 화면 Linking App.js 수정 import 'react-native-gesture-handler'; import React, { Component } from 'react'; import { StyleSheet, View, Text }...
react navigation 기초 배우기 001 - 소개 및 설치
React Navigation 소개 및 설치 강좌는 react navigation v5로 진행되었음 새로운 프로젝트 생성 $ react-native init --version 0.61.5 react_navigation_01 $ cd react_navig...
react native 기초 배우기 007 - Image, Modal
Image 폴더 생성 # pwd = react_native_01 $ mkdir assets/images 로컬에서 파일 가져오기 폴더에 이미지 추가(파일명 steak.jpg) App.js 수정 im...
react native 기초 배우기 006 - Slider, ActivityIndicator
Slider 가로선이 있고 좌우로 값을 바꿀 수 있는 컴포넌트 Slider 설치 Slider 다운로드 # install slider $ npm install @react-native-community/slider --save pod install $ cd i...
react native 기초 배우기 005 - Button, ScrollView, TextInput 심화, Picker
Button, ScrollView, TextInput 심화 버튼을 누르면 텍스트 입력창으로부터 값을 받아 하단의 목록으로 보여주는 App.js import React, { Component } from 'react'; import { TextInput, B...
react native 개발 환경 for windows
chocolatey 설치 chocolatey 윈도우용 패키지 관리자 cmd를 관리자권한으로 실행 # chocolatey 설치 > @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -No...
react native 기초 배우기 004 - ScrollView, TextInput
ScrollView 화면을 스크롤할 수 있는 컴포넌트 scrollView ... import React, { Component } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, Scr...
react native 기초 배우기 003 - Button, TouchEvent 심화
Button generator.js 파일생성 # pwd = react_native_01 $ mkdir src/generator.js // generator.js import React from 'react'; import { View, ...
react native 기초 배우기 002 - Style, TouchEvent
Style inline 와 StyleSheet 을 사용하는 방법이 있음 inline 방식 ... return ( <View style=({ backgroundColor: 'green', height: '100%', p...
react native 기초 배우기 001 - intro, View & Text
Intro 터미널 실행 # 새 프로젝트 생성 $ react-native init --version 0.61.5 react_native_01 # 프로젝트로 이동 $ cd react_native_01 시뮬레이터 실행 $ react-na...
react 기초 배우기 003 - props
props props는 readonly, 읽기전용 property, 수정/삭제 불가 데이터는 일방향, 부모 > 자식 데이터는 수정되지 않고 그대로 자식 컴포넌트에서 쓰임 // propsChild.js import React, { Componen...
react 기초 배우기 002 - state
State state는 component에서 렌더링되는 데이터를 담고 유지관리하는 자바스크립트 객체 state의 값에 따라 화면에 보여지는 아웃풋이 달라짐 state는 클래스 컴포넌트 안에서 사용가능함 함수컴포넌트를 정의했다면 state의 활용이 불가능함...
react 기초 배우기 001 - react
React란 프로젝트 만들기 vs code 실행 터미널 실행 # 프로젝트 생성 $ react-native init --version 0.61.5 react_01 # 폴더로 이동 $ cd react_01 # 프로젝트 실행 $ npm sta...
react native 개발 환경 for mac - 002
새 프로젝트 생성 Visual Studio 실행 View > Terminal 실행 # 새 프로젝트 생성 $ react-native init --version 0.61.5 my_first_app # 폴더 이동 $ cd my_first_app File &g...
react native 개발 환경 for mac - 001
리액트 네이티브란 페이스북의 오픈소스 모바일 응용 프로그램 네이티브 앱 개발을 위한 자바스크립트 프레임워크 크로스플랫폼, 안드로이드 ios 동작가능 기본언어 자바스크립트, 쉽다 선수지식 html, css, js es6, 리액트 리액트 네이티브 기본원리 ...
javascript es6 기초 배우기 006 - Class
Class javascript에서 class는 함수처럼 쓰임 class Person { constructor(region_, gender_) { this.region = region_; this.gender = gender_; } greeting...
javascript es6 기초 배우기 005 - Arrow Function
Arrow Function => 를 사용 Arrow Function 사용법1 : 표현식의 결과값을 반환하는 표현식 본문에 쓰임 let arr = [ 1, 2, 3, 4, 5]; let twice = arr.map(v => v * 2); console.log(...
javascript es6 기초 배우기 004 - Spread Operator
Spread Operator ... 전개연산자 function sum(x, y, z) { return x+y+z; } console.log(sum(1,2,3)); /* Result 6 */ let arr = [10, 20, 30]; console.log(sum...
javascript es6 기초 배우기 003 - Rest Operator
Rest Operator 함수에 들어오는 인자 중 나머지 인자들을 표준 자바스크립트 배열로 대체하는 방법 function f (a, b, ...c) { } function printNums(num1, num2) { console.log(num1, num2); } ...
javascript es6 기초 배우기 002 - for of 반복문
for of 반복문 for in 반복문 : 객체의 key에만 접근가능 let array = [ 10, 20, 30, 40 ]; for (let val in array) { console.log(val); console.log(array[val]); //배열에 ke...
javascript es6 기초 배우기 001 - var, let, const, String Literal
var, let, const javascript에서 쓰이는 var 변수는 유연하지만 여러면에서 문제점이 있음 var var의 스코프는 function임 // function 내부의 hello가 먼저 실행되고, 이후에 바깥의 hello가 실행됨 var hello...
프로그래밍 기초 in Python 배우기 002
파이썬 자료형 문자열 문자들의 집합 # 큰 따옴표, 작은 따옴표로 표현 "python" 'python' """python 3""" '''python 3''' # 큰 따옴표안에 작은 따옴표 "'hello'" # 작은 따옴표안에 큰 따옴표 '"HELLO"' # 백슬래...
프로그래밍 기초 in Python 배우기 001
파이썬 자료형 숫자형 숫자형이랑 숫자 형태로 이루어진 자료형 # 정수형 : Integer a = 12 b = 0 c = -34 # 실수형 : Float a = 1.2 b = -3.4 # 8진수 : Octal a = 0o20 b = 0o30 # 16진수 : Hexa...
정적 웹사이트와 동적 웹사이트 알아보기
정적인 동적인 웹사이트 편의점과 식당의 차이? > 가게에서 요리가 가능한가임 즉 서버가 편의점 역할을 하나, 식당 역할을 하는지에 따라 나뉜다. 정적 웹사이트 그러면 접속할 때마다 같은 모습이면 정적 웹사이트인가? > 아니다. 서버는 브라우저에서 요...
정규표현식 알아보기
regex 정규표현식 REGular EXpress 개발자라면 누구나 기본적으로? 알고 있고 다양한 곳에서 쓰이고 있다. 문자열의 패턴을 찾는데 쓰인다. 어지간한 언어에서 지원하고 있다. 정규표현식을 보면 난해할 수 있는데, 한번만 배워두면 두고두고 써먹을 수 ...
함수형 프로그래밍 알아보기
함수형 프로그래밍이란? 인풋과 아웃풋이 있다. 외부환경으로부터 독립적이다. 같은 인풋으로는 같은 아웃풋을 만들어내고, 다른 함수에 결과물 외에는 다른 영향을 주지 않는다. (순수함수이다) 따라서 부작용에 의한 문제로부터 보다 자유롭다. 서로 다른 쓰레드가 한 ...
minimal-mistakes에서 저자 프로필을 보이게 하기
저자 프로필 지킬에서 좌측 사이드바에 보이는 내용은 저자 프로필(author_profile)이다. 해결 _config.yml에서 defaults 설정으로 보이게 할 수 있다. 또한 각 포스트나 페이지에서 author_profile 설정으로 정의할 수 있다. #...
지킬 ‘There are no gemspecs’ 오류 해결
열심히 글을 쓰고 올리던 올리다가 테마색상을 바꾸고 싶어서 _config.yml를 변경하고 로컬에서 확인해보고 싶었음 로컬에서 구동을 하였더니 오류가 발생함 오류 내용 ❯ bundle exec jekyll serve [!] There was an error parsi...
github.io 블로그 개선
아직도 jekyll은 어렵다 jekyll로 github.io 블로그를 쓴지 한달이 가까워져 가는데 글쓰기에 급급하고 있다. 매일 배운 것을 기록하는게 어려운 것은 아닌데, 배우는게 없어서일까? 그러다가 minimal mistakes로 꾸며진 어떤 분의 샘플블로그를 참고...
개발학습 사이트 소개
지금까지 돌아다니면서 알게된 개발학습에 도움되는 사이트를 정리하였다. 생활코딩 opentutorials https://www.opentutorials.org/course/1 코딩 배우기 좋은 대표적인 사이트이다. eogoing님이 비전공자도 이해할 수 있도록 ...
jquery ajax의 알아보기
jquery 란 jquery는 javascript library임 jquery는 다양한 (비표준) 브라우저에서 javascript가 올바르게 작동가능하도록 함 비동기식 HTTP Request를 수행하는 함수 ajax가 있음 jquery ajax options 사용법...
mysql ‘access denied for user …’ 오류 해결
Mysql “Access denied for user ‘root’@’localhost’” 오류 해결하기 root의 권한을 수정하여 해결 $ sudo mysql -u root $ use mysql; $ grant all on *.* to ‘root’@‘localhost’ i...
m1 macOS에서 어플리케이션 설치하는 방법
.dmg 다운로드하여 설치 가장 평범한 방법으로 m1 macOS용 .dmg 파일을 다운받아서 실행 Appstore를 통한 설치 Appstore에 있는 프로그램이면 다운받아서 설치 가능 homebrew를 통한 설치 homebrew는 linux의 apt와 같은 ...
m1 macOS에서 spring legacy project 시작하기
spring legacy project 목표 개발환경 java : jdk 1.8 build : maven database : mariadb server 10 database tool : dbeaver Web/WAS : apache tomcat 9.0 IDE ...
jekyll 문서 요약 2
jeykll docs - content collections - 컬렉션 컬렉션은 서로 관련된 정보를 그룹화하는데 용이함 셋업 컬렉션을 사용하려면 먼저 _config.yml에 컬렉션을 정의해야 함 # staff_members를 컬렉션으로 정의한 예시 coll...
jekyll 문서 요약 1
jeykll docs - content page - 페이지 페이지는 콘텐츠의 기본요소 루트 디렉토리에 만들어도 되고, 하위 폴더로 정리할 수도 있음 html, md(html로 변환됨) 파일로 생성가능 |- about.md # https://example.com/...
jekyll minimal-mistakes theme 실행가이드
Quick-Start Guide Quick-Start Guide Installing the theme minimal mistakes는 gem-based theme임 jekyll v3.7+이고 self-hosting을 한다면, theme를 ruby gem으로...
jekyll theme, minimal mistakes
jekyll 테마 jekyll의 사용을 돕거나 더 이쁘게 웹사이트를 꾸밀 수 있게 여러가지 테마가 제공되고 있음 미리 제공되는 테마를 채택하면 내용 자체에만 집중할 수 있음. 추후에 수정도 가능 jekyll 홈페이지에서 테마를 찾을 수 있도록 제공하고 있음 깃헙 j...
jekyll 이란? jekyll 설치 및 배포
jekyll(지킬) 이란 jekyll 홈페이지 jekyll은 텍스트 파일로 정적 웹페이지를 만들 수 있는 서비스임 ruby 기반에서 실행됨 github pages에서 무료로 호스팅 할 수 있음 보통 markdown으로 작성된 텍스트 파일을 배포함 jekyll...