WEB/Insight

✨ 들어가기 코드에 대한 설계를 자신할 수 있다는 것은 소프트웨어 설계를 잘했다는 이야기이다. 그렇다면, 소프트웨어 설계는 어떻게 잘할 수 있는 것일까...? 바로 이를 도와주는 것이 계층형 설계이다. 지금부터는 계층형 설계가 무엇이고, 어떻게 활용하면 되는지 차근차근 살펴보자. 💡 계층형 설계란..? 위의 예시처럼 소프트웨어를 고치고, 읽고, 테스트하고, 재사용하기 쉬운 코드를 만드는 것이 바로 계층이다. 사실, 각 계층을 정확히 구분하기는 어렵지만 계층을 구분하기 위한 다양한 변수를 찾고, 찾은 것을 기반으로 어떻게 이를 활용해야 하는지 알아내야 한다. 좋은 설계를 위한 신호를 찾는 방법을 입력과 출력으로 나눈 것이다. 입력 함수 본문 계층 구조 함수 시그니처 길이 화살표 길이 함수명 복잡성 응집도 ..

📍들어가기 리액트는 함수형 프로그래밍이다. 하지만, 이에 맞게 기능을 개발하지 않고 함수를 만들게 된다면 의존성이 깊은 함수를 구현해내 의도하지 않은 버그를 마주할 가능성이 높아진다. 그래서 [원티드]프리온보딩-12월챌린지를 수강하면서 알게 된 액션/계산/데이터로 구현하기를 정리해보려 한다. ✨ 액션 / 계산 / 데이터 함수형 프로그래밍에서 구분해야 될 것은 단 3가지이다. 액션 👉 실행 시점과 횟수에 의존, 즉 부수효과가 있는 순수하지 않는 함수 ex) 이메일 보내기, 데이터 베이스 읽기 단점 외부 세계에 영향을 줄 수 있음, 테스트 시 로직과 외부 세계를 함께 재현해야 하는 문제 발생 실행하기 전까지 어떤 일이 발생하는지 알 수 없음 계산 👉 입력으로 출력을 계산, 순수함수 ex) 최댓값 찾기, 이메..

📍 들어가기 중고나라 웹 오픈을 준비하면서, 빠듯한 리뷰시간을 직접 경험했다. 그 안에서 기능 구현에 대한 만족도는 있었지만, 나의 코드 & 팀원들의 코드에 대한 리뷰 실력에 대한 부족함을 느끼게 되었다. 따라서 좋은 코드와 나쁜 코드를 구별할 수 있는 능력. 또, 팀원들과 코드 공유의 깊이를 확장 시키고 싶은 목표가 생겨, 이 책을 읽게 되었다. 어느 회사를 가도, 서비스를 온전히 혼자 만들어내는 곳은 없을 것이다. 즉, 내가 맡은 기능이더라도 언젠가는 다른 사람이 이 코드를 보고 버그를 수정해야 할 것이며, 그 과정에서 나쁜 코드가 나오게 된다면, 작업 속도는 느려질 수 밖에 없을 것이다. 만약, 퇴사를 한 사람의 코드라면 더더욱 어려움에 빠질 수 있는 가능성이 높아지게 된다. 그래서 코드의 가독성만..

✨ 들어가기 웹 프론트엔드 개발자라면 한 번씩 겪어보았을 에러가 바로 CORS 에러이다. 그만큼 정확하게 원리를 이해하고 있어야 문제 상황을 빠르게 해결할 수 있기에 해당 개념을 살펴보고자 한다. ✅ SOP 은 무엇인가? Same Origin Poclicy 로 같은 출처에서만 리소스 공유를 허용하는 정책이다. 🤔 같은 출처는 무엇인데? URL의 Protocol, Host, Port 가 모두 동일한 출처이다. 출처라는 것은 Protocol + Host + Port 까지 모두 합친 URL로 이해할 수 있다. 예를 들면, https://with-picme.com:8080/home?nickname=happhee#sop Protocol 👉 https Host 👉 with-picme.com Port 👉 8080 P..

✨ 들어가기 우선 PWA는 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱이다. 그래서 기존의 웹 앱과는 달리 네이티브 앱과 유사한 기능들을 제공 받을 수 있다는 것이 장점이며, PWA를 통해 사용자는 앱의 다운로드나 업데이트 필요없이 웹 브라우저로 앱을 바로 사용할 수 있게 되었다. 하지만, 여태까지는 안드로이드와 Chromium기반 브라우저에서만 거의 모든 기능을 제공하고 있었으며, Safari는 폐쇄적인 모습을 보이고 있었다. 그래서 웹을 개발할 때, Safari 브라우저에서만 지원하지 않는 API들이 많이 존재하고 있었다. 그러나 macOS, iOS, iPadOS 유저들의 점유율이 빠른 속도로 증가하면서 애플은 드디어 Web Push를 지원(Meet Web Push for Saf..

PWA를 배우기 앞서 Native Application, WebApp, Hybrid-App, Cross Platfrom 에 대해 학습해보자. ✅ Native Application 가장 기본적인 형태의 앱이다 === 모바일 기기에 최적화된 네이티브 언어로 개발된 앱 👉 해당 스마트폰에 깔린 OS, 안드로이드 또는 iOS 환경 전용으로 개발된 소프트웨어이다. Android 모바일 앱 개발의 경우는 Kotlin 또는 Java iOS의 경우 Swift 또는 Objective C 덕분에 앱의 실행 속도가 빠르고 유용한 API의 지원도 받을 수 있다. 반면 ‼️다른 운영체제 ‼️에서도 실행되기 위해서는 시간도 노력도 돈도 많이 드는 단점이 있다. 장점 단점 사용자에게 가장 빠르고 안정적이며 반응이 빠른 환경을 제공..

그동안 여러 번의 웹 프로젝트를 진행하면서 yarn install을 진행하는 시간, yarn start로 프로그램이 실행되기까지 시간이 꽤 걸린다는 것을 체감하였다. 왜 이렇게 오래 걸리는 걸까..? 라는 생각을 하며 node_modules 폴더 구조를 이해하고자 했다. NPM...? NPM은 Node Package Manager의 줄임말로 Node.js 설치 시에 자동으로 설치되는 기본 패키지 관리자이다. npm은 파일 시스템을 이용해 의존성을 관리하고, 누구나 온라인 플랫폼인 npm 레지스트리에 게시된 캐피지를 사용할 수 있도록 공유 공간을 만들어 준다. 더불어 이런 온라인 플랫폼과 상호작용하기 위해 명령 줄 인터페이스를 사용하면서 패키지 설치 및 제거가 가능하다. Yarn Yarn은 페이스북에서 개..

styled-components는 기본적으로 css-in-js 방식을 사용하고 있다. ✨ styled-components : CSS-in-JS CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 추세가 되고 있기에 styled-componets는 많이 사용되고 있다. 기존 방식(css, scss 등)의 단점 전역 관리 css 파일은 전역적으로 관리해야 한다. 다른 디렉토리에서 작업을 하더라도 해당 파일이 또 다른 디렉토리에 ..

프레임워크/라이브러리를 살펴 보기에 앞서 간단하게 SPA(Single Page Application)에 대해서 짚어보자. SPA Single Page Application 으로 모던 웹의 패러다임이다. 특징은 아래와 같다. 기본적으로 단일 페이지이다. 따라서 기존의 서버 사이드 렌더링에 비해 배포가 쉽고, 모바일 앱과 같은 UX를 제공한다. 기본적으로 모든 정적 리소스를 최초 한 번만 다운로드 받는다. 새 페이지 요청 시, 필요한 데이터만 전달 받아 페이지를 갱신한다. 필요한 부분만 갱신하므로 새로고침이 발생하지 않고 속도도 빠르다. 위의 장점과 더불어 처음에 다운로드 크기가 크므로 초기 속도는 느린 편이다. ✅ React vs Vue vs Angular vs Svelte React Vue Angular..