본문 바로가기
반응형

분류 전체보기63

React 공식문서 쉽게 공부하기 이제까지는 HTML + CSS + Vanilla (순수) JS 로 공부를 해왔다. 하지만, 최근 웹페이지는 유저와 많은 상호작용이 존재한다.즉 DOM 상태 관리가 필요하다. 이에, 편리한 (Fontend) JavaScript Library를 소개한다. 아래 목차는 공식 문서를 토대로 작성했다. 상세히 읽고 codesandbox에서 실습해보면서 재밌게 공부하였다. What is React 특징 & 장점 Component ( 하나의 의미를 가진 독립적인 단위 모듈 ) 개념에 집중한다. 어찌보면 Customizing HTML tag를 작성한다는 느낌이 든다. 직관적이고 재사용성이 높아진다. 유저와의 상호작용에 유리하다. state, props 변수를 통해 데이터를 관리한다. View Layer (of MVC .. 2021. 1. 2.
우분투 환경에서 git 시작하기 우분투를 몇달 간 사용해보면서 느낀 점은 모든 작업을 CLI (Command Line Interface) 로 진행한다는 것이다. 그래서 git bash 와 같은 별도의 프로그램 설치 필요 없다. 한번 CLI 방법을 함께 공부해보자. with 참고자료 기본 작업 패키지 설치 $ sudo apt-get install git-core 사용자 정보 추가 $ git config --global user.name "이름" $ git config --global user.email "이메일 주소" 컬러 설정 $ git config --global color.ui "auto" Git 저장소 생성 윈도우에서는 이동하기 편한 C:/ 안에다가 했는데, 우분투는 터미널 시작 경로가 home/username 임을 인지하고 시작.. 2020. 12. 23.
우분투 20.04 마우스 휠 속도 조정 우분투는 기본적인 글씨 폰트나 전체적인 UI가 쬐끄마하게 느껴진다. 아니 그렇다. 사실 이것도 답답한데, 더 답답이는 마우스 휠 속도 ㅎㅎ 한 스크롤 = 1줄 이동... 진짜 거북이다. 참고자료에서 알게된 방법을 정리해보았다. 해결방법 ① imwheel 설치 $ sudo apt-get install imwheel ② .imwheelrc 파일 생성 $ pwd ※ 파일 위치 확인 후 자신이 원하는 위치에 생성. (필자는 home/usrname 위치에서) $ gedit ~/.imwheelrc ③ 열린 파일에서 아래 스펙 입력 ".*" None, Up, Button4, 6 None, Down, Button5, 6 Control_L, Up, Control_L|Button4 Control_L, Down, Contr.. 2020. 12. 23.
[JS] 비동기 동작 스케줄링 방법 3가지 웹서비스 개발을 하면서 비동기 작업은 불가피하다. 파일 로딩 (Input/ Output), 네트워크 요청(유튜브 스트리밍 로딩), 시간의 흐름에 따른 애니메이션 등 상황은 다양하며 fs.readFile, requestAnimationFrame, setTimeout, fetch(browser), http(node.js) 등의 메소드들로 구현이 가능하다. 이 포스팅을 통해 비동기 스케줄링을 이해하는 시간이 되었으면 한다. Asynchronous 비동기란? sync[씽크]를 맞춰! 우리는 sync라는 단어가 익숙하다. "영화를 다운 받고, 자막과 영상의 씽크를 맞춘다", "나랑 부모님은 싱크로율 100%" 라는 표현을 자주 사용하기 때문이다. 그 어원에서 출발한 Synchronous는 동기식, Asynchro.. 2020. 12. 22.
순열 - 재귀로 구현 수능을 본지도 어느덧 4년 전이다. 하지만, 이러한 문제유형이 아직도 기억난다. "10명 중 반장과 부반장을 뽑을 경우의 수" , "10명 중 부회장 2명을 뽑을 경우의 수" 전자는 순열(Permutations), 후자는 조합(Combination)에 대한 문제였다. 오늘은 확률과 통계 시간에 풀었던 순열을 컴퓨터적 사고를 통해 풀어보려고 한다. 시작해보자.순열nPr 는 n개 중 r개를 골라 순서를 고려해 나열할 수 있는 경우의수를 나타내는 수학 기호이다. [1, 2, 3] 숫자에서 3개를 모두 써서 경우의 수를 생각해보자. ( = 3P3 = 3! = 6가지 )(1, 2, 3) (1, 3, 2)(2, 1, 3) (2, 3, 1) (3, 1, 2) (3, 2, 1) 이걸 작성하면서, 필자는 자연스레 앞 숫.. 2020. 12. 12.
[JS] 객체 지향 프로그램 컴퓨터 프로그램을 여러개의 독립된 단위, "객체"들의 모임으로 파악하고자 하는 프로그래밍 패러다임 by 위키백과 프로그래밍 패러다임 프로그래밍 스타일에 대한 이론적 개념으로 그 중 3가지를 소개하겠다. 절차 지향 프로그래밍(Procedural) 순차적 처리에 초점 객체 지향 프로그래밍 (Object-Oriented) 기능별로 필요한 데이터(=속성)와 행위(=메소드)를 하나의 덩어리(=객체)로 묶어서 진행한다. 함수형 프로그래밍 함수를 수행해도 함수 외부 값이 변경되는 것을 지양. 단순히 출력되는 what에 초점. JavaScript는 Prototype 기반의 객체 지향 언어인데, OOP 디자인으로 구현 가능하도록 많은 발전이 있었다. OOP (Object-Oriented Programming) 기본 구성.. 2020. 12. 10.
우분투 20.04 한글 입력 방법 (feat. fcitx) 이 포스팅은 다음과 같은 사람에게 도움이 된다. ubuntu를 깔고나서 한글 입력하는 방법을 모른다. fcitx를 설치했지만, 슬랙 및 zoom 등의 여러 프로그램에서 한글 입력이 안된다. 한글 띄어쓰기가 이상하다. "이 상 하 게 띄 어 쓰 기 될 때" VSCode에서 받침이 이상하게 입력된다. ubuntu는 사용자가 설정해야할 것이 많다. 그것도 CLI (command Line Interface)로 해야한다. 하지만, 자세하게 안내할 것이니 차근히 따라오길 바란다. fcitx 한글 입력기 설치 $ sudo apt-get update $ sudo apt-get install fcitx-hangul 컴퓨터 리부팅 Language Support > Keyboard system 선택 [Lsuper] 검색 창.. 2020. 12. 9.
우분투 20.04 설치 (feat. LG 그램 17인치) 이 포스팅은 작업환경을 Node.js 개발에 편리한 ubuntu OS로 바꾸기 위한 과정이다. 필자는 그간 window 유저였고, 시행착오를 기록해보려한다. 준비물 4GB 이상 USB, 넉넉한 시간, 인내심 🙃 (※ 필자는 16GB USB를 사용하였으나, 최종 설치된 파일이 2.8GB 정도여서 4GB도 충분하지 않을까 싶다.) 설치 과정 참고 자료 내용을 간단히 요약해보면, Ubuntu.iso 이미지 USB에 다운로드 - Ubuntu USB Installer 제작 재부팅 시 바이오스 창을 통해 설치하기 주의할 점 Q1. 기존 window os 내에 있던 작업 파일들은 사라지는가? A1. 필자는 ubuntu 싱글 부팅 방법을 선택하였기에, 설치 진행 전 파일들을 백업해두었다. 조심하자. Q2. 듀얼 (or.. 2020. 12. 8.
백엔드 개발자가 되고 싶다. 20년 10월 21일 오지 않을 것 같았던 4학년 막학기를 보내고 있다. 저번주에 (20/07/06~20/10/12) 3개월간의 대학원 인턴 생활을 끝으로 확실히 취준의 길에 발을 들였다. 그리고 오랫동안 계획해 왔던 코딩 부트캠프에 등록했다. 26일 개강을 앞두고 푹 쉬어도 좋을련만, 나는 "쉬고 있다는 상태" 가 매우 불안했다. 그래서 미리 컴활 실기 1급 시험을 잡아두었지만, 또 공부는 하기 싫은가보다. 이 마음가짐으로 부트캠프를 시작하면 안되는데 최근, 불안감이 올라올 때마다 내가 하는 행동은 나의 과거 행적을 보는 것이다. 혹은 지원한 인턴 쪽에서 소식이 있는지 메일을 들여다 보는 것 같다. 나는 고등학교 시절부터 SW 개발자가 되고 싶었다. 빨리 취직하고 싶었고, 생산적인 일을 하고 싶었다. .. 2020. 12. 8.
반응형