분류 전체보기
[Typescript] 타입스크립트 non-null 단언 연산자 (Non-null assertion operator)
[Typescript] 타입스크립트 non-null 단언 연산자 (Non-null assertion operator)
2022.06.05🎯 Non-null assertion operator A new ! post-fix expression operator may be used to assert that its operand is non-null and non-undefined in contexts where the type checker is unable to conclude that fact !연산자는 앞의 값이 null or undefined가 아니라는 단언할 때 사용한다. // Compiled with --strictNullChecks function validateEntity(e?: Entity) { // e는 null또는 유효한 값일 수 있다. } function processEntity(e?: Entity) { validate..
[Clean Code] 함수
[Clean Code] 함수
2022.05.01📖 Clean Code - 함수 함수 📝 기억하고 싶은 내용 작게 만들어라! (p. 42) 함수에서 들여 쓰기 수준은 1단이나 2단을 넘어서면 안 된다. (p. 44) 한 가지만 해라! (p. 44) 따라서, 함수가 ‘한 가지’만 하는지 판단하는 방법이 하나 더 있다. 단순히 다른 표현이 아니라 의미 있는 이름으로 다른 함수를 추출할 수 있다면 그 함수는 여러 작업을 하는 셈이다. (p. 45) 함수 당 추상화 수준은 하나로! 함수가 확실히 ‘한 가지’ 작업만 하려면 함수 내 모든 문장의 추상화 수준이 동일해야 한다. (p. 45) 서술적인 이름을 사용하라! (p. 49) 함수가 하는 일을 좀 더 잘 표현하므로 훨씬 좋은 이름이다. 이름이 길어도 괜찮다. 겁먹을 필요 없다. 길고 서술적인 이름이 짧고 어..
[Clean Code] 의미 있는 이름
[Clean Code] 의미 있는 이름
2022.04.29📖 Clean Code - 의미 있는 이름 의미 있는 이름 📝 기억하고 싶은 내용 의미 있게 구분하라 (p. 25) 발음하기 쉬운 이름을 사용하라 (p. 27) 검색하기 쉬운 이름을 사용하라 (p. 28) 인코딩을 피하라 (p. 29) 클래스 이름과 객체 이름은 명사나 명사구가 적합하다. Customer, WikiPage, Account, AddressParser 등이 좋은 예다. Manager, Processor, Data, Info 등과 같은 단어는 피하고, 동사는 사용하지 않는다. (p. 32) 메서드 이름은 동사나 동사구가 적합하다. postPayment, deletePage, save 등이 좋은 예다. 접근자 Accessor, 변경자 Mutator, 조건자 Predicate는 javabean 표..
[Clean Code] 깨끗한 코드
[Clean Code] 깨끗한 코드
2022.04.23📖 Clean Code - 깨끗한 코드 추천사 ~ 1장. 깨끗한 코드 📝 기억하고 싶은 내용 코드는 요구사항을 표현하는 언어 (p.3) 우리 모두는 대충 짠 프로그램이 돌아간다는 사실에 안도감을 느끼며 그래도 안 돌아가는 프로그램보다 돌아가는 쓰레기가 좋다고 스스로를 위로한 경험이 있다. 다시 돌아와 나중에 정리하겠다고 다짐했었다. 물론 그때 그 시절 우리는 르블랑의 법칙을 몰랐다. 나중은 결코 오지 않는다. (p.4) 기한을 맞추는 유일한 방법은, 그러니까 빨리 가는 유일한 방법은, 언제나 코드를 최대한 깨끗하게 유지하는 습관이다. (p.7) 깨끗한 코드는 세세한 사항까지 꼼꼼하게 처리하는 코드다. (p.10) 나쁜 코드는 너무 많은 일을 하려 애쓰다가 의도가 뒤섞이고 목적이 흐려진다. 깨끗한 코드는 ..
[Clean Code] 클린 코드 시작
[Clean Code] 클린 코드 시작
2022.04.22📖 클린 코드 시작! 노개북 클린 코드 챌린지에 3주 동안 참가하게 되었다! 3주 동안 빠지지 않기!
[회고] 엘리스에서 2차 프로젝트를 마치고 작성하는 회고록 (feat. 유지 보수 및 리팩터링)
[회고] 엘리스에서 2차 프로젝트를 마치고 작성하는 회고록 (feat. 유지 보수 및 리팩터링)
2022.03.25📖 엘리스에서 2차 프로젝트를 마치고 🌱 GitFarm이란? GitFarm은 Git + Farm의 합성어로 농장을 컨셉으로 하여 Git 잔디 관리를 즐겁게 할 수 있도록 도와주는 서비스다. 개발자는 꾸준한 공부를 해야 하는데, 공부한 내용을 기록으로 남길 때 1일 1커밋을 주로 이용하곤 한다. 커밋 습관을 만들고 유지하도록 도와주어, 장기간 목표를 달성하고 성취감을 주기 위하여 GitFarm 프로젝트를 기획하게 되었다. GitHub - h1jun/GitFarm: GitFarm GitFarm. Contribute to h1jun/GitFarm development by creating an account on GitHub. github.com 🌟 GitFarm만의 차별점 기존 GitHub 페이지에서 제공하..
[회고] 엘리스에서 1차 프로젝트를 마치고 작성하는 회고록
[회고] 엘리스에서 1차 프로젝트를 마치고 작성하는 회고록
2022.03.22📖 엘리스에서 1차 프로젝트를 마치고 🐾 반려in이란? 국내 반려 인구 1500만 명 시대로 접어들었지만 그에 따라 유기되는 동물 또한 증가하고 있다는 기사를 접하게 되었다. 이러한 상황으로 펫샵이 아닌 보호소를 통해 유기 동물 입양을 독려하고 권장하는 "사지 말고 입양하세요"라는 캠페인이 진행되고 있다. 이러한 상황이 조금이나마 개선되기를 바라며 유기 동물을 입양에 관심 있는 사람들에게 정보제공 및 교류할 수 있는 커뮤니티를 제작하기로 결정했다. GitHub - h1jun/Pets-in: Pets-in Pets-in. Contribute to h1jun/Pets-in development by creating an account on GitHub. github.com ✍ 프로젝트에서 담당한 기능 - F..
[react-testing-library] 테스트 코드 작성 시 Tip
[react-testing-library] 테스트 코드 작성 시 Tip
2022.03.02🎯 테스트 코드 작성 시 Tip 테스트 코드를 3가지 관점으로 작성하면 쉽게 작성할 수 있다. 📝 Three “A”s test("renders Changed! if the button was clicked", () => { // Arrange render(); // Act const buttonElement = screen.getByRole("button"); userEvent.click(buttonElement); // Assert const outputElement = screen.getByText("Changed!"); expect(outputElement).toBeInTheDocument(); }); Arrange : 테스트 데이터와 테스트 조건 및 환경 설정을 준비 Act : 테스트해야 하는 로..
[React] 리액트 웹폰트 적용 방법과 최적화 방법 (feat. 2022년)
[React] 리액트 웹폰트 적용 방법과 최적화 방법 (feat. 2022년)
2022.02.25🎯 리액트 웹폰트 적용 방법과 최적화 방법 윈도우와 맥에서 동일한 폰트를 보여주기 위해 웹폰트를 적용하기로 결정했다. 웹폰트는 용량이 커서 다운로드 시간만큼 로딩 속도가 느려진다. 따라서 최적화 작업을 해주는 것을 권장한다. 📝 웹 폰트를 다운로드해 웹 페이지를 렌더링 하는 과정 브라우저는 HTML 문서를 요청 브라우저는 HTML 응답을 구문 분석하고 DOM을 구성하기 시작 브라우저는 CSS, JS 및 기타 리소스를 검색하고 요청을 발송 브라우저는 모든 CSS 콘텐츠가 수신된 후 CSSOM을 구성하고 이를 DOM 트리와 결합하여 렌더링 트리를 구성 페이지에서 지정된 텍스트를 렌더링 하는데 필요한 글꼴 변형을 렌더링 트리가 표시한 후 글꼴 요청이 전달 브라우저는 레이아웃을 수행하고 콘텐츠를 화면에 그린다...
[TIL] 엘리스 SW 엔지니어 트랙 Day 081 - The End
[TIL] 엘리스 SW 엔지니어 트랙 Day 081 - The End
2022.02.22📖 오늘 배운 내용 - 2022.02.19 파이 차트 퍼센트 계산 로직 수정 페이지에서 발생하는 버그 및 css를 전체적으로 수정 forEach로 코드 개선 📝 파이 차트 퍼센트 계산 로직 수정 🛠 기존 로직 const denominator = reposLanguage.length; for (let i = 0; i b.value - a.value); codeRatioArray..
[TIL] 엘리스 SW 엔지니어 트랙 Day 080
[TIL] 엘리스 SW 엔지니어 트랙 Day 080
2022.02.22📖 오늘 배운 내용 - 2022.02.18 그래프 페이지, 랭킹 페이지 버그 및 css 수정 랭킹 페이지 스켈레톤 ui 적용 📝 스켈레톤 ui 적용 이렇게 초기 로드 시 ui가 깨지는 현상을 발생했다. 저 부분을 스피너를 이용해 로딩 중이라는 것을 보여주려고 했지만 ui측면에서는 스피너보다 스켈레톤 ui가 사용자 측면에서 적합하다고 생각해서 도입하기로 결정했다. 직접 만들 수 있겠지만 시간이 부족해서 react-content-loader를 설치해서 사용하기로 결정했다. npm i react-content-loader https://github.com/danilowoz/react-content-loader React Skeleton - Create Content Loader 위 링크에 들어가면 사용법이 나..
[TIL] 엘리스 SW 엔지니어 트랙 Day 079
[TIL] 엘리스 SW 엔지니어 트랙 Day 079
2022.02.22📖 오늘 배운 내용 - 2022.02.17 그래프 페이지 실제 api 연결 후 버그 수정 연간 그래프 코드 삭제 네브바 반응형 작업 그래프 페이지 반응형 작업 📝 실제 api 주소와 mock api 주소가 다를 때 처리 방법 🛠 webpack.config.js plugins: [ ... ... new webpack.DefinePlugin({ "process.env": { MODE: JSON.stringify("development"), // MODE: JSON.stringify("production"), SERVER_URL: JSON.stringify("http://localhost:8888"), }, }), ], 🛠 src/utils/api.js export const commitsTotalPerMon..