노마드코더 23

코코아 클론 챌린지 11일차

배울 점, 기억 할 점 저번 과제에서 상단의 ‘Playlist’ 가 가운데 정렬이 잘 안되었다. 이것은 text-align으로도 해결이 가능했다. reset.css : 대부분의 태그에 margin : 0, padding : 0, border : 0 등을 가진 css 파일. 브라우저에 의해 적용되는 스타일을 원하지 않기 때문에. style.css 파일에 @import “reset.css” 적어야함. input이 focus 되었을 때, input의 outline을 제거하려면, outline: none;을 input: focus{} 에 추가한다. 계속 써야하는 색이 있다면 variables.css 파일을 따로 만들어서 :root { ---yellow: #_123123;} 을 적어둔다. 색을 사용할 때는 var..

노마드 코더 2022.06.17

코코아 클론 챌린지 10일차

배울 점, 기억 할 점 id나 class 이름을 지을 때는 너무 일반적인 이름, 자주 사용되는 이름은 지양하기. 이름을 길게 언더바를 이용해서 짓는 것을 추천. ex ) status-bar__column BEM : Block__Element—Modifier class만 사용함. element는 block을 구성하는 단위. modifier는 block이나 element의 속성 담당. 단점은 class가 엄청 커질 수 있다는 것. ex ) block : .search-form element : .search-form__input , .search-form__button modifier : .search-form—color-orange(key-value 타입), .search-form—focused(boole..

노마드 코더 2022.06.15

코코아 클론 챌린지 8일차

배울 점, 기억할 점 position 1. position : fixed 스크롤을 내려도 그 위치에 고정 2. position: relative 엘레멘트가 처음 생성된 위치를 기준으로 top, bottom, left, right로 위치 수정 가능 3. position: absolute 가장 가까운 relative 부모를 기준으로 top, bottom, left, right로 위치 수정 가능 position: relative를 쓰면 부모가 된다. pseudo selector: id나 class 없이 엘레멘트 선택 가능 ex) div:first-child { } 첫번째 자식 div:last-child { } 마지막 자식 span:nth-child(2) { } 2번째 자식 span:nth-child(even)..

노마드 코더 2022.06.13

바닐라 JS 2주 완성반 챌린지 후기

2월 말에 파이썬 2주 완성 챌린지를 했었다. 챌린지를 마친 후, 강의를 듣고 따라하는 것보다 챌린지를 하면서 스스로 문제를 해결하고 모르는 것은 검색하며 더욱 발전할 수 있었다. 그래서 이번 바닐라JS 2주 완성 챌린지를 신청하게 되었다. 바닐라 JS 강의는 미리 한번 들어둔 상태로 챌린지를 진행하였고, 이번 챌린지도 하루도 결석하지 않고 모두 출석하였다. 챌린지를 하면서 공부한 것들을 더욱 오래 기억에 남길 수 있었다. 하지만, 파이썬과 달리 JS는 이번 강의와 챌린지가 처음이었고, HTML과 CSS도 제대로 공부를 하지않아 최종 과제를 제대로 꾸밀 수 없어 아쉬웠다. 그래서 다음 챌린지는 HTML과 CSS를 배우는 코코아 클론 챌린지다!

노마드 코더 2022.06.04

TIL 10장 클래스

오늘 TIL 3줄 요약 클래스는 한가지 책임을 가져야 한다. 큰 함수를 쪼개다보면 작은 클래스 여럿으로 쪼갤 기회가 생긴다. 클래스는 유연성과 재사용성이 높아야한다. TIL (Today I Learned) 2022.05.10 오늘 읽은 범위 10장. 클래스 책에서 기억하고 싶은 내용을 써보세요. 클래스 이름은 해당 클래스 책임을 기술해야 한다. 간결한 이름이 떠오르지 않는다면 필경 클래스 크기가 너무 커서 그렇다. (p.175) 단일 책임 원칙은 클래스나 모듈을 변경할 이유가 하나, 단 하나뿐이어야 한다는 원칙이다. 클래스는 책임, 즉 변경할 이유가 하나여야한다는 의미다. (p.175) 큰 함수를 작은 함수 여럿으로 쪼개다 보면 종종 작은 클래스 여럿으로 쪼갤 기회가 생긴다. 그러면서 프로그램에 점점 더..

TIL 9장 단위 테스트

오늘 TIL 3줄 요약 테스트 코드도 깨끗하게 짜야한다. 테스트 코드는 지속적으로 관리하고 표현력을 높여야한다. 테스트 함수 하나 당 하나만 테스트해야한다. TIL (Today I Learned) 2022.05.08 오늘 읽은 범위 9장. 단위 테스트 책에서 기억하고 싶은 내용을 써보세요. TDD 법칙 세가지: 1. 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다. 2. 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다. 3. 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다. 실제 코드가 진화하면 테스트 코드도 변해야 한다. 그런데 테스트 코드가 지저분할 수록 변경하기 어려워진다. (p.156) 코드에 유연성, 유지보수성, 재사용성을 제공하는 버팀목..

TIL 7장 오류처리

오늘 TIL 3줄 요약 예외가 발생할 코드를 짤 때는 try-catch-finally 문으로 시작하자. 메서드가 null을 반환하게 하지말고 빈리스트를 반환하도록하는게 낫다. 깨끗한 코드는 안정성도 높아야한다. TIL (Today I Learned) 2022.05.05 오늘 읽은 범위 7장. 오류처리 책에서 기억하고 싶은 내용을 써보세요. try 블록에서 무슨 일이 생기든지 catch 블록은 프로그램 상태를 일관성 있게 유지해야 한다. 그러므로 예외가 발생할 코드를 짤 때는 try-catch-finally 문으로 시작하는 편이 낫다. 그러면 try 블록에서 무슨 일이 생기든지 호출자가 기대하는 상태를 정의하기 쉬워진다. (p.132) 먼저 강제로 예외를 일으키는 테스트 케이스를 작성한 후 테스트를 통과하..

TIL 6장 객체와 자료구조

오늘 TIL 3줄 요약 절차적인 코드와 객체 지향 코드의 특성을 이해해야한다. 둘을 섞는 잡종 코드는 피하자. 각각의 특성에 따라 최적의 선택을 해야한다. TIL (Today I Learned) 2022.05.03 오늘 읽은 범위 6장. 객체와 자료구조 책에서 기억하고 싶은 내용을 써보세요. 절차적인 코드는 기존 자료 구조를 변경하지 않으면서 새 함수를 추가하기 쉽다. 반면, 객체 지향 코드는 기존 함수를 변경하지 않으면서 새 클래스를 추가하기 쉽다. (p.122) 절차적인 코드는 새로운 자료 구조를 추가하기 어렵다. 그러려면 모든 함수를 고쳐야 한다. 객체 지향 코드는 새로운 함수를 추가하기 어렵다. 그러려면 모든 클래스를 고쳐야한다. (p.122) 객체는 조회 함수로 내부 구조를 공개하면 안 된다는 ..

TIL 5장 형식 맞추기

오늘 TIL 3줄 요약 규칙을 일관적으로 적용해야한다. 비슷한 의미를 갖거나 내용이 이어지면 가까이 배치해야하고 간단하게 시작해서 자세한 내용으로 끝나야한다. 띄어쓰기, 들여쓰기, 함수 선언 위치, 변수 선언 위치 등을 고려해야 가독성이 좋은 코드를 작성할 수 있다. TIL (Today I Learned) 2022.05.02 오늘 읽은 범위 5장. 형식 맞추기 책에서 기억하고 싶은 내용을 써보세요. 오늘 구현한 코드의 가독성은 앞으로 바뀔 코드의 품질에 지대한 영향을 미친다. (p.96) 500줄을 넘지 않고 대부분 200줄 정도인 파일로도 커다란 시스템을 구축할 수 있다는 사실이다. (p.97) 소스 파일 첫 부분은 고차원 개념과 알고리즘을 설명한다. 아래로 내려갈수록 의도를 세세하게 묘사한다. 마지막..

TIL 4장 주석

오늘 TIL 3줄 요약 주석을 다는 것보다는 코드만 보아도 알 수 있도록 코드를 짜야한다. 이름을 잘 지으면 주석을 달지 않아도 될 수 있다. 주석을 잘못 달면 오히려 독이 될 수 있다. TIL (Today I Learned) 2022.04.28 오늘 읽은 범위 4장. 주석 책에서 기억하고 싶은 내용을 써보세요. 표현력이 풍부하고 깔끔하며 주석이 거의 없는 코드가, 복잡하고 어수선하며 주석이 많이 달린 코드보다 훨씬 좋다. 자신이 저지른 난장판을 주석으로 설명하려 애쓰는 대신에 그 난장판을 깨끗이 치우는 데 시간을 보내라! (p.69) 몇 초만 더 생각하면 코드로 대다수 의도를 표현할 수 있다. 많은 경우 주석으로 달려는 설명을 함수로 만들어 표현해도 충분하다. (p.70) 좋은 주석 1. 법적인 주석 ..

728x90