김평범's OrdinaryCode

저번에 React 컴포넌트에서 공부를 했다. 우리는 앞으로 React에서 컴포넌트를 만들어서 재사용을 할 예정이다. 이때 컴포넌트 호출 시 각각 필요한 데이터를 전달할 일이 생길 것인데 이때 이용하는 게 바로 props이다. 오늘은 React에 props라는 개념을 이용해서 React 컴포넌트에 데이터를 전달해 보기로 하겠다. 컴포넌트를 만드는 두 가지 방법 React에서 컴포넌트는 두 가지 방법으로 만들 수 있다. JavaScript의 function모양과 비슷하게 작성하는 함수 컴포넌트와 Class를 만들 듯이 작성하는 클래스 컴포넌트가 있다. 저번 스터디에서는 클래스 컴포넌트 형태로 Hello, world를 화면에 출력시켜보았다. 지난 시간에 만든 클래스 컴포넌트와 동일한 역할을 수행하는 함수형 컴..

🧅 노션 레시피 템플릿을 만들게 된 계기 룸메와 저녁을 만들어 먹을 때 주로 레시피 링크를 참고한다. 보통의 경우 해당 링크를 서로의 카톡에 보내서 관리하고 있었는데 오래된 경우 링크가 만료되거나, 아니면, 다른 링크와 섞여버려 그 당시 맛있게 먹었던 링크를 잃어버려 다시 찾는 귀찮음이 있었다. 또한, 입맛이 없는 날에는 예전에 해먹은 메뉴를 다시 생각해서 정하곤 하는데, 시간이 지나면, 우리가 어떤 요리를 맛있게 해 먹었는지 자체를 까먹는 경우가 생겼다. 룸메와 내가 좀 더 효율적으로 저녁 메뉴 선정을 위해 노션으로 우리가 이제까지 만들었던 레시피들을 모아 놓는 레시피 템플릿을 만들어보기로 했다. 🍜 노션 요리 레시피 템플릿 기능 소개 레시피 템플릿은 하나의 표로 이루어져 있다. 레시피 북에 인터넷에서..

🐣 FrontEnd 개발 언어의 흐름 jQuery의 부흥 2014년 처음 개발자가 되겠다고 마음을 먹었을 때, 처음 접하게 된 라이브러리는 jQuery였다. 웹에서 작동하는 JavaScript 개념이 전혀 없어도 jQuery와 함께라면 웹 화면을 만들 수 있었다. 처음 웹 개발을 시작한 주니어들에게 이해하기 쉬운 언어 규칙, 직관적인 방식으로 웹에 애니메이션 효과 혹은 css효과를 줄 수 있는 매우 유용한 라이브러리였다. jQuery의 부흥과 더불어 트위터에서 jQuery를 이용한 프런트 앤드 프레임워크인 Bootstrap이 등장하게 되면서, javascript를 전혀 모르던 나도 부트스트랩과 jQuery를 이용하여 그럴듯한 웹페이지를 만들 수 있었다. 프레임워크 3 대장 등장 업계에 들어오고 2년 동안..

2020년 11월 16일 첫 티스토리 개설 후, 두 달이 되었다. 티스토리에서 권고하는 한 달 내 글 20개 미션을 성공하자마자 바로 어렵다던 애드센스 고시를 신청했다. 블로그를 시작하긴했는데.. 내 티스토리는 프런트 앤드 관련된 개인 공부를 올리기 위해 개설했다. 2020년 11월부터 본격적으로 개인적인 용도와 회사에서 노션을 활발히 사용하다 보니, 블로그 운영 한 달 뒤 나의 티스토리 글은 거의 노션 글 지분이 50퍼센트가 넘어가고 있었다.😅 정작 본 목적인 프런트 앤드 게시글 지분이 낮게 될 줄이야.. (하지만, 2021년에 꼭 리액트를 시작할 겁니다.) 애드센스로 수입 실현 하기 어쨌든 운이 좋게 요즘 대세 노트 앱으로 노션이 떠오르면서 나의 노션 포스팅 중 몇 개가 구글에서 상단에 게시되기 시작..

우리가 작성하는 메모 앱에서 원하는 기능 중 하나는 표이다. 표의 경우, 많은 사람들이 내용을 작성하는데 자주 이용하는 포맷인데, 대부분 사람들이 엑셀을 많이 사용하기 때문에 엑셀에서 사용하던 표를 생각하면 노션에서의 표를 이용하면 이상한 부분이 많을 것이다. 오늘의 노션 표의 구조에 대해서 말해보도록 하겠다. 📃 Notion의 데이터베이스 표 노션에서 만드는 표는 엑셀과 다른 형태의 표이다. 엑셀에서 표의 한 줄은 하나의 페이지가 생성되는 개념이다. 해당 페이지는 속성과 블록으로 이루어집니다. 그렇기 때문에, 노션에서의 표는 아래와 같은 특징을 가진다. 셀 병합 불가 기존 엑셀처럼 페이지와 속성을 1:1 관계를 가진다. 셀 병합은 이러한 관계가 깨지 때문에 노션에서의 표는 셀 병합을 지원하지 않는다. ..

📚 노션 단어장 템플릿 기능 소개 단어를 외우다 보면, 뜻을 가리고 테스트를 하는 경우가 많다. 이제 노션으로 간단히 내가 외우고 싶은 단어들을 작성한 뒤 , 테스트까지 진행해보자. 뜻을 체크하거나, 영어 단어를 직접 입력해서 채점을 해주는 단어장을 만들었다. 👩‍🏫노션 단어장 간단 소개 노션 단어장은 단어장 표 하나로 이루어져 있다. 단어장에는 가장 외울 단어를 적어주면 된다. 정답 : 추후 테스트 시 정답을 입력할 칸 영단어 : 영어단어를 입력 단어 뜻 : 해당 영단어의 뜻을 입력 완료 : 모두 외운 단어를 체크하는 칸 단어장으로 테스트 환경 만들기 해당 템플릿은 총 4가지의 보기 환경을 제공한다. 전체 단어장 : 내가 입력한 모든 영단어와 단어 뜻을 볼 수 있는 단어장 안 외워지는 단어 : 완료가 ..

🚩노션의 기본 구조 블록 노션의 가장 기본은 블록이다. 처음 시작하는 빈 캔버스에 내가 필요한 블록을 쌓아 나가는 시스템으로 보면 된다. 블록은 가장 기본적인 텍스트가 될 수도 있으며 이미지, todoList, bullet, 토글, 복잡한 데이터베이스까지 다양한 형태로 제공된다. 노션을 Drag 했을 때 파란색으로 표시되는 모든 것들을 블록이라고 부른다. 페이지 노션에서 말하는 페이지는 새로운 캔버스를 호출하는 개념이다. 또한 이 페이지는 우리가 흔히 보는 Window의 폴더 구조와 동일하게 구성된다. 페이지 추가하기 가장 최상위 페이지를 추가하는 방법으론 왼쪽 메뉴 플러스 버튼에 마우스를 올리면 페이지 추가가 가능하다. 또 다른 방법으론 Ctrl+n 단축키를 이용하면 새로운 페이지가 추가된다. 우리는 ..

🐣 들어가기 전 노션에서 데이터베이스를 만든 경우, 특정 데이터만을 보고 싶을 경우가 있다. 필터와 정렬 기능을 가지고 조건을 주면 특정 데이터를 보는 게 가능하지만, 자주 보는 정렬과 필터가 있는 경우가 있다. 예를 들어, 팀원들끼리 업무를 관리하는 표를 만들어 보자고 한다. 팀원 1의 업무를 보기 위해 필터로 팀원 1에게 할당해서 확인하고, 팀원 2의 업무를 보려고 필터 조건을 다시 팀원 2로 바꾼다. 하지만 만약 다시 팀원 1의 업무를 보려면 다시 필터 조건을 바꿔줘야 한다. 이게 한두 번이면 크게 상관이 없지만, 자주 바꿔줘야 하는 필터라면? 상당히 불편할 것이다. 이제 우리는 노션의 데이터베이스의 보기 추가 기능을 이용하여, 자주 사용하는 필터와 정렬을 저장해서 언제든지 불러올 수 있다. (영문..

저번 글을 통해서 css animation과 svg를 활용해서 텍스트 효과를 만들어 보았다. 오늘은 이것의 연장 선으로 css와 svg 기능, 추가적으로 가상 선택자를 이용해서 특별한 버튼 hover 효과를 만들어보기로 했다. 오늘 만들 hover 효과가 어떠한 원리로 만들어졌는지 궁금하다면 밑의 글을 먼저 읽고 오길 추천한다. ordinary-code.tistory.com/25 [css/svg]css animation과 svg를 활용해 글자가 그려지는 효과 만들기 🙄 SVG란? SVG는 Scalable Vector Graphics의 약자로 html에서 사용할 수 있는 Vector 이미지를 지칭한다. SVG라는 개념은 HTML과 CSS에서만 사용하는 개념은 아니고 백터 이미지를 표현하기 위한 포맷으로 w..

🙄 SVG란? SVG는 Scalable Vector Graphics의 약자로 html에서 사용할 수 있는 Vector 이미지를 지칭한다. SVG라는 개념은 HTML과 CSS에서만 사용하는 개념은 아니고 백터 이미지를 표현하기 위한 포맷으로 w3c에서 만든 이미지 표준 값이다. SVG는 벡터 기반의 그래픽을 XML 형식으로 정의해서 사용할 수 있다 SVG를 사용하는 이유는? png, jpg와 같은 픽셀 이미지와 다르게 SVG를 사용하는 이유는 무엇일까? - SVG 이미지는 확대 축소 시에도 고품질의 이미지를 제공하며 - 파일 형태로 했을 때 용량이 적어 로딩 시간이 줄어들며 - css를 통해 다양한 효과를 줄 수 있음 단점의 경우 SVG의 경우 IE 하위 버전에서 지원이 되지 않으며, 단순한 내용이 아닌 ..