🗝️소프트웨어

패스트캠퍼스 주니어 개발자를 위한 프론트엔드실무 완강 후기

들어가기 전에 안녕하세요🙂 작년에 대학교를 졸업하고 새롭게 프론트엔드 개발자로 국내 굴지의 에너지 기업에 합류하게된 Yollow라고 합니다. 평소 대학생때 AWS 및 ML 수업을 들을때, 처음 패스트캠퍼스를 알게되었는데요. 이때는 친구를 통해 데이터분석 관련된 좋은 개념 강의를 몇 개 알게되어, 그때부터 좋은 인연을 맺게되어 현재 회사를 다니고 있음에도 불구하고 자기 계발 차원에서 여러 강의를 듣고 있습니다. 또한 제가 다니는 그룹 차원에서도 다양한 직무에 계신 분들이 페스트캠퍼스 강의를 듣게하는데요. 그 이유는 현업에서도 각기 다른 분야(인공지능, 생산성 높이는 툴 사용법, 머신러닝, 데이터 처리 등등)에 대한 실무 역량을 높이는 창구로 인정받아서 인 것 같습니다.^^ 요즘 기술 변화가 예전과는 다르게..

[Flutter] 버튼 위젯(TextButton, ElevatedButton, OutlinedButton) 사용법과 예제 코드 그리고 그 외 필수 개념들

안녕하세요! 오늘은 Flutter에서 자주 사용되는 버튼 위젯인 TextButton, ElevatedButton, OutlinedButton에 대해 알아보겠습니다. 이 글에서는 해당 위젯들의 기본 사용법과 예제 코드를 제공합니다. 또한, 코드 작성 시 주의해야 할 몇 가지 플러터 규칙과 유용한 코드 정리 단축키도 함께 알아봅시다. Button - TextButton TextButton은 간단한 텍스트 버튼을 만들 때 사용됩니다. 아래는 TextButton을 생성하고 그에 대한 예제 코드입니다. TextButton( onPressed: () { // 버튼 클릭 시 실행할 동작 print('TextButton 클릭됨'); }, child: Text('TextButton 텍스트'), ) - ElevatedBu..

Flutter Wrap 위젯 사용 팁: option(⌥)+enter 단축키 활용하기

더보기 option(⌥)+ enter : 감싸는 구조(Wrap) 만들거나 제거할때 활용 1. Introduction Flutter에서는 Wrap 위젯을 많이 사용하는 것 같다. 왜냐하면 화면의 모든 요소 자체가 위젯이다 보니, 배치를 할때 Column, Row, Container 등을 적절하게 혼재해서 사용해야 하기 때문이다. 하지만 실제로 VS Code 또는 Android Studio로 코드를 짜는 경우 새롭게 Wrap 을 하는 것 자체가 쉽지 않은 작업이다. 괄호가 많고 자칫 잘못했다가 코드에서 에러가 발생하기 쉽상이기 때문이다. 그래서 Wrap 을 하기 위해서는 option 키와 enter 키를 같이 누르게 되면 해당 위젯에 대해 어떤 식으로 감쌀 것인지, 또는 감싸져 있는 부분을 제거할 것인지 선..

리눅스에서 virtualbox 사용하지 말자..(vboxapi)

ERROR: Could not find a version that satisfies the requirement vboxapi==1.0 (from versions: none) ERROR: No matching distribution found for vboxapi==1.0 ERROR: Could not find a version that satisfies the requirement vboxapi==6.1 (from versions: none) ERROR: No matching distribution found for vboxapi==6.1 앗, 참고로 해당 에러를 접하면서 리눅스에서는 virtualbox 와 같이 가상머신 sw를 python에서 제어하는 모듈같은거 설치안하기로 다짐했다. 버전1.0이 구..

pywin32 모듈 에러 - 해결방법(feat.Linux)

리눅스 환경에 파이썬 3.8 에 특정 라이브러리 다운로드 받는 중에 다음과 같은 에러가 발생했다 원래 도커에 이미지 하나 구운 다음 거기 안에서 파이썬 그냥 실행하는 것보다 가상환경 만들려고 하다보니 코드가 좀 복잡해지긴했는데,, 각설하고 ERROR: Could not find a version that satisfies the requirement pywin32==304 (from versions: none) ERROR: No matching distribution found for pywin32==304 ERROR: Could not find a version that satisfies the requirement pywin32==304 (from versions: none) ERROR: No mat..

vue에서 eslint 사용하기(eslintrc.js)

ESLint는 자바스크립트 코드에서 오류를 찾고 코드 스타일을 유지하기 위한 뛰어난 도구 중 하나인데요. 이 도구는 설정 파일인 .eslintrc.js을 통해 규칙을 구성할 수 있습니다. 이 파일은 일반적으로 프로젝트의 루트 디렉토리에 위치하며, ESLint의 동작을 변경하고 프로젝트의 품질을 개선하는 데 중요한 역할을 합니다. .eslintrc.js 파일을 수정하려면, 프로젝트 디렉토리에서 해당 파일을 열어서 원하는 변경 사항을 수행하면 됩니다. 예를 들어, 규칙을 추가하거나 삭제하거나 구성 옵션을 변경할 수 있습니다. 변경 사항을 저장하면 즉시 적용됩니다. 그러나 파일을 수정하기 전에, 파일의 내용을 이해하는 것이 중요합니다. ESLint 규칙을 변경할 때는 규칙이 어떻게 동작하는지, 해당 변경이 코..

[f/e] 캡쳐링과 버블링

1. 캡쳐링과 버블링 캡쳐링(capturing)은 이벤트가 가장 상위의 부모 요소에서부터 시작하여 실제 이벤트가 발생한 요소까지 내려오는 과정을 의미합니다. 따라서 이벤트가 발생한 요소에서 이벤트 리스너를 등록했더라도, 상위 요소에 등록된 이벤트 리스너가 먼저 호출됩니다. 반면에 버블링(bubbling)은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 과정을 의미합니다. 이 경우에는 이벤트가 발생한 요소에서 등록한 이벤트 리스너가 먼저 호출되고, 그 후에 상위 요소에 등록된 이벤트 리스너가 호출됩니다. 이벤트 리스너를 등록할 때, 세 번째 인자로 이벤트 전파 방식을 설정할 수 있습니다. 예를 들어, 아래와 같은 코드에서 캡쳐링을 사용하도록 설정할 수 있습니다. document.getElement..

도커 한방에 끝내기(이미지, 컨테이너, 명령어 총정리)

안녕하세요 공부하는 웅이입니다. 도커를 공부하고 있습니다. 배포를 해야할 일이 있는데, 파이썬 같은 경우 내부 라이브러리가 계속 업데이트 되기 때문에 호환성을 맞춰주려면 도커가 답인 것 같다는 생각이 들었습니다. 그래서 제가 공부한 내용을 제 블로그에 한장으로 정리해서 나중에 찾아보기 쉽게 코드도 같이 정리해서 넣었습니다. 읽어주셔서 감사드리며, 부족한 내용은 피드백 주시면 반영하도록 하겠습니다. 언제나 감사드리며, 오늘 하루도 승리하는 하루 보내시길 바라겠습니다. 모든 직장인, 학생 분들이여 힘내세요. 개발이 쉽지는 않지만 공부할 수록 재밌다는 생각이 듭니다. 그럼 시작하도록 하겠습니다. 재밌게 공부해봅시다. 1. 도커 - 서비스형 플랫폼 - 격리된 가상화 환경 생성 - 컨테이너 엔진으로 리눅스 커널 ..

[css3] text-overflow - 넘치는 텍스트 블러 처리하기

text-overflow 텍스트 오버플로우는 white-space를 이용하여 줄 바꿈을 하지 않고도 한줄로 텍스트를 처리하게 하는 속성인데, over-flow가 발생하도록 강제하지 않아서 긴 줄의 텍스트가 넘어가는 것을 방지할때 사용하기 좋은 속성이다. 굳이 해당 컨텐츠에 모든 내용을 다 보여줄 필요가 없고, 다른 컨텐츠들도 같이 병행적으로 보여줘야 하는 경우가 생길때, 사용하기 좋은 옵션이다. 혼자만 사용할 수는 없고, overflow 속성이 hidden, scroll, auto 로 놓고서 whitespace 가 nowrap인 경우에 사용이 가능하다. 즉, 3가지 속성을 한번에 같이 쓴다고 생각하면 편하다. 이렇게. white-space: nowrap; overflow: hidden; text-over..

비동기 API 처리

비동기 처리를 위해서 axios 를 사용했다. 그렇다면 비동기 처리는 무엇인가? - 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 다음 코드를 먼저 실행하는 자바스크립트의 처리 방법 대표적인 예로, 물건을 여러건 배송보내는 것을 생각하면 쉽다. 순서에 상관없이 여러 목적지에 보내도 알아서 배송 프로세스 따라서 물품 배송이 멈추지 않고 진행된다. axios는 무엇인가? - axios 라이브러르에서 사용하는 Promose 객체에 대해서 먼저 살펴보도록 하자. - 비동기 작업이 하게 되면 결과가 어쨋든 성공이거나 실패 아니면 둘도 아닌 진행중인 상태가 있을 것이다. - 그래서 다음 3가지 결과에 대해서, 성공 했을때는 어떤 행동을 하고, - 실패를 했을때에는 어떤 행동을 해야하는지를 정해놓은게 ..