4개월 만에 국비 지원 코스 수료를 이틀 앞두고 실력 테스트 겸 2023 토스 NEXT 개발자 챌린지에 참가했다. 근래 나태해진 나한테 채찍질을 할 겸 토스처럼 큰 회사에서 요구하는 역량은 어느 정도 수준인지 알고 싶기도 했다. 결과는 총 13문제 중에 2솔. 서술형은 손도 못 댔다. 나름 코테 준비하겠다고 프로그래머스와 백준에 들락날락거리며 문제를 꽤 풀어보긴 했지만 실제 출제되는 문제들은 확실히 까다로웠다. 난이도는 프로그래머스 기준 어려운 Lv.2 - Lv.3 정도 문제들이었다. 근데 못 풀었다고?? 어찌됐건 프로그래밍에 대한 고작 이 정도의 이해 가지고는 어디를 가더라도 쓸모가 없을 것이므로 제 1회 이대로 괜찮은가?를 통해 현재 문제점 및 개선 방향을 짚어보고자 한다. 🎃 문제점 1. 절대적인 ..

프로그래밍을 하다가 트러블이 생기면 항상 해결한 뒤 이쁘게 포장해서 글을 올리곤 했다. 하지만 글 하나를 쓰는데 시간이 너무 오래 걸리기 때문에 짧게 핵심만 담을 카테고리가 필요했다. 👀 문제 정의 이번 팀 과제는 프론트엔드를 바닐라 자바스크립트만을 이용해 구현한다. 일부 DOM 엘리먼트를 변화시키고 싶을 때 getElementById나 querySelector로 특정 요소를 지정해야 하는데, 만약 어떤 DOM 엘리먼트가 로딩 되기 전에 엘리먼트를 선택하려고 하면 아래와 같이 친숙한 오류를 볼 수 있다. 이벤트리스너를 붙이려고 보니 null값이네? 라는 오류다. 해당 라인으로 가서 어떤 코드인지 보자. document.getElementById("btnLogout").addEventListener("cl..

Python기반 백엔드 과정을 배우고 있지만 프로젝트를 하면서 필수적으로 프론트엔드를 구현해야 하기 때문에 자바스크립트를 다루게 됐다. 기초가 없는 상태에서 필요한 자바스크립트 코드들을 구글링한 뒤 머리 깨져 가면서 커스텀하는 건 굉장히 비효율적이다. 그래서 자바스크립트를 기초부터 차근차근 공부해 볼 생각이다. 이 카테고리는 python 등 기본적인 프로그래밍 언어를 알고 있다는 가정 하에 (나한테) 필요한 부분만 정리해서 올릴 예정이다. 00. What is JavaScript? 넷스케이프에서 일하던 브랜든 아이크가 10일만에 설계해 첫번째 버전을 만든 언어인 자바스크립트는 이것저것 허점이 많고 불편해서 당시에는 묻힐 뻔하다가 지속적인 보완과 Ajax, jQuery의 등장으로 지금은 웹개발을 하는데 없..

피그마에는 작업을 도와주는 다양하고 강력한 플러그인들이 있다. 꿀 플러그인 몇가지를 소개해볼까 한다 05. 플러그인 플러그인은 네모와 마름모 등으로 된 저 아이콘을 선택하고 플러그인탭을 선택한 뒤 필요한 플러그인을 검색해 Run버튼을 누르면 실행된다. 1. Open Iconic Icon Set by Iconduck 다양한 아이콘을 제공 이외에도 플러그인에 icon이라고 검색하면 다양한 플러그인이 있으니 필요한 svg파일을 제공하는 아이콘 플러그인을 찾아보는 것을 권장한다. 2. unsplash 더미데이터에 넣을 다양한 사진을 제공 이렇게 사진이 들어갈 요소를 전부 선택한 뒤 프리셋 탭에서 선택해주면 랜덤으로 선택된 카테고리의 이미지가 들어간다 3. Content Reel 카테고리에 따른 더미 텍스트와 다..

이번엔 Figma를 쓰는 가장 큰 이유인 스마트 셀렉션과 오토 레이아웃을 알아보자. 03. 스마트 셀렉션(Smart selection) 생각해보니까 메인 옆에 바로 가성비 카테고리가 있는 것보다 최신 카테고리가 먼저 있는 게 좋을 것 같다. 그럼 어떻게 수정해줘야 할까? 피그마에서는 요소들 간의 간격이 같다면 위 그림처럼 하나 빼서 공간 만들어 주고 그 공간에 다시 넣어주고 할 필요가 없다. 아래를 보자 그냥 드래그해서 전체를 잡아주고 가운데 생긴 분홍색 원을 잡고 드래그해서 위치만 바꿔주면 된다. 이게 피그마에서 지원하는 스마트 셀렉션 기능이다. 드래그한 요소들 사이에 간격이 전부 동일하다면 피그마에서 자동적으로 요소들 간의 관계를 파악해준다. 가운데 |를 드래그하면 요소들 사이의 간격도 조절할 수 있..

네이버를 리뉴얼하기 위해 메인 컬러와 서브 컬러를 이용해 열심히 와이어프레임을 만들었다고 생각해보자. 각 UI요소마다 색상도 열심히 넣어서 완성했는데 알고보니 색상코드가 #0ECC62가 아니라 #03C75A였다. 다시 하나씩 클릭해가며 전부 색상을 바꿔야할까? 아니다. 피그마는 색상을 전체적으로 관리하기 위한 Color Style 기능을 지원한다. 02. 컬러 스타일(Color styles) 간단하게 샘플 사이트 Travlr의 와이어프레임을 만들었다. 사이트 제목과 버튼, 그리고 카테고리 메뉴, 별에 메인 컬러를 주고 싶다. 근데 아직 메인 컬러를 못 정해서 색을 바꿔가면서 느낌을 보고 싶다. 그럴 땐 컬러 스타일을 지정하면 된다. 바꾸고자 하는 요소 하나의 색을 적당히 지정해 준 뒤 Fill탭에서 점 ..

프로젝트를 시작할 때 꼭 해야 하는 게 있다. 구상한 아이디어를 시각적으로 보여주는 와이어프레임 짜기. 처음 팀 프로젝트를 진행했을 때는 그냥 그림판으로 그리던가해서 허접하게 만들어서 썼다. 하지만 Figma를 알고 난 뒤 이걸 어떻게 하면 제대로 써볼까 하는 생각이 들어 이 글을 정리한다. 01. 컴포넌트와 인스턴스 피그마에도 컴포넌트와 인스턴스가 있다. 컴포넌트 : 디자인 전체에서 재사용할 수 있는 구성 단위 인스턴스 : 컴포넌트의 복사본. 컴포넌트의 모든 속성을 물려받는다 간단한 예제를 통해 컴포넌트와 인스턴스에 대해 알아보고 얼마나 유용한지도 알아보자. 그림과 텍스트로 이루어진 위와 같은 요소들이 있다고 하자. 우리는 저 포맷을 그대로 써서 옆과 아래에도 복사 붙여넣기를 열심히 해서 위의 사진처럼..

Python 내장 모듈인 collections에 대해 알아보자. collections모듈은 기본 컨테이너 객체의 편리성을 더 확장시키는 특별한 컨테이너 데이터 타입들을 모아놓은 모듈이다. 즉, 기본 컨테이너 타입의 확장판. 각종 데이터들의 전처리를 위한 유용한 기능들이 있다. 추가적으로 파이썬에서 컨테이너란, 데이터의 종류에 무관하게 저장이 가능한 객체를 말한다. 해당되는 객체와 아닌 것을 비교해보면 쉬운데 list, dictionary, tuple, dict, str등이 컨테이너 타입이고 반대로 int, float 등은 데이터의 종류가 고정되어 있는 Literal한 타입이다. 실제로 컨테이너 객체 클래스들은 컨테이너 안에 어떤 값이 포함되어 있는지 확인할 수 있는 __contains__ 던더 메소드를 ..

수입/지출을 기록하면 일반적인 소비 성향과 유저의 소비 성향을 비교해 그래프로 보여주고 유저들이 만든 관심 가는 챌린지에 함께 도전해 목돈을 모으는 가계부 SNS 서비스 프로젝트 정보 프로젝트: 가계부 SNS 서비스 - 리치 메이커 개발기간: 2023.05.22 - 2023.05.29 ( 7일 ) 주요 기능: 영수증 AI 인식 기능, 지출 관리, 챌린지 역할 영수증 AI 인식 기능 그래프 기능 메인 페이지 개발 기술스택: 프로젝트 구성 ★ 프로젝트 구조 BE : Django Rest Framework FE : Vanilla JavaScript 주요 코드 리뷰 01. 쿼리스트링으로 response 다르게 받기 프론트엔드에서 백엔드인 장고로 챌린지 리스트 api를 요청할 때 view를 늘리고 싶지 않았다. ..

Poetry는 python 의존성 관리 및 패키징을 위한 관리툴로서 프로젝트에 사용하는 라이브러리를 체계적으로 관리할 수 있고 패키지를 PyPI에 쉽게 배포할 수 있는 강력한 도구다. 의존성 관리가 약한 venv모듈의 단점을 해결한 모습을 보여준다. 2018년 2월 21일에 첫 커밋이 올라온 비교적 따끈따끈한 프로젝트인만큼 2023년 5월 현재 1.5버전까지 출시됐고 파이썬 3.7 이상에서만 사용가능하다. 설치 Unix 기반 진영과 Windows 기반 진영의 설치 차이가 있다. Linux, macOS, Windows(WSL, Windows Subsystem for Linux) curl -sSL https://install.python-poetry.org | python3 - 몇몇 시스템에서 Python ..