본문 바로가기
반응형

분류 전체보기

 (36)
[Raspberry Pi] 라즈베리파이 시작하기 라즈베리 파이 입문자를 위한 부팅 방법 / SSH 접속 방법 개요 처음 라즈베리파이를 다룰 때 정말 힘겨웠던 기억이 있다. 완전 초보에게 있어서 부팅은 물론이고 OS 설치? 데비안? 라즈비안? 도대체 무슨 단어인지 모를 처음 보는 것들을 하나씩 찾아보며 접했었다. 지금은 다룰 일이 없어서 내 기억과 노하우들이 잊혀가고 있어서 조금씩이라도 기록을 남기려고 한다. 나도 분명 나중에는 사소한 것들이라도 기억이 안 날 수 있으니 최대한 자세하게 기술해놓으려고 한다. 왕초보나 졸업 과제로 라즈베리파이를 선택하게 된 대학생 혹은 본인의 의지와 상관없이 다뤄야하는 신입 임베디드 개발자(?)들에게 도움이 되면 좋겠다. 준비물 라즈베리파이 LAN 케이블 micro SD Card (8GB 이상) SD카드 리더기 원격 접속..
[HTML/CSS] 토글 버튼 - 순수 CSS로 만든 토글 버튼 / Toggle Toggle Button with pure CSS 목적 토글 버튼은 생각보다 쓰이는 곳이 많다. 그때마다 구글링하며 토글 버튼 소스를 긁어 써왔다. 난 기능 구현을 최우선하고 그 후에 보완하거나 핵심 개념을 공부하는 스타일이라 이번 기회에 토글 버튼을 파헤쳐 볼까 싶다. 토글 버튼을 직접 처음부터 만들 것은 아니다. 시간적 이유도 있고 주로 사용할 리액트 프레임워크에서는 또 다를 것 같기 때문이다. 그래서 이번 목표는 자바스크립트 동작 없이 순수 CSS만으로 동작하는 토글 버튼을 정리해두는 것으로 하겠다! 과정 최대한 간단하고 코드도 간결하면서도 토글 버튼 생김새는 느낌있는 결과물을 원했다. 그래서 완성된 토글 버튼 소스를 바탕으로 필요한 것만 간추려보는 식으로 해보려고 하며 구글링을 하였고 멋진 곳을 ..
[엘리스 SW 엔지니어 트랙 3기] Git 강의에 대하여 엘리스 트랙 Git 강의 후기 지금까지 봤던 Git 관련 강의 영상 개발자에게 강조되고 또 강조되는 만큼 git을 다루는 능력은 정말 중요해보인다. 실제로 git같은 버전 관리 툴을 사용하지 않고 무언가 개발을 하면 여러 문제가 발생하는 것을 경험해보았다. 변경 이전의 내용들을 백업해야하는데 매일 마다 file.py.back 이나 220916_file.py 처럼 저장해두곤 했었다. 하지만 git을 사용한다면 편한데 문제는 바로 git이 어렵다는 것이다. 이런 저런 강의 자료나 블로그, 유튜브 강의를 봤는데 초반 내용은 항상 이해가 잘 되고 쉬웠다. 하지만 branch로 넘어가거나 조금 내용이 깊어지면 이해하기가 힘들었다. 아무래도 큰 이유 중 하나는 직접 해보기 까다롭다는 부분이었다. 무엇이 다른가? 이..
[JavaScript] DateTime 을 AM/PM 포맷으로 변환하는 법 / AMPM 시간 변환 JavaScript로 DateTime 을 AM/PM 포맷으로 변환하는 방법 환 / 오전, 오후 포맷 / time format 1. 문제 발생 채팅 기능을 구현할 때 신경 써주어야 할 부분들이 정말 많았다. 익숙하게 써오던 카카오톡을 다시 보게 되는 나날이다. 이번에 발생한 문제는 채팅 메세지를 전송한 시점 표시이다. 목표는 위와 같이 오전, 오후 (혹은 AM, PM)로 표현하고 싶었다. 하지만 서버로부터 받아오는 데이터는 당연하게도 이렇게 생기지 않았다. 주로 "1663244470791"와 같은 밀리세컨드 단위 timestamp나 혹은 이번 경우처럼 "2022-09-15 01:23:13"와 같이 전달받을 때도 있다. 다음부터는 당황하지 않도록 기록해두려고 한다. 함수로 만들어 보자. 2. 문제 해결 과정..
[엘리스 SW 엔지니어 트랙 3기] 첫 수업, 시작 엘리스 트랙 Start 엘리스 트랙이 시작되는 날이다. 프론트엔드 코스로 첫 시간은 역시 HTML과 CSS 관련한 기초를 배웠다. 조금 안다고 생각하고 있었고 실제로도 처음 배우기에 쉬운 언어라서 긴장 따위는 없었다. 하지만 기초를 튼튼하게 다지기 위해 마음먹고 시작한 만큼 주의를 집중하려고 노력했다. 어? 그런데 처음 알게 되는 기본적인 내용들이 정말 많았다. 5가지 정도의 개념들이 있었는데 수업 자료를 공유할 수 없으니 따로 정리할 계획이다. 아무래도 흡수한 내용들을 정리하기엔 이 블로그보다는 계층 구조식으로 문서를 만들 수 있는 Notion을 활용하는 게 더 좋아 보인다. 생각보다 분량이 많다. 처음 강의를 들은 소감이다. 7시간을 체류하며 엘리스 플랫폼에서 강의를 들어야 하는데, 기초적인 내용인 ..
[React] div 스크롤 맨 밑으로 내리기 / 스크롤 위치 조작하기 - useRef 실시간 채팅창을 구현하다가 마주한 문제였다. 따로 설정을 해두지 않으면 채팅방을 처음 열었을 때 스크롤이 맨 위에서부터 시작되어 최근 메세지를 보려면 직접 사용자가 스크롤을 내려야했다. 물론 이렇게 구현할 수 없으니 리액트에서 스크롤을 어떻게 조작 할 수 있을까? 우선 JavaScript를 기준으로 생각해보면 컨트롤 하고 싶은 영역의 id나 class로 div를 선택해야한다. 그리고 선택한 요소의 스크롤 위치를 제어할 수 있어야하며, 이 과정들은 유저가 채팅방을 오픈했을 때 한번만 실행되도록 해야한다. 이렇게 3가지를 리액트 환경에서 하나씩 해결해보자. 1. useRef로 DOM 선택하기 / target 설정 우선 스크롤을 조작하고 싶은 DOM을 강제로 가져와야한다. 즉 Real DOM을 직접 선택해야하..
[HTML/CSS] 마우스 드래그 방지 - 모든 브라우저 호환 게임 듀오 매칭 관련 프로젝트 중 포지션 선택 아이콘을 만들었다. 그런데 다음 사진처럼 아이콘이 드래그가 되어 보기 좋지 않다고 생각하여 드래그를 방지하는 방법을 찾아보았다. 결론은 간단한 CSS로 설정이 가능하다. 적용 전 드래그 방지는 한번씩 사용할 일이 있을것 같아서 정리해두려고 한다. .drag-prevent{ -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; } 적용 후 드래그 방지 코드를 적용 한 모습이다. 드래그가 되지 않고 디자인 해놓은대로 체크박스 체크 및 호버링이 잘 된다. 편안하다. 위와 같이 따로 ".drag-pr..
[엘리스 SW 엔지니어 트랙 3기] 합격 후기 지원 계기 나는 펌웨어 / 임베디드 쪽으로 개발자를 시작하였다. 전공은 전기전자공학으로 코딩과 관련이 있다면 있고, 없다면 없다고 할 수 있다. 스마트 팩토리 구축 관련 기업을 다니며 맡은 어떤 프로젝트에서 웹 방식 컨트롤러 개발을 하게 되어 Django를 공부하면서 웹 개발을 접하게 되었다. 웹 개발은 크게 백엔드와 프런트엔드로 나뉘는데, 웹 개발자가 없는 상황이라 혼자서 두 가지 다 맡았었다. 비교적 간단한 프로젝트였고 로컬 환경에서만 동작하는 구조라서 어찌어찌 구현을 해냈었다. 그 계기로 퇴근 후 집에서 웹 개발 공부를 취미 삼아 시작했었다. 대부분 노마드코더에서 인강을 들었다. 기초적인 개념들만 알고 구현 위주로 하는 방식이 재밌었다. 그러다가 백엔드는 물론이고 웹 디자이너, 퍼블리셔 등과 협업해..
[React] 절대경로 설정하기 (create-react-app) create-react-app을 사용하면서 코드를 좀 더 깔끔하게 보이도록 하기 위해 절대 경로로 import가 필요할 때가 있다. 공식 문서는 여기에서 볼 수 있다. 1. jsconfig.json 파일 생성 jsconfig.json 파일을 프로젝트 root 폴더에 생성해준다. 만약 TypeScript를 사용한다면 tsconfig.json로 생성하면 된다. 2. 내용 작성 앞서 생성한 jsconfig.json파일을 열고 다음과 같이 작성해준다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 이제 src 폴더를 기준으로 절대경로를 사용할 수 있게 된다. //기존 상대 경로 방식 import "./components/somthing"; //..
[VSCode] Prettier 저장 시 자동 정렬 안될 때 vscode를 사용하면서 분명 Prettier 확장팩이 설치되어 있음에도 불구하고, 저장 시 자동적으로 코드 정렬이 안될 때가 가끔 있다. 해결 방법으로는 두 가지가 있는데, 우선 설정 페이지를 열자. [ Code > Preferences > Settings ] 으로 열거나 os별 단축키는 다음과 같다. macOS : [⌘(command) + ,] Windows : [Ctrl + ,] 1. Format On Save 체크하기 설정 검색창에 "Format On Save"를 검색한 뒤 체크 해제가 되어 있다면 체크를 해준다. 2. Default Format 설정 확인하기 1번 방법인 Format On Save가 체크되어 있어도 안된다면 "Default Format"을 확인해보자. 이처럼 null(없음)으로 ..

티스토리툴바