기타12

• 

  [기타] Mac에서 CLI로 IntelliJ 실행하는 법 순서 /usr/local/bin/idea 파일 생성한다. 해당 파일에 대한 쓰기 권한을 부여한다. chomod 777 /usr/local/bin/idea chomod 777 을 입력하여, 모든 사용자에 대해 r/w/x (읽기, 쓰기, 실행)이 가능하도록 허용한다. 해당 파일에 아래와 같이 내용을 수정 후 저장한다. open -na "IntelliJ IDEA.app" 실행하려는 디렉토리로 이동한다. 잘 수행 되는지 실행해본다. idea . 잘된다. 레퍼런스 https://www.jetbrains.com/help/idea/2023.3/working-with-the-ide-features-from-command-line.html#toolbox 기타 2024. 2. 24.

• 

  [기타] SpringBoot 환경에서 Swagger 3.0을 적용하는 방법 오늘은 SpringBoot 환경에서 Swagger를 적용하는 방법에 관해서 알아보도록 하겠습니다. 정의 Swagger란 개발자가 REST 웹 서비스를 설계, 빌드, 테스트, 문서화하는 일을 도와주는 오픈 소스 소프트웨어 프레임워크입니다. Spring Boot 3.0 이상 버젼에서는? Spring Boot 3 부터는 별도의 설정 없이, 아래 의존성만 추가해주면 자동으로 설정이 완료됩니다. 설치 후, 서버 구동한 뒤, [URL]/swagger-ui/index.html에서 확인 가능합니다. implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.0.2' Spring Boot 3.0 이하 버젼에서는? (Gradle) Swagger 3.0 기준으로.. 기타 2023. 12. 2.

• 

  [GIT] GIT을 통해 버젼관리를 하는 방법 - 혼자 작업하기 편 서론 오늘은 GIT을 통해 버젼관리를 하는 방법에 관해, 혼자 작업하는 상황을 가정하고 설명하겠습니다. 버젼관리 (변경사항 등록 및 삭제) Local Repository는 working directory, staging area, repository 이렇게 3개의 트리로 구성됩니다. working directory : 로컬 레포지토리 등록이 되면 자동으로 변경사항이 추적되며, 그 내용은 이곳에 기록되는 곳을 말합니다. staging area : 버전관리를 하고 싶은 파일/폴더들을 보관하는 곳입니다. repository : 버젼관리 등록이 된 파일/폴더들을 보관하는 곳입니다. 기본 사용 방법 git init 작업 중인 폴더에서 git을 사용할 수 있도록 해줍니다. git add [파일명] 폴더 내의 모든 .. 기타 2022. 12. 3.

• 

  VSCode 자주 쓰는 단축키 정리 자주 쓰는 단축키 활용 반복되는 코드 지정하기 하나씩 지정 : CMD(CTRL) + D 한번에 지정 : CMD + Shift + L 변수명/함수명 한번에 바꾸기 Mac : Ctrl + F2 Windows : F2 코드 위/아래로 복사하기 : opt + Shift + ↑,↓ 여러 곳에 커서를 두고 수정하기 : opt(Alt) + 마우스클릭 코드 맨 마지막에 커서 두기 : Shift + opt(Alt) + I 사이드바 숨김/보이기 : CMD(Ctrl) + B 이전커서로 이동 : CMD(CTRL) + U 함수/변수 따로 빼기 : CMD(Ctrl) + Shift + R 기타 2022. 10. 11.

• 

  [기타] Homebrew 사용 방법에 관해서 알아보자 서론 오늘은 Mac에서 필수적으로 쓰이는 Package manager인 brew를 활용해서 로컬 개발환경을 셋팅하는 방법에 관해서 알아보도록 하겠습니다. 오랜만에 블로그 포스팅인만큼 평소에 제가 자주 사용하는 패키지까지 모두 이야기 드리겠습니다! Homebrew 설치 방법 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 터미널에 해당 스크립트를 입력하시면 됩니다. 설치 패키지 설치 방법은 간단합니다. brew install [패키지명] 설치를 원하는 프로그램을 검색하시려면 해당 사이트에서 얼마든지 검색하실 수 있습니다. 개발 목적으로 nodejs, php, java(openjdk11.. 기타 2022. 10. 10.

• 

  NPM과 NPX의 차이점에 대해 알아보자 서론 오늘은 비슷하지만 다른 역할을 하는 NPM과 NPX의 차이점에 관해서 알아보도록 하겠습니다. 본론 NPM이란 NPM이란 node.js 환경에서 사용되는 패키지 관리자입니다. 패키지 매니저(Package manager)는 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴이며, 라이브러리가 코드의 작성을 위해 사용되는 코드의 묶음이라면 패키지는 코드의 배포를 위해 사용되는 코드의 묶음입니다. 또한 많은 패키지들은 다른 패키지들이 설치되어야만 제대로 동작하는데, 기존 패키지를 제대로 동작시키기 위해 필요한 다른 패키지들을 dependency(의존성)라고 한다. 따라서 패키지를 사용하고자 할 때, 의존성을 갖는 다른 패키지들을 전부 설치해 줄 필요가 있다. 다만, 이는 패키지가 늘어갈 때.. 기타 2022. 4. 16.

• 

  [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.