전체 글 257

Vite + React + tailwind css + firebase 초기세팅

// vite 프로젝트 생성 $ npm create vite@latest 명령어 입력시 선택항목 표시 이름:solyi(프로젝트명) -> 선택:react -> 선택:JavaScript // 프로젝트로 이동 $ cd solyi // 폴더 열기 $ code . -r // tailwind 설치 $ npm install -D tailwindcss // 테스트 실행 $ npm run dev // firebase 설치 $ npm i firebase // firebase-tools 설치 (node version 14.18.1) $ npm install -g firebase-tools@9.2.0 // login $ firebase login $ firebase init 명령어 입력시 선택항목 표시 -> firestore..

Frontend/└React 2023.05.13

[ERROR]노마드 코더 / xhr poll error / socket.io / admin ui

노마드 코더 줌 클론 강의를 그대로 진행하다보면 socket.io의 admin ui 를 실행했을때 xhr poll error 가 발생합니다. 1. https://admin.socket.io 에 접속한다. 2. 아래와 같이 세팅한다. Server URL : http://localhost:3000 * 맨 끝 슬래시가 있으면 안됩니다. [X] http://localhost:3000/ Advanced options: 체크 WebSocket only?: 체크 Admin namespace: /admin (기본설정) 설정 코드는 다음과 같습니다. import { Server } from 'socket.io' import { instrument } from '@socket.io/admin-ui' ... const ht..

ERROR 2023.01.26

python 8일차 / indeed / selenium / chromedriver / beautifulsoup / None (data-type)

from requests import get from bs4 import BeautifulSoup from extractors.wwr import extract_wwr_jobs # function 을 import # from 폴더명.파일명 import function명 # jobs = extract_wwr_jobs("python") # print(jobs) # base_url = "https://kr.indeed.com/jobs?q=" # search_term = "python" # response = get(f"{base_url}{search_term}") # print(response) # if response.status_code != 200: # print("Fail") # else: # prin..

Backend/Python 2023.01.10

python 7일차 웹 스크래핑 / beautifulsoup 4 / find / find_all / requests / response status_code

# 5.0 웹 스크래핑 # beautiful soup (웹사이트의 데이터를 받아올 수 있게 해주는 python 라이블러리) # 5.1 다운로드 # $ pip install beautifulsoup4 # https://www.crummy.com/software/BeautifulSoup/bs4/doc/#quick-start # 5.2 주의사항 # 웹스크래핑으로 상업적 이용시 주의해야한다. from requests import get from bs4 import BeautifulSoup base_url ="https://weworkremotely.com/remote-jobs/search?term=" search_term ="vue" reseponse = get(f"{base_url}{search_term}")..

Backend/Python 2023.01.10

[vue]컴포넌트 자세히 알아보기

1. 섹션 소개 컴포넌트 등록 및 스타일에 대해 Component Registration & Styling 컴포넌트를 스타일링 하는 방법과 특정 스타일이 특정 컴포넌트에만 영향을 미치도록 하는 방법도 알아본다 슬롯과 동적 컴포넌트 Slots & Dynamic Components 컴포넌트 이름과 프로젝트 폴더 구조 Naming & Folder structure 2. 전역 컴포넌트Global Components와 지역 컴포넌트Local Components main.js에서 app.component('the-header', TheHeader); 처럼 설정하는건 vue앱의 전역에서 사용할 수 있는 컴포넌트다. 하지만 컴포넌트를 등록하는 방법 중에서 가장 좋은 방법은 아니다. 한가지 잠재적 단점이 있다. 모든 컴..

Frontend/└vue 2023.01.10

python 6일차 / for ~ in ~ / for loop / requests / status_code

# 4.5 For Loops websites = ( "google.com", "airbnb.com", "https://twitter.com", "facebook.com", "https://tictoc.com" ) websites[0] # tuple 의 갯수만큼 반복 for website in websites: print("Hello", website) # 일반적으로 tuple이나 list를 만들 때 복수형으로 만든다 # websites, movies, users, photos ,... # for 에서는 단수형으로 쓴다. # website, movie, user, photo # 4.6 URL Formatting for website in websites: if not website.startswith("h..

Backend/Python 2023.01.06

python 5일차 / method / list / tuple / dictionary

# 4.0 Methods # python 에는 3가지 데이터 구조가 있다. # list # tuple # dictionary # 자료구조 Data structure란 무엇일까? # 데이터를 구조화 하고 싶을 때 사용한다. # list # days_of_week = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] # print(days_of_week) name = "solyi" print(name.upper()) # 대문자로 출력 # upper() 외에도 엄 청 많 은 function 들이 결합되어있다. # "solyi"는 string 인데 내부에 많은 function 을 가지고 있다. # 이것들을 function 이 아닌 method 라고 부른다. # capita..

Backend/Python 2023.01.05

console.log / console.table / console.error / console.info / console.debug / console.warn /

console.log() console.group() console.groupEnd() console.table() console.dir() console.error() console.info() console.debug() console.warn() console.clear() const arr = [ { name: 'solyi', birthday: '5/15' }, { name: 'may', birthday: '11/7' } ] console.table(arr) console.info("인포메세지~"); console.debug("디버그~~"); console.warn("와닝와닝~"); console.error("에러메세지~"); console.debug 는 상세 메세지에서 따로 볼 수 있다.

Frontend 2023.01.04

python 3일차 / if / elif / else

# 3.0 if # if condition: # "write the code to run" if 10 == 10: print("True!!") a = "solyi" if a == "solyi": print("YES!") # 3.1 Else & Elif if 10 > 5: print("True") # else 는 옵션이다 무조건 사용해야하는 것은 아님 password_correct = False # True if password_correct: print("Here is your money.") else: print("Wrong password.") # elif (== else if) # else와 마찬가지로 반드시 써야하는것은 아님 winner = 10 if winner > 10: print("winne..

Backend/Python 2023.01.02

python 2일차 / function / def / parameters / arguments / return values / format / f""

# 2.4 Functions # function 을 정의할 때 def 를 쓴다. # 변수와 마찬가지로 숫자로 시작하면 안되고 스네이크 케이스를 쓴다 def say_hello(user_name, user_age): # parameter print("hello", user_name, "how r u ?") print("you are", user_age, "years old.") # 2.5 Identation # python에선 공백이 매우 중요하다. # 코드를 두칸 띄워줘야 그 코드가 어떤것 안에 들어가 있는걸 알수있다. def say_bye(): print("bye~") say_bye() # 2.6 Parameters # parameter: function의 괄호 안에서 쓰는 인자 # argument: f..

Backend/Python 2023.01.02

Python 1일차 / 변수 / string / bool

# 2.0 Hello world print("Hello world!") # 2.1 Variables 변수 a = 2 b = 3 c = a + b c = 1 #파이썬은 위에서 아래로 코드를 읽는다. print(c) # 변수는 숫자나 기호가 아닌 글자로 시작 해야한다. # 변수명에는 띄어쓰기를 사용할 수 없다. # python에서는 스네이크 케이스로 작성한다. myAge = 77 # camelCase는 javascript에서 많이 사용된다. my_age = 77 # python 에서는 스네이크 케이스를 많이 쓴다. print(myAge) print(my_age) # 2.2 Booleans and Strings my_name = "solyi" print(my_name) # True, False 는 첫 글자를 ..

Backend/Python 2023.01.02

[vue]컴포넌트 통신

세션8: 컴포넌트 통신 Component Communication & Reusable 1. 이번 세션 학습 컴포넌트로 UI를 구성하는 방법 어떻게 컴포넌트끼리 통신하는지, 컴포넌트 사이에서 어떻게 데이터를 주고 받는지 어떤 접근법이 있고, 어떻게 선택 해야하는지 2. 외부에서 데이터 받아오기 중요!같은 컴포넌트를 여러번 사용할때 매번 다른 데이터로 설정한다는 개념 props property의 약자로 커스텀 html 속성을 의미한다. props 로 설정한 것을 vue가 인식하게 하려면 받는 component 에서 props 를 추가해주어야한다. 가장 단순하게 받는 방법은 [ ] array 이다. props: [], 그 다음 모든 커스텀 속성을 추가해준다. props: [ 'name', 'phoneNumbe..

Frontend/└vue 2023.01.02

[책]혼자 공부하는 컴퓨터구조 + 운영체제

* 한빛미디어 활동을 위해서 책을 제공받아 작성된 서평입니다. * 이 책을 선택한 이유 나는 경영학과 출신으로 국비학원에서 6개월간 교육을 받고 웹 개발자로 취직하여 3년 차에 접어든다. 전공자들은 대체로 1, 2학년 때 컴퓨터 구조나 운영체제에 대해 필수로 학습한다고 들었다. 남들이 하도 필수 과목이다, 개발자라면 반드시 알아야하는 개념이다라는 말을 많이 해서 학점은행제로 컴퓨터 구조와 운영체제 과목을 이수했지만, 학점 은행제 특성상 재밌는 수업과는 거리가 멀어 흥미를 느끼지 못했다. 그 결과, 내 머릿 속에 남은 개념은 zero에 가까운 상태였다. 하지만 가슴 한켠엔 언젠간 공부해봐야지..라는 생각만 갖고 있던 차에 이 책을 만났다. * 이 책의 구성 핵심 키워드나 말풍선, 좀 더 알아보기, 핵심포인..

30개월차 주니어 개발자의 2022년 회고

목차 업무 / 기업 문화 / 최솔이 / 미니 프로젝트1,2 / 마지막으로 # 업무 입사 첫 주 메인터넌스 안건을 7건 맡게 되었다. (1~2월) 처음 보는 C#코드와 강의 한 바퀴를 돌았지만 실무로 사용해본 적 없는 vuejs 코드에 익숙해지도록 간단한 유지보수 업무를 맡았다. 프로젝트 내에서 가장 오래된 코드는 거의 20년 가까이 된, 오래되고 규모가 큰 프로젝트여서 구조를 파악하는 데에 많은 시간을 투자했다. 1년이 다 되어가는 현재도 열어보지 않은 프로젝트가 셀 수 없이 많다. 전부를 파악할 순 없었지만, 주요 시스템과 업무에 대한 이해를 갖출 수 있었다. .NET Migration (3월~) 위에서도 썼듯 회사 프로젝트 전체가 굉장히 오래되었다. 처음 유저의 화면을 봤을 때 2,30년 전의 lyc..

Choi solyi 2022.12.22

그린랩스 DevDive 2022

2022년 11월 8일 그린랩스에서 개최한 컨퍼런스 DevDive 2022에 참가했다. 베프가 이런 컨퍼런스가 있다며 알려주었는데 예상 외로 많은 인원이 신청을 했는지 나만 당첨되어서 혼자 참가하게 됐다. 행사의 주제는 함수형 개발자로 성장하기 세션은 하스켈로 백엔드 시스템 만든 이야기, Scala와 ZIO로 쉽고 안전한 동시성 프로그래밍, 모노레포 희망편(Feat.Polylith), read-eval-print-loop 의 네개로 구성되어 있었다. 참가 신청을 할때도 모두 처음 보는 생소한 용어들이라 당황했지만, 이참에 알아보면 좋겠다고 생각해서 참가를 확정했다. 18시부터 진행되는 행사여서 회사는 2시간 휴가를 쓰고 이동. 친절한 안내 문자도 왔다. 처음 방문하는 곳이어서 여기가 맞나? 싶었지만 금방..

Windows Service 개발 / Windows 서비스 앱 만들기 / 윈도우 서비스 실행 / eventLog

갑작스럽게 서비스 개발을 하게 되었다. 현 회사에서는 항상 1) 유지보수 2)간단한 수정 3)개발. 이 순서로 진행 되었기 때문에 기존 코드에 대해 분석할 시간을 어느정도 확보 한 뒤 개발에 들어갈 수 있었으나 이번엔 요건 분석 + 기존 로직 분석이 1일, 개발 2일로 총 3일이 주어졌다. 갑자기 해본적도 (실은 써본적도 거의 없는) 없는 서비스 개발을 맡게 되어 당황스러웠지만 달리 맡을 사람이 없었기 때문에 내가 맡게 되었다. 그나마 다행인 점은, 기존에 참고할 프로젝트 코드가 있고, 매우 유사한 로직도 다른 프로젝트에서 참고 할 수 있다는 점. 국내엔 윈도우 유저가 압도적으로 많지만 윈도우즈의 '서비스' 라는 게 있다는걸 얼마나 알고 있을까..? 나도 네트워크 관리사 2급 시험을 보면서 이런게 있다 ..

유난한 도전 경계를 부수는 사람들, 토스팀 이야기

기억 하고 싶은 부분 메모! 당신이 진정으로 되고자 하는 것이 무엇인지 마음은 이미 알고 있을 것입니다. 그 외에는 모두 부차적인 것입니다. 외제차가 드림카라는 다른 사람의 얘기를 들은 이승건 대표는 `덜컥 겁이 났단다. 꿈의 크기가 겨우 비싼 외제차 정도인 사람에 머물게 될까봐 두려웠다.` 라고 생각했다. 내 현실은 외제차는 커녕 국산 소형차조차 꿈도 못 꾸는데 꿈의 크기가 외제차인것조차 작게 느낀 이승건 대표가 야망이 얼마나 큰 사람인가에 대해 생각하게 되었다. 사람들의 삶을 더 낫게 변화시킨다라는 자부심이 그를 부지런히 움직이게 하는 동력이었다.다른 사람의 삶을 사느라 시간을 허비하지 마세요. (중략) 가장 중요한 것은, 여러분의 마음과 직관을 따르는 용기를 가지는 것입니다. 스티브 잡스의 졸업식 ..

Choi solyi/책 2022.11.21

[Git]04 - amend / cherry-pick / reset / revert / stash

챕터 안내 Ch05. 실무 사례와 함께 Git 다루기 실습을 위한 사전 준비: 새로운 원격저장소 만들기 amend: 수정 못한 파일이 있어요, 방금 만든 커밋에 추가하고 싶어요 cherry-pick : 저 커밋하나만 떼서 지금 브랜치에 붙이고 싶어요 reset : 옛날 커밋으로 브랜치를 되돌리고 싶어요 revert : 이 커밋의 변경사항을 되돌리고 싶어요 stash : 변경사항을 다른곳에 저장하고 싶어요, 커밋은 안만들래요 개념 정리 amend: 수정 못한 파일이 있어요, 방금 만든 커밋에 추가하고 싶어요 마지막 커밋을 수정amend한다는 의미 : 내가 지금 스테이지에 올린 변경사항이 기존 커밋에 추가 되면서 기존 커밋이 덮어 씌워진다. 현재 커밋을 수정하고 싶은 경우 커밋 메세지를 바꾸고 싶은 경우 이..

Git 2022.11.01