반응형 전체 글84 2024 민음사 북클럽 선택도서 책고르기(인기순위 확인하고 가세요) 2024 민음사 북클럽 선택도서 책 고르는 방법 (인기 순위 확인하기) 민음사 홈페이지에 들어가면 엑셀로 전체 도서 목록을 확인할 수 있는데, 총 573권이어서 이걸 언제 다 확인하나 싶습니다... https://minumsa.com/event/38263/ 그래서 준비한 인기순 총 정리! 인기순이라고는 했지만... 단순히 인터파크의 판매지수를 참고했습니다. thanks to 인터파크 판매지수는 매일 업데이트 된다고 하는데 저는 2024.04.23 기준으로만 보여드립니다! (왜? 데이터 수집한 날짜가 저날이걸랑요..) 아래 탭을 클릭하여 인기순으로 확인해 보세요~! 모바일에선 제목을 '클릭', 웹에선 '더블클릭'을 하면 자세한 정보를 확인하실 수 있습니다. 이때, 팝업을 클릭하면 네이버나 다음에서 책 정보.. 2024. 4. 22. [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. 해결하기. 웹 브라우저에서의 성능 관련 경고 메시지 해결하기 경고 메시지 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 Console 창에 나타나는 [Violation] 메시지는 Chrome 또는 다른 웹 브라우저에서 성능 관련 경고다. 이러한 경고는 '오류'를 나타내는 것이 아니라, 애플리케이션의 성능을 개선할 수 있도록 도와주는 '경고 메시지'라고 보면 된다. 위 경.. 2024. 3. 28. 윈도우 알림 개발 with JAVA (feat. System Tray & StompSocket) 1. 윈도우 알림 개발의 필요성 요새는 앱 푸시/웹 푸시 등 알림 서비스가 보편화되어 있다. 그래서 그런지 윈도우 알림은 자주 쓰이진 않는 느낌? 하지만 나의 경우엔 아래 상황에서 사용자가 알림을 받을 수 있는 방법이 필요했다. 1. 웹 서비스이기 때문에 앱 없음. 2. 사용자가 웹에 항상 접속해 있지 않음. 3. 개발 언어는 JAVA로(왜? 내가 JAVA 개발자니까...) 물론 문자나 이메일 같은 방법도 있겠지만, 윈도우 알림을 사용해 보고 싶어서 만들게 되었다. 2. 서버/클라이언트 스펙 ** 서버 ** - Spring Boot 기반 어플리케이션 - Rest API로 사용자 메시지 수신 - stomp websocket 으로 사용자 메시지 websocket으로 전달 ** 클라이언트 ** - Spring.. 2024. 3. 14. [REACT] 렌더링 - 공식 문서랑 같이 공부하기 시리즈6 조건부 렌더링 컴포넌트 내부에 조건문으로 JSX를 동적으로 표현할 수 있다. (if문, 삼항 연산자, 논리 연산자 &&) if문 function Item({ name, isPacked }) { if (isPacked) { return {name} ✔; } return {name}; } export default function PackingList() { return ( Sally Ride's Packing List ); } 특정 조건일 땐 아무것도 반환하고 싶지 않다면 null 을 사용하면 된다. if (isPacked) { return null; } return {name}; 하지만 이 방법은 일반적이진 않는다. null 대신 조건부에서 제외시키는 방법으로 사용하는 것이 더욱 일반적이다. 삼항 연산자.. 2023. 11. 15. [REACT] JSX에서 Javascript 사용하기 - 공식 문서랑 같이 공부하기 시리즈5 JSX에서 Javascript 사용하기 JSX에서 문자열 속성은 작은 따옴표 또는 큰 따옴표를 사용한다. export default function Avatar() { return ( ); } 만약 src와 alt를 동적으로 지정하고 싶다면 어떻게 해야할까? 바로 " " 대신 { } 를 사용하는 것이다! export default function Avatar() { const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; const description = 'Gregorio Y. Zara'; return ( ); } 중괄호 { } 는 JSX에서 Javascript를 사용할 수 있게 해준다. 따라서 아래처럼 중괄호 사이에 함수를 호출할 수도 있다. const today =.. 2023. 11. 15. [REACT] JSX란 - 공식 문서랑 같이 공부하기 시리즈4 JSX란? Javascript를 확장한 문법으로 Javascript 파일 안에 HTML과 유사한 마크업을 작성할 수 있다. 리액트에서 렌더링 로직과 마크업이 같은 위치에 있는 이유 전통적인 웹은 HTML, CSS, Javascript로 이루어져 있고 HTML은 컨텐츠, CSS는 디자인, Javascript로는 로직을 작성해 보통은 분리된 파일로 관리를 해왔다. 하지만 웹이 동적인 환경으로 변화하면서 로직이 컨텐츠를 결정하는 경우가 많아졌다. 그래서! 리액트에서 렌더링 로직과 마크업(컨텐츠)가 컴포넌트에 묶여 사용된다고 보면 된다. HTML에서 JSX로 변환하기 아래는 HTML로 작성한 파일이다. Hedy Lamarr's Todos Invent new traffic lights Rehearse a movi.. 2023. 11. 15. [REACT] 컴포넌트에 props 전달하기 - 공식 문서랑 같이 공부하기 시리즈3 -목차- [0] 서론 [1] 컴포넌트에 props 전달하는 방법 & 컴포넌트에서 props 읽는 방법 [2] props에 디폴트값 주는 방법 [3] JSX 전개 구문으로 props 전달하기 [4] 자식을 JSX로 전달하기 [4] props가 변하려면..? 서론 props는 JSX 태그에 전달하는 정보다. 예를 들어 img 태그에는 className, src, alt, width, height가 담길 수 있다. 이 속성들은 img 태그에 미리 정의되어 있는 props 이다. 하지만 컴포넌트에는 props에 무엇이든! 전달할 수 있다. 컴포넌트에 props 전달하는 방법 & 컴포넌트에서 props 읽는 방법 1. 자식 컴포넌트에 props 전달하기 export default function Profile().. 2023. 11. 14. [REACT] Components Import & Export - 공식 문서랑 같이 공부하기 시리즈2 -목차- [1] ROOT Component란? [2] 컴포넌트 Export & Import 하기 [3] 같은 파일에서 컴포넌트 여러 개를 Export & Import 하기 Root Component란 개인 환경마다 다르겠지만, 보통 Root Component는 App.js 파일이다. create-react-app으로 실행할 경우 앱이 실행되는 지점은 App.js라고 보면 된다. 만약에 Next.js처럼 파일 기반으로 라우팅하는 경우라면 페이지별로 root 컴포넌트가 다를 수 있다. (Next.js를 안 써봐서 정확하게 와닿지는 않는다.) function Profile() { return ( ); } export default function Gallery() { return ( Amazing scient.. 2023. 11. 14. [REACT] Components - 공식 문서랑 같이 공부하기 시리즈1 컴포넌트 컴포넌트는 리액트의 핵심 개념 중 하나이다. HTML에서는 markup이 웹의 UI를 구성한다. 리액트는 markup과 css, javascript를 컴포넌트로 결합하여 '재사용가능'한 UI 요소를 만든다고 생각하면 된다. (markup은 , 과 같은 것을 이야기한다.) 컴포넌트를 구성하는 방법 export default function Profile() { return ( ) } 1. 컴포넌트를 Export 한다. (내보내기) - 이 부분으로 인해 다른 파일에서 내보낸 function을 import할 수 있게 해주는 것이다. 2. function을 정의한다. - function Profile() { } 이 부분에서 Profile이라는 이름을 정해준다. 이때 이름을 대문자로 쓰지 않으면 작동하지.. 2023. 11. 14. [Python, MongoDB] 중복 문서 제외하고 Insert 하는 방법 Python에서 중복 문서 제외하고 Insert 하는 방법 - 문서를 한 번에 삽입 python에서 MongoDB를 사용할 때 문서를 한 번에 삽입하는 코드는 아래와 같다. 이때 반드시 pip instal pymongo 를 통해 pymongo 라이브러리가 설치되어 있어야 한다. from pymongo import MongoClient # MongoDB에 연결 client = MongoClient('mongodb://localhost:27017') # 데이터베이스 선택 db = client.mydb # 컬렉션 선택 collection = db.mycollection # 삽입할 문서들 documents = [ {"name": "Alice", "age": 25}, {"name": "Bob", "age": 30.. 2023. 7. 14. [MongoDB] 중복 문서 제외하고 bulkWrite하기 (createIndex 사용) MongoDB에서 고유 인덱스 생성하는 방법중복되는 값은 건너 뛰고 삽입하기 위해서는 자동으로 생성되는 _id 필드 외 키값을 정해주어야 한다. 이럴 때 사용하는 문법 중에는 createIndex가 있다. db.collection_name.createIndex({ name: 1 }, { unique: true }) 위 쿼리는 collection_name이라는 컬렉션에서 name 필드에 고유 인덱스를 생성한다. 두 개의 필드 조합으로 고유 인덱스를 생성하려면 아래와 같이 사용하면 된다. db.collection_name.createIndex({ field1: 1, field2: 1 }, { unique: true }) 중복된 문서를 제외하고 삽입하는 방법MongoDB에 여러 개의 문서를 한 번에 삽입하는 .. 2023. 7. 14. [Flutter] 텍스트 길이가 길 경우 말 줄임표 사용하는 방법 Flutter에서 말 줄임표 사용하는 방법아래 그림과 같이 Text가 너무 길 경우 말 줄임표로 나타내는 방법에 대해서 알아보도록 하겠습니다. 코드 Text( itemList[index]['title'].toString(), style: const TextStyle( fontSize: 24.0, color: Colors.black, ), overflow: TextOverflow.ellipsis, ) 코드 설명 overflow: TextOverflow.ellipsis 부분은 텍스트가 위젯의 경계를 벗어날 경우 어떻게 처리할 것인지를 정의합니다. TextOverflow.ellipsis는 텍스트가 해당 영역을 벗어날 경우, 벗어나는 부분은 생략되고 대신에 말줄임표 (...)가 표시됩니다. 이렇게 하면 사용자는.. 2023. 7. 13. 이전 1 2 3 4 ··· 7 다음 728x90 반응형
