KARIU의 IT 블로그

클린코드 TIL(Today I Learned) - Day3 (2022.02.23) 오늘 읽은 범위 3장. 함수 책에서 기억하고 싶은 내용을 써보세요. 함수를 만드는 첫째 규칙은 '작게!'다. 함수를 만드는 둘째 규칙은 '더 작게!'다. (p.42) if문, else문, while문 등에 들어가는 블록은 한 줄이어야 한다는 의미다. (p.42) 중첩 구조가 생길만큼 함수가 커져서는 안 된다는 뜻이다. 그러므로 함수에서 들여쓰기 수준은 1단이나 2단을 넘어서면 안 된다. (p.44) 함수는 한 가지를 해야 한다. 그 한 가지를 잘 해야 한다. 그 한 가지만을 해야 한다. (p.44) 코드는 위에서 아래로 이야기처럼 읽혀야 좋다. 한 함수 다음에는 추상화 수준이 한 단계 낮은 함수가 온다. 즉, 위에서 아래로..

Array.find() 제공된 테스트 함수를 충족하는 배열의 첫 번째 원소를 반환한다. 충족하는 원소가 없으면 undefined를 반환한다. 예시) const emails = ["kariu@naver.com", "ray@gmail.com", "kk@gmail.com", "greentea@hanmail.net"]; const foundMail = emails.find(item => item.includes("@gmail.com")); console.log(foundMail); 결과) ray@gmail.com emails 배열에는 여러 이메일 주소들이 저장되어 있다. 이중에서 gmail인 이메일을 찾고 싶어서 .find()를 사용하였다. 하지만 emails 배열 안에는 "ray@gmail.com", "kk@..

클린코드 TIL(Today I Learned) - Day2 (2022.02.20) 오늘 읽은 범위 2장. 의미 있는 이름 책에서 기억하고 싶은 내용을 써보세요. 좋은 이름을 지으려면 시간이 걸리지만 좋은 이름으로 절약하는 시간이 훨씬 더 많다. (p.22) 이름으로 그릇된 정보를 제공하는 진자 끔찍한 예가 소문자 L이나 대문자 O 변수다. 두 변수를 한꺼번에 사용하면 더욱 끔찍해진다. (p.25) 컴파일러나 인터프리터만 통과하려는 생각으로 코드를 구현하는 프로그래머는 스스로 문제를 일으킨다. (p.25) 변수 이름에 variable이라는 단어는 단연코 금물이다. 표 이름에 table이라는 단어도 마찬가지다. (p.26) 명확한 관례가 없다면 변수 moneyAmount는 money와 구분이 안 된다. cu..

클린코드 TIL(Today I Learned) - Day1 (2022.02.19) 오늘 읽은 범위 1장. 깨끗한 코드 책에서 기억하고 싶은 내용을 써보세요. 앞으로 코드가 사라질 가망은 전혀 없다! 왜? 코드는 요구사항을 상세히 표현하는 수단이니까! 어느 수준에 이르면 코드의 도움 없이 요구사항을 상세하게 표현하기란 불가능하다. 추상화도 불가능하다. (p.2) 그들은 출시에 바빠 코드를 마구 짰다. 기능을 추가할수록 코드는 엉망이 되어갔고, 결국은 감당이 불가능한 수준에 이르렀다. 회사가 망한 원인은 바로 나쁜 코드 탓이었다. (p.4) 안 돌아가는 프로그램보다 돌아가는 쓰레기가 좋다고 스스로를 위로한 경험이 있다. 다시 돌아와 나중에 정리하겠다고 다짐했었다. 물론 그때 그 시절 우리는 르블랑의 법칙(l..

클린코드 책 구매 인증! 이제부터 시작.

Flexbox Froggy 소개 CSS에서 유용하게 사용할 수 있는 Flexbox! 이를 게임으로 더욱 재미있게 배울 수 있습니다. Flexbox Froggy라는 게임 사이트인데요. flexbox를 사용하여 개구리들을 옮기는 게임입니다. 물론 무료구요. 한국어로도 이용이 가능하며 설명 또한 자세하게 적혀있어 flexbox를 공부할 때 도움이 많이 되는 사이트입니다. 아래에 링크를 남겨 놨으니 한 번 방문하셔서 즐겨보시길 바랍니다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 총 24단계로 구성 되어있습니다. 정답도 같이 남기니 필요하신 분들은 참고해주시면 감사하겠습니다. Flexb..

CSS의 Flexbox를 공부하다보면 align-items, align-self, align-content 등 align에 관련된 속성이 많이 있어서 헷갈리는 경우가 있습니다. 이 글을 다 읽으면 아마 명확하게 이들의 차이점을 알 수 있게 될 겁니다. 먼저, align에 대한 속성은 교차축(기본적으로 세로방향)에 대한 위치를 설정해줍니다. align-items align-items는 교차축에 위치한 모든 요소들의 위치를 정해줍니다. Tips) items 이므로 모든 아이템들을 움직여준다라고 알아두시면 편합니다. align-self align-self는 교차축에 위치한 모든 요소들의 위치를 지정해주는 것이 아닌 특정 요소의 위치만 지정해줄 수 있습니다. Tips) self이므로 혼자, 즉 자기만 움직일 수..

목차 Flexbox란? Flexbox 사용법 Flexbox의 방향축 메인 축 설정 (flex-direction) justify-content의 속성 align-items의 속성 align-self flex의 줄바꿈 설정 (wrap, nowrap, wrap-reverse) 위 아래 줄 사이의 공간 조절(align-content) 특정 요소의 크기만 바꾸고 싶어. (flex-grow, flex-shrink) 1. Flexbox란? 플렉스박스(Flexbox)는 유동적으로 각 요소들을 배치하는 기법입니다. 예를 들어, 각 사용자들마다 화면 크기가 다른 전자기기를 이용하여 웹사이트를 보게 될텐데 각 화면에 맞는 배치를 일일이 계산할 필요 없이 Flexbox를 이용하여 손쉽게 구성할 수 있습니다. 또한 Flexbo..