jh.nrtv

Python으로 Linked List를 구현하는 과정에서 파이썬의 print() function의 sep, end 파라미터를 알게 되었기에 기록하고자 한다. end parameter 파이썬의 print() fuction은 기본적으로 프린트를 끝낸 이후에 새로운 줄로 넘어간다. 하지만 여러 print() function을 줄넘김 없이 한 줄에 출력하는 것을 원하는 경우에 end파라미터를 사용한다. print('이어서',end= 'END') print('쓸 수',end= 'END') print('있음',) 이어서END쓸 수END있음 sep parameter 또한 여러 요소를 하나의 print()안에서 출력할 경우에 각 요소의 사이에 특정 값을 넣고싶다면 sep 파라미터를 사용한다. print('사이에','s..

List 는 순서를 가지고 원소들을 저장하는 자료구조이다. List는 Array List, Linked List두 가지로 구현할 수 있다. ✅ Array List Array List는 Static Array (정적배열)과 Dynamic Array (동적배열)이 존재하는데, Python에서는 list 자료형을 통해 dynamic array을 이미 잘 구현해 두었기 때문에 직접 구현할 필요가 없다. List의 Operation(연산)들과 시간복잡도는 다음과 같다. Static array Dynamic array access / update O(1) O(1) insert_back O(1) amortized O(1) delete_back O(1) O(1) insert_at O(1) O(1) delete_at O..

Class는 Python에서 객체지향 프로그래밍을 가능하도록 한다. 객체지향 프로그래밍? 몇 번을 찾아서 공부해도 새로운 객체지향 프로그래밍 ... 객체 지향 프로그래밍은 먼저 객체를 정의한다. 객체는 멤버 변수(데이터)와 멤버 메소드(자신의 상태(데이터)를 변경하는 함수) 로 구성된다. 이러한 객체들이 서로 상호작용하여 객체의 상태가 바뀌어 원하는 결과를 얻는 프로그램 방식이 객체지향 프로그래밍이다. 객체지향 프로그래밍은 4가지 속성을 가진다. 1. 추상화 2. 캡슐화 3.상속 4. 다형성 객체지향 프로그래밍이란? 객체 지향 프로그래밍이란? 객체 지향 프로그래밍 (Object-Oriented Programming, OOP… jongminfire.dev 모호하긴 하지만 '객체'라는 단어는 개념적인 단어이..

이전 글에서 nextjs 프로젝트에서 Quill 에디터를 추가하는 과정을 설명했다. 내가 구현하고 있는 커뮤니티 탭에는 글의 제목과 더불어 글 내용을 간략하게 (최대 4줄) 보여주도록 되어있다. 글의 내용부분이 HTML 형식으로 바뀐 이후에는 아래와 같은 문제가 발생했다. 다른 부분은 괜찮지만 글의 목록에서 간략하게 내용을 보여주는 부분에서 다음과 같은 문제가 있었다. 1. 굵게 표시하거나 등의 제목으로 표시된 파트가 글 목록 파트인 이곳에서도 과도하게 크게 보인다. 2. 엔터 등으로 줄을 넘기는 도 한 줄로 인식해서 글 초반에 을 여러 번 쓴 경우에 글 미리보기가 기능하지 않을 수도 있다. 이는 전체적인 UI/UX에 악영향을 미친다고 판단하고 해당 파트를 수정하게 되었다. 아래처럼 간단하게 html 을..

Next.js로 개발하고 있는 프로젝트의 게시판 작성기능에 WYSIWYG (What You See Is What You Get) 에디터를 구현해야 할 필요성을 느꼇다. 위지위그는 HTML 태그를 사용자가 입력할 필요 없이 에디터 내장 기능을 이용해서 원하는 글의 모양을 만들면 자동으로 HTML 방식으로 변환하는 편집기를 의미한다. 여러 docs나 블로그 글 게시기능 등에 기본적으로 탑재되어 있기 때문에 익숙한 형태이다. 저번 React 프로젝트에서는 CKeditor를 사용했는데 에러가 너무 많이 발생해서 ㅜㅜ 이번에는 next와 더 호환성이 좋다는 Quill을 사용해보고자 한다. Quill - Your powerful rich text editor Sailec Light Sofia Pro Slabo 27..

Next.js와 MongoDB를 사용한 게시판을 만들고 있으며 게시판의 페이지네이션을 구현하는 과정을 기록해보고자 한다. 현재 내 실력과 상황에서 현실적인 구현방법을 고민한 것이며, 분명 이보다 훨씬 나은 방법이 있을 것이라 확신한다. 다음은 기존에 게시판의 글 목록을 보여주는 소스코드이다. // /community/page.tsx import { connectDB } from "@/util/database"; export default async function Community() { const client = await connectDB; const db = client.db("uppernight"); const result = await db .collection("community") .find..

Next.js 13.4.1 로 진행중인 프로젝트에서 메타데이터를 설정하고자 한다. 먼저 'Next.js에 메타데이터 설정하기' 등의 키워드로 검색하면 가장 보편적으로 소개하는 방법이 있다. ✅ 가장 보편적인 방법 - import ); } export default MyApp; 위와 같이 'next/head'에서 태그를 임포트 하고 그 안에서 이나 태그를 조작한다. _app.js 말고도 각각의 page.js 에서도 위의 방법으로 변경이 가능하다고 한다. [정직하게 배워보는 Next.js] Next.js에서 head 태그를 조작하는 멋진 방법 해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 10부작으로 이루어져 있습니다. Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽..

최근 모 기업의 과제전형 피드백에서 'UI/UX를 고려해서 CTA Button 컴포넌트를 사용했다면 더 좋았을 것 같다'는 피드백을 받았다. (나는 특정 장소의 세부정보를 담은 url을 해당 장소 이름 자체를 link로 만들어 진입하도록 했으나, 피드백대로 '더 알아보기' 등과 같은 CTA 버튼이 더 나은 사용경험을 제공했을 것 같다. ) 솔직히 CTA Button 이 무엇인지 몰랐기 때문에 이번 기회에 공부해보고자 한다. CTA는 Call To Action의 약자로, 고객에게 행동을 유도하는 버튼이나 배너를 뜻한다. 대표적으로 회원가입, 구매하기, 다운로드 , 더 알아보기, 문의하기 등이 있으며 사이트 별 목적에 따라 형태와 종류가 달라진다고 한다. 검색해보니 더 나은 CTA 버튼을 만들기 위한 체크리..

Next.js로 진행하는 프로젝트에서 아래의 에러를 만났다.   이 에러에 대해서 공부하면서 다시 공부하게 된 것이 두 가지 있다.    1. Hydration 이슈 먼저 에러 문구에 적힌 Hydration이란 무엇일까? Hydration은 이미 서버에서 랜더링된 html을 client단에서 자바스크립트를 통해서 이벤트 처리, 상태관리 등이 가능한 fully interactive application 으로 바꾸는 과정을 뜻한다. 즉 서버에서 정적인 html을 받아들이고 파싱해서 초기 렌더링을 수행하고 JS코드로 해당 html을 (리액트 트리에 맞게)동적인 페이지로 전환하는 것을 말한다. 이를 통해서 앱의 초기 로딩 속도를 개선하고  SEO를 향상시킬 수 있다.  더보기SPA vs fully interac..

Next.js로 개발중인 개인 프로젝트에서 아이콘의 크기를 화면의 너비에 따라서 달라지게 하는 반응형을 적용하고자 미디어 쿼리를 사용해서 css의 적용을 다르게 보이게 했다. //header.jsx ... ... /* global.css */ .web_logoimg { @media screen and (max-width: 768px) { display: none; } } .mobile_logoimg { @media screen and (min-width: 768px) { display: none; } 해당 미디어쿼리가 로컬 테스트 환경에서는 정상적으로 작동했으나 Vercel 배포 이후에는 미디어 쿼리가 적용되지 않는 오류를 확인할 수 있었다. 위와같이 웹 화면에서 모바일 로고도 함께 보이고, 모바일 화면..