전체 글137 CORS 에러, 무엇일까? 소공 과제를 하던 중 CORS에러때문에 엄청 고전했다. 내가 이해한 CORS와 해결 방식을 작성하려고 한다. https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F 🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏 악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이 inpa.tistory.com 이 게시글로 공부를 하였다. CORS란? 위 블로그에서는 CORS.. 2023. 11. 29. post api 간단하게 테스트 소프트웨어공학 과제를 하다가 post api를 테스트하고싶은데 어떻게하는지 모르겠어서 ChatGPT한테 물어보았다. curl -X POST {api_url} -H "Content-Type: application/json" -d '{"key1": "value1", "key2": "value2"}' 이 코드를 명령어로 입력하면 그에 해당하는 return값을 받을 수 있다. curl -X POST http://127.0.0.1:5000/operator_input -H "Content-Type: application/json" -d '{"map_input": "(4 5)", "start_input": "(1 2)", "spot_input": "((4 2)(0 5)(1 3))", "color_input": "((.. 2023. 11. 24. Facade pattern 파사드 패턴이란, 복잡한 서브시스템 의존성을 낮춰주는 패턴이다. 클라이언트에서 여러 서브시스템을 호출하는 것이 아니라, 여러 서브시스템들에 대한 통합 인터페이스를 제공하는 파사드 클래스에서 서브 시스템을 더 쉽게 사용할 수 있게 해준다. 더 높은 수준의 인터페이스이다. 소프트웨어 공학 과제를 예시로 들어보자. 클라이언트에서 자동화 시스템 AddON과, 기계 및 센서를 가지고 있는 SIM을 모두 호출한 후, 로직을 짰었다. 그런데 이 파사드 패턴을 이용해서, 컨트롤러라는 클래스를 만들고, 클라이언트에서는 controller.run()메소드를 한 번만 실행해서 내부 동작이 모두 일어나도록 하려고 한다. 이렇게 하기 위해, 컨트롤러라는 클래스 안에 AddON, SIM등을 호출하고 내부 동작들을 모두 컨트롤러에.. 2023. 11. 23. 파이썬 패키지 소프트웨어 공학 과제를 하는 중 모듈화를 시키는 부분에서 어려움을 조금 느꼈다. 처음엔 모든 파일이 한 곳에 몰려있었다. 이것을 service, domain, controller 폴더로 배치시키는 작업을 하였다. 여기서 필수적으로 해야할 것은, 각 폴더마다 __init__.py파일을 만들어주는 것이다. 이것을 해야, 인터프리터가 해당 폴더를 패키지라고 인식한다. __init__.py 해당 폴더를 패키지로 인식시켜주는 파일이다. 해당 패키지의 파일이 어디선가 import가 되면 __init__.py 파일이 실행된다. domain패키지의 __init__.py파일이다. from domain import MapInfo를 실행한다면, 위 파일이 실행된다. 다음엔 https://github.com/BillMills.. 2023. 11. 22. [챗봇] 카카오톡 챗봇 만들기 보호되어 있는 글 입니다. 2023. 9. 21. [React] ReactJS로 영화 웹 서비스 만들기 js를 익혔으니 react로 넘어가보자 https://nomadcoders.co/react-for-beginners/lectures/3257 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 이 강의를 따라갈 예정이다. 강의를 따라가면서 느끼고 배운 것들을 한 페이지로 요약해서 작성하겠다. 9.18 시작 ~ #2 [2021 UPDATE] THE BASICS OF REACT react 간단히 다운로드 하는 법 https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html 이 링크를 참고하면 할 수 있다. 이렇게만 작성해두면 React를 사용할 수 있다. conso.. 2023. 9. 18. [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. 이전 1 2 3 4 5 6 7 다음
