블로그

자바스크립트 그리고 소프트웨어 개발

저는 "리액트 훅" 강의를 만든 아저씨입니다. 자바스크립트가 이렇게 강력해졌다는 사실에 감탄했습니다. 그리고 제 생각을 옮겨보려고 합니다. 어쩔 수 없이 제 나이와 인터넷 역사가 나옵니다. 꼰대로 보이기는 싫지만 변천사이니 옛날 얘기를 조금 하겠습니다. 김대중 정부는 전국 인터넷 망을 깔았습니다. 그 후 PC방이 생겼고 저는 이메일 주소라는 걸 만들었습니다. 이메일 주소 만들기가 한시간 수업 주제였습니다. 모든 기관과 기업은 홈페이지를 만들었습니다. 홈페이지는 단순했습니다. 그림 몇개 띄우고 정보글을 올렸습니다. 홈페이지와 소프트웨어는 다른 개념이었습니다. 소프트웨어는 사람들이 일을 할 때 쓰는 도구였습니다. 홈페이지는 홍보나 검색할 때 잠깐 보는 매체였습니다. 그런데 지금은 홈페이지가 곧 소프트웨어가 되었습니다. 스프링 프레임워크에서는 "클라우드 네이티브 소프트웨어" 라는 용어를 만들었습니다. 진정 클라우드에서 작동하는 소프트웨어입니다. 그냥 정보를 보던 웹 페이지가 일을 하는 도구인 소프트웨어를 완전히 대체했다는 이야기로 이해됩니다. 아직 저도 이런 얘기가 익숙하지 않습니다. 그래도 웹페이지에서 도는 게 로컬 컴퓨팅으로 돌리는 것 보다 뭔가 약하거나 느릴거라는 의심이 듭니다. 하지만 유명 데이터 분석 도구를 만드는 Palantir 가 만든 모든 소프트웨어는 웹에서 동작합니다. 이런 변화가 가능했던 이유는 자바스크립트의 발전 때문입니다.  리액트 강의를 만들면서 자바스크립트가 ui 프로그래밍을 엄청 쉽게 만들었다는 것에 감탄했습니다. 회사들은 소프트웨어를 점점 클라우드화 시키고 있습니다. 유지보수, 배포, 과금 처리가 쉽기 때문입니다. 앞으로 자바스크립트 발전이 더 기대됩니다.  

프론트엔드jsreactjavascript

Javascript 의 bind vs apply 차이와 용도?

1. bind 용도:-.함수의 this 값을 영구적으로 바꿉니다.-.새로운 함수를 반환합니다.-.나중에 실행할 함수를 미리 준비할 때 유용합니다. *.문법: const boundFn = originalFn.bind(thisArg, arg1, arg2, ...);*.특징:-.즉시 실행되지 않습니다.-.반환된 함수는 나중에 호출할 수 있습니다.-.부분 적용(partial application)을 구현할 수 있습니다. 예제:const person = { name: '한종인', greet: function(greeting) { console.log(`${greeting}, 저는 ${this.name}입니다.`); } }; const greetFn = person.greet.bind(person, '안녕하세요'); greetFn(); // "안녕하세요, 저는 한종인입니다. 2.apply 용도:this를 사용하여 메서드를 호출할 때, 메서드 내부에서 this가 올바르게 동작하도록 합니다.*.문법: const boundFn = originalFn.bind(thisArg, arg1, arg2, ...);*.특징:-.함수를 즉시 실행.-.두 번째 인자로 배열을 받습니다.예제:const person = { name: '한종인', greet: function(greeting, arg1) { console.log(`${greeting}, 저는 ${this.name}입니다${arg1}`); } }; person.greet.apply(person, ['안녕하세요', '!!']);// 바로 출력 => "안녕하세요, 저는 한종인입니다!!"*** 차이점*.실행 시점:-.bind: 새 함수를 반환하며, 즉시 실행되지 않습니다.-.apply: 함수를 즉시 실행합니다.*.인자 전달:-.bind: 인자를 개별적으로 전달합니다.-.apply: 인자를 배열로 전달합니다.*.반환 값:-.bind: 새로운 함수를 반환합니다.-.apply: 원본 함수의 실행 결과를 반환합니다.*.사용 상황:-.bind: 이벤트 리스너나 콜백 함수에서 this를 고정할 때 자주 사용됩니다.-.apply: 배열을 함수의 인자로 사용하거나, 함수를 즉시 실행하면서 this를 변경해야 할 때 사용됩니다. 바닐라 JS 사용 시 참조하시고, Happy coding...!!

웹 개발bindapplyjavascriptjs

미스터디벨로

[JS] 웹 FaceBook Login 연동 ( http / https )

https://developers.facebook.com Facebook for Developers11월 9일~11월 22일에 개최 예정인 XR 해커톤 등록 글로벌 혁신가들과 함께 Spark AR 및 Presence 플랫폼으로 빌드하고 상금을 차지할 기회를 노리세요. Messenger를 사용한 로그인 연결 정식 출시 이제 타developers.facebook.com1. FaceBook Developer 앱 생성 - 앱 만들기  - 소비자 선택 후 다음  - 앱 이름 , 이메일 입력후 앱 만들기  - 비밀번호 입력후 제출  2. FaceBook Developer 테스트 앱 생성( http에서 테스트용으로 사용하기 위함, https 를 제공한다면 건너 뛰어도 무방 ) - 좌측 상단 앱 클릭 후 테스트 앱 만들기  - 테스트 앱 이름 입력후 테스트 앱 만들기  - 비밀번호 입력 후 제출  3. FaceBook Developer 로그인 API 설정 - 상단의 앱 ID는 추후에 사용하니까 기억 - 중앙 Facebook 로그인의 설정 버튼 클릭  - 웹 선택  - 사이트 URL 입력 후 Save  4. FrontEnd - head에 스크립트 추가<!-- appId=아까 기억하라던 앱아이디 입력 --> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v10.0&appId=887116815503093" nonce="SiOBIhLG"></script>  - Vue Component로 작성했음, Vue 미사용시 JS쪽만 보면 됨<template> <section class="test"> <div v-on:click="FBLoginBtn">페이스북 로그인 연동</div> </section> </template> <script> export default { name: "test", created(){ window.fbAsyncInit = function() { window.FB.init({ appId : '887116815503093', // 아까 기억하라던 내 앱 ID cookie : true, xfbml : true, version : 'v11.0' }); window.FB.AppEvents.logPageView(); }; }, methods: { FBLoginBtn:function(){ window.FB.login(function(response) { if (response.status === 'connected') { window.FB.api('/me', 'get', {fields: 'name,email'}, function(r) { const facebook_email = r.email; const facebook_name = r.name; console.log(facebook_email); console.log(facebook_name); }) } else if (response.status === 'not_authorized') { // 사람은 Facebook에 로그인했지만 앱에는 로그인하지 않았습니다. alert('앱에 로그인해야 이용가능한 기능입니다.'); } else { // 그 사람은 Facebook에 로그인하지 않았으므로이 앱에 로그인했는지 여부는 확실하지 않습니다. alert('페이스북에 로그인해야 이용가능한 기능입니다.'); } }, {scope: 'public_profile,email'}); } } } </script> <style scoped> .test{ display:flex; justify-content: center; align-items: center; height:100vh; } div{ width: 200px; height:40px; background-color:#ffffff; border:1px #a8a8a8 solid; color:black; display:flex; align-items: center; justify-content: center; cursor:pointer; } </style> 5. TEST  - 이메일, 이름 잘 받아옴 ( 사진은 프라이버시때매 숨김 )

웹 개발미스터디벨로jsfacebooklogin페이스북로그인oauth

대근

반려동물 시장 진출 웹&앱 스프링 개발자 모집

반려동물 시장 진출 웹&앱 스프링 개발자 모집   안녕하세요 현재 서로 믿을 수 있는 스타트업 멤버 구축 되었고 추가로 능력있고 참하신 스프링 개발자 팀원 찾습니다. 현재 모두 메인 잡은 있는 상황이고 사이드 프로젝트로 운영중이라 부담없이 참여 가능합니다. 관심있으신분 연락 부탁드립니다   1. 주제소개: 반려동물 서비스 중 현재 시장에 없는 서비스 2. 현재 진행 단계: 시장분석 및 명확한 주제와 컨텐츠 방향성까지 잡은 상태 3. 모집분야 및 주요업무: 앱 개발자-하이브리드 앱 (웹앱을 네이티브 형태로 감싼 형태) 유사사이트: https://www.pet-friends.co.kr/main/tab/2 4. 모집경력 및 필요스킬: 앱개발 관련하여 경력이 있거나, 최소 스프링을 자유롭게 다룰 수 있는 스킬 필요 vue.js 옵션,java 등 5. 참고기타사항: 기획/디자인/개발/마케팅 포지션 다 구성되어 있으나, 추가 개발자 필요한 상황 6. 문의/연락: 010-4590-4917 카카오: antoniobae1 참고url:IT 웹 앱 마케팅 개발 창업모임 파랑새(Since 2021.10.02 : 네이버 카페 https://cafe.naver.com/lastpick1004 https://lastpick.modoo.at/ https://www.youtube.com/channel/UCpLCToWUvdjsPqkLRZ-wpZA   이 외 어떤 직군이라도 관심있으신 분은 연락 바랍니다.

모바일 앱 개발springjavavuejs

채널톡 아이콘