본문 바로가기

분류 전체보기76

2022년 상반기 회고 및 하반기 계획 우선 이 블로그를 아주 오랫동안 방치해 두었던 것에 대한 반성으로 시작한다. 회사 업무가 바쁘기도 했고, 개인적인 사정으로 인해 꽤 오랫동안 무기력과 우울에 빠져 지냈다. 그러나 이제 심리적으로 어느정도 안저이 찾아왔고 블로그도 다시 열심히 써 보고자 그간 있었던 일을 회고를 적어보고자 한다. 블로그 개발 블로그는 오랫동안 새 글을 쓰지 않았지만 매일 200명 정도의 꾸준한 유입이 있다. 아무래도 검색을 통한 유입이 가장 많았고, 개발 공부 초기에 적어둔 CSS 기초 및 JS 기초를 정리한 내용으로의 유입이 많았다. 덕분에 얼마전 2년만에 100달러 수익을 달성해서 이번 달에 에드센스 광고비를 입금 받을 것 같다. 다만 꾸준히 유입이 늘어나는 건 아니라 진짜 2년에 10만원 한 번씩 받을 듯 ㅋㅋㅋ… 한.. 2022. 9. 7.
[CSS100DAYS :: DAY4] 인터렉티브 CSS 다루기 - transfrom을 이용하여 동심원 애니메이션 만들기 DAY2도 했는데 얘가 더 쉬워서 먼저 올린다. CSS 100 챌린지를 하면서 느낀 건 transfrom을 잘만 사용하면 어려워보이는 인터렉티브 동작도 생각보다 쉽게 구현할 수 있고, 그 애니메이션이란 게 대부분 반복적이다 보니 처음에만 잘 방향을 잡아두면 어렵지 않게 만들 수 있다. 가장 먼저 html 코드를 작성해준다. 지난번과 크게 다르지 않다. 이제 CSS로 기본적인 모양을 만들어주자. 배경색과 쉐이드가 있는 각각 크기가 다른 원 세 개를 만들어 준다. 여기서 infinite는 애니메이션을 무한으로 반복시켜 주는 것이고 alternate는 애니메이션을 순방향으로 진행시킨 다음 역방향으로 다시 진행시켜 주는 것을 말한다. 이렇게 하면 동심원이 펼쳐졌다가 다시 사그라드는 동작을 영원히 반복하게 된다... 2022. 1. 21.
[django 기초] 장고의 model과 admin 다루기 model 데이터베이스에 저장될 테이블을 정의한다. 테이블은 models.py에서 정의되며 테이블을 하나의 클래스로 정의하고 테이블의 컬럼은 클레스의 변수(속성)으로 매핑한다. CharField() : 길이 지정이 필요한 문자열 IntegerField() : 정수형을 받을 수 있는 타입 TextField() : 길이 지정이 필요 없는 문자열 #출처 : 파이썬 페이스북 클론 (인프런) from django.db import models class Notice(models.Model): title = models.CharField(max_length=200) likedCount.= models.IntegerField() view = models.IntegerField() contents = models.Te.. 2022. 1. 20.
[CSS100DAYS :: 2일차] CSS로 인터렉티브 웹 구현 - 햄버거 버튼 만들기 (transform 응용하기) 이 포스트는 100 Days of CSS 사이트의 예제를 직접 구현한 내용을 정리해 포스팅한 것입니다. 제가 아주 오랫동안 블로그를 쉬었고... 그래서 저도 제가 이걸 어떻게 만들었는지 조금도 기억나지 않아서 되새기는 김에 함께 구현 방법에 대해서 알아보도록 하겠습니다. 완성본은 다음과 같습니다. (제가 만들었지만 꽤 잘 만든 편 아닌가요?) 먼저 html 코드를 보겠습니다. 여기서는 CSS 내용이 더 중요하기 때문에 대략적인 모양을 갖출 수 있도록 구성했습니다. 기본적으로 세 개의 바 모양은 같기 때문에 효율적으로 스타일을 주기 위해 bar 클래스를 통일했고, 클릭했을 때의 애니메이션 동작이 세 개가 전부 다르기 때문에 one two three 세 개의 별개의 클래스를 주어 조절하도록 하겠습니다. 가장.. 2022. 1. 19.
[react native] 리엑트 네이티브에 커스텀 폰트 넣는 방법 리엑트 네이티브를 배우기 시작하면서, 나도 FE 개발자라고 디자인은 내가 원래 하고싶었던 대로 바꾸면서 하고 있는데 아무래도 기본 폰트는... 진짜 쓰기 싫다. 적어도 구글 웹폰트정도는 사용할 수 있었으면 좋겠다는 생각에 알아본 내용을 정리한다. google 웹폰트 다운받기 리엑트 네이티브에서 사용하고자 하는 폰트를 다운로드 해야 합니다. 저는 앱의 header 에 적용할 볼드한 픈트를 사용하고 싶어서 Anton 폰트를 사용하기로 했습니다. Anton : https://fonts.google.com/specimen/Anton 뻘소린데, 저는 안톤 폰트를 진짜 좋아하는 것 같습니다. 딱히 이걸 선택하자는 마음이 없어도 꼭 강조 표시하는 문구는 전부 얘 쓰는 것 같아요. 우측의 select this styl.. 2022. 1. 18.
[React 기초] 그래서 JSX가 뭔데? (정의와 기초 문법) 이 포스트는 노마드 코더의 ReactJS로 영화 웹 서비스 만들기 를 수강하고 추가적으로 각 개념에 대해 학습하여 정리한 내용입니다. JSX란? javascript 에 XML을 추가한 추가 확장 문법이다. React에 엘리먼트를 추가할 수 있게 해주며, 그 형태가 html 과 유사하여 FE개발자들의 편의를 도모한다. JSX 는 자바스크립트의 공식 문법이 아니다. 브라우저가 실행될 때 때 babel 을 통해 일반 자바스크립트 문법(React.createElement)형식으로 변환되어 실행된다. (즉, 바벨 설치가 선행되어야 한다.) React 개발에 있어 JSX 의 사용은 필수가 아니다. 다만 자바스크립트 코드 내에서 UI를 개발하는 데 직관성을 높여주는 효과가 있어 많이 사용된다. 지난 시간에 사용했던 .. 2022. 1. 17.
[react 기초] 노마드 코더 강의 1 : 리엑트로 이벤트 만들기 이 포스트는 노마드 코더의 강의의 Events in React를 정리한 것입니다. 앨리먼트 생성하기 실제로는 잘 사용되지 않는 방법이지만 다음과 같이 새 앨리먼트를 생성할 수 있음. 보이는 것과 같이 id 또는 style 등의 프로퍼티 또는 텍스트를 넣어서 제작할 수 있다. const span = React.createElement("h3", {id:"first", style:{color:"red"}}, "hello world"); 뿐만 아니라 안에 이벤트를 넣어 생성하는 것도 가능하다. const button = React.createElement("button", { onClick: ()=>{ console.log("clicked") }, style:{ backgroundColor:"red" } },.. 2022. 1. 16.
[django 기초] 장고의 기본 구조와 settings.py 확인 / superuser 생성하기 아주 오랜만에 장고에 대해 포스팅 해본다. 사실 그동안 나도 다까먹어서 새로 공부하는 중임. 이 내용은 제주코딩베이스캠프의 페이스북 클론 강의와 쉽고빠른 웹개발, 파이썬 웹 프로그래밍 책을 보고 정리하는 것이다. 장고에서의 뼈대는 중심이 되는 프로젝트와 그 곁가지를 형성하는 애플리케이션으로 이루어져 있다. 장고 프로젝트를 처음 설치하면 자동적으로 db.sqlite3 데이터베이스가 설치된다. 프로젝트 생성 django-admin startproject {프로젝트이름} . 애플리케이션 생성 python manage.py startapp {애플리케이션 이름} 장고의 큰 틀은 이 두가지로 이루어져 있습니다. 제일 먼저 프로젝트 폴더에 있는 [settings.py](http://settings.py) 폴더를 살펴.. 2022. 1. 15.
[react native] 날씨앱 만들기 정리 처음으로 리엑트 네이티브를 공부하기 시작한 것은... 사실은 한 번쯤 스토어에 내 어플을 올려보고 싶다는 생각을 해서 처음엔 스위프트&flutter 강의를 결제 했었다. 그런데 과연 프론트엔드 개발자로서 갑자기 다른 언어를 배워서 써먹겠다고 이 중요한 시기에 js 말고 다른 언어를 배우는 것이 맞을까? 그게 과연 효율적일까? 라는 생각이 자꾸만 들었다. 게다가 왠지 업무 개발을 할 때에도 괜히 그 언어로 썼던 습관 때문에 자꾸 헛손질을 하게 되는 것 같은 느낌이 들어서 이왕 배우는 거 react-native를 통해 자바스크립트 문법을 이용한 개발을 배워보고자 했다. 리엑트에는 많은 장점이 있는데 그 중 하나는 IOS와 안드로이드 개발이 동시에 가능하다는 것이고 또 하나는 커뮤니티가 굉장히 크고 잘 되어 .. 2022. 1. 14.

티스토리툴바