본문 바로가기

분류 전체보기15

[Vue.js] vue-loader, SFC Spec, webpack 설정 1. vue-loader란 Vue 컴포넌트를 단일 파일 컴포넌트(SFCs) 형식으로 작성할 수 있게 해주는 webpack용 로더 vue-loader가 무엇인지, 어떤 기능을 하는지 그리고 webpack에서는 어떻게 설정해주면 되는지 정리해보았다. 2. Vue Single-File Component (SFC) *.vue 파일은 HTML과 같은 구문을 사용하여 Vue 컴포넌트를 설명하는 사용자 지정 파일 형식이다. 각 *.vue 파일은 , 3. vue-loader의 기능 여기서 vue-loader는 파일에서 각 언어 블록을 추출하고 필요한 경우 다른 로더를 통해 파이핑하여 (ex) 그 외에도 제공하는 기능을 요약하자면 다음과 같다. ▷ *.vue 파일에 커스텀 블록 생성 가능 ▷ 개발 중 핫 리로딩 제공 4.. 2022. 3. 3.
[CSS] Defensive CSS, 자주 사용하는 팁 모음 Defensive CSS CSS에서 종종 발생하는 문제로부터 보호되는 CSS를 작성하는 데 도움이 되는 스니펫 콜렉션 CSS에서 꽤나 자주 마주치는 상황들이 있다. 예를 들어 글자가 박스에서 튀어나온다던지 이미지 비율이 깨진다던지 그런 상황들에 대해서 대처하는 CSS 스니펫을 모아 정리해둔 글이 있길래 공부할 겸 해당 글 + 추가 팁들을 정리해보았다. Defensive CSS - Ahmad Shadeed A list of defensive CSS techniques to avoid potential future issues ishadeed.com 1. Flexbox 감싸기 Flexbox Wrapping display 속성을 flex로 설정했을 때 flex로 설정한 wrapper 크기가 내부 콘텐츠보다 작.. 2022. 2. 3.
[CSS] 선택자(selector) 우선순위, 명시도(specificity), !important 보통 하나의 요소(element)에는 여러 스타일 속성이 설정되어 있는 경우가 많다. 브라우저는 그렇게 설정된 속성들 중 어떤 속성을 우선적으로 적용할지를 계산한다. 먼저 선택자끼리 비교했을 때 우선순위가 높은 순대로 정리하자면 다음과 같다. 1. CSS 선택자 우선순위 1. !important 2. 인라인 스타일(HTML에서 직접 스타일 준 경우 style="") 3. ID 선택자(#example) 4. 클래스 선택자(.example), 속성 선택자([type="radio"]), 의사 클래스 선택자(:hover) 5. 유형 선택자(h1), 의사 요소(:before) 6. 부모 요소에 의해 상속된 속성 (선택자에 대해서 잘 모르겠다면 https://developer.mozilla.org/ko/docs/W.. 2022. 1. 26.
[Tip] 브라우저에서 JS, CSS 파일 변경사항 반영 안 될 때 해결 방법 1. 문제 상황 개발하다가 코드 변경 사항이 브라우저(크롬)에 반영이 안 될 때가 있었다. 분명 파일은 변경됐고 웹팩 빌드도 잘 되어서 build 폴더에 있는 min.js 파일까지 제대로 변경이 됐는데 브라우저에는 새로고침을 해도 변경사항이 반영이 되지 않았다. 찾아보다가 브라우저가 파일을 캐싱하고 있어서라는 사실을 알았다. 2. 해결 방법 개발자 도구 > 네트워크 탭에 들어간다. 그러면 상단에 Disable cache가 있는데 이를 체크하면 된다. 한글 모드에서는 캐시 사용 중지를 체크하면 된다. 2022. 1. 26.
[카카오] 2021 Tech developers 채용연계형 인턴 서류 합격 + 지원분야 설명회 후기 코딩 테스트 후기는 여기에서 [카카오] 2021 카카오 Tech developers 채용연계형 인턴 코딩테스트 후기 인턴십은 작년 여름에 진행했지만 더 늦기 전에 써보려는 후기 채용 공고 카카오에서 인턴십을 진행하는 것이 이번이 세 번째였다. 2019년 겨울에 1기, 2020년 여름에 2기를 모집했었어서 2020년 겨 leettle.tistory.com 1. 지원 분야 설명회 카카오는 코딩 테스트에 합격하여야 서류를 낼 수 있다. 코딩 테스트 합격 발표는 5월 14일(금) 오후 5시쯤 받았고 서류 제출은 5월 17일(월) 오후 5시까지였다. 그리고 세부 분야를 고르는데 도움이 되도록 지원 분야에 대한 설명회에 대해서도 안내해 주셨다. 지원분야 설명회 안내 1) 설명회 내용 - 이후 영입프로세스, 카카오 .. 2022. 1. 9.
[카카오] 2021 Tech developers 채용연계형 인턴 코딩테스트 합격 후기 인턴십은 작년 여름에 진행했지만 더 늦기 전에 써보려는 후기 1. 채용 공고 카카오에서 인턴십을 진행하는 것이 이번이 세 번째였다. 2019년 겨울에 1기, 2020년 여름에 2기를 모집했었어서 2020년 겨울에도 모집할 줄 알았고 코딩 테스트를 준비하고 있었다. 하지만 생각과 달리 겨울에는 모집하지 않았고 개인적으로 굉장히 아쉬웠던 기억이었다. 그래서 4월에 인턴십 공고가 떴을 때 힘든 학기를 보내고 있었지만 바로 지원해버렸다. 그런데 이번 인턴십 전에도 '채용연계형'이라는 조건이 붙어있었는지는 기억이 안 난다. 뭔가 이번이 처음으로 채용연계형이라고 명시하는 것 같은데.. 1-1. 모집분야 Programming - 세부분야 : Server / Client (Android, iOS, FE, Windows.. 2022. 1. 8.
[Logitech G HUB] 맥북에서 로지텍 G HUB 설치 무한 로딩 해결 방법 1. 로지텍 G HUB 설치, 무한 로딩 로지텍 게이밍 마우스를 사용하게 되어서 로지텍 G Hub를 통해 감도를 설정하려고 했다. 로지텍 G HUB 고급 게이밍 소프트웨어, RGB, 게임 프로필 로지텍 G HUB는 제품의 활용도를 높여주는 새 소프트웨어입니다. 게임별로 기어를 빠르게 개인화할 수 있습니다. www.logitechg.com 로지텍 홈페이지에서 설치 파일을 다운 받았고 압축 해제를 한 뒤 설치를 실행하려 했으나 초기화 중... 이라는 문구와 함께 무한 로딩에 빠져버렸다. 나는 Big Sur 11.2.3 버전을 쓰고 있었고 찾아보니까 빅서 버전에서 installer에 이슈가 있는 듯 했다. 2. 무한 로딩 해결 방법 그래서 구글링을 해보다가 이 페이지에서 해결 방법을 찾을 수 있었다. How .. 2021. 10. 19.
[일상] 스타벅스 블랙 글레이즈드 라떼 모음 스타벅스 시즌 메뉴 블랙 글레이즈드 라떼를 한 달 동안 마시는 중이다. 아인슈페너 같은 맛이라 생각하고 시켰는데 다르다. 커피에 글레이즈드 크림을 올린 것 같은데 아주아주 달다. 너무 달다. 달고나 커피 급으로 달다. 근데 또 이상하게 맛있어서 계속 마시는 중이다. 위에 가루가 맛있는데 지점마다 양을 다르게 준다. 여기는 아주 많이 준다. 그래서 좋다. 여기도 많이 준다. 굿이다. 여기는 매우 조금 준다. 왜 리저브들이 더 조금 줄까. 더 많이 줬으면 좋겠다. 2021. 10. 7.
[삼성전자] 2021 대학생 인턴 무선사업부 SW 개발 면접 합격 후기 시간이 꽤 지난 삼성전자 인턴 전형 후기! 서류 + SW역량테스트 후기는 전 글을 참고하세요 😊 [삼성전자] 2021 대학생 인턴 무선사업부 서류 + SW 역량 테스트 후기 시간이 꽤 지난 삼성전자 인턴 전형 후기! 1. 서류 (CE/IM부문 SW개발) 지원 기간: 3월 15일(월) ~ 3월 22일(월) 오후 5시 지원 자격: 2021년 12월 ~ 2022년 8월 졸업 예정인 재학생(석사 제외) + OPIc IL 이상 3.. leettle.tistory.com 3. 면접 (무선사업부) 일시: 2021년 5월 28일(금) 오후 13:00 장소: 삼성전자 인재개발원(경기 용인시 기흥구 서천동로 59) 직무: 삼성전자 무선사업부 - SW 개발 복장: 비즈니스캐주얼 또는 정장 SW역량테스트 결과가 발표되고 이틀.. 2021. 10. 6.
[삼성전자] 2021 대학생 인턴 무선사업부 서류 + SW 역량 테스트 합격 후기 시간이 꽤 지난 삼성전자 인턴 전형 후기! 1. 서류 (CE/IM부문 SW개발) 지원 기간: 3월 15일(월) ~ 3월 22일(월) 오후 5시 지원 자격: 2021년 12월 ~ 2022년 8월 졸업 예정인 재학생(석사 제외) + OPIc IL 이상 3월 15일에 삼성전자 2021년 대학생 인턴 모집 공고가 떴습니다. 작년에는 코로나가 처음이라서 그런지 4월 쯤에 떴던 것 같은데 올해는 다른 연도와 비슷할 때 뜬 것 같아요. 검색해보면 삼성전자 역대 채용일정을 찾을 수 있으니 언제 뜰지 예상하고 미리 자소서 써두면 좋을 것 같습니다. 보통 삼성전자 대학생 인턴 전형은 상반기에만 떠서 하계 인턴만 모집합니다. 저는 당시 4학년 1학기를 재학 중이어서 3급 신입 공채는 지원 못하고 인턴만 쓸 수 있었습니다. .. 2021. 10. 4.
[구글 서치콘솔] 티스토리 구글 검색되게 설정하기 (Google Search Console) 티스토리는 네이버 블로그와 달리 구글에서 검색이 가능하게 하려면 설정이 필요합니다. 구글 서치콘솔(Google Search Console)에 티스토리를 등록하는 작업이 필요한데 어떻게 하는지 알아보도록 합시다. 1. 구글 서치콘솔 등록 먼저 블로그 관리에서 플러그인 메뉴에 들어가 구글 서치콘솔을 클릭합니다. 그럼 이렇게 '서치콘솔 바로가기' 링크가 존재하는데 클릭해서 구글 서치콘솔 페이지에 들어갑니다. (https://search.google.com/search-console 링크로도 들어갈 수 있습니다.) 만약 구글 서치콘솔 등록이 처음이라면 아래와 같은 창이 뜨게 됩니다. 오른쪽에 있는 URL 접두어 영역에서 URL 입력창에 자신의 티스토리 주소를 입력하고 계속을 눌러줍니다. 2. 블로그 소유권 확인.. 2021. 9. 8.
[환경설정] 바닐라 자바스크립트 + Webpack + Babel + Jest 설정하기 바닐라 자바스크립트로 프론트엔드 개발을 시작하기에 앞서 웹팩과 바벨을 사용하여 개발 환경을 설정하려 합니다. 웹팩과 바벨은 다음과 같은 역할 등을 수행할 수 있습니다. Webpack 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러 웹팩을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없습니다. 또한 여러 개의 자바스크립트 파일을 하나로 번들링함으로써 HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라질 수 있습니다. Babel 최신 사양의 소스 코드를 ES5 사양의 소스 코드로 변환(transpiling) 바벨은 ES6 이상의 자바스크립트 소스 코드를 트랜스파일링.. 2021. 9. 6.
[일상] 티스토리 시작 이제 좀 시간이 여유롭기도 하고 해서 그동안 하고 싶었던 블로그 포스팅을 하려고 한다. 근데 티스토리를 꾸미려고 보니 이건 뭐 블로그를 꾸미는게 아니라 마크업 개발을 하고 있는 것 같다. 그래도 내가 원하는 대로 꾸밀 수 있다는게 큰 장점인 것 같다. CSS를 다룰 수 있어서 다행이라고 할까 그렇지만 디자인은 너무 어렵다 반응형에 대해서도 더 공부해야겠다. 그나저나 이렇게 변경해놓아도 모바일로 들어가면 반영이 되어있지 않은 것 같다. (아이폰이라 그런걸까..) 구글 검색이 가능하게 변경했는데 이것도 반영이 되려면 기다려야 하는 것 같다. 2021. 9. 5.
[환경설정] 맥에서 Anaconda 환경으로 pytorch 사용하기 졸업 작품으로 pytorch를 이용하여 image classification을 할 일이 생겨 Anaconda를 사용하여 맥에서 pytorch를 사용해보려 합니다. 1. Anaconda 설치 운영체제에 맞는 Anaconda installer를 다운 받아 설치해줍니다. Anaconda | Individual Edition Anaconda's open-source Individual Edition is the easiest way to perform Python/R data science and machine learning on a single machine. www.anaconda.com 이때 터미널에서 conda라는 명령어를 쳐보면 해당 명령어가 없다는 에러가 뜨게 됩니다. 2. 환경변수 설정 ~/.zs.. 2021. 9. 5.
[카카오프렌즈] 춘식베이비필로우 춘-하 춘식이-하이 당당하게 손을 들며 반기는 모습이 매우 귀엽다. 2021. 9. 5.
반응형

티스토리툴바