본문 바로가기

전체 글131

[javascript] 바닐라 js로 크롬 앱 만들기 js를 배웠으니 간단하게 클론코딩을 해보려고 한다. https://nomadcoders.co/javascript-for-beginners/lectures/1705 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 이 강의를 따라갈 예정이다. 강의를 따라가면서 느끼고 배운 것들을 한 페이지로 요약해서 작성하겠다. 9.10 시작 ~9.17 끝 #2 [2021 UPDATE] WELCOME TO JAVASCRIPT html에서 js, css파일 가져오는 법 상수, 변수 const a = 5; // 상수 let b = 6; // 변수 always const, somtimes let, never var null, unde.. 2023. 9. 10.
[javascript] 한 페이지 요약(전공자 기준) react native를 배우기 위해 선수로 javascript를 배우기로 하였다. 이 한 페이지에 js에 대해 배운 모든 내용을 담을 것이다. 생활코딩 선생님의 js강의를 듣기로 결정하였다. https://www.youtube.com/watch?v=PZIPsKgWJiw&list=PLuHgQVnccGMA4uSig3hCjl7wTDeyIeZVU&index=1 https://opentutorials.org/course/743 이미 알고 있는 내용은 적지 않고 꼭 필요한 내용만 적을 것이다. 9.7 시작 ~ 9.10 끝 웹 서버 역할 이렇게 js는 웹서버 역할도 할 수 있다. node.js는 서버, 웹브라우저는 클라이언트 환경마다 다른 함수 웹 브라우저에서 경고창을 띄우기 위해서는 alert, node.js로 .. 2023. 9. 7.
[react native] 프론트 개발 시작 - 초기 설정 백 개발 하려다가 너무 막막해서 뭐라도 띄우자 라는 생각이 들었다. 시작부터 내가 완전히 무지했다는 생각이 들었다. 검색을 하다가 react native를 사용할지, flutter를 사용할지 고민하게 되었는데, 둘 다 잘 모르겠다면 더 많이 들어본 것을 선택하자 라는 생각으로 react native를 선택하게 되었다. 지금 친구들도 react native를 많이 사용하고 있어 더 접근성이 좋다는 생각에서였다. https://reactnative.dev/docs/environment-setup 이 링크를 그대로 따라하니, 아래 화면까지는 띄우는데 성공했다~! 일단 첫 걸음은 뗀 것 같아서 기분이 좋다! 위 화면은 expo go라는 어플을 사용했다. xcode를 사용하면 컴퓨터로도 띄울 수 있다고 한다. 그.. 2023. 9. 6.
[flask] 백엔드 개발 시작 - 로컬 서버 열기 처음부터 시작하려니까 뭐부터 해야할지 모르겠다. 계속 검색하다가 일단 로컬 서버 여는 것 부터 시작했다. 1. 우선 가상환경을 설치해야 한다. python3 -m venv 가상환경명(예: projectvenv) 2. flask를 설치해야 한다. pip install flask 3. app.py를 만들고 아래 코드를 입력시킨다. 그 후 같은 폴더에서 flask run을 입력한다. from flask import Flask app = Flask(__name__) @app.route('/') def index(): return 'flask 예제.' if __name__ == '__main__': app.run('0.0.0.0', port=5000, debug=True) 이렇게 잘 연결 되는 것을 볼 수 있다! 2023. 9. 6.
[figma] 전체적인 디자인 90% 완성 참고로 날씨에 따라서 배경 색이 바뀔 예정이다. 또한, 추후에 환경 설정도 만들 예정이다! 2023. 9. 6.
[figma] 단축키 - status bar 정렬 옵션 + w : 상단 정렬 옵션 + h : 가운데 정렬 shift + r : 가이드라인 보기/해제 cmd + r : 기능 검색 cmd + g : 그룹 설정 cmd + option + g : 프레임 설정 cmd + shift + L : 잠금 2023. 9. 4.
[figma] UI 구조 만들면서 낙서장 단축키 : https://parkyoungkyu.tistory.com/entry/figma-%EB%8B%A8%EC%B6%95%ED%82%A4 status bar는 구글링하면 바로 나옴. option + w,h로 정렬시킴. 제목 글씨 속성 : semi bold, 24pt, 행간 34, 자간 -2.5? 본문 글씨 속성 : regular, 14pt, 행간 22, 자간 -2.5, 색상 767676 가이드라인 설정 가이드 설정 cmd + /를 눌러 ruler를 꺼내 눈금자를 표시하고, 눈금자를 드래그하면 가이드라인이 설정된다. 아이콘 만들기 원과 선으로 뚝딱뚝딱 메뉴 아이콘을 만들었더니, 사이즈를 조절 할 시 원래 모양이 유지되지 않는 문제가 발생했다. 다음과 같이 outline stroke를 설정해주면 아이콘 .. 2023. 9. 4.
프로젝트 시작! 지난 한 학기동안 근로 장학생으로서 일도 하고, 개발에 대해 배우면서 견문이 어느정도 넓어진 것 같다. 이제 3학년 2학기에 접어들었고, 내가 스스로 어플을 만들어보고 싶다는 생각이 들었다. 오늘부터 바로 시작이다! 어떤 어플인가? '날씨의 아이'라는 날씨 어플을 만들 것이다. 다른 어플들과는 다르게, 기온과 비가 오는지 오지 않는지에 대한 유무만 보여주는 어플이다. 만약 비가 온다면 푸시 혹은 SMS로 알림을 보내는 기능도 만들 예정이다. 목표 디자인부터 백, 프론트까지 직접 시도해 적어도 기본은 할 수 있게끔 성장하는 것이 최종 목표이다. 혼자 해야하는 프로젝트여서 구현해야 할 기능들을 최소화 시켰다. 프로젝트 상 목표는 앱 배포까지 직접 해보는 것이다. 여러가지 변수가 많이 등장할 것이다. 그 변수.. 2023. 9. 4.
[pytest] 파이썬 api 테스트 1. UI test / End-to-End test : UI에 직접 입력하고 기능이 정상 작동하는지, 화면에 정상으로 출력되는지 테스트해 보는 방식. 실제 서비스 사용과 같이 테스트할 수 있다. 하지만 시간이 많이 소요되고 모든 시스템을 실행 시키고 연결해야 테스트가 가능하다. Selenium 같은 UI 테스트 프레임워크로 어느 정도 자동화 가능하지만 완벽한 자동화엔 어려움이 있다. 2. Integration test : 테스트하고자 하는 시스템을 실행시켜 실행하는 테스트. 하나의 시스템만 테스트하므로 UI 테스트에 비해 실행 시간과 설정이 간단하고, UI 요소가 없는 시스템의 경우 테스트하기 용이하다. 3. Unit test : 시스템을 실행하여 테스트하기보다 코드를 직접 테스트하는 개념. 함수등 시스.. 2023. 8. 30.
[python] 정규표현식 phone_format = r'^[0][0-9]{9,10}$' delete_hyphen_phone = re.sub('[-]', '', delivery_info['phone']) print(check_valid_input(delete_hyphen_phone, phone_format)) def check_valid_input(inp, format): if re.match(format, inp): return True print(inp, format) return False 꽤 오래 전에 작성한 코드였는데, 코드 살펴보다가 생각나서 올린다. phone_format : r을 앞에 붙여 만든 정규표현식 delete_hyphen_phone : 하이푼을 빈 문자열로 대체한 결과값. - re.sub함수를 이용한, 정규.. 2023. 8. 28.
relationship class OrderTicket(db.Model): id = db.Column(db.Integer, primary_key=True, autoincrement=True, nullable=False) ticket_id = db.Column(db.Integer, db.ForeignKey('ticket.id', ondelete='CASCADE'), primary_key=True, nullable=False) ticket = db.relationship('Ticket', back_populates='order_ticket') user_id = db.Column(db.String(36), db.ForeignKey('user.id', ondelete='CASCADE'), nullable=False) user = db.. 2023. 8. 28.
무럭이 8월 말 근황 잎이 8~9개가 되었다~ 머리 맡에 두니까 좋은 기운이 마구 들어올 것 같은 느낌?이 들듯 말듯~ 90000_h님이 근황을 물어보셔서 오랜만에 무럭이 사진 올립니다~ 2023. 8. 24.
[Flask] traceback 에러가 발생하면 콘솔에 아래와 같은 출력이 되는 경우가 가끔 있다. traceback이라는 모듈을 사용하면 이것을 문자열 형태로 그대로 다룰 수 있게 된다. 에러가 발생했을 때, 그 부분을 핸들링하는 부분에서 traceback.format_exc()라는 함수를 실행시키면 위의 문자열을 그대로 리턴하게 된다. 나는 이전 포스팅에서 작성한 모더레이터를 이용하여 에러 traceback을 출력해보았다. 간단하죠? 참고로 traceback.print_exc()라는 함수를 사용하면 바로 출력할 수 있게끔 할 수 있다. 이것을 logger.info를 사용해서 로그 파일에 넣을 수도 있다. 2023. 8. 21.
[Flask] api 에러 핸들러 실제로 백엔드 구현 시, 에러를 굉장히 많이 마주칠 수 있다. 그럴 때 마다 각각의 에러를 처리하기에는 코드도 지저분해지고, 매번 처리해주어야해서 귀찮은 점이 많다. 또한 에러를 일관되게 처리를 못하게 된다. 이를 위해 app.errorhandler라는 데코레이터를 사용하면 된다. api가 실행중일 때 발생한 에러를 처리해주는 데코레이터이다. 사용방법은 아주 간단하다. 이런 데코레이터 하나를 작성해주면 된다. 그렇게 되면 위의 api를 실행하더라도 이와 같은 출력을 낸다. 즉, 에러를 잘 핸들링 한 후에 서버에러를 리턴하는 것 까지 가능하다는 것이다. 데코레이터의 파라미터로 Exception을 주면 모든 예외를 처리하게 되지만, 에러 이름을 넣게 된다면 그 에러만 처리하게 된다. 이렇게 작성한다면, ha.. 2023. 8. 21.
[flask] 로그 출력 에러가 났을 경우 로그를 출력하는 방법을 소개하고자 한다. dictConfig라는 것을 사용하면 된다. import logging from logging.config import dictConfig logging_config = { 'version': 1, 'formatters': { 'simple': { 'format': '%(asctime)s - %(name)s - %(levelname)s - %(message)s' } }, 'handlers': { 'console': { 'class': 'logging.StreamHandler', 'level': 'DEBUG', 'formatter': 'simple', 'stream': 'ext://sys.stdout' }, 'file': { 'class': 'lo.. 2023. 8. 21.
[sql, sqlalchemy] 연결된 두 테이블 cascade 설정하기 - 2 (uselist 설정) 지난 글에서 문제점이 있었다. class Announcement(db.Model): id = db.Column(db.Integer, primary_key=True, autoincrement=True) title = db.Column(db.String(50), nullable=False) content = db.Column(db.Text, nullable=True) class AnnouncementUrl(db.Model): id = db.Column(db.Integer, primary_key=True, autoincrement=True) announcement_id = db.Column(db.Integer, db.ForeignKey('announcement.id', ondelete='CASCADE'), n.. 2023. 8. 10.
[sql, sqlalchemy] 연결된 두 테이블 cascade 설정하기 유저테이블이랑, 게시글 테이블이 있다고 가정해보자. 게시글 테이블은 id, user_id, content로 이루어져있다고 가정하자. 아무 설정도 하지 않는다면 user를 삭제하려고 한다면 아마 삭제되지 않을 것이다. 이는 user테이블과 연결된 게시글 테이블에 아직 데이터가 남아있기 때문이다. 이럴 때 어떻게 해라 라고 제약조건을 걸 수 있다. CASCADE 제약조건에 대해 알아보자. on delete, on update에 설정할 수 있는 제약조건이 여럿 있다. 이 중 restrict, set null, set default는 이름만 봐도 대충 알 수 있을 것이다. 하지만 우리는 cascade를 사용할 것이다. 이게 뭘까? 1. RESTRICT : 개체를 변경/삭제할 때 다른 개체가 변경/삭제할 개체를 .. 2023. 8. 7.
[sql, sqlalchemy] 특정 조건으로 order_by 정렬하기 - case문 데이터를 정렬시키는 코드를 짜다가, 정수 크기순, 혹은 역순 등으로 정렬하는게 아니라, 어떤 문자열일 땐 맨 위로, 어떤건 아래로 가게끔 정렬을 해야할 일이 생겼다. 아래는 요구 조건이다. 유저가 받은 알림들을 타입이 '공지'인 알림을 맨 위로 올리고, 나머지는 그 아래 위치시킨다. 또한, 시간 역순으로 정렬한다. 시간 역순으로 정렬하는 것은, order by created_at DESC 로 작성하면 쉽게 짤 수 있었다. ORDER BY created_at DESC 이는 flask의 sqlalchemy로는 아래와 같이 짤 수 있다. Table.query.order_by(Table.created_at.desc()) 하지만, 공지인 것만을 맨 위로 올리는건 쉽지 않았다. 구글링좀 해보니 case문을 사용하면.. 2023. 8. 3.
git 커밋 기록 초기화 .git 폴더 삭제 새로운 깃 폴더 생성 add, commit, push 실행 1. 먼저 다음 명령어로 .git 폴더를 삭제합니다. rm -rf .git .git 폴더 안에 git을 이용했던 모든 기록들이 담겨있습니다. 이를 삭제하면 지금까지 했던 커밋들도 삭제됩니다. 로컬에 존재하는 파일들은 삭제되지 않습니다. 2. 다음 명령어로 .git폴더를 다시 만들고 리모트 서버를 등록합니다. git init git remote add origin 3. 다음 명령어로 add, commit, push 합니다. git add . git commit -m git push -f origin 그렇게 되면 다음처럼 커밋이 한개가 되는 것을 볼 수 있다. 2023. 8. 2.
datagrip으로 table(혹은 data) export/import하는 법 export는 굉장히 쉽다. 그냥 테이블을 우클릭 하고 export버튼 누르면 된다. 하지만 import는 어떻게 하는지 너무 복잡하길래 검색하면서 찾아서 겨우 성공했다. 기억하기 위해 정리해본다. 요로코롬 export하면 sql파일이 만들어진다. 이를 datagrip으로 드래그하면 아래처럼 스크립트가 열리게 된다. 여기서 우클릭하고 run xx.sql을 클릭한다. 그 후 스키마를 추가하기 위해 +버튼을 누르고 넣고자 하는 데이터베이스(스키마)를 추가한다. 그리고 run을 누르면 import가 완료된다. 추가로 다른 테이블을 옮기는 과정에서 에러가 날 수도 있다. 아래 에러는 postgresql에서 사용하는 예약어를 이름으로 사용하였기 때문에 발생했다. 그럴 경우에는 큰 따옴표로 지정해주면 된다. 2023. 8. 1.

티스토리툴바