기타18

• 

  [UI] 아토믹 디자인이란 무엇인가? 해당 글은 추후에 수정 보완될 수 있습니다. (1/15) 본론 아토믹 디자인 패턴은 UI 설계 방법 중 하나입니다. 복잡한 화면을 가장 작게 분해할 수 있는 원자 단위까지 나눔으로써, 각 요소 간 컴포넌트 재활용성은 높이고 복잡한 화면 구성을 쉽게 처리해주는 접근 방식 중 하나입니다. 아토믹 디자인이란 아토믹 디자인이란 브랜드 포트에 의해 만들어진 UI 설계 방법론입니다. 참고링크 Atom 해당 설계의 최소 단위. form, input ,button 같은 HTML의 태그나 최소의 기능을 가진 기능의 커스텀 태그 컴포넌트. 설계에 따라 속성에 따른 스타일 주입이 들어갈 수 있습니다. Card System에서 제목, 내용, footer 들이 각각 이에 해당됩니다. Molecule Atom들을 최소의 역할을 .. 기타 2022. 1. 6.

• 

  IOS Chrome, Safari에서 Smooth Scroll이 안될 때 해결법 본론 글이 짧으므로, 본론만 이야기하겠습니다. html { scroll-behavior: smooth; } CSS로 간단하게 smooth-scroll 효과를 위와 같이 줄 수 있습니다. document.getElementById(아이디).scrollIntoView({ behavior: 'smooth', }); 혹은 위의 예제처럼 ScrollIntoView 함수를 사용하여 해당 영역으로 이동시킬 수 있습니다. 그리고 Scroll option으로 smooth를 주면 부드럽게 스크롤링이 되는데요. 문제는 이 옵션이 IOS Chrome, Safari에서는 지원되지 않는다는 점입니다. (아래 참고 링크를 통해 확인할 수 있습니다.) 그래서 a 태그를 누르면 페이지가 깜빡이듯 페이지 깜빡임은 물론, smooth s.. 기타 2021. 12. 27.

• 

  레르나(Lerna)를 활용하여 모노레포를 관리하는 방법 서론 대상독자 규모가 큰 웹 어플리케이션 개발 상황에서 코드 재활용성을 높임으로써 프로젝트를 효과적으로 관리해주고 싶은 프론트엔드 개발자 멀티레포 구조에서 매번 새롭게 코드를 클론하고 prettier나 eslint 등 개발환경을 셋팅하는데 번거로움을 느끼는 프론트엔드 개발자 기존 멀티레포 구조에서의 의존성 관리를 lerna를 통해, 모노레포 구조에서 편한 방식으로 해결하고 싶은 개발자 오늘의 학습 목표 레르나의 역할과 기능에 대하여 이해하고 활용할 줄 안다. 모노레포의 정의와 필요성에 대해서 알고 실제 프로젝트에 적용할 수 있다. 모노레포 환경 아래에서 특정 프로젝트에 필요한 라이브러리를 설치하는 방법에 대해서 안다. 모노레포 환경 아래에서 프로젝트에 필요한 공통 라이브러리를 설치하는 방법에 대해서 안다.. 기타 2021. 12. 23.

• 

  [Storybook] 스토리북 환경 설정하기 (with Styled-component) 서론 웹 UI 개발에 빠질 수 없는 라이브러리가 있다면 바로, 스토리북일 것입니다. 오늘은 스토리북 환경설하는 방법에 대해서 간단히 알아보겠습니다. 대상독자 스토리북을 처음 접하는 프론트엔드 개발 입문자. 오늘의 학습 목표 storybook cli를 통해 리액트에서 스토리북 환경 설정을 하는 방법, 그리고 기본적으로 제공되는 파일들의 기능을 아는 것이 목표입니다. storybook 설정에 대해서 집중해서 알아보기 위해, 자동으로 많은 설정을 해주는 create-react-app 혹은 create-next-app을 사용하지 않았습니다. create-next-app을 사용한 후, storybook cli로 환경설정을 해줘도 같은 결과가 나타납니다. create-react-app와 같이, 이미 부트스트래핑된 .. 기타 2021. 8. 2.

• 

  [웹/앱 아키텍처] 클린 아키텍처란 무엇인가? 서론 아마 프로그래머 분들이라면 한번 쯤 클린코드라는 책을 들어보셨을 것 같은데요, 클린 아키텍처 역시 마찬가지입니다. 오랜 기간 동안, 프로그래머로 일해오신 로버트 C. 마틴 작가님께서 쓰신 책입니다. 제가 알기론 반 세기(!?) 동안 프로그래머로 일하셨다고 해요. 정말 대단하지 않나요? 오늘 다뤄 볼 클린 아키텍처는 소프트웨어 설계 방법론으로 주로 웹이나 모바일 앱의 아키텍처로 자주 활용된다고 합니다. 단순히 프레임워크를 사용할 줄 아는 수준을 넘어, 저를 포함하여 조금 더 체계적이고 소프트웨어를 만들고 싶은 분들이라면 오늘 내용에 주의를 기울여보면 좋은 통찰을 얻어갈 수 있으시리라 생각합니다. 아키텍처? 왜 알아야할까. 소프트웨어 개발자로 일하다보면, 소프트웨어 아키텍처에 관한 이야기와 글들은 평소.. 기타 2021. 6. 24.

• 

  프론트엔드 직무 면접장에서 받았던 질문 목록들 웹/네트워크 사용자가 웹 서버로부터 파일을 전송 받기까지의 과정을 설명해봐라. CSR과 전통적인 렌더링 방식/SSR과의 차이를 설명해봐라. HTTP Status code에 대한 설명을 해봐라. 401과 403의 차이점은? CSS Scss와 css-in-js 방식의 차이점 그리고 장/단점을 설명해봐라. JavaScript TypeScript를 써봤는지? 정적 타이핑과 동적 타이핑의 차이점을 이야기해봐라. 동기 프로그래밍과 비동기 프로그래밍의 차이는 무엇인가? 콜백 지옥을 들어봤는지? 콜백지옥의 해결 방법은 무엇인가? ES6 이상의 문법을 사용해봤는지? 여러 개의 비동기 응답을 한 번에 받도록 처리하려면 어떻게 해야 하는지? React/React Native SPA란 무엇인가? 기존 렌더링 방식과의 차이점은.. 기타 2021. 5. 18.