좋은 코드 품질을 유지하면서 개발을 하는것이 절대 쉬운 일이 아니라는 것을 느끼고 있는 요즘이다. 코드의 중복을 피하고, 추상화 하면서 코드를 짜는 것을 추구해왔지만, 무작정 짧다고 좋은 코드가 아니라는 것도 깨닫고 있다. 물론 코드의 중복을 피하고 적절한 수준의 추상화를 하는것은 중요한 일이다 React에서 예를 들면 반복되는 Hooks은 custom hooks 로 따로 만들어 관리하고, 컴포넌트를 쪼개는 등의 작업을 하는것은 당연한 것이다. 하지만 중요한것은 '적절한 수준'의 추상화 일것이다. 이게 꽤나 모호한 개념인데 그래도 어느정도의 룰은 있으니 한번 알아보도록하자 숨겨야하는 것 : 당장 몰라도 되는 디테일들 (코드의 의도 즉, 해당 훅을 사용하는 목적을 파악하기 위해 필요하지 않은 것) 숨기면 ..

Next.JS 에서 styled components의 사용 Next.js 에서 React 에서 한것 처럼 styled component를 사용해서 작업을 하게되면 처음에는 잘 적용되는 것 처럼 보이지만, 새로고침을 하게되면 이내 css가 적용되지않고 브라우저가 에러를 발생시킨다 이는 styled-component는 hash 값으로 스타일 관리를 하는데 Next.js에서 클라이언트 사이드와 서버사이드에서 생성된 해시값이 달라서 Classname이 매칭되지 않는데에서 오는 오류이다 이 때문에 따로 몇가지 설정을 해주어야한다 해결방법😀 모듈 설치 styled components를 위한 babel 모듈을 설치하고, 적용해주어야한다 설치 하는 방법은 아래와 같다 //dev dependancies로 babel-pl..

Next.JS Next.js 는 React로 서버사이드랜더링 (SSR)을 구현할 수 있는 라이브러리이다. 프론트엔드 생태계에서 아주 큰 지분을 차지하고 있는 Vercel이라는 회사에서 만들었고, 리액트에서 권고하는 툴체인 중 하나로 언급되는 툴이다. Next.JS 는 Node.js 환경에서 서버사이드 렌더링이 되는 웹사이트를 빌드할 때의 해결책으로 권고된다. SSR 의 장점 서버사이드 랜더링의 장점으로는 SEO최적화와, 초기 랜더링 속도의 상승을 꼽을 수 있다. React로 만들어진 SPA 웹사이트의 특성상 자바스크립트(React 코드) 가 화면에 랜더링 되기 전까지는 아무것도 보이지 않는 흰 화면만 보이게된다. 서버로부터 완전한 자바스크립트 파일을 다 받아오기 전까지 화면이 표시되지 않기때문인데, 이는..

예전에 해커톤으로 반려동물 SNS Oropet 프로젝트를 진행할때 한번 정규표현식을 만난적 있다. 시간에 쫒기며 개발을 해야해서 제대로 이해하지 못하고 넘어갔던 개념인데 이번 기회에 한번 알아보고자 한다. 정규표현식? let regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; 정규표현식은 프로젝트를 한번이라도 진행해 봤다면 어렴풋이 알것이다. 처음보면 난처하기 그지없는 이 표현식은 올바른 이메일형식인지 확인하는 정규표현식이다. 정규표현식이란 문자열에서 특정한 규칙에 따른 문자열 집합을 표현하기 위해 사용되는 형식 언어인데 대표적으로 웹 어플리케이션을 만들때 가장 먼저 마주하게되는 난관중 하나..

CI / CD란? CI (Continuous Integration) 는 지속적인 통합 이라는 뜻으로 CI를 성공적으로 구현 할 경우, 어플리케이션의 새로운 코드변경사항이 자동으로 테스트, 빌드되어 리포지토리에 통합되게된다. 지속적 배포가 제대로 이루어지려면 테스트 자동화가 제대로 설계되어 있어야한다. 실제 사례에서 지속적 배포란 개발자가 애플리케이션에 변경 사항을 작성한 후 몇 분 이내에 애플리케이션을 자동으로 실행할 수 있는 것을 의미한다. CD(Continuous Delivery / Deployment)란 지속적인 서비스제공 / 배포 를 의미하며 이 두 용어는 상호 교환적으로 사용된다. 두 가지 의미 모두 파이프라인의 추가 단계에 대한 자동화를 뜻하지만 때로는 얼마나 많은 자동화가 이루어지고 있는지를..

개발 프로세스 워터폴과 애자일 프로세스는 IT, 스타트업 등에 관심이 있는 사람이라면 한번쯤 들어봤을 개발문화이다. 워터폴, 애자일 프로세스를 알아보기전에 먼저 소프트웨어 개발 프로세스 모델에 대해 알아볼 필요가있는데 이는 소프트웨어 개발 생명주기 (SDLC, Software Development Life Cycle)을 기반으로 만들어진 모델이다 요구분석 및 시스템 명세작성 문제분석 단계라고도 하며, 개발할 소프트웨어의 기능과 제약조건, 목표 등을 사용자와 함께 정확히 정의하는 단계이다. 개발하고자 하는 소프트웨어의 성격을 정확히 이해하여 이를 토대로 개발 방법과 필요한 자원 및 예산 예측 후 요구명세를 작성하면 된다. 설계 설계단계에서는 앞서 정의한 기능을 실제로 수행하기 위한 방법을 논리적으로 결정하..