프로그래밍 & IT 정보30

• 

  React Redux 효율적인 공부 방법 어떤 프로그래밍 언어를 사용했든 실무 경험을 어느 정도 쌓은 상태라면 이제는 학습의 방향을 좀 다르게 하여 하나를 깊이 있게 공부하기 보다는 여러 기술을 두루 배우면서 특정 상황에서 효율적인 방법을 찾아가는 연습을 하는 것이 더 나을 지도 모릅니다. 직접 사용할 일이 있을 때 확실히 공부하면 될 것 같고 당장은 다양한 기술들을 직간접적으로 알고 있는 것이 더 중요할 수 있다는 의미입니다. 코딩의 기본 베이스가 갖춰진 상태라면 각 잡고 연습을 하지 않아도 새로운 언어 또는 프레임워크, 라이브러리 등의 강의 내용을 90% 이상 흡수할 수 있습니다. 실제로 생활코딩의 이고잉님 강의를 1.5배속 이상으로 재생하여도 귀에 쏙쏙 들어오는 것을 체험하였습니다. 저는 아직 리액트를 본격적으로 다뤄 본 적은 없지만 웹 .. 프로그래밍 & IT 정보/Etc. 2022. 2. 27.

• 

  리액트(React) 완성도 높은 초보 온라인 무료 강의 추천 안녕하세요. 저는 웹 언어에 관심을 갖고 공부한지 고작 1~2년 정도 밖에 안 된 초보입니다. 따라서 제가 제작한 스킨이 많은 기능을 포함하고는 있지만 내부적으로 완성도가 떨어지는 부분이 분명이 있을거구요. 스스로 인지하고 있기 때문에 차츰 보완해 나갈 예정입니다. 친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방법 친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방 기본 제공 스킨을 나름대로 고쳐 쓰다가 만족하지 못하고 그냥 새로 만들었습니다. 여태까지 블로그를 하면서 적용한 많은 기능들을 대부분 포함하였으니 누군가에게는 상당히 유용한 스킨이 sangminem.tistory.com 어쨌든 저도 공부를 계속 하.. 프로그래밍 & IT 정보/Etc. 2022. 2. 24.

• 

  인공지능, 머신러닝, 딥러닝 다 같은 말 아닌가요? 간단한 개념 설명 저도 처음 AI(인공지능) 관련 여러 용어를 들었을 때 혼란이 있었습니다. 하지만 조금만 찾아봐도 쉽게 이해가 가능하다는 사실을 알 수 있습니다. 저와 마찬가지로 헤매고 계시는 분들에게 최대한 간단하고 쉽게 말씀을 드리고 싶어서 이 글을 작성하게 되었습니다. 목차 인공지능, 머신러닝, 딥러닝 포함 관계 인공지능은 알다시피 컴퓨터가 인간처럼 행동할 수 있도록 설계한 컴퓨터 공학 기술의 한 분야입니다. 인공지능을 구현하는 방법은 여러가지가 있는데 컴퓨터에게 특정 분야를 학습시켜서 관련 상황을 인지하고 판단할 수 있도록 설계한 방법이 머신러닝입니다. 컴퓨터는 학습량이 많아질수록 인풋에 대한 아웃풋의 정확도가 향상됩니다. 이러한 머신러닝 방법론 중 하나가 딥러닝입니다. 사실 인공신경망과 거의 같은 의미의 용어인.. 프로그래밍 & IT 정보/Etc. 2022. 1. 17.

• 자바스크립트 HTML 특정 요소 도달 감지 예시 특정 위치까지 도달하였을 때 실행하고 싶은 로직이 있을 수 있죠. 이 경우 사용할 수 있는 객체가 있습니다. 목차 특정 요소 도달 감지 가시적으로 특정 요소에 도달했는지 체크하기 위해 사용하는 객체입니다. 기본적인 사용법은 다음과 같습니다. // 옵션 설정 var config = { root: document.querySelector('#scrollArea'), // 기준 영역 지정 rootMargin: '0px', // root 영역의 여백 threshold: 0.1 // root에 지정된 영역 내에 10% 보여질 때 감지 }; // 객체 생성 var observer = new IntersectionObserver(function(entries) { var entry = entries[0]; if (e.. 프로그래밍 & IT 정보/Javascript 2021. 12. 22.

• 자바스크립트 HTML DOM 변경 감시 예시 코딩을 하다보면 특정 DOM의 속성 등이 변경됐는지 알고 싶을 때가 있습니다. 이 경우에 활용 가능한 객체가 있어서 소개합니다. 목차 DOM 변경 감시 다음과 같이 MutationObserver 객체를 이용하여 DOM의 변경을 감시합니다. // 인스턴스 생성 var observer = new MutationObserver(function(mutations) { // 변경 감지 시 수행할 작업 기술 }); // 감시할 대상(항목) 설정 var config = { attributes: true, childList: true, characterData: true }; // 감시 대상 노드 var target = document.getElementById('target'); // 감시 시작 observer.ob.. 프로그래밍 & IT 정보/Javascript 2021. 12. 22.

• 자바스크립트 스크롤 맨 위/아래 감지하기 사용자가 웹 페이지를 다 읽었는 지 판단하여 다른 액션을 이어가고자 할 때 또는 꼭 읽어야 하는 글이 있을 경우 글의 맨 아래에서 버튼 상태를 활성화 시킬 때도 유용할 수 있습니다. function detectBottom() { var scrollTop = $(window).scrollTop(); var innerHeight = $(window).innerHeight(); var scrollHeight = $('body').prop('scrollHeight'); if (scrollTop + innerHeight >= scrollHeight) { return true; } else { return false; } } 스크롤 되어 내려온 위치와 브라우저에 표시된 높이를 더한 값이 페이지 전체 높이 값과 같거.. 프로그래밍 & IT 정보/Javascript 2021. 3. 8.

• 

  자바스크립트 async / await 예제 목차 async / await 란 무엇인가 Promise 객체를 좀 더 쉽게 다룰 수 있게 고안된 문법입니다. 이해가 어렵지 않고 사용법도 쉽게 익힐 수 있습니다. 다만 ECMAScript 2017에서 표준으로 정의된 문법이므로 이전 버전에서 사용하기 위해서는 Babel, Polyfill과 같은 라이브러리를 사용하여 이전 버전 문법으로 변환해야 합니다. [자바스크립트] Promise 예제를 통해 쉽게 이해하기 [자바스크립트] Promise 예제를 통해 쉽게 이해하기 비동기 처리의 한 방법인 콜백 함수를 다루면서 동기와 비동기에 대한 개념도 함께 설명을 드렸는데요. 잘 모르시는 분은 아래 포스팅 먼저 읽어 보시길 바랄게요 :) sangminem.tistory.com/275 [자바스 sangminem.tis.. 프로그래밍 & IT 정보/Javascript 2021. 2. 20.

• 

  Flutter(Dart) 위젯 간 통신을 위한 델리게이트 디자인 패턴 예제 플러터에서 위젯 간에 데이터 전달이나 상호 통신 또는 이벤트 리스너와 같은 역할을 어떻게 할 수 있을까 고민을 하다가 가장 효과적으로 구현할 수 있는 방법을 찾았습니다. 바로 Dart 언어에서 제공하는 mixin을 활용하여 델리게이트 디자인 패턴을 구현하면 시원하게 해결이 가능합니다. objective-c나 swift의 delegate와도 거의 동일한 패턴입니다. 다음은 실제 활용한 예제이므로 참고 바랄게요. 목차 mixin 클래스 생성 gameTimerDelegate.dart : mixin GameTimerDelegate { void gameOver(); } mixin 키워드로 GameTimerDelegate 클래스를 생성하고 내부에 gameOver 메서드를 선언해 보겠습니다. 믹스인은 인터페이스 또는.. 프로그래밍 & IT 정보/Flutter|Dart 2020. 12. 6.

• 

  자바스크립트 Promise 예제를 통해 쉽게 이해하기 비동기 처리의 한 방법인 콜백 함수를 다루면서 동기와 비동기에 대한 개념도 함께 설명을 드렸는데요. 잘 모르시는 분은 아래 포스팅 먼저 읽어 보시길 바랄게요 :) sangminem.tistory.com/275 [자바스크립트] 콜백 함수 예제를 통해 개념 및 원리 쉽게 이해하기 자바스크립트를 배운 지 얼마 안 되신 분이라면 콜백 함수를 많이 헷갈려 하실 수 있는데요. 차근차근 설명을 해 보도록 하겠습니다. 목차 동기와 비동기 의미 동기는 하나의 요청이 오면 완료 sangminem.tistory.com 지금부터 비동기 처리의 또 다른 방법인 Promise에 대해 알아 보겠습니다. 목차 Promise란 무엇인가 비동기 함수를 동기 처리하기 위해 고안한 객체입니다. 비동기 작업이 완료된 이후에 다음 작업을 연결.. 프로그래밍 & IT 정보/Javascript 2020. 12. 4.

• 

  자바스크립트 콜백 함수 예제를 통해 개념 및 원리 쉽게 이해하기 자바스크립트를 배운 지 얼마 안 되신 분이라면 콜백 함수를 많이 헷갈려 하실 수 있는데요. 차근차근 설명을 해 보도록 하겠습니다. 목차 동기와 비동기 의미 동기는 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식을 말하고 비동기는 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식을 말합니다. 동기 방식은 순차적으로 로직이 수행되므로 흐름을 쉽게 예측할 수 있지만, 비동기 방식의 경우 여러 작업을 동시에 효율적으로 처리할 수 있는 반면에 즉시 응답을 못받기 때문에 적절히 처리가 되지 않으면 예상 밖의 결과가 나올 수 있으므로 주의를 기울여야 합니다. 콜백 함수 사용 목적 비동기 방식으로 작성된 함수를 동기 처리 하기 위해 주로 사용합니다. 비동기 처리를 기본으로 하면서도 일부 구간에.. 프로그래밍 & IT 정보/Javascript 2020. 12. 1.

• 

  파이썬 프린트(print) 함수 사용법 (sep, end, 문자열 포맷) 기본 사용법 item1 = '사과' price1 = 1000 item2 = '바나나' price2 = 500 print(item, price) print(item2, price2) 실행 결과 : print 함수를 연속 실행한 결과 각 파라미터 사이에는 공백이 들어가고 끝에는 개행문자(new line)가 들어간 것을 알 수 있습니다. 고급 사용법 print(item, price, sep=',', end='/') print(item2, price2) 실행 결과 : 첫 print 함수의 sep 파라미터에 쉼표(,)를 대입하고, end 파라미터에 슬러시(/)를 대입했더니 item과 price 사이에 공백 대신 쉼표가 들어가고 끝에는 개행문자 대신 슬러시가 들어 갔습니다. 두번째 print 함수에서는 지정하지 않.. 프로그래밍 & IT 정보/Python 2020. 11. 20.

• 파이썬 함수(def)와 람다(lambda) 문법 및 차이점 비교 목차 함수 일단 예를 하나 들어 볼게요. def add(x, y): return x + y print(add(3,5)) #출력결과 >> 8 함수는 def 키워드로 작성을 합니다. add는 함수의 이름이고, 전달 받을 인자를 x, y로 정의하였습니다. 두 값을 더한 결과를 return해 주는 기능을 하고 있습니다. 이렇게 만든 add 함수에 3과 5를 인자로 전달하였더니 8이라는 결과가 나오는 것을 볼 수 있습니다. 람다 위의 함수와 같은 기능을 만들어 보겠습니다. add = lambda x,y: x+y print(add(2,3)) #출력결과 >> 5 lambda라는 키워드를 이용하여 x, y를 인자로 받고 두 값을 더한 결과를 return하는 기능을 합니다. 람다는 기본적으로 이름이 없는 함수를 만듭니다.. 프로그래밍 & IT 정보/Python 2020. 11. 14.