본문 바로가기

전체 글

 (96)
[스터디] OOP - 상속과 코드 재사용 2021. 11. 25. 21:09 요약 상속을 통해 코드를 재사용하면 부모-자식이 강하게 결합된다. 특히 `super` 참조를 통해 자식에서 부모 클래스의 메소드를 직접 호출하면 두 클래스는 강하게 결합되고, 자식이 부모의 내부 구현을 알아야 하여 캡슐화를 위반한다. 높은 결합도는 변경에 취약한 클래스를 낳는데, 이를 취약한 기반 클래스 문제라고 한다. 취약한 기반 클래스 문제는 다음 세가지 문제를 야기한다. 1. 상속받은 부모 클래스의 메소드가 자식 클래스의 내부 구조에 대한 규칙을 깨트릴 수 있다. 2. 자식 클래스가 부모 클래스의 메소드를 오버라이딩하는 경우, 부모 클래스가 자신의 메소드를 사용하는 방법(내부 구현)을 자식이 알아야 한다. 3. 높은 결합도로 인해 자식 클래스와 부모 클래스의 구현을 fix하던가, 아니면 동시에 변경..
keepalive 설정 2021. 11. 23. 21:23 KeepAlive 설정을 nginx에서 하는것과 Http에서 하는것이 어떤 차이가 있는지 궁금해서 찾아보았다. Nginx keepalive - 어플리케이션 레벨에서의 keepalive - 클라이언트가 먼저 종료되지 않는이상 keepalive_timeout 시간 동안 연결을 유지함 - 클라이언트가 브라우저라면, 브라우저는 http 1.1 사용 시 기본적으로 keepalive가 활성화되어있음. (해제 가능) - nginx 입장에서는 클라이언트와의 연결을 유지할지를 결정하는 것. (호스트 입장에서 keepalive를 설정하는 것) Http keepalive - NodeJS의 http 모듈의 keepalive 설정 (http.Agent({keepAlive: true})) - Default로 NodeJS는 kee..
Jenkins, Github Action으로 CI 환경 구축 경험기 2021. 11. 13. 20:15 공교롭게도 금주에 젠킨스와 Github Action으로 동시에 CI 환경을 구축할 일이 있었다. 사내 Github Enterprise에서는 아직 Github Action이 미지원이라 Jenkins를 사용했다. 기존에 사용하던 젠킨스가 있었지만 메모리 이슈가 잦아져, 우리 파트만 사용하는 Jenkins를 새롭게 구축하기로 했다. (겸사겸사 물리 서버가 아닌 Docker 컨테이너 환경으로 이전도 포함) Github Action은 사이드 프로젝트에서 새로 CI 설정을 위해 Github Action을 사용하기로 했다. 결론부터 말하면 젠킨스는 구축까지 대략 하루 걸리고, Github Action으로는 공부시간 포함 1시간 정도 걸렸다. 이건 젠킨스보다 Github Action이 쉽고 빠른 점도 있었지만 사내 망..
[스터디] OOP - 의존성 관리하기 2021. 11. 4. 20:58 의존성 어떤 객체가 협력하기 위해 다른 객체를 필요로 할 때 두 객체 사이에 의존성이 존재한다고 말할 수 있다. class A implements I { methodOfA(b: B) { return b.methodOfB().filter((item) => item.chceked) } } class B { methodOfB(c: C) { return c.methodOfC() } } class C { methodOfC() {} } 위 예제의 클래스 A는 methodOfA 메소드에서 클래스 B를 인자로 받아 B에게 methodOfB 메시지를 전송한다. 이 경우, A는 자신의 작업을 수행하기 위해 B 객체를 필요로 하는데 이 경우 A는 B에 의존한다고 한다. 의존성은 변경과 관련이 있다. 의존되는 요소(B)가 변..
정규표현식 일치탐색 수행 시 놓치기 쉬운 이슈 2021. 11. 2. 16:04 사내 앱 환경은 UserAgent 문자열을 보고 앱에서 접근했는지 여부를 알 수 있다. const UA_SAMPLE = 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/605.1 APP_NAME(inapp; search; 1000; 11.5.5.2; 11)' 따라서 정규표현식으로 UserAgent를 분해해서 디바이스 환경 및 앱 환경 여부를 검사하는 parseDeviceInfo 함수를 선언했다. const appUserAgentRegEx = /APP_NAME\([inapp]+;[^0-9]*(search);[^0-9]*..
[스터디] OOP - 책임 할당하기 2021. 10. 25. 13:18 책임 주도 설계를 향해 아래 두 가지 원칙을 기억하고 따른다. 데이터보다 행동을 먼저 결정하라. 협력 문맥 속에서 책임을 결정하라. 협력 문맥 속에서 책임을 결정하라. 책임은 객체의 입장이 아니라 객체가 참여하는 협력에 적합해야 한다. 다시 말해, 메시지 전송자에게 적합한 책임을 말한다. ⌲ 따라서, 메시지 송신자는 메시지 수신자에 대한 어떠한 가정도 할 수 없다. (캡슐화) 객체가 수행할 책임이 정리될 때까지 객체의 상태에 대해 정의하지 않는다. GRASP 패턴 GRASP 패턴이란? General Responsibility Assignment Software Pattern의 약자로, 객체에게 책임을 할당할 때 지침으로 삼을 원칙들의 집합을 패턴 형식으로 정리한 것 설계 순서 1. 도메인 개념에서 출발하..
react 16.8 -> 16.9 업그레이드로 인한 react-testing-library 실패 해결 2021. 10. 5. 16:36 팀 내 react 16.8 버전을 이번에 npm7로 버전 업하면서 함께 16.9로 올렸다. 그런데 올리고 보니 기작성되었던 일부 테스트 케이스들이 실패했다. 실패하는 원인을 보니 비동기 실행으로 인해 HTMLElement를 찾기 전에 fireEvent 나 userEvent를 실행해버려서 실패되었다. 따라서 아래처럼 HTMLElement도 비동기로 찾게끔 수정하였다. test('', async () => { const container = render() // ... 중략 ... const button await waitFor(() => { button = findButton(container) expect(button).not.toBeUndefined() }) fireEvent.click(button) ..
[스터디] OOP - 역할과 책임, 협력 2021. 9. 28. 22:16 조영호님의 '오브젝트'(2021) 의 3장을 읽으면서 요약한 것입니다. 많은 사람들이 객체지향 패러다임을 설계할 때 클래스를 어떻게 정의하고, 어떤 걸 상속할지 등등 구체적인 구현에 초점을 맞춘다. 그러나 객체지향의 핵심은 역할, 책임, 협력에 있다. 다시 말하면 협력을 구성하기 위해 적절한 객체를 찾고 적절한 책임을 할당하는 것이 핵심이다. 협력이란 어떤 기능을 구현하기 위해 객체들 간 상호작용을 말한다. 책임은 객체가 협력에 참여하기 위해 수행하는 로직을 말한다. 이러한 책임들의 집합이 객체의 역할을 구성한다. 협력 객체지향 : 자율적인 객체들의 공동체 즉, 객체가 다른 객체에게 도움을 요청할 때 협력이 가능하다. ('메세지 전송'이라고도 한다.) * 메세지 !== 메서드이다. 객체는 메세지를 받고,..
[회고] 넥스터즈 19기를 마무리하며 2021. 8. 30. 21:55 저번주로 넥스터즈 19기 정규 활동이 막을 내렸다. 지금까지 개발로그를 작성하면서 어떤 서비스인지 꽁꽁 숨기고 있었는데 이제는 어느정도 안정화되어서 블로그에도 소개하고 회고를 작성한다. 안녕, 나야 안녕, 나야 오늘의 내가, 미래의 나에게 보내는 편지(코시국편) halo-its.me 한줄 소개 : 과거의 내가 미래의 '나'에게 쓰는 편지 (코시국 편) 모토 : 현재의 우울함을 잊게 해주고, 훗날 지금을 회상하며 미소 지을 수 있는 서비스 2주일 전부터 배포 준비를 하고 있어서 발표시간 하루 전날 마지막 QA를 마무리하고 픽스 후 팀에 사전 공유할 수 있었다. 이벤트성 서비스라 미리 편지를 작성하면 팀발표 때 맞춰 메일을 발송해드리기로 했다. 최종 발표 당일 (본인이 속한 팀 빼고) 투표를 통해 1,2,3..
8/26 Nexters 9주차 : HTTPS 적용 2021. 8. 26. 22:08 구글 OAuth2.0 로그인을 대외로 오픈하기 위해서는 https 적용이 된 호스트 URL이 필요했다. 따라서 어제 부랴부랴 SSL 인증서를 구입하고 Nginx에 작성하는 시간을 가졌다. nginx.conf nginx.conf에 ssl 적용은 nginx 설치 후 default.conf에 가이드되어 있어서 쉽게 적용할 수 있었다. 😊 9번째 줄에서 http로 접근했을 때 https로 리디렉션하는것을 잊지 말자. k8s 배포 ssl이 설정된 nginx를 이미지로 재빌드하여 Pod를 재생성해야한다. 필자가 선택한 방법은 ssl 인증서(.pem 파일들)들을 Secret으로 생성하고 이를 Deployment에서 volumeMount로 주는 것이다. Secret 생성 kubectl create secret gene..
[NCP] Helm 사용하여 Kubernetes 기반으로 서비스 배포하기 2021. 8. 24. 20:18 넥스터즈에서 배포를 준비하는 글에서 Kubernetes를 사용하여 배포하는 것을 최종 목표로 잡았었다. 네이버 클라우드 플랫폼(NCP) 에서 제공하는 Kubernetes 서비스와 Container Registry 를 사용하여 배포한 과정을 기록한다. 아직 초보라 많은 설정을 써보진 못해서 차차 개선해나가기로 한다. 목차 0. 배포해볼 구조 및 용어 정리 1. 설치 2. docker image 레지스트리에 저장 3. helm chart 생성 및 배포 4. 이미지 재배포 5. 정리 0. 배포해볼 구조 먼저 서비스를 어떻게 배포하는가를 짚고 넘어간다. 정말 단순하게 End User가 Load Balancer* 외부 IP를 통해 접속하면 부하 분산에 의해 적절한 Pod로 접근하고, nginx가 프록시하는 구조이..
8/20 Nexters 8주차 : Docker 기반 배포 2021. 8. 20. 00:06 넥스터즈가 벌써 8주차로 곧 끝이 보이고 있다. 시간 진짜 빠르다... 내가 맡은 개발 분량은 끝났다. 개발중인 API가 완료되면 API 호출하는 거랑 정적 페이지 하나랑 리팩터링 정도 남은거 같다 그래서 배포를 신경쓰고 있는데 현재는 간단하게 vercel로 띄운 상태이다. (꼼수지만 vercel은 organization에 속한 저장소는 돈을 내야하기 때문에 개인 저장소로 포크 떠서 배포했다 🙄) 하지만... 뭔가 있는 툴을 사용하는 건 내 성에 안차기도 하고, 이것저것 건드리면서 공부해보고 싶었다. (참고) vercel에서도 콘텐츠 캐싱과 폰트나 이미지 캐싱또한 제공하고 있었다 ㅋㅎ; 그래서 직접 nginx와 docker, 그리고 최종 목표는 kubernetes까지 적용된 구조로 배포 환경을 구축해보기..
(사족) PR에 변경사항 쉽게 알아보게 쓰기 2021. 8. 16. 17:44 동아리 활동한다고 딱히 올릴만한 글이 없어서 😥 사족이라도 써봐야겠다 정신 없이 개발하다보면 변경 사항이 밑도 끝도 없이 많아지는 경우가 많다. 아무리 코드 리팩터링을 해도 File Changed가 20개, 30개가 넘어가면 그때부터는 PR을 올리는 것 조차 죄송스러웠던 적이 많았다.. 따라서 코드 변경 사항을 PR로 올릴 때 같이 개발하는 팀원들이 쉽게 파악할 수 있도록 안내하는 것이 중요하다. 어떤 점이 변경사항을 쉽게 알아보는데 도움이 되었는지 주변에서 말씀주셨던 것과 다른 개발자분들이 올리신 PR에서 좋았다고 생각한 점들을 토대로 정리하였다. 내가 PR을 올리는 입장일 떄에도 해당하지만 반대로 내가 다른 분들의 PR을 리뷰할 때에도 활용하면 좋았다. TL;DR 이슈 Tracking 과정을 기록한다..
[Nextjs] 맨날 햇갈리는 Data Fetching 정리 2021. 8. 7. 01:16 Nextjs를 하면서 맨날 햇갈리는 ㅠㅠ Data Fetching 부분을 정리하였다. (번역투 다수) Prerequisite 정리 전에 Nextjs의 pre-rendering을 알고 가야한다. Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.) 생성된 각 HTML은 최소한의 자바스크립트 코드와 함께 생성되고, 그 js코드는 페이지가 완전히 인터렉티브하도록 한다..
7/31 넥스터즈 5주차 : 단위테스트, 디자인 시스템 2021. 8. 1. 15:28 4주차는 회사일이 급해서 회사일을 더 많이 했으므로 스킵 2주차에서 jest를 설치하고 jest.config.js 설정을 마쳤다면 이번주에는 jest로 단위테스트를 작성할 수 있는 Mocking을 준비하였다. 2주전에 구현한 Oauth2.0 로그인 단위테스트를 작성하면서 진행하였다. Mocking이 끝나면 앞으로의 기능은 회사에서 그랬던 것처럼 TDD로 구현할 생각이다. (TDD에 대해서 썼던 글) 8/26 추가 TDD로 하겠다고 호언장담했었으나 안했었다...😭 1. Axios Mocking 먼저 Axios Mocking이다. jest Mocking Modules 가이드에서 소개하듯이 jest.mock 으로 mocking하는 방법이 있다. // users.test.js import axios from '..
[Nextjs] 리액트에서 Nextjs로 이전하던 중 생긴 이슈들 2021. 7. 28. 00:38 현재 사내 모든 서비스는 단 하나의 저장소에 모두 몰려있다. 따라서 내가 맡은 서비스만 배포할 수 없는 불편함+코드가 너무 방대해져서 유지보수의 어려움 등등의 이유로 각 서비스 별로 저장소를 분리하는 과정에 있다. 내가 맡은 서비스 또한 저번 주 신규 서비스 런칭이 끝났으므로 저번주부터 저장소 분리에 착수했다. 이전 저장소는 CRA 기반 React js 환경이었다면 새로 분리하는 저장소에서는 Nextjs + Typescript를 도입하였다. Nextjs 기본 Setup을 끝내고 나서부터는 코드를 옮기는 작업을 진행하였는데, 역시 그대로 옮겨질리가 없다. (ㅋ) 1. Link 이전 cra 기반 reactjs 환경에서는 react-router-dom 의 Link 컴포넌트를 사용하였다. Next js에서는 n..
7/16 넥스터즈 3주차 (2) : 에러 처리 설계와 SWR 2021. 7. 16. 19:15 개발순서는 이게 먼저인데 작성하다보니 인증 구현을 먼저 작성했다 🙄 저번주에 Setup한 개발환경에서 본격적으로 구조 설계에 들어갔다. 이번에도 사심을 담아 사내에서 미리 사용할 구조를 설계한다는 기분으로 구현했다. 😏 사내에 이미 nextjs로 구현중인 프로젝트가 있는데 해당 코드를 많이 참고했다. 에러 처리 클라이언트 에러처리는 크게 세 부분으로 구분하였다. 1. 모든 페이지에 공통적으로 처리할 에러 2. 페이지 혹은 관심사별로 처리할 에러 3. 단일 컴포넌트 내 이벤트 핸들러 등에서 처리할 에러 들어가기 전에 httpRequest에서 발생하는 에러는 Axios Interceptor에서 처리하였다. 에러 클래스를 정의하고 http응답에서 내려주는 에러에 따라 다른 에러 인스턴스를 throw한다. 1...
7/16 넥스터즈 3주차 (1) : 인증 구현 2021. 7. 16. 16:06 3주차때에는 소셜 로그인 구현 중 네이버 로그인을 구현하였다. Next.js의 API 서버를 마치 Api Gateway처럼 생각하고 BE와 Server to Server로 구현할 계획이다. 네이버 아이디로 로그인 구현(이하 네아로)의 OAuth2.0 구현은 Gateway에서 할 수있을듯 해서 Gateway에서 구현하였다. 개요 위 다이어그램에서 볼 수 있듯이 로그인 시에만 인증서버(여기서는 네이버)를 거치고, 그 이후에는 BE에서 생성한 자체 토큰(jwt)으로 검증한다. 시나리오 시나리오 1. 최초 로그인 (a.k.a 회원가입) 1. 사용자가 '네이버 로그인'을 클릭 2. 정보제공 동의를 받는 인증 화면으로 이동하여 정보 제공에 동의한다. 3. redirectURL인 /bridge/naver 로(이하 브..
cypress를 써보자! (3) 2021. 7. 11. 16:55 < cypress를 써보자! (2) < cypress를 써보자! (1) E2E 테스트를 계속 작성하다보니 사소하지만 고치고 나면 편한 불편한 점들을 개선하였다. 1. supports/setup.js 테스트들마다 공통으로 intercept해야 하는 api들은 supports/setup.js 로 이동하였다. 2. fixture path 명명 mock 데이터인 fixture 경로에서 데이터를 가져올 때 파일명만으로는 명확하지 않다고 느껴졌다. 동료 개발자분이 api 경로와 똑같이 구조를 설정하는 아이디어를 제안주셨는데 좋은거 같다. 예를 들어, api 경로가 /api/login/user 라면 처럼 구성한다. cy.intercept('POST', '/api/login/user', { fixture: `fixtu..
7/10 2주차 세션 : 해커톤 2021. 7. 11. 16:19 넥스터즈 19기 활동이 본격적으로 시작되었다. 2주차부터 해커톤을 시작하는데 밤을 새는 일정(!)이었다. 그렇지만 어디까지나 자유라서 우리 팀은 밤을 새진 않았다. (하루만 새도 다음주 평일이 힘들기 때문에 😢) 금요일에 아이스 브레이킹+아이디어에 관한 생각을 공유하면서 모두 같은 방향을 바라볼 수 있도록 의견을 맞추었다. 따라서 해커톤동안 아이디어를 구체화하면서 와이어 프레임이 나올 수 있었다. (다하고 나니 밤 12시가 되었다 😳) 우리는 밤을 새지는 않기 때문에 1차 목표를 '개발 환경 구축'으로 소신 정의하였다. 본격적인 개발에 착수하기 전, 기술 스택 확정 및 형상 관리 Setup을 진행하였다. 기술스택 (Frontend) Nextjs 11 + Typescript Data Fetching: Sw..
[React] render() 내에서 history.push(replace)를 하면 안되는 이유 2021. 7. 8. 19:27 스토어의 상태값 여부를 검사하여 상태값이 없으면 다른 라우터로 이동하는 로직을 상위 컴포넌트에 추가하였다. const InfoChecker = ({children}) => { const {info} = useExampleStore() const history = useHistory() if (!info) { history.replace('/') return null } return children } const Info = () => { const {info, clearInfo} = useExampleStore() useEffect(() => { return () => { clearInfo() } }, []) return ( {info.name} ) } const Routes = () => { const..
[React] history.block으로 뒤로가기 막기 (blocking-transition) 2021. 7. 8. 14:51 만약에 A 컴포넌트에 name 상태값이 있다고 가정하자 사용자가 A 컴포넌트의 name 상태값을 수정하였으나 실수로 브라우저 뒤로가기를 누르면 A 컴포넌트는 언마운트되고 수정했던 name 상태값은 유실된다. 이런 경우를 방지하기 위해 브라우저 뒤로가기 발생 시 '정말 뒤로 가겠습니까?'와 같이 사용자에게 한 번 더 확인을 요구하는 confirm 창을 띄울 수 있다. history에서는 block으로 push/pop을 제어하여 이를 처리할 수 있도록 한다. 다음은 상태값이 변경되어 isBlocking이 true, action이 'POP'일 때 confirm창을 띄우는 예시이다. 참고 React Router v5.2 - Blocking route change with createBrowserHistory a..
React Native 초기 설정 2021. 7. 4. 16:05 3월부터 착수했는데 이래저래 바빠서 정리하고 있지 못했던 React Native 맨땅에 헤딩한 경험을 기록한다. * 기억하면 좋을 설정들만을 기록하여 아예 처음부터 설정하는 건 아님 목차 1. 디버깅 Setup 2. styled-components 설정 3. react-navigation 설정 (4.x) 4. Root import 설정 개발 환경 1. 디버깅 Setup 참고 URL. React Native Docs feat. 안드로이드 개발자 고수 친구👍 1. Jdk 설치 2. 환경 변수에 맞게 설정 (나는 zsh를 쓰고 있어서 ~/.zshrc) export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator ex..
[NGINX] Basic Authentication와 IP Address 2021. 7. 1. 22:12 Nginx 단에서 HTTP 인증을 사용할 수 있는 설정이다. HTTP 인증과 더불어 IP 접근 제한 등 다른 제한 수단과 함께 사용가능하다. 문법 location /api { auth_basic “접근을 위해 인증이 필요합니다.”; auth_basic_user_file ${PATH_NAME}/.htpasswd; } .htpasswd 파일은 md5로 암호화되어있는 id:password의 쌍으로 이루어진 파일이다. 파일 생성 방법으로 Docs에서는 apache2-utils (Debian, Ubuntu) 혹은 httpd-tools (RHEL/CentOS/Oracle Linux) 등 비밀번호 파일 생성 툴을 사용할 수 있다. 웹 서버의 경우 openssl로 암호화된 비밀번호를 얻을 수 있다. (출처) > ope..
react-spring으로 구현해본 애니메이션 정리 2021. 6. 29. 00:26 리액트에서 웹 UI 애니메이션을 구현하는데 유명한 라이브러리인 react-spring으로 구현해본 기능들을 정리한다. 1. Page Transition 참고 예시 SIMPLE TRANSITION peaceful-almeida-t7puq - CodeSandbox peaceful-almeida-t7puq by yujeongJeon using lodash, react, react-dom, react-router-dom, react-scripts, react-spring codesandbox.io history.location이 바뀔때마다 슬라이딩되어 넘어가는 애니메이션을 useTransition을 사용하여 구현하였다. 예시와 다른 점은 1 -> 2로 갈 때는 오른쪽으로, 2 -> 1로 backward될 때에는..
getEventListeners로 등록된 이벤트리스너 확인하기 2021. 6. 14. 18:23 웹 개발에서 이벤트 리스너가 잘 해제되고 있는지 확인해야 하는 경우가 있다. 그럴 때 getEventListener를 사용하여 확인할 수 있다. getEventListeners(window) getEventListeners(document) 결과 { error: Array(1), unhandledrejection: Array(1), pagehide: Array(1), popstate: Array(1) } 결과에서 볼 수 있듯이 [Event 종류]: Array으로 결과를 볼 수 있다. 예를 들어, React에서 visibilitychange 이벤트 리스너를 등록 후 지우지 않았다면 const Comp = ({children}) => { const onVisibilityChange = () => { /** ..
React 18에서 알아야 할 세가지(What You Need to Know About React 18) 2021. 6. 12. 23:46 Sheeraz Shaikh의 What You Need to Know About React 18을 번역하였습니다. > Going to see the original article { // Transition: Show the results setSearchQuery(input); }); React 18 Working Group Facebook에서 잘 알려진 라이브러리들의 author, maintainer들을 위한 working group을 생성했습니다. 그들은 이 특징들에 대해 사전 피드백을 주기 위해 논의하고 있습니다. 해당 논의들은 관심있는 누구든지 볼 수 있도록 열려 있습니다. 제가 팔로잉하는 링크를 공유합니다. https://github.com/reactwg/react-18/discussions/4..
제 5장. 예 2021. 6. 12. 20:35 제 4장. 수식과 명제보다 제 5장을 먼저 읽은 관계로 5장을 먼저 포스팅한다. 기본 1. 전형적인 예를 사용한다. 전형적인 예를 먼저 사용하고, 극단적인 예시를 사용한다. 글쓴이 사견 : 예시 코드를 작성할 때 일반적인 기능에 대한 구현을 예로 들면 더 효과적이겠다. 2. 들어맞는 예 -> 들어맞지 않는 예를 기술한다. 들어맞는 예와 들어맞지 않는 예는 비슷하지만 다른 성질을 갖는 예를 들면 좋다. 두 예가 아예 동떨어지면 본 개념에 대한 이해가 흐려질 수 있다. 3. 일반적인 예를 사용한다. 특수한 조건이 붙는 예를 활용하지 않는다. 4. 독자의 지식을 고려한 예를 사용한다. 글을 읽을 독자들이 알고 있는 배경 지식을 고려한다. 독자들에게 알기 쉬운 것, 익숙한 것, 알고 있는 것으로부터 예를 만든다..
제 3장. 순서와 계층 2021. 5. 31. 11:45 1. 순서는 글을 배열하는 것 독자가 글을 읽기 쉬운 순서로 나열한다. 작업 순서로 글을 나열할 때 번호를 추가하면 순서가 더 명확해진다. 번호 뿐만 아니라 글의 형식또한 통일한다. 아는 것에서 모르는 것으로 독자가 이미 알고 있는 것을 간결하게 쓴다. 알고 있는 것과 모르는 것이 섞인 내용을 쓴다. 모르는 것에 대해 자세히 쓴다. 2번의 알고 있는 것과 모르는 것이 섞인 내용을 쓸 때에는 예시를 제시하거나, 질문은 던져본다. 구체에서 추상으로 구체적인(특수한) 예시를 먼저 제시하고, 추상적인(일반적인) 경우를 설명한다. 또한 구체적으로 설명한 문단과 추상적인 문단은 병렬적인 형식을 취한다. (병렬법 참고) 특수 로그인 화면의 테스트 코드를 작성할 때 가장 먼저 화면의 입력란이 렌더링되었는지 확인하는 코..
cypress를 써보자! (2) 2021. 5. 23. 16:32 cypress를 써보자! (3) 목차 1. Webpack resolve.alias 2. Settig up CI 3. One intercept, multiple responses 1. Webpack resolve.alias 1주차에서 jsconfig.json에 alias 설정을 추가했다. 그러나 cypress:open 시 절대 경로를 못찾는 에러가 발생했다. cypress 웹팩 설정에서 resolve.alias를 해주지 않아 발생한 이슈였다. 따라서 cypress/plugins/index.js에 webpack resolve.alias 또한 추가했다. // ./cypress/plugins/index.js // ... 중략 ... module.exports = (on, ..

티스토리툴바