작심삼일 개발이야기

스터디 끝나고 일주일이 지났다. 오늘은 14장을 진행하는 날인데 아무도 준비하지 않았다 ㅋㅋㅋㅋ 그래서 저번에 올리지 못한 13장을 올릴꺼다. 이번 내용은 같은 팀원의 요약을 가져왔찌만 이해는 못했따. 동시성과 깔끔한 코드는 양립하기 어렵다. 동시성이 필요한 이유 구조와 효율을 개선하기 위해 응답 시간과 작업 처리량을 개선하기 위해 무엇과 언제를 분리하게 되면 시스템 구조가 크게 달라진다. 하지만 동시성이 성능을 항상 개선하는 것도 아니고, 부하를 유발하고 복잡하고 버그도 재현하기 어렵다. 동시성 코드로 인해 발생할 수 있는 문제로부터 시스템 방어하는 방법 단일 책임 원칙 동시성 코드는 다른 코드와 분리하라. 임계영역의 수를 줄인다 보호할 임계영역은 synchronized 키워드로 보호하라고 권장하는데,..

17일 스터디를 진행하고 벌써 일주일째 다되어가서 늦은 업로드 휴가를 쓰면 공부도 하기 싫고 일상으로 돌아오기가 더 힘든 것 같다 창발적 설계로 깔끔한 코드를 구현하자 여기서 창발적이란 집단 지성? 같은 의미인 것 같다. 개별적으로 보면 크지 않지만 모이면 시너지가 생기는 그런 느낌 켄트 벡이 제시한 단순한 설계 규칙 네 가지 모든 테스트를 실행한다. 중복을 없앤다. 프로그래머 의도를 표현한다. 클래스와 메서드 수를 최소로 줄인다. 단순한 설계 규칙 1: 모든 테스트를 실행하라 의도한 대로 돌아가는 시스템을 내놓아야 한다. 테스트 케이스를 많이 작성할수록 결합도를 낮춰야 한다. 테스트 케이스를 작성하면 설계 품질이 높아진다. 단순한 설계 규칙 2~4: 리팩터링 테스트 케이스를 모두 작성했다면 점진적으로 ..

패스트 캠퍼스의 short book에 조은 개발자님의 지금 시작하는 프런트엔드 개발자를 위한 조언 책이 발간되었다. 요즘 공부도 하기 싫고 그렇다고 놀 수는 없고 short book이라고 하길래 가볍게 읽을 마음으로 구매해서 읽었다. 정말 short 해서 완독까지 1시간 정도 걸린 것 같다. 책 내용을 정리하기 보단 책을 읽으면서 느낀 점 위주로 적어보려 한다. 학습: 이론과 실전 프런트엔드 개발을 하면서 에러를 고치긴 고쳤는데 왜 고쳐졌는지 모를 때가 있었다. 문제없이 동작은 해서 넘어갔지만 좋은 습관은 아닌 것 같다. 나는 물론 리액트를 사용하며 개발을 진행하니 자바스크립트의 딥한 영역까지 몰라도 구현이 가능하긴 하다. 하지만 왜 가능하냐고 묻는다면 대답을 할 수가 없다. 언제까지 미뤄둘지는 모르겠지..

11장 시스템 도시를 세운다면? 도시가 돌아가는 이유 중 하나는 적절한 추상화와 모듈화 때문이다. 소프트웨어 팀도 도시처럼 구성한다. 시스템 수준에서도 깨끗함을 유지하는 방법을 살펴보는 장이다. 시스템 제작과 시스템 사용을 분리하라 제작(construction)과 사용(use)은 아주 다르다. 소프트웨어 시스템은 준비 과정과 런타임 로직을 분리해야 한다. (프론트엔드 관점에서는 무슨 말인지 1도 모르겠다) 시작 단계는 관심사 분리를 해야한다. 책에서 소개하는 초기화 지연(Lazy Initialization), 계산 지연(Lazy Evaluation)이 있다. 따로 간단하게 정리를 해두어서 링크로 대신한다. (지연 초기화) 초기화 지연, 지연 초기화 어떤 단어가 맞는지 잘 모르겠다. 확장 개발을 할 때 우..

클린 코드 책을 읽다 지연 초기화에 대해 조금 더 알아봤다. 마침 리액트 최적화에 관련된 글을 찾아서 정리해봤다. 아래의 두 코드를 비교해보자 코드 1 const Counter = () => { const [count, setCount] = useState( Number.parseInt(window.localStorage.getItem(cacheKey)), ) useEffect(() => { window.localStorage.setItem(cacheKey, count) }, [cacheKey, count]) return ( Count: {count} setCount((prevCount) => prevCount - 1)}>- setCount((prevCount) => prevCount + 1)}>+ ) ..

Next.js에서는 웹페이지의 사용 방식에 따라서 다양한 방식으로 데이터를 가져올 수 있다. 아래에서 설명하는 방법으로 적절한 방법으로 사용하면 될 것 같다. SSR (Server-side rendering) SSG (Static-site generation) CSR (Client-side rendering) ISR (Incremental Static Regeneration) SSR export async function getServerSideProps(context) { return { props: {} } } 해당 함수를 사용하면 서버에서만 실행되고 브라우저에서는 실행되지 않는다. 페이지에서만 사용할 수 있다. 언제 getServerSideProps를 사용해야 되나? 데이터를 가져와야 하는 페이지..

10장 클래스 클래스... 자바를 1도 모르는 나에겐 너무 먼 얘기다. 점점 클린 코드 책도 멀어지는 것 같다. 클래스 체계 클래스를 정의하는 표준 자바 관례라는 것이 있다. 가장 먼저 변수 목록이 나온다. 정적 공개 상수 -> 정적 비공개 상수 -> 비공개 인스턴스 그다음 공개 함수가 나온다. 자신을 호출하는 공개 함수 직후에 넣는다. 즉 추상화 단계가 순차적으로 내려간다. 함수 파트에서도 나온 말이지만 추상화 단계가 순차적으로 내려가 신문 기사처럼 읽힌다는 얘기를 여기서 또 하고 있다. 그만큼 중요하신 거겠지... 현재 리액트를 사용하면서도 추상화 레벨을 맞추려고 노력하고 있는데 노력한 만큼 코드는 깔끔해지는 것 같다. 캡슐화 이 부분을 읽고 이해를 하지 못해 조금 더 찾아보았다. 클래스를 사용하는 ..

한번쯤은 사용하는 정규식들 모아두면 좋겠다고 생각해서 이렇게 알아보는 김에 차곡차곡 모아 두자 물론 아래의 예시가 모두 정답은 아닙니다. 틀린 예시가 있다면 댓글로 알려주시면 수정하도록 하겠습니다. 물론 더 좋은 예시도 알려주시면 감사하겠습니다. 전화번호, 휴대전화 정규식 조건 일반전화, 휴대전화 모두 만족 02, 010, 011, 070 등등 앞자리 만족 중간 3,4 자리 번호 만족 /\d{2,3}-\d{3,4}-\d{4}/g 이메일 정규식 /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/i 아이디 정규식 조건 영문자와 숫자만 사용 가능 (영문자, 숫자 두 가지 모두 사용) 길이는 8~16자로 가능 첫 글자는 영문자로 시작 /^[a-zA-Z][0-9a-zA-Z..