1 서브모듈 추가하고 싶은 폴더로 가서
$git submodule add https://github.com/example/submodule.git path/to/submodule
2 변경 사항 커밋: 서브모듈을 추가한 후, .gitmodules 파일과 서브모듈 디렉토리에 대한 변경 사항을 커밋합니다.
git add .
git commit -m "Add submodule"
3. git push
=========
전체 pull 하고 싶을때
최초한번
git submodule update --init --recursive
그 후
git submodule update --remote --recursive
GitHub에서 특정 리포지토리를 clone하고 SSH 키를 설정하여 반복적으로 로그인하지 않도록 하는 방법은 다음과 같습니다:
만약 A PC에서 생성한 SSH 키를 B PC에서도 사용하려면, A PC에서 생성한 키를 B PC로 복사해야 합니다.
Start-Service ssh-agent
ssh-add C:\Users\<YourUsername>\.ssh\id_ed25519
혹시 git 이 잘 안된다면 $which ssh 를 해보면 /usr/bin/ssh 가 나오는 경우가 있는데,
이걸 "/c/Windows/System32/OpenSSH/ssh" 를 사용하도록 바꿔야 한다.
간단하게 mv /usr/bin/ssh /usr/bin/ssh-backup 으로 없애버리면 된다.
postgreSQL에서 array필드를 query할 땐 아래처럼 하면 된다.
(tags가 TEXT[] 필드일 때 가정..==> INSERT시에는 ARRAY['tag1', 'tag2']) 로 삽입.
== MyBatis. xml ===
<select id="getTags" resultType="string">
SELECT array_agg(tag) AS tags
FROM (SELECT unnest(tags) AS tag FROM posts) AS subquery
</select>
== java 코드 ==
public interface TagMapper {
List getTags();
}
SqlSession sqlSession = sqlSessionFactory.openSession();
try {
TagMapper tagMapper = sqlSession.getMapper(TagMapper.class);
List<String> tags = tagMapper.getTags();
// 결과(tags)를 처리
} finally {
sqlSession.close();
}
| JAVA | python |
| for (int i = 0; i < arr.length; i++) //0~99 System.out.println( 'A') |
for i in range(0, len(arr)) : #0~99 print('A') |
Arrays.sort Collections.reverseOrder() indexOf |
a = [2,3,4, 1] a.sort() a.reverse() [기본기능] a.append( 7) 뒤에추가, a.index(7) ==> 4 a.insert( 위치=0, 99 ) 특정위치에 추가, 위치기본값=0 a.remove는 value를 제거 => 이거보단 아래 filter 추천. |
| List stream().map .filter |
list : 키워드 arr = list(map(lambda x:x*2, arr)) arr = list(filter(lambda x:x>=2, arr)) |
| HashMap 혹은 javascript의 json과 유사점도 많음 hm.getKeys().stream() hm.getValues().stream() |
딕셔너리. dic = [1:'kim', 2:'lee'] dic[1] ==> 'kim'. 혹은 dic.get(1) dic.keys dic.values |
| class A { 생성자 public A( ) } |
class A: def __init__ (self): self.value = 0 |
| 함수 및 static 느낌 | x = 1 def add(num): global x return num + x |
| stream * boolean 느낌 -> 여러개 모두 체크 (java엔 없음) | all([true, true, true]) --> true any([treu, false, false]) ===> true |
$ brew install python@3.11 을 하면 python3.11 은 실행되지만 python 명령어는 실행되지 않는다.
이 때 pyenv를 사용해서 해결하면 향후 프로젝트 별로 다른 python을 실행할 때도 도움이 된다.
애시당초 pyenv를 먼저 설치하고 python을 설치하는 것이 더 좋은 방법같다.
1. $brew install pyenv
2. $pyenv install python3.11.5
3. $pyenv global 3.11.5
4. $echo 'eval "$(pyenv init -)"' >> ~/.bashrc 하고 터미널 재시작 혹은 source .bashrc 실행
프런트로 Stream을 리턴하는 방식은 프런트 처리시 난이도가 높아서, 특수한 경우에 한해 사용하면 좋다.
1. Flux나 Observable 생성: WebFlux나 RxJava에서 Flux 또는 Observable을 사용하여 데이터 스트림을 생성합니다. 이 스트림은 비동기적으로 데이터를 생성하거나 가져올 수 있습니다.
dependencies { implementation 'org.springframework.boot:spring-boot-starter-webflux' }
2. 예제코드 : 보통 Flux를 리턴하고 데이터가 1/0 개일경우는 Mono 리턴.
import reactor.core.publisher.Flux;
@RestController
public class StreamController {
@GetMapping(value = "/stream-data", produces = "text/event-stream")
public Flux<String> streamData() {
// 스트림 생성 예제 (여기서는 간단한 문자열 스트림)
return Flux.just("Data 1", "Data 2", "Data 3")
.delayElements(java.time.Duration.ofSeconds(1)); // 1초마다 데이터 전송
}
}
mtools를 통해 EXPLAIN과 같이 slow query를 분석할 수 있다.
/var/logs/mongod 밑에 있는 로그 파일을 50mb 정도의 사이즈로 나눠서
mloginfo --queries --no-progressbar 쪼개진파일.log > slow_queries.txt
(mtools 파이썬 패키지 설치하면 mloginfo라는 executable 생깁니다)하면 늦은 query를 분석할 수 있다.
Object class에 기본 포함되는 함수는
Vector 와 ArrayList의 차이
- Vector는 synchronized라서 Thred Safe하고 좀 늦다는 게 가장 큰 차이이고
- 둘 다 고정 사이즈이고 내부적으로는 array를 사용하며, size를 증가시킬 때 Vector는 100%씩 증가, ArrayList는 50%씩 증가.
spring에서 bean은 아무 생각없이 만들면
spring container에서 singleton 으로 만들어 준다.
(즉, 전체 sping container에서 항상 동일한 하나의 global instance로 bean을 만들어 준다)
따라서 immutable이고 status도 없이 만드는 것이 좋음.
만약, 다른 용도로 만드려면
Prototype Bean - 매번 생성
Session Bean - WEB 세션별로 생성
Request Bean - WEB Request별로 생성
이 존재하며..
@Component
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE) 과 같이 annotate 한다.
- @Scope("prototype") 만 해도 되지만.. 위에 방식이 더 안전.
xml에서 할 경우에는
<baen id="note" class="my.Note" scope="prototype"> 으로 한다.
1. json obj 이용 세팅
setCount(prev => prev + 1) 처럼 json이용해서 사용하려면
setUser (prev => { ...prev, name:'kim'} ) 하면 안된다. 이유는 { 를 함수시작으로 인식하기 때문이며, 해결 법은 2가지인데
setUser(prev => ({...prev, name:'kim'}) ) 괄호이용 , usetUser (prev => { return {prev..., name:'kim'} }) return 이용.
2. handleChange 에서 e.target.name 이용
const handleChange = e => {
setUser( {...user,
[e.target.name]: e.target.value} ). 이렇게 중괄호(curly brace)를 이용하면 변수를 이용해 필드설정 가능
} => 여러개 의 input text 를 하나의 handleChange로 이용하게 된다.
3. 페이지 reload 하는 경우
const TestApp = () => {
console.log("reloaded"); // setQuantity(0) 호출시 안찍힘. setQuantity(1) 호출시 찍힘. 즉 state가 바뀔때만 reload
// json obj는 같은 {age:1} 대신 {age:1} 형태로 같은 내용이라도 pointer가 항상 바뀌므로 찍힘.
const [quantity, setQuantity] = useState(0)
const totalPrice = quantity * 5; // useState 필요없이 이 방식대로 해도 page가 reload 될 때마다 재계산된다.
}
4. api호출 취소
axios는 cancelToken 이용
fetch는 AbortController 의 controller.signal 이용해서 취소
관련 react JSX코드:
<div className="App">
<h2> CSS Sample </h2>
<div className="MyDiv">
<div className="Child"></div> * 5개
</div>
<div className="MyDiv" style={{display:'flex', justifyContent:'spaceBetween'}}>
<div className="Child" > </div>
<div className="Child" > </div>
</div>
<div className="MyDiv">c</div>
</div>
<POSITON 4가지 - 기본 static은 제외 > - 4개 포지션은 left,top,right, bottom 제공.
<grid > display:flex와 함께 display:grid 가 유연한 레이아웃을 제공. flex에서도 flex-wrap: wrap; 으로 어느정도 구현가능.
혹시 TreeMap TreeSet에서 element가 primitive일때 reverseOrder로 간단히 하려면.
TreeMap<Integer,Integer> tm = new TreeMap<>(Collections.reverseOrder());
public static int[] mergeSortedArrays(int[] arr1, int[] arr2) {
int[] result = new int[arr1.length + arr2.length];
int i = 0, j = 0, k = 0;
while (i < arr1.length && j < arr2.length) {
if (arr1[i] < arr2[j]) {
result[k++] = arr1[i++];
} else {
result[k++] = arr2[j++];
}
}
while (i < arr1.length) {
result[k++] = arr1[i++];
}
while (j < arr2.length) {
result[k++] = arr2[j++];
}
return result;
}
}dynamic 프로그래밍은 로직만으로 계산이 어려워서
컴퓨터에게 반복적으로 계산도 시키고, 캐싱도 시키면서 캐싱된걸 이용해 나가면서 답을 구하는 방법이다.
문제 예제 1 . 숫자 n 만 주고, 가능한 모든 BST 개수 구하기.
- BST(binary search tree: child는 max 2개이고, left child는 작은값, right child는 큰값)
소프트웨어 아키텍처 패턴은 시스템의 전반적인 구조를 설명합니다. 아키텍처 패턴은 시스템의 핵심 구조와 그 구조의 특징을 묘사하며, 대규모 설계 문제를 해결하기 위한 고수준의 템플릿입니다.
디자인 패턴은 소프트웨어 설계 단계에서 특정 문제를 해결하는 일반적인 해법을 제공합니다. 디자인 패턴은 보다 구체적이며, 작은 범위의 설계 문제에 적용됩니다.
Redis 의 영속성(persistency):
- default로 스냅샷(.rdb)파일 옵션이 켜져 있으며, 주기적으로 스냅샷을 찍고, 복구시 이를 이용한다. => 끌 수도있고 설정변경 가능.
(기본값: 15분, 5분, 1분/key 1개, 10개, 1만개)
- AOF(append only file) 을 설정하면 용량이 크지만 모든 기록을 aof파일에 기록을 하고, 복구시에 사용한다.
=> 데이터 유실 확률이 더 적어지지만, 로딩속도가 늦고, 100%복구는 장담할 수 없다. (매우 critical한데서는 사용 비추)
Rate Limiter: (http 429: too many request 에러 리턴)
- 직접 구현시에는 요청을 Intercepter해서 ConcurrentHashMap 같은데 클라이언트IP+시간키 / 개수 등으로 관리.
(서버가 여러대일때는 1/n이 되고 약간 부정확)
- 보통은 라우터 단에서 더 많이 하게되는데, 예를 들면 AWS의 API Gateway에서는 api별로 Throttle 옵션을 설정하면 된다.
=> Stage설정을 통해 전체 API에 대한 요청 제한 관리.
- cloudFlair와 같이 전문적으로 제공해 주는 서비스 존재. AWS의 WAF는 미세설정이 좀 부족했음.
서킷 브레이크:
서킷 브레이커(Circuit Breaker) 패턴은 분산된 마이크로서비스 아키텍처에서 일반적으로 사용되는 패턴 중 하나입니다. 이 패턴은 서킷 브레이커가 전기 회로에서 과부하로부터 회로를 보호하는 것과 유사한 방식으로 작동합니다.
온라인 서비스 시스템에서, 한 서비스가 다른 서비스에 의존할 때, 호출되는 서비스가 실패하거나 지연될 경우 전체 시스템에 문제가 생길 수 있습니다. 서킷 브레이커 패턴은 이러한 문제를 방지하기 위해 사용됩니다.
서킷 브레이커는 특정 서비스에 대한 요청이 일정 임계치를 초과하여 실패할 경우, 추가 요청을 차단하고 즉시 실패 응답을 반환합니다. 이렇게 하면 실패한 서비스에 대한 의존성이 전체 시스템에 미치는 영향을 최소화하며, 실패한 서비스가 회복될 시간을 제공합니다.
MSA migration:
용어
- AWS의 CDN = cloudFront : 에지서버(가까운 서버)에서 컨텐츠를 직접 제공.
- C.A.P 이론 : CAP 이론은 분산 시스템에서 세 가지 핵심 C.A.P 중 어느 두 가지만을 선택할 수 있다는 개념을 나타내는 이론입니다. 이런 선택은 분산 시스템의 설계와 운영에서 중요한 결정을 내리는 데 영향을 미칩니다.
CAP 이론은 "일관성", "가용성", "분할 내성"을 모두 동시에 만족시키는 것은 불가능하다고 주장합니다. 이를 그림으로 나타내면 CAP 이론의 유명한 "CAP 삼각형"이 나옵니다. 이 삼각형에서는 세 속성이 모두 연결되어 있는데, 그 중에서 두 개를 선택할 수 있다는 것을 의미합니다.
CAP 이론은 분산 시스템의 설계와 구축 시 어떤 속성을 우선시할 것인지 결정해야 한다는 중요한 이론
- SDLC (S/w Development LIFE Cycle) : 개발을 위한 단계별 접근방식 - Waterfall, agile, V-Model 등이 있다. REF
- SRS (Service Requirement Specification) - 요구사항 정의 느낌.
- SLE (Service Level ObjEctive)의 약자로, 서비스 수준 목표를 나타내는 개념입니다. SLE는 서비스의 성능 및 가용성과 같은 품질 지표를 정의하고 측정하기 위해 사용. 즉: 응답시간, 가용성, 에러비율, 처리량 등.
-
1. 백엔드 Cache 적용하기 => 보통 redis나 memCached 를 많이 이용하지만, 당연히 mongoDB casandra등 다른 방법을 이용할 수 있다
- 이를 통해 DB query를 하지않고 바로 리턴하게 된다. 가끔씩 db를 조회해서 최신정보를 가져오는 step은 readThrough라고 부름.
2. (SQL구조 개선) query tunning + index추가 작업 .
(+N+1 Query 문제 해결. -> 게시글하나+댓글N개인 경우 N+1조회 등)
3. 데이타가 클때 : Payload Compresion 적용. (예: brotli 솔루션)
4. 프론트 엔드 개선: 데이터 많은 곳에 paging 적용 등 UI 개선을
프론트에서 Cache 적용하기 (react-cache 등 적용해서 API호출 회수 자체를 감소 가능)
5. 비동기 logging : 로그 때문에 시스템이 느려질 수도 있으므로 loggiin에 비동기 방식 적용.
및 Connection Pool 을 유지/관리 (계속 새로 오픈하는 것 보다 속도가 좋으므로)
*TABLESPACE 생성
CREATE TABLESPACE TS_BIZHOME
DATAFILE '저장위치' SIZE 500M
AUTOEXTEND ON NEXT 100M;
저장위치: '/app/ora19c/oradata/ORCL/ts_bizhome01.dbf' ora19c와 ORCL은 변경가능성있음.유저생성, 테이블스페이스 권한 주기:
create user [id] identified by [pw] default tablespace 테이블스페이스명;
grant connect, resource (,dba) to [id];
(alter user [유저명] default tablespace [테이블스페이스이름] quota unlimited on users;)
commit;
참고 View: GRANT CREATE VIEW TO userId;
* DDL 예제. (TB_C_GRPCODE, TB_C_DTLCODE)
CREATE TABLE TB_C_DTLCODE
(
GRP_CD CHAR(2) NOT NULL ,
DTL_CD VARCHAR2(2) NOT NULL ,
DTL_NM VARCHAR2(30) NOT NULL ,
BIGO VARCHAR2(100) NULL
);
CREATE UNIQUE INDEX TB_C_DTLCODE_PK ON TB_C_DTLCODE
(GRP_CD ASC,DTL_CD ASC);ALTER TABLE TB_C_DTLCODE
ADD CONSTRAINT TB_C_DTLCODE_PK PRIMARY KEY (GRP_CD,DTL_CD);CREATE TABLE TB_C_GRPCODE
(
GRP_CD CHAR(2) NOT NULL ,
GRP_NM VARCHAR2(30) NOT NULL
);CREATE UNIQUE INDEX TB_C_GRPCODE_PK ON TB_C_GRPCODE
(GRP_CD ASC);ALTER TABLE TB_C_GRPCODE
ADD CONSTRAINT TB_C_GRPCODE_PK PRIMARY KEY (GRP_CD);ALTER TABLE TB_C_DTLCODE
ADD (CONSTRAINT R_309 FOREIGN KEY (GRP_CD) REFERENCES TB_C_GRPCODE (GRP_CD));
1. 요구사항 명확화 : 핵심기능 , 트래픽이나 유저수 등 확인. (1초에 1000요청, 유저 100만명에 서버 기본2대+1씩, 1명당 하루 86.4건 요청)
(High Level Design)
2.1 API - High Level Design (Rest API)
2.2 Component - High Level Design : 로드 밸런스 + VM 몇대(x 오토스케일링) + DB 단
- 프론트를 SPA방식으로, 웹서버 없이 대신에
글로벌서비스의 경우 CDN이나, 로컬서비스면 S3같은 object storage로 미디어 부하분리.
(VM이냐 컨테이너 기반이냐는 조직이 크고 여러 팀으로 나누어 개발한다면 독립배포가 중요해져서 컨테이너 기반이 좋을 것 같고..
조직이 작으면 VM기반이 좋을 것 같음)
2.3 DB선택 : 복제냐 샤딩이냐, A:카산드라/실리아. B. dynamoDB. C. mongoDB/documentDB. 4. RDB
=> 옵션중에 트래픽이 많거나 많아질 확률이 있고 필드간의 관계도 좀 필요하다면 B/C 중에 선택!
(전반적으로 B/C가 샤딩등 분산환경에 유리하다. RDB보다는 개발리소스도 좀 적게 들고..)
B/C의 차이는 C가 좀 더 index등의 튜징여지가 있으므로 엔지니어 구성에 따라 선택가능)
=> 향후 MSA를 대비해 foreign키 없게 하고, Join을 최소화해서 분리가 용이하도록!
3. DB 테이블 설계
4.(여유가 되면) Fault tolerance 고려
DB - 용량에서 1. master/slave구조, 2. 샤딩/ Table파티셔닝 고민필요. (index 는 application영역이라 보고 일단 제외)
=>샤드키는 Cardinality가 높은 값으로 선정.
( RDB - postgreSQL만 슈평분할(샤딩과 유사)지원, mySQL/oracle은 테이블파티셔닝만 지원
NoSQL - mongoDB, cansandra 등이 샤딩 지원 : 샤딩시 DB가 빨라지지만 aggregation등에선 늦어질 수도 있음)
master/slave구조: 오라클에선 replication이라고 부르며 transaction replication 방식이 일반적)
////// MSA로 전환 전 고려사항//////
1. API Gateway 는 수직 방향 서비스 메시는 수평 방향으로 라우팅/로드밸런싱 등을 수행한다.
2. DB 트랜잭션을
A. 동기화 형태로 홀딩하면서 API호출 완료 후 트랜잭션 수행 : 초기에 일반적 방식.
B. 분산트랜잭션(즉 2단계 커밋, 표시나 lock을 하고 API호출 후 완료.)으로 할것인지,
C. 이벤트 기반으로 LLT(long live Transaction)이용하는 사가패턴을 적용하고 실패시 보상트랜잭션을 개발할 건지 고민필요.
=> 사가패턴도 2가지가 있는데 중앙관리형과 서비스별 자체 관리형이 있다.
//////////// MSA 장단점
MSA의 핵심은 1. 데이터 분리와 2. API Gateway 라고 생각한다.
(단, 1. 데이터 분리가 난이도가 높기 때문에,
운영중인 모노리스를 MSA로 변환해야하는 실상황에서는 서비스만 먼저 분리하고 나중에 데이터를 분리하는 방법이 현실적이다)
모노리스 장단점:
MSA 장단점:
<docker demon 실행>
sudo systemctl start docker (or stop)
sudo systemctl restart docker : 재시작
<image들 모두 삭제>
(sudo) docker rmi -f $(docker images -aq)
<docker 컨테이너 재시작>
sudo docker stop 7e1bc0fdb606
sudo docker start 7e1bc0fdb606
<docker oracle 11g>
sudo docker run -d -p 1521:1521 jaspeen/oracle-xe-11g
한글설정
docker exec -it <컨테이너 이름> bash
export NLS_LANG=KOREAN_KOREA.AL32UTF8
sqlplus / as sysdba
SELECT * FROM v$nls_parameters WHERE parameter LIKE '%CHARACTERSET';
(결과로 나타나는 NLS_CHARACTERSET 값이 "AL32UTF8"로 표시되어야 합니다.)
그후, 재시작.
docker stop <컨테이너 이름>
docker start <컨테이너 이름>
<그 외>
$docker pull image명(jenkins, centos등)
$docker images : 이미지 목록조회
- hub.docker.com 에서 검색 가능
$docker run image명 :이미지 실행. (--name 컨테이너명 지정가능)
옵션 -p 내포트:docker포트 -v 내디스크:docker디스크경로(:ro) ro는 ReadOnly
옵션 -d (데몬으로 실행)실행하면서 shell 접속: $docker run -it centos /bin/bash
$docker exec -it containerName /bin/bash 잘됨(docker run하고난 상태에서 접속)
$docker ps :컨테이너 조회 (-q 옵션 주면 container ID만 조회됨, -a는 all)
$docker history imageID :해당 이미지에 관련해 실행된 명령어들
$docker rmi imageID : 이미지 삭제$docker rm -f containerID or $(docker ps -aq) : 확실히 죽이는 방법.
$docker top containerID :해당 컨테이너 안에서 top을 돌리는 기능
$docker stop containerID : 해당 컨테이너 중단 (종료시그널로 중단)
$docker kill cotainerID : 완전죽임 (kill시그널로 중단)
$docker rm containerID : 컨테이너를 docker ps 목록에서 삭제, 죽지 않을수도 있음.Dockerfile
FROM nginx
RUN rm /etc/nginx/conf.d/default.conf
COPY .htpasswd /etc/nginx
COPY default.conf /etc/nginx/conf.d/$docker build -t mynginx . - 자기만의 이미지 생성
$docker run -p 8500:80 -d mynginx -자기 이미지 실행
OpenID Connect (OIDC)는 OAuth 2.0을 기반으로 한 인증 프로토콜로, JWT (JSON Web Tokens)를 사용하여 사용자 정보를 안전하게 전달합니다. OIDC에서 생성되는 JWT는 특히 'ID 토큰'이라고 불립니다.
ID 토큰에는 아래와 같은 클레임들이 포함될 수 있습니다:
FACEBOOK 을 이용한 로그인시.
Object oriented 디자인 패턴
객체 지향 디자인 패턴(Object-Oriented Design Patterns)은 소프트웨어 개발에서 반복적으로 발생하는 문제들을 해결하기 위해 공통된 설계 방법을 제공하는 패턴들의 집합입니다. 이러한 패턴들은 객체 지향 프로그래밍에서 유용하게 사용될 수 있으며, 코드의 재사용성, 유지보수성, 확장성 등을 향상시킬 수 있습니다. 여기서는 몇 가지 대표적인 객체 지향 디자인 패턴에 대해 설명하겠습니다.
Singleton Pattern (싱글턴 패턴): 이 패턴은 오직 하나의 인스턴스만 생성하고, 그 인스턴스에 접근할 수 있는 전역적인 접근점을 제공합니다. 주로 리소스를 공유하거나 설정 정보와 같은 단일 객체를 공유해야 할 때 사용됩니다.
Factory Pattern (팩토리 패턴): 객체의 생성을 처리하는 패턴으로, 객체를 생성하기 위한 인터페이스를 정의하고, 서브 클래스에서 어떤 클래스의 인스턴스를 생성할지를 결정합니다. 이를 통해 객체 생성 코드를 클라이언트로부터 분리시킬 수 있습니다.
Observer Pattern (옵저버 패턴): 이벤트 발생 시 관찰자(옵저버)들에게 자동으로 알림을 보내는 패턴입니다. 주로 한 객체의 상태 변화에 따라 다른 객체들이 업데이트되어야 하는 상황에서 사용됩니다.
Strategy Pattern (전략 패턴): 알고리즘을 정의하고, 이를 사용하는 클라이언트와 분리시키는 패턴입니다. 각각의 알고리즘을 캡슐화하고, 런타임 시에 알고리즘을 변경할 수 있습니다.
Decorator Pattern (데코레이터 패턴): 객체의 기능을 동적으로 확장하기 위해 사용되는 패턴입니다. 기존 객체를 감싸는 데코레이터 클래스를 생성하여, 새로운 동작을 추가하거나 변경된 동작을 제공합니다.
Proxy Pattern (프록시 패턴): 실제 객체에 대한 대리자(Proxy)를 제공하는 패턴으로, 클라이언트와 실제 객체 사이에 중간 계층을 두어 추가적인 기능을 제공하거나 접근을 제어할 수 있습니다.
Template Method Pattern (템플릿 메서드 패턴): 알고리즘의 구조
Scanner sc = new Scanner(System.in);
String s = sc.nextLine();
첫번재 n을 숫자로 읽고 라인 쭉 읽는 방법.
int n=sc.nextInt();
String []s=new String[n+2];
for(int i=0;i<n;i++){
s[i]=sc.next();
}
기존 방식.
try {
BufferedReader br=new BufferedReader(new InputStreamReader(System.in));
int k = 5;
List<Integer> ret = new ArrayList<>();
while ( k-- > 0) {
String st = br.readLine();
}java8이후 17까지 업데이트된 기능들.
jshell
immutable Factory
var (추론 type)
javac+java -> java
람다형 switch (--enable-preview -source 12 필요?)
다중문자열
record ( Lombok없이 setter getter자동 추가..)
casting없는 instanceof
sealed (class, interface ) : 상속 범위제한
Stream.toList() 직접변환 추가. (java 16)
람다형 switch : (break도 없어도 됨)
String typeOfDay = switch (day) {
case "MON", "TUE", "WED", "THU", "FRI" -> "Weekday";
case "SAT", "SUN" -> "Weekend";
default -> "Invalid day";
};
Text Block 추가
String json = """
{"name": "ChatGPT",
"type": "AI"
}
""";
그 외
java9의 모듈시스템 ( Project Jigsaw 의 결과물로 JPMS 탄생) 참고: https://limdevbasic.tistory.com/21
참고: https://www.devkuma.com/docs/java/version/
students.stream()
.sorted(Comparator.comparing(Student::getCgpa).reversed()
.thenComparing(Student::getFirstName)
.thenComparing(Student::getId))
.map(Student::getFirstName)
.collect(Collectors.toList());Double을 Checker(Comparator)에서 비교시에는 *100 이런거 하면 안됨. (미세 소수 오류발생)
class Checker implements Comparator<Student> {
@Override
public int compare(Student p1, Student p2) {
return Double.compare(p2.getScore(),p1.getScore()); //DESC
}
}
anonymous Comparator 클래스 생성으로 비교하는 법. 1. => compare(int 아니고=> Integer인 부분 주의 필요)
int[] intArr = new int[] {1,2,6, 4, 9, 7};
List<Integer> sortedInt = Arrays.stream(intArr).boxed()
.sorted(new Comparator<Integer>() {
@Override
public int compare(Integer a, Integer b) {
return Integer.compare(a,b);
}
})
.collect(Collectors.toList());
log.info(""+sortedInt);
anonymous Comparator 클래스 생성으로 비교하는 법. 2
int[] intArr = new int[] {1,2,6, 4, 9, 7};
int maxInt = Arrays.stream(intArr).boxed()
// .max(Integer::compare)
.max(new Comparator<Integer>() {
@Override
public int compare(Integer a, Integer b) {
return Integer.compare(a,b);
}
})
.orElse(-1);
int array -> Arrays.stream(.. )으로 바꾸면 intStream()이 되므로 Integer stream으로 바꾸려면 .boxed()를 써야한다.
//cards {1,2,2, 7, 9, 9, 8} 중에 pair들 빼고 최대 값구하기
public static int solutions(int[] cards) {
Map<Integer, Long> counting = Arrays.stream(cards).boxed() //intStream()을 stream()으로 바꿔야함
.collect(Collectors.groupingBy( i->i, Collectors.counting())) //<Integer, Long>
;
Integer ret = counting.entrySet().stream()
.filter( e -> e.getValue() == 1)
.map( e -> e.getKey())
.max( Integer::compare ) //need STUDY max(Comparator 임)
.orElse(-1); //.intValue();
//TEST code: 둘다 오류임 : study필요
// Integer ret = Arrays.stream(cards).boxed()
// .max(Comparator.comparingInt());
// .max(Integer.compare());
return ret;
}
ERROR FIX: Inreger.compare() => Integer::compare & add. .orElse(-1)
Integer::compare 대신에 Comparator.comparing(e -> e) 도 됨.
1. Modal을 Dom외부에서 렌더링 하려면 ? ReactDom.createPortal 을 사용한다.
2. 하위컴포넌트이 click이벤트가 상위 컴포넌트로 전달되는걸 방지 하려면? e.stopPropagation() 을 사용.
3. redux의 mapDispatchToProps란 ? redux의 액션을 dispatch하는 함수들을 React컴포넌트의 props로 매핑한다.
redeux는 보통 store.dispatch()로 디스패치하지만, mapDispatchToProps를 사용하면 props로 바로 받아서 사용가능.
4. React.PureComponent의 용도는? shouldComponentUpdate()를 내장해, props/state 가 바뀔때만 render호출.
5. (React V16.8~) useEffect의 로 window resizing이 가능하다. : 음, 당연히 되는거 아닌지 study필요.
6. Redux container란? 간단하게는 connect()함수를 사용해서 생성 가능하고, 상태를 구독하여 강태각 변경될때마다 Component다시 렌더링 하는 역할. dispatch함수들을 props로 전달.
7. setState의 두번째 파라미터 용도는? default callback 지정. => state가 업데이트 완료된 후에 수행 됨.
1. useState
2. useEffect userEffect (()=> {},[])일때 초기화 ,[abc] )일때는 abc의 state가 변할때마다 호출.
3. useContext : props로 여러번 여러군데 넘기는게 불편할때 약간 global 변수의 개념.
=> Provider 파일을 따로 만들고 children props를 이용하면 특정 컴포넌트만 reload하는 구조로 발전가능하다. (1번방식)
2번 방식도 동작은 하는데 여러개의 childComponent를 사용할때 문제가 될 수 있다. 모두 다 reload 된다.
2번 방식;
export const MyContext = useContext({a:1, b:2, 함수});
<MyContext.Privider value = 옵셔널 지정> 예: {value, setValue}
<ChildComponent>
</MyContext.Provider>
===ChildComponent
const [value,setValue] = useContext(MyContext)
========== Additional Hooks =============
4. useRef input같은 것의 반복적인 state호출 방지용.
const inputRef = useRef(null);
const someFunction = () => {
console.log(inputRef.current.value) //값이 찍힘. inputRef.current.focus()도 많이 씀.
}
<input type="text" ref={inputRef} />=> 기존방식 대비 value와, onChange 가 없어도 된다. (값이 바뀔때 마다 뭘 하진 않고, 필요시 전체값만 읽는 경우에 최적)
5. useMemo : cache기능 함수의 return값을 cache해 놓고, state가 바뀔때만 다시 계산함.
6. useCallback: useMemo와 거의 같은데 함수 자체를 cache함.
참고: react-native에서는 useFocusEvent와 결합하여 goBack()으로 이동시에 자동 화면 새로고침에 사용가능.
useEffect(() => {
console.log("ConsignDetail consigneeCd", consigneeCd);
search();
//아래 H/W키처리 코드 => useCallback으로 대체
// const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
// return () => backHandler.remove(); // 컴포넌트 언마운트 시 이벤트 핸들러 제거
}, [consigneeCd, refreshTime]);
useFocusEffect(
useCallback(() => {
// 화면으로 돌아올 때의 처리
setRefreshTime(Date.now().toString());
console.log("ConsignDetail화면 진입")
return () => {
// 화면이 벗어날 때의 처리
};
}, [])
);
7. useReducer : 몇가지 state를 모아서 한꺼번에 반영. => setState 여러번하는거 보다 효과적.
8. useLayoutEffect : useEffect와 비슷한데, UI를 blocking함, UI용 좌표계산 같은 걸 할때 효과적.
9. useImperativeHandle : forwardRef()와 함께사용해서 자식Component가 부모Component에 메소드 노출.
예제
부모 컴포넌트
const setPreviewPageNo = (pageNo) => {
if (refPdfViewer.current) {
refPdfViewer.current.setPageNo(pageNo);
}
};
<PdfViewer file={docGen.previewUrl}
onLoadSuccess={(count) => {setPreviewPageCount(count)}}
ref={refPdfViewer}
/>
자식 컴포넌트 : setPageNo를 부모에 전달.
const PdfViewer = forwardRef(({file, onLoadSuccess, showPagination}, _ref) => {
const [currentPageNo, setCurrentPageNo] = useState(0);
useImperativeHandle(_ref, () => ({
setPageNo: (pageNo) => {setCurrentPageNo(pageNo)},
}));
}
10. useDebugValue: 리액트 devTool에 state컴포넌트 같은걸 출력. 주로 customHook 안에서 사용.
React내의 <div 나 <image에 style을 주는 예제.
<div style={{
display: "flex",
flexDirection: "column",
padding:10,
border: "1px solid grey",
widht: "30%",
marginTop: 10,
gap: 10,
justifyContent:"space-between"
}}
>
<img
src = {product.thumbnail}
alt = {product.title}
style = {{ height: 200, objectFit: "cover" }}
//cover는-꽉차게(비율유지), contain-안에포함, fill-꽉차게 비율깨짐)
/>
</div>CSS specicificity: 인라인 style1순위, ID 2순위, class 3순위, 요소 4순위 => 1,0,0,0 혹은 1000 형태로 표현됨. 0010 은 class임.
=> p { color:red;] .p1 { color:green; } 이면 p는 0.0.0.2 이고 .p1은 0.0.1.0 이라서 .p1이 힘이 우선 적용된다...
(p가 0.0.0.1이 아니고 0.0.0.2인 이유는 아직 잘 모르겠음) => 암기: Inline + ICA(id,class, attribute)
CSS Selectors:
Internal Style Sheet VS. External : (external: <link rel="stylesheet" href="blabla.css"> )
html 안에서 직접 CSS사용하고 싶으면 <style> </style> 테그만 있으면 된다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-size: 18px;
color: darkblue;
}
</style>
</head>
function a() { } 보다 , const a = () => {} 로 쓰는게 좋다.
==> 이유 1. function은 생성자인지 함수용도인지 헤깔리지만, const는 항상 함수 용도이다. 생성자가 필요하면 class로 쓰면 된다.
이유 2. const의 우측 ()=>{} 이걸 변수에 대입하는 느낌으로 array안 이나, 함수 parameter등 동일한 방식으로 사용가능하단.
단,
let object= {
name: 'kim'
run : ()=> {} 까지는 굿인데, {}안에서 this는 못 쓰는 문제가 있어, 이때는 function써도 되지만 위 문제들 때문에 그냥
run() {..} 쓰면 된다.
}
closure: 내부함수가 외부함수의 변수를 access할 수 있다. (상식수준임) => 예제코드에선 function이 이너함수를 리턴하는 형태가 많음.
Javascript map과 forEach의 차이점. map은 매번 뭔가를 리턴을 한다. 따라서 array를 map시 새 array가 생긴다.
[ CSS 로 이동예정]
CSS specicificity: 인라인 style1순위, ID 2순위, class 3순위, 요소 4순위 => 1,0,0,0 혹은 1000 형태로 표현됨. 0010 은 class임.
=> p { color:red;] .p1 { color:green; } 이면 p는 0.0.0.2 이고 .p1은 0.0.1.0 이라서 .p1이 힘이 우선 적용된다...
(p가 0.0.0.1이 아니고 0.0.0.2인 이유는 아직 잘 모르겠음)
 by yongary |
||
|
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 |
