테크 시그널

Web App 페이스북, 디스코드, 인스타그램, 트위터의 공통점: 라이브러리를 써서 웹 어플리케이션으로서 동작한다. 왜 웹 어플리케이션인가? 동작이 마치 애플리케이션 같고 사용자 측면에서도 앱처럼 동작하기때문 pwa (프로그래시브 웹앱)이 있는데 얘는 앱설치하듯 해서 빠르게 사용가능. 이전의 웹사이트는 MVC패턴으로 많이 만들어졌다. Model: 사용되는 데이터와 데이터를 처리하는 모델. 웹에서 사용하는 모든 종류의 데이터 View: UI 양방향 데이터 바인딩 = 모델에서 값이 바뀌면 뷰에서도 바뀐다. -> 모델과 뷰의 의존성 => 복잡한 서비스=> 컨트롤 힘들어짐 Controller: 사용자의 행동(이벤트)를 처리하는 컨트롤러 What if? 상호작용하는 데이터가 많아지면 어떡할까? virtual DO..

크롤링과 스크레핑은 다름. axios, cheerio axios: cheerio: HTML parser, jqery 와 문법 거의 비슷 console.dir 을 보면 객체도 편하게 다 볼 수 있음 로딩중 이후로 오는 서비스(딜레이로딩 되는 놈)를 획득하려면? 브라우저 컨트롤이 필요. 그럴때 puppeteer를 사용가능. puppeteer node.js 를 통해 크롬 브라우저 실행 사용자가 원하는 뷰포트, 네트워크 환경 등 설정 가능 마우스, 키보드, 터치 스크린 등 코드를 통해 사람이 사용하는 것처럼 구현 가능 타임라인 트레이싱(네트워크에서 시간에 ㄸㅏ라 어떤 요청이 오는지 볼수 있음), 스샷, 확장프로그램 테스트, 자동화 등 가능 SPA(Single Page App) 크롤링과 pre-rendered c..

부모 요소 기준: %, em 브라우저 기준: v*, rem(root elem) 요소의 width, height을 따름: %, v* font를 따름: em, rem em: 중첩될 수록 직관적인 계산이 어려워짐. e.g. 기본 폰트 사이즈를 12px로 하고, nested로 2em, 2em하면 12->24->48 되므로 헷갈림.

원문(영어): https://web.dev/learn/css/box-model/ 공부 내용을 우리말로 기록하되, 원어일 때 이해가 쉬운 부분은 번역하지 않음. border-radius를 적용해 원형처럼 보이거나 평범한 텍스트마저도 CSS로 표현되는 모든 것은 box이다. CSS 요소는 display 값이나 그 안 내용물 등에 따라 다른 성질을 가진다. 내부 요소(contents)가 박스의 사이즈에 영향을 끼치는 경우p { width: 100px; height: 50px; padding: 20px; border: 1px solid; } 이 코드를 작성하면 해당 태그는 width로 입력해준 100px가 아니라 142px의 너비를 가지게 된다. extrinsic sizing 사이즈(width)를 직접 정해주는..

첫번째 방법: Filter를 이용하는 방법 1. filter를 상위 컨텍스트(root context)에 등록 2. delegating filter proxy를 web.xml에 등록 3. web.xml에서 등록된 filter-name을 id로 등록 이렇게 되면 filter proxy는 톰캣이 관리하지만 실제 필터는 스프링이 관리함 = Spring에서 모든 component를 인젝션 받을 수 있음. dao를 injection 받아 DB에 등록 두번째 방법: Logging Framework를 이용 1. log4j에서 getLogger 해서 로그를 찍곤 했는데, jdbcAppender를 사용하면 logger 메서드 중에 자동으로 DB에 로그를 찍어준다. 2. 이방법을 위해선 logger jdbcAppender와..

Tiles: view 단에서 페이지를 모듈화하는 과정에서 사용되는 프레임워크 - 원래는 InternalResouceViewResolver 만 썼었는데, Tiles를 사용하면 viewResolver를 여러개 쓸 수 있다. - Tiles는 Composite View Pattern을 사용한다. 1. tiles template 만들기 (design 을 갖고 있는 jsp) 2. insertAttribute . 그 세부 jsp들을 타일처럼 꽂아 넣어 3. definition이 최종적으로 뷰가 됨. xml에서 definition 만든다 http://tiles.apache.org/dtds/tiles-config_3_0.dtd preferences-> xml catalog에 이거 추가하삼 수정 전: ViewResolve..

AOP(Aspect Oriented Programming)에 따른 트랜잭션 관리 가능 (AOP : annotation만 잘 선언해놓으면 됨. ) 의존성, 결합력은 낮추고 응집력은 높이기 가능 => 많은 일들을 해주는 Enterprise Framework docs.spring.io/spring-framework/docs/4.3.29.RELEASE/spring-framework-reference/htmlsingle/ 스프링은 IoC(Inversion of Control) container로서 역할 (= DI Container) www.egovframe.go.kr/wiki/doku.php?id=egovframework:rtea3.9 egovframework:rtea3.9 [eGovFrame] www.egovf..

Front Controller Pattern: 프론트 컨트롤러에서 전처리, 후처리함으로써 뒤의 컨트롤러들이 할 필요없음 근데 그 컨트롤러-> 뒷단의 컨트롤러 바로 호출하면 결합력이 생겨버려 프론트컨트롤러가 계속 변하게됨 그래서 Command Pattern 적용, HandlerMApper, HAndlerInvoker 생기고 뒤의 컨트롤러들은 POJO(Plain Old Java Object)가 됨 CharEncodingFilter FrontController FileUPloadRequestWrapper HMapper, HInvoker 의 똑같은 일을 하는 놈들을 스프링에서 제공합니다 ckEditor에서 사진 올리려면 URL 을 사용할 수 있도록 web Resource가 필요하게된다. 근데 이 설정을 >내가 ..

웹에 존재하는 패턴은 아님 Receiver = commandHandler Command가 receiver한테 명령 내려야하는 상황이되면 중간에 invoker를 통해서 command-> ConcreteCommand 에서execute() 현재 내가 짠 게시판: Front Controller Pattern + Command Pattern bo_no(board no) 컬럼이 여러 테이블에 있으므로 bo_no대신 새로운 이름의 alias를 사용하는게 좋음 www.notion.so/techsignal/Encoding-Encrypting-d90c20475c6746a49ce9657b4bd184a9 Encoding & Encrypting Encoding: 부호화 www.notion.so - SHA-512를 쓰자 - 64..

- 필터 체인 통과 -> FileUploadRequestWrapper덕에 원본 요청이 바뀜. -> PartWrapper로 파트 나누고 wrapping -> Front Controller에서는 req가 FileUploadRequestWrapper 가 되어 들어옴. 그안에는 partWrapperMap이 들어있음 -> HandlerInvoker -> FileUploadController - FileUploadCheckFilter: Request header에서 MIME에 multipart가 있는지 체크하는 필터. - 파라미터 대신 multipart로 되어있으면 part API 써야하는데 얘 어려우니 Part Wrapper를 쓰자. CommandHandler 만들 때 중요한 점 1. 필요한건 invoker로부터..