전체 글
- 파이썬 - 딕셔너리 2022.04.15
- 파이썬 - 배열 2022.04.14
- 파이썬 - 문자열 2022.04.11
- 파이썬 - 기본 2022.04.11
- 파이썬이란? 2022.04.10
- 모달 스크롤할 때 바디 스크롤 방지 2022.03.31
- 함수형 프로그래밍? 2022.03.25
- [JS] - 비동기 처리해서 html 요소 추가하기 2022.03.21
- 소프트 웨어 디자인 패턴 2022.03.19
- [REACT] - 숫자만 받기 (보완점 많음) 2022.03.06
- [php] - 전화번호 하이픈 추가 2022.02.28
- [HTML] - 버튼 링크 연결 방법 2022.02.23
파이썬 - 딕셔너리
파이썬 - 배열
파이썬 - 문자열
파이썬 - 기본
파이썬이란?
파이썬은 1990년 암스테르담의 귀도 반 로섬(Guido Van Rossum)이 개발한 인터프리터 언어이다. 귀도는 파이썬이라는 이름을 자신이 좋아하는 코미디 쇼인 "몬티 파이썬의 날아다니는 서커스(Monty Python’s Flying Circus)"에서 따왔다고 한다.
+ 인터프리터 언어는 한줄씩 실행해서 결과를 알 수 있는 언어 (고급 프로그래밍언어중 대부분이 인터프리터 언어 EX 자바스크립트, SQL, 파이썬, 루비, 스크래치 등등 다양하다. )
파이썬의 특징
직관적이다
프로그래밍이란 사람이 생각하는 것을 컴퓨터에 지시하고 구조를 짜는 행위라고 볼 수 있다. 파이썬은 언어가 단순하며 부수적인 보조 지시가 빠지고 핵심 지시로만 프로그래밍이 가능한 구조를 보인다.
문법이 쉬워서 빠르게 학습이 가능하다
언어마다 동작 방식이나 문법이 조금씩 다르다 하지만 프로그래밍을 하는 사람의 사고방식은 어느정도 일관적인데 파이썬의 특징중 하나인 직관적인 특징 덕분에 부수적인 문법을 신경쓰지 않아도되는 자유도 덕분에 빠르게 학습할 수 있다
파이썬이 느린언어라서 고민이 된다면 고민하지 않아도 좋다
먼저 파이썬은 느린언어가 맞다. 지금의 상황으로는 인정할 수 밖에 없는 사실이다. 나중에는 이게 틀릴가능성은 언제나 열려있다. 하지만 파이썬은 C와 호완이 아주 좋아서 전체적인 틀은 파이썬으로 만들고 속도가 아주 중요한 부분은 C언어로 짜서 속도에 제약을 해제 하는것이 가능하다. 그리고 파이썬 라이브러리 중에 C로 만든것도 많다. 물론 이러한 라이브러리들은 속도도 뒤쳐지지 않는다.
마지막 편집일 22.04.10
모달 스크롤할 때 바디 스크롤 방지
// 모달 닫는곳에 추가
$('body').css("overflow", "scroll");
간단하다
'코딩 공부 > HTML' 카테고리의 다른 글
html - 반응형 웹 제작을 효율적으로 하는 법 rem (0) | 2022.05.19 |
---|---|
css 로 네온사인 효과 주기 (0) | 2022.05.18 |
[HTML] - 버튼 링크 연결 방법 (0) | 2022.02.23 |
[css] - 이미지 잘리지 않게 css 사용 (0) | 2022.02.22 |
html - select 박스에서 placeholder 쓰기 (0) | 2022.01.12 |
함수형 프로그래밍?
함수형 프로그래밍의 장점
- 높은 수준의 추상화를 제공한다
- 함수 단위의 코드 재사용이 수월하다
- 불변성을 지향하기 때문에 프로그램의 동작을 예측하기 쉬워진다
추상화?
컴퓨터 과학에서 추상화(abstraction)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다. (위키백과)
추상화의 수준이 높다라는 점은 사용하기 편하다라는 장점을 지닌다
명령형과 선언형의 사고방식 차이
명령형 프로그래밍은 문제를 어떻게 해결하는지에 집중되어있고
선언형 프로그래밍은 무엇을 해결할지에 집중하고 있다
Q. 배열을 돌며 빈 문자열 제거하고, 각 원소의 첫 글자를 대문자로 변경하자
명령형 프로그래밍
1. for 문을 돌며 배열에 접근
2. if 문으로 빈 문자열일때 for문에서 빠져나옴
3. if 문으로 빈 문자열이 아닐때 문자열 첫번째를 대문자로 변환해서 배열에 담기
선언형 프로그래밍
1. 문자열이 빈값이 아닐때 첫번째 문자열을 대문자로 변환하는 함수를 선언
2. for 문을 돌며 배열에 접근하며 배열의 값을 함수에 던져서 배열에 담기
두가지 예시만 봐도 앞으로 지향해야할 점이 선언형 프로그래밍이지만 선언형 프로그래밍의 기능이 너무 쪼개져있다면 기능적으로 비효율 적이다
1. 배열을 돌며 빈 값을 제외한 값을 새로운 배열에 담는 함수를 선언
2. 배열을 돌며 첫번째 문자열을 대문자로 변환하는 함수를 선언
3. 배열을 1번 함수를 사용하여 새로운 배열 생성
4. 1번을 통해 생성된 배열을 2번 함수를 사용하여 새로운 배열 생성
이처럼 기능을 너무 세분화한다면 전체 배열을 두번 돌면서 기능적으로 비효율적인 부분을 보인다. 만약 이러한 배열 데이터가 엄청 많아졌다고 한다면 시간적으로 차이가 분명하다
결론
선언형 프로그래밍으로 코드를 짜는것을 지향하지만 상황에따라 적당하게 세분화해서 효율적으로 기능과 코드의 재활용을 챙기자
[JS] - 비동기 처리해서 html 요소 추가하기
먼저 로직을 생각해보자
어떤 버튼을 누르면 조회한 데이터를 html 요소에 담아서 추가한다
좀 더 깊게 생각해보자
버튼을 누르면 ajax 통신으로 데이터 요청을 전송하고 들고오는데 성공하면 데이터를 그려주는 함수에 뿌린다
코드로 보자
1.
$('body').on('click', '#버튼1', function(e) {
ajax요청(ajax데이터요청주소, 요청할함수명);
});
클릭했을때 ajax 통신을 요청한다
2.
function ajax요청(데이터요청주소, 보낼함수명) {
'코딩 공부 > JS' 카테고리의 다른 글
[JS] - 뒤로가기시 페이지 이동없이 모달만 닫기 (0) | 2022.06.29 |
---|---|
[JS] - 체크박스 제어 (전체 선택 해제 응용) (0) | 2022.04.18 |
[JS] - URL 체크 (0) | 2022.02.23 |
[JS] - ajax통신 알림창 확인후 실행 (0) | 2022.02.10 |
[JS] - 문자열을 특정 문자 기준으로 배열로 변환 (0) | 2022.02.10 |
소프트 웨어 디자인 패턴
들어가기전에
3가지의 대분류와 그안에 23가지의 패턴이 있다
생성 패턴 = [ 싱글톤 패턴(Singleton), 추상팩토리 패턴(Abstract Factory), 빌더 패턴(Builder), 팩토리 메서드 패턴(Factory Method), 원형 패턴(Prototype) ]
구조 패턴 = [ 적응자 패턴(Adapter or Wrapper), 브리지 패턴(Bridge), 데코레이터 패턴(Decorator), 퍼사드 패턴(Facade), 프록시 패턴(Proxy) ]
행위 패턴 = [ 옵저버 패턴(Observer), 상태 패턴(State), 스트레이트지 패턴(Strategy), 템플릿 패턴(Template), 비지터 패턴(Visitor), 역할 사슬 패턴(Chain of Responsibility), 커맨드 패턴(Command), 인터프리터 패턴(Interpreter), 이터레이터 패턴(Iterator), 미디에이터 패턴(Mediator) ]
디자인 패턴은 협업하거나 유지보수의 편의를 제공하기위해 의사소통의 일종으로 이러한 문제를 조금이나마 해소한다. 하지만 여기에 정리된 패턴이 만능이 아니고 상황에 따라 적절하게 사용하는 것이 중요하다.
역사는 1987년에 Using Pattern Languages for Object-Oriented Programs 를 통해 알려졌다. 대중화된것은 GoF를 발표한 1995년이다 현재에는 수천개의 패턴이 발표되었다.
생성 패턴(Creational Patterns)
객체 생성에 관련된 패턴입니다. 객체의 생성과 조합을 캡슐화해 특정 객체가 생성되거나 변경되어도 프로그램 구조에 영향을 크게 받지 않도록 유연성을 제공한다.
1. 싱글톤 패턴(Singleton) : 생성자가 여러 차례 호출되더라도 실제로 생성되는 객체는 하나이고 최초 생성 이후에 호출된 생성자는 최초의 생성자가 생성한 객체를 리턴한다. 이와 같은 디자인 유형을 싱글톤 패턴이라고 한다. 주로 공통된 객체를 여러개 생성해서 사용하는 DBCP(DataBase Connection Pool)와 같은 상황에서 많이 사용된다.
2. 추상팩토리 패턴(Abstract Factory) : 구체적인 리턴문을 정하지 않은 함수를 정의 해두고 해당 클래스를 상속받아서 클래스의 리턴문을 정의 해서 사용하는 방식이다
php 예제
3. 빌더 패턴(Builder) : 복합 객체의 생성과정과 표현과정을 분리시켜 동일한 생성과정에서 다양한 표현을 생성할 수 있는 패턴이다.
간단하게 매개 변수를 과도하게 많이 받아야할때 매개변수지정 실수를 방지하기 위함이다
(연관배열로 받아서 배열을 풀어서 키값을 찾아서 값을 변수에 넣어서 사용하는 방법도 있다)
자바 예제
4. 팩토리 메서드 패턴(Factory Method) : 객체를 생성하는 인터페이스를 정의하지만, 인스턴스를 만드는 클래스는 서브클래스에서 결정하도록 하는 패턴입니다. 팩토리 메서드에서는 인스턴스를 만드는 것을 서브 클래스에서 하게 됩니다.
간단하게 생성전용 클래스를 정의해서 객체 생성을 담당(PizzaFactory)한다
자바 스크립트
5. 원형 패턴(Prototype) : 생성할 객체의 종류를 명시하는 데 원형이 되는 예시물을 이용하고 새로운 객체를 이 원형들을 복사함으로써 생성하는 패턴이다.
php 예제
간단하게 복제 패턴이라고 생각하자 처음 객체를 생성하고 그 객체를 계속해서 생성해야한다면 복제해서 사용하는 방식이다.
구조 패턴(Structural Patterns)
클래스나 객체를 조합해 더 큰 구조를 만드는 패턴입니다. 예를 들어 서로 다른 인터페이스를 지닌 2개의 객체를 묶어 단일 인터페이스를 제공하거나 서로 다른 객체들을 묶어 새로운 기능을 제공하는 패턴이다.
1. 적응자 패턴(Adapter or Wrapper) : 클래스의 인터페이스를 사용자가 기대하는 다른 인터페이스로 변환하는 패턴으로, 호환성이 없는 인터페이스 때문에 함께 동작할 수 없는 클래스들이 함께 작동하도록 해주는 패턴이다.
2. 브리지 패턴(Bridge) : 구현부에 추상층을 분리하여 각자 독립적으로 변형할 수 있도록 하는 패턴이다.
3. 데코레이터 패턴(Decorator) : 주어진 상황 및 용도에 따라 어떤 객체에 책임을 덧붙이는 패턴으로, 기능확장이 필요할 때 서브클래스 대신 쓸 수 있는 대안이 될 수 있다.
4. 퍼사드 패턴(Facade) : 서브시스템에 있는 인터페이스 집합에 통합된 하나의 인터페이스를 제공한다. 서브시스템을 좀 더 쉽게 사용하기 위해 고수준의 인터페이스를 정의한다.
5. 프록시 패턴(Proxy) : 어떤 다른 객체로 접근하는 것을 통제하기 위해 그 객체의 매니저 또는 자리 채움자를 제공하는 패턴이다.
6. 컴포지트 패턴(Composite) : 객체들의 관계를 트리 구조로 구성하여 부분-전체 계층을 표현하는 패턴으로, 사용자가 단일 / 복합객체 모두 동일하게 다루도록 하는 패턴이다.
행위 패턴(Behavioral Patterns)
객체나 클래스 사이의 알고리즘이나 책임 분배에 관련된 패턴이다. 한 객체가 혼자 수행할 수 없는 작업을 여러개의 객체로 어떻게 분배하는지, 또 그렇게 하면서도 객체 사이의 결합도를 최소화하는것에 중점을 두는 방식이다.
종류
1. 옵저버 패턴(Observer) : 객체들 사이에 1 : N 의 의존관계를 정의하여 어떤 객체의 상태가 변할 때, 의존관계에 있는 모든 객체들이 통지받고 자동으로 갱신될 수 있게 만드는 패턴이다.
2. 상태 패턴(State) : 객체의 내부 상태가 변경될 때 행동을 변경하도록 허락합니다. 객체는 자신의 클래스가 변경되는 것처럼 보이게 된다.
3. 스트레이트지 패턴(Strategy) : 동일 계열의 알고리즘들을 정의하고, 각각 캡슐화하며 이들을 상호교환 가능하도록 만드는 것이다. 알고리즘을 사용하는 사용자로부터 독립적으로 알고리즘이 변경될 수 있도록 하는 패턴이다.
4. 템플릿 패턴(Template) : 객체의 연산에서 알고리즘의 뼈대만 정의하고, 나머지는 서브클래스에서 이루어지게 하는 패턴이다. 템플릿패턴은 알고리즘의 구조는 변경하지 않고 알고리즘의 각 단계를 서브클래스에서 재정의하게 된다.
5. 비지터 패턴(Visitor) : 객체구조를 이루는 원소에 대해 수행할 연산을 표현한다. 방문자는 연산에 적용할 원소의 클래스를 변경하지 않고 새로운 연산을 재정의 할 수 있다.
6. 역할 사슬 패턴(Chain of Responsibility) : 요청을 처리하는 기회를 하나 이상의 객체에 부여하여 요청을 보내는 쪽과 받는 쪽의 결합을 피하는 패턴이다. 요청을 받는 객체를 연쇄적으로 묶고 객체를 처리할 수 있을 때까지 요청을 전달한다.
7. 커맨드 패턴(Command) : 요청을 객체로 캡슐화하여 서로 다른 사용자의 매개변수화, 요청 저장 또는 로깅, 연산의 취소를 지원하게 만드는 패턴입니다.
8. 인터프리터 패턴(Interpreter) : 주어진 언어에 대해서 문법을 위한 표현수단을 정의하고, 해당 언어로 된 문장을 해석하는 해석기를 사용하는 패턴입니다.
9. 이터레이터 패턴(Iterator) : 내부 표현부를 노출하지 않고 어떤 객체 집합의 원소들을 순차적으로 접근할 수 있는 방법을 제공하는 패턴이다.
10. 미디에이터 패턴(Mediator) : 한 집합에 속해있는 객체들의 상호 작용을 캡슐화하는 객체를 정의하는 패턴이다. 중재자는 객체들이 직접 서로 참조하지 않도록함으로써 객체들간의 느슨한 연결을 촉진시키며 객체들의 상호작용을 독립적으로 다양화 시킬 수 있도록 해준다.
[REACT] - 숫자만 받기 (보완점 많음)
리액트를 배우고 있어서 아주아주 깔끔하지 않지만 숫자만 받는데
type="number" 로만 처리하는데 신경쓰여서 한번 만들어 보자 하고 만들어 보았다
해당함수를 선언해두고
<input type="text" value={movieYear} placeholder= "숫자만 입력해주세요" onChange={e => OnlyNumber(e, movieYear)}>
return 문의 html 코드는 이렇게 사용한다
개발 스토리
코드를 쓰다보면 함수가 아무리 복잡하고 어려워도 함수를 작동하는 방식은
간결하고 깔끔해야만 한다는 생각으로 개발중이다
코드를 보면 알겠지만 깔끔하지 않다 nativeEvent안에 값을 받아서 replace 돌리고
값을 세팅해주는 방식인데 이전의 값을 더해주지 않으니 초기화 되어
1자리 이상값세팅이 안되어서 이전의 값도 불러와서 이전의 문자열에 더해주는 방식이다
그랬더니 끝난줄알았는데 지우기 키를 입력하니 콘솔이 터졌다 가져온 값이 null 이라서
replace 함수가 터져버렸다
콘솔로 e를 찍어서 지우기 키입력의 고유값을 찾아봤다 그중에
inputType: "deleteContentBackward" 이게 눈에 띄었다 다른 키를 입력하면서 다른 키는 어떻게 받나 확인했다
inputType: "insertText" 다른 키들은 다 이런식이었다
그럼 이값으로 if문을 마저 짜자
느낀점
'코딩 공부 > REACT' 카테고리의 다른 글
next auth 를 next api 디렉토리에서 써보자! (0) | 2023.11.02 |
---|---|
[React] - 6차 - props 반복 학습 (0) | 2022.02.18 |
[React] - 5차 - 조건 렌더링 (0) | 2022.02.18 |
[React] - 4차 -겹치는 코드 뭉쳐서 관리 (0) | 2022.02.18 |
[React] - 3차 - useEffect 사용 예 (0) | 2022.02.18 |
[php] - 전화번호 하이픈 추가
'코딩 공부 > PHP' 카테고리의 다른 글
[PHP] - 날짜 기준으로 연관배열 합치기 -2. 연관배열 합치기 (0) | 2022.05.10 |
---|---|
[PHP] - 날짜 기준으로 연관배열 합치기 -1. 날짜 연관 배열 만들기 (0) | 2022.05.10 |
php 리다이렉트 (0) | 2022.01.07 |
PHP 문자열 속에 변수쓰기 (0) | 2022.01.06 |
PHP array_slice 사용법 (0) | 2021.12.28 |
[HTML] - 버튼 링크 연결 방법
1. 현재페이지에 부를때
<button onclick="location.href='address'">button</button>
2. 새 창에 열때
<button onclick="window.open('address')">button</button>
3. 팝업으로 열기 (주소,팝업창이름,옵션)
<button onclick="window.open('address','window_name','width=430,height=500,location=no,status=no,scrollbars=yes');">button</button>
4. 상위 프레임에 부를때
<button onclick="parent.location.href='address'">button</button>
5. 프레임 지정 링크
<button onclick="타켓명.location.href='address'">button</button>
'코딩 공부 > HTML' 카테고리의 다른 글
css 로 네온사인 효과 주기 (0) | 2022.05.18 |
---|---|
모달 스크롤할 때 바디 스크롤 방지 (0) | 2022.03.31 |
[css] - 이미지 잘리지 않게 css 사용 (0) | 2022.02.22 |
html - select 박스에서 placeholder 쓰기 (0) | 2022.01.12 |
[CSS] 텍스트 뒤에 이미지 따라다니게 하기 - select 박스 (0) | 2022.01.11 |