장고 개발 팁 - ORM 클래스 생성시 상속 전용으로 만들기

장고에서 ORM 을 사용하는 경우 Model 을 만들면 Class 객체 하나를 테이블로 만들어 버리게 된다. 그냥 추상 클래스로 상속해서 쓰게 하려는 경우 낭패가 된다 이때 사용하는 키워드가 Meta 라는 것이 있네. from Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) class 내에 "class Meta:" 라는 것을 하나 더 두고 abstract = True 로 속성을 설정하면, 이 class 는 DB 테이블로 변환되지 않고 상속에 쓸 수 있는 class 로 남겨둔다. 즉, TimeStampModel 에 보면 "updated_at" "created_at" 이라는 필드가 다른 테이블에 거의 공통으로 사용되고 있어 이 부분을 한 곳에 정리해 두고 상속해서 쓰도록..

• format_list_bulleted Tech/Django
• · 2021. 11. 10.
• textsms

Verilog 배열 관련

Verilog 에서 배열 선언은 아래와 같이 하면 된다. 다중 배열의 예를 보자. reg [7:0] a[3]; 이렇게 한다. 앞쪽의 "[7:0]"는 배열을 표현보다는 버스의 비트를 나타내고, 배열을 뒤쪽의 "[3]" 으로 보고 이해하는 것이 쉽다. 즉 위의 예는 8비트짜리 배열 3개을 가지고 있다는 의미 또한 중요한 것은 포트로 뽑아낼 수가 없다는 엄청 불편한 진실.. 즉 module의 input/output으로 쓰기 곤란하다는.. 구체적인 예는 위 참고 사이트 참조 참고 : http://blog.naver.com/beahey/90192889480 [문법] 배열(array) [혼동 문법] 배열(array) 1. Array 와 Register (1) reg [4:0] port (2) reg [4:0] po..

• format_list_bulleted Tech/SoC
• · 2021. 11. 10.
• textsms

Git 브랜치 관리 원칙 잡기

진유림 강사님의 강의에서 아주 유용한 팁을 정리해 둔 것만 간단히 스샷~ 개인 공부용이니 용서해 주시길. 강의는 인프런이나 패스트캠퍼스에서 꼭 들으세요~ https://www.inflearn.com/course/%ED%8C%80%EA%B0%9C%EB%B0%9C-%EA%B9%83-%EA%B9%83%ED%97%88%EB%B8%8C?inst=78af1b7b 팀 개발을 위한 Git, GitHub 입문 - 인프런 | 강의 개인 프로젝트부터 현업 개발까지, 팀 개발에 필수적인 기술인 Git과 GitHub을 그림을 통해 쉽게 익힙니다. 아예 처음 익히는 분부터 실무 사례가 궁금한 분까지 모두 들으실 수 있습니다. CLI, GUI를 www.inflearn.com 브랜치를 꼭 관리하는 것이 필요한데 원칙적인 부분을 아래..

• format_list_bulleted Tech
• · 2021. 11. 9.
• textsms

자바스크립트 함수 파라메터 표현법 변경 이유

함수 선언 부의 변천 - 선언부만 봐도 먼지 확실하게 알 수 있도록 변천되어 왔다. 복잡해 보이지만, 더 명료해 지는 스펙이다. 암묵적인 arguments 가 ...args 로 변경 초기값을 줄 수 있고, Object 를 넣어 줄 수 있다 {...} 형태로 그냥 짧은 정리 팁~

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 9.
• textsms

실제 애플리케이션 개발 - 데이터 플로우, 유저 시나리오 작성

실제 서비스를 개발 하려면 필수적으로 2가지 작업을 해야 한다는 것 같다. 데이터 플로우 작성과 유저 시나리오 작성 머 대충 개발하면서 정리해 나가면 된다고 생각하는데, 많이 경험하신 분들은 이렇게 개발을 시작하나 보다. 꼭 따라 해보는 것이 여러모로 도움이 될 듯 한데 (ㅋㅋㅋ 하기 싫은 작업들이네) 암튼 조은씨의 실무 강의에서 설명된 부분은 몇가지 추려 보면 - from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 우선 데이터 플로우 Data Flow 판서 내용 서비스라면 인증 방식을 정해야 하고, 인증이 되냐 안되냐에 따라 다른 뷰를 보일 수 있으니 분리하고 데이터가 내부 데이터 인지 외부 데이터 인지 판단해서 구분해 두는 것도 중요하다. 여기서 내부 데이터라 함은 그냥 프로젝트 빌..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 9.
• textsms

리액트를 쓰는 이유? 함수형 컴포넌트를 쓰는 이유?

리액트를 쓰는 이유 from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 난 전문가가 아니니 강사님의 고견을 그대로 수용하도록 하자. 간략하게 보면, 1. 광대한 커뮤니티 - 도움 줄 사람이 많다. 2. 확장성 - 머 사람이 많으니 확장성도 높다. 이미 만들어진 라이브러리가 강력하다 3. 리액트 네이티브 지원 - 앱으로의 확장이 가능하다 4. 경쟁상대 (?) - 상대 우위에 있다는 말씀이신듯... 5. 채용에 유리하다 - 공부하시는 분들이 워낙 많으니깐... 리액트 함수형 컴포넌트의 대두~~~ 함수형 컴포넌트를 쓰는 이유는? Hooks 를 통해 life cycle 을 해결할 수 있다. => 그리고, custom Hooks 를 별도의 함수로 만들고 여러 곳에서 불러 쓸 수 있다. 비즈니스 ..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 9.
• textsms

MSA, BFF, MFA - Micro Services Architectures

프론트엔드 개발자가 알아야 하는 구조들 설명 from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 3가지 정도만 알면 된다고 하시네. 내용은 평이한데 이 구조대로 설계해서 구현하는 것은 별개의 이슈이다 MSA - 마이크로 서비스 아키텍쳐 많이 들어 보던 용어 그냥 서비스를 각각 기능에 맞춰서 작게 쪼개서 작성하자. Micro Frontends 프론트엔드도 MSA 처럼 각각 서비스별로 구현해 두고 iframe 이나 모노레포 방식으로 활용하자. 개념은 비슷한 것이다. 쪼갠다고 무조건 좋은가? 결국 서비스는 모아서 보여지는 것인데 결국 공급자의 고민이 여기에서 많이 되어야 한다. API Gateway 유사하지만, 서비스의 일부 로직, 혹은 데이터 변환, 데이터 정제 필터링 등의 기능을 제공해 ..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

Static site generator - SSG 정적 사이트 생성기

렌더링의 마지막 기법으로 SSG 정적 사이트 생성기에 대한 내용을 알아보자. 이 부분은 머 지킬이니 강의에서 언급되는 Gastby 등 여러가지 정적 사이트 생성기 엔진을 알고 있어 어려운 개념은 아니다. 아주 익숙한다. 빌드 당시에 페이지를 만들어 아예 정적 html 페이지 결과를 그냥 올려두고 가져가는 형태이니 Runtime 이라기 보다는 Compile time 빌드라고 생각하면 쉽다. 강의 노트 겸 판서 결과 스샷은 아래를 참고하고, CDN 서비스 등에는 이 방법이 가장 최적화된 방법으로 생각된다. 물론 실행시에 먼가 데이터를 가져오거나 변경해야 한다면 이 방식은 사용할 수 없다. 특정 고정된 콘텐츠의 경우에는 이 방법이 가장 효율적인 방법일 것이다. Gastby 말고 SSR에서 언급한 Next.JS..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

서버사이드 렌더링 SSR

이제 서버사이드 렌더링 SSR 에 대해서 간략하게 들은 것을 정리해보자 - from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 이것도 용어에 적힌 대로 이해하면 된다. 서버쪽에서 렌더링을 해서 html을 내려 보내주므로 클라이언트에서 리소스를 할당해서 렌더링을 할 필요가 없다는 것. 일반적으로 서버의 성능이 아주 빠르므로, 렌더링을 강한쪽에서 해주고 결과만 내려줘서 뿌려주는 역할을 하게 해서 일을 분산 시킬 수 있다는 것이다. 여기에 쓰이는 기술로 소개한 것이 Next.JS 자세한 내용은 더 알아보도록 하고, 이것 말고도 서버사이드에서 렌더링 할 수 있도록 하는 기법으로 - hydrate - React DOM - serverside rendering keyword 가 있다나 머라나 (왜..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

Gmail 계정 POP3 설정 - 윈도우 Outlook 클라이언트

매번 브라우저로 보니까 관리도 힘들고, 쉽게 POP3 로 땡겨서 보자. 일단 구글 사이트의 Help 에 자세히 설명이 되어 있꾼. https://support.google.com/mail/troubleshooter/1668960?rd=1#ts=1665119,1665157,2769079 간단하게 필요한 부분만 캡쳐~~ 일단, Gmail 에서 설정을 해 주어야 한다. POP3 를 사용할 수 있도록 개인적으로는 IMAP 보다는 POP3가 사용하기 수월하다.IMAP 은 서버와 동기화 시켜서 통합 관리 되는 장점이 있지만 너무 느린면이 있고, E-mail이라기 보다는 RSS Reader 같은 느낌이 별로다. 빨간 박스의 내용만 잘 해주면 된다. 아래 박스에서 나는 서버에 메일을 남겨두지 않도록 설정해 두었다. 그..

• format_list_bulleted Tech
• · 2021. 11. 8.
• textsms

클라이언트 사이드 렌더링 CSR

이전 강의에 연속해서 from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 클라이언트 사이드 렌더링 CSR 에 관한 내용이다. 브라우저 렌더링 101을 통해 전체적인 느낌을 알고 세부적으로 CSR, SSR, Static file 이렇게 설명하는 것 같다. 내용의 말미에 나오는 칠판을 아래에 공부용으로 스샷 강조하는 내용을 간략하게 정리해 보면, 브라우저의 JS (JavaScript) 엔진들이 각자의 Component 를 만들고 JSX 등을 활용해서 바로 DOM을 정의해서 구현하는 것, 이것이 CSR, 클라이언트 사이드 렌더링이라고 말 할 수 있다. 특징적인 내용은 실시간성을 원하는 경우, 자연스러운 페이지 이동을 원하는 경우 혹은 페이지의 일부만 변경되어 자연스런운 렌더링이 필요한 경우 ..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

브라우저 렌더링 101 - from 조은의 프론트엔드 실무 가이드

크롬 기준의 브라우저 렌더링 101 강의는 fastcampus 의 동영상 강의의 화면을 일부 캡쳐해서 정리해둔다. 전체적인 개요 같은 내용이다. 먼저 모르는 용어 Render Tree DOM 과 CSS 가 적용된 결과물 정도로 이해하고 넘어간다. 이 Render Tree 가 표현되기 위해 (렌더링을 위해), 아래와 같은 3단계의 일이 벌어진다고 알면 된다. 1. Layout 2. Paint 3. Render 라는 과정이 있다는 것을 기억하라는 강사분의 말씀. Layout 부분이 다시 불리게 되면 좀 느려질 가능성이 있으니 피해서 설계하는 것이 좋다. 대충 이해한 바로 써보면, (틀릴수도 있다.) 예제로는 애니메이션을 구현할 때 Position 을 변경할 수 있는데 이 부분은 layout을 변경하는 기술이..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

git add 파일 추가 - 원하지 않게 자동으로 파일이 포함되지 않는 경우

로컬에서 파일을 생성 혹은 복사해서 어떤 파일이 폴더 내에 있는데 실제 GitHub이나 git 에 추가가 되지 않는 경우를 봤다. 강제로 add 하니 아래와 같은 메시지를 볼 수 있었다. 잘은 모르지만 advice.addIgnoreFile 이라는 설정 파일에 특정 이름이나 특정 패턴의 파일은 자동으로 걸러주도록 되어 있나 보다. mbedtls 에서는 library 밑에 error.c 와 version_features.c 파일이 있는데 자동으로 이 파일을 걸러서 안 올려 주도록 설정 되어 있나 보다. 일단 강제로라도 편입 시키기 위애 -f 옵션으로 다시 add 해보자. git add -f 파일명 일단 강제 추가 했다. 자동으로 필터링 해주는 옵션을 끄는게 나을 듯 하다. "git config advice...

• format_list_bulleted Tech
• · 2021. 11. 8.
• textsms

PC 필수 유틸 다운로드 - 네이버 자료실 대안 사이트 TOP 2

여기저기 찾아보기 힘든 유틸리티, 툴, 프로그램을 한 곳에 모아서 제공해 주던 네이버 자료실이 서비스를 종료했다는데 비슷한 서비스를 제공해 주는 사이트 2곳을 소개합니다. 보물, 소프트다운 타운 입니다. 👍 https://bomul.com/ 보물 사이트는 그냥 네이버 자료실과 아주 비슷하네요. 카테고리도 아주 잘 되어 있고, 자료도 거의 대부분 있는 것 같습니다. 자료 소개도 아래 그림 처럼 분류와 버전 용량, 다운로드 가능한 위치, 라이센스 정보 등 아주 자세하게 제공해 주고 있습니다. 음. 광고도 많이 없어서 서버 운영은 어떻게 하는지요? ㅎㅎㅎ 다운로드도 서버에서 바로 제공도 하는 방법인듯 합니다. 트래픽이니 머니 운영비가 좀 들겠군요. 아무튼 깔끔하게 소개도 잘 되어 있어 믿고 들어갈 만하네요. ..

• format_list_bulleted Tech
• · 2021. 11. 6.
• textsms

서버 React 설치 - 실제 설치 로그 남기기

서버 React 설치 설치전 아래 페이지를 꼭 참고한다. 우분투 Node.js 설치및 npm 환경구축 $ sudo apt-get install -y nodejs $ sudo apt install npm 설치 로그를 참고한다. twlabs01@twlabs01:~$ cd Projects/ twlabs01@twlabs01:~/Projects$ mkdir react twlabs01@twlabs01:~/Projects$ cd react twlabs01@twlabs01:~/Projects/react$ sudo apt-get install -y nodejs [sudo] password for twlabs01: Reading package lists... Done Building dependency tree Readi..

• format_list_bulleted Tech
• · 2021. 11. 5.
• textsms