隣のプログラマー君

오늘은 CSS 얘기 할거다. 솔직히 HTML은 레이아웃 잡기만 하면 그만인거라 뭐 어려운거도 없고 설명할 것도 없고 귀찮을 것도 없는데, CSS는 어려운거, 설명할건 없는데 귀찮은게 좀 있다고 생각한다. 그래도 체계만 대충 잘 알면 할만 할테니 한번 시작해보자. 1. CSS란? 일단 우선적으로 CSS는 뭐하는데 쓰는 앨까? HTML로 만든 구조들을 원하는 자리에 배치하고 예쁘게 꾸며주는 역할을 한다. 우리가 HTML만 가지고 웹을 띄워보면 진짜 이게 뭔가 싶은 구시대적 디자인이 뚝딱하고 뜨는걸 볼 수 있는데, 사람 생각은 다 똑같은지 그 모양새가 혐오스러워 만든게 CSS라고 보인다. 그럼 이 녀석을 어떻게 쓰는지 알아보기 전에 사전에 알아둘게 있는데, 이 녀석의 이름의 의미다. 왜 이걸 알아야하냐면 이름..

뭐 React니 JS니 가장 주요하게 쓰는 애들한테 심취해서 막 글을 써제꼈는데, 생각해보니 이 얘기를 좀 자세하게 풀지를 않은 것 같아서 주워왔다. 기본 내용 정리가 잘 되어있어야하는데 말이다.. 앞서 뭐 다른 얘기할 때 HTML 얘기를 아주 스리슬쩍 끼워놨었는데 그건 진짜 겉 껍데기 중에 가장 바깥에 있는 수준이고 좀 디테일하게 안써둔다고 손해볼게 뭔가 싶어서 써본다. 나중에 또 쓸 CSS 까지 얹어서 얘기하자면 이 HTML/CSS 라는게 Front를 구성하는 가장 기본적인 요소 3인방 중에 하난데, 아무래도 퍼블리셔라는 직업이 또 따로 존재하다보니 신입개발자들은 뒷전으로 미뤄두는 경향이 없잖아 있다. 근데 둘다 꼭 먼저 공부하길 권하고 싶은게, JS 로 수십 줄 써서 개발할거 CSS 한두줄로 끝나는..

오늘 가볍게 끄적여볼 이야기는 git에 대한 이야긴데, 아마 개발자라면 모르는 사람이 없을 만큼 유명한 협업툴이고, 어떤 이들은 git을 통해 블로그를 운영하거나, 또 자신이 쓴 코드들을 저장해두는 저장소로 사용하기도 한다. 하지만 생각보다 이 git 의 개념이나 사용방법 같은 것들이 상당히 추상적이고, 머릿속에 붕붕 떠 다니는 느낌으로 막연하게 사용하는 사람들도 꽤나 되기 때문에, 이 git에 대한 정리를 하고 넘어가려고 한다. (Github은 나중에 기회가 되면 건드려보자.) 1. 협업의 개념 우리는 개발이라는 과정을 할 때 물론 혼자할 때도 있겠지만, 대부분의 사람들이 협업을 통해 하나의 프로그램을 만들어 나간다. 헌데 이 협업이라는게 상당히 골치가 아프다. 학원에서 git이라는 걸 알려주지 않았다..

갑자기 아주 뜬금없이 앱개발에 대한 공부를 시작하게 되었는데, 대단한 계기는 아니고 그냥 회사 차원에서 하게 될 것 같아 준비하느라 그렇게 되었다. 솔직히 혼자서도 할 생각은 있었는데 명분이 생겨서 공부할 수 밖에 없는 상황이 오는건 오히려 땡큐긴함.. 어쨌든 언젠가는 해야겠다고 생각을 하기 했다만 근본이 웹 개발자인 내가 앱을 손대려고 하니 도저히 Native쪽은 자신이 없길래 하이브리드 앱 부터 시작해야겠다. 하던 와중에 회사에서 아주 좋은 공부 기회를 던져주셔서 룰루랄라 앱 공부 시작했다. 그럼 한번 이야기 해보자. 1. APP 개발이란? 사실 APP 개발이라고 하면 자꾸 핸드폰으로 사용하게 되는 모바일 어플리케이션을 이야기 하게 되는데, 제대로 말하면 우리가 사용하는 프로그램들 대부분 APP 이라..

자꾸 같은 내용으로 글 뻥튀기 하는 것 같아서 조금 그렇긴 한데, 처음이라고 겁먹어서 Expo로 세팅했다가 그냥 react 자체를 모르는 것도 아니고 react-native 로 세팅하는걸 겁내는 내가 너무 애송이 같아 시도해보고 왔다. 1. react-native-cli / react-native 설치 $ npm install -g react-native-cli $ npm install -g react-native 내가 처음에 어지러웠던 이유가 제대로 된 절차를 알려주지 않는 포스팅을 보고 따라하다가 아니 똑같이 했는데 왜 안돼?! 라는 상황이 와서 어지러웠던건데 스택오버플로우 들어갔더니 걍 해결됐다. 진짜 개발하는 사람들 공부용 포스트 보고 따라하지말고 그냥 스택오버플로우 보고 따라하자. 거기가 그냥 ..

React Native 플젝을 생성하고 실행까지 시켜보니 내가 Flutter는 환경세팅까지만 해두고 플젝 만든뒤에 실행을 안해봤구나 하는 생각이 들어서 급하게 하나 만들고 실행까지 해봤다. 일단 우선적으로 나는 인텔리제이 Ultimate 환경에서 개발을 주로 하는데 처음엔 난 인텔리제이에서 안되는 줄 알았다. 근데 보니까 안드로이드 스튜디오도 플러그인 깔아서 하는데 인텔리제이도 플러그인 깔면 되는거 아님? 하는 생각 들어서 찾아보니까 플러그인 있더라.. (안되는게 어딨음 돈주고 사는건데 만들어 내야지 당연히) 그래서 그냥 난 IDE는 하나로 쓰기로 했다. 솔직히 인텔리제이 프론트 플젝에 까지 쓰려면 ultimate 사야하니까 뭔가 손해본다고 생각했는데, 정작 써보니까 상당히 편하고 좋은데다 이거저거 어지..

어제의 Flutter 환경 세팅에 이어서 이번엔 React Native 환경 세팅이다. 애초에 React로 개발을 하던 사람이니 Flutter에 비하면 환경 세팅 자체가 그렇게 복잡하지 않아서 어제 보단 시행착오가 적었지만 그래도 확실히 앱을 개발한다는게 개발한걸 바로 브라우저로 확인할 수 있는 웹보다는 에뮬레이터 같은 것들을 필요로 하다보니 조금 해메게 되긴 하는 것 같다. 그래도 Flutter는 개발환경 세팅만 해두고 아직 테스트용 프로젝트 생성을 안해봐서 에뮬레이터 돌리는건 해보지도 못했는데, RN은 어찌 됐든 돌리는거까지 해볼 수가 있어서 오늘은 에뮬레이터 실행까지 따라가보도록 하겠다. 0. Node.js 설치 https://nodejs.org/ko/download 다운로드 | Node.js No..

회사에서 어쩌다보니 하이브리드 앱개발을 하게 될 것 같아서 Flutter / React Native 두가지 환경에 대해서 요즘 알아보는 중이다. 아무래도 앱개발이라는거 자체가 이번이 내 인생 최초라 환경 세팅부터 차근차근 기록을 남겨둬볼까 한다. 오늘은 플러터 환경 세팅부터 할건데 플러터에 대한 기본 정보나 이런건 따로 APP 카테고리 파서 남겨둘 예정이고 오늘은 환경 세팅만 정리해둘 예정임. 1. Android Studio(Android) / Xcode(IOS) 설치 일단 뭐 React Native를 하든 Flutter를 하든 이 두개는 무조건 깔려있어야한다. 아무래도 하이브리드 앱을 만든다는게 각 OS 환경에 따라 빌드가 진행되어야하기 때문에 필요하다고 보면 되겠다. 난 지금 윈도우 컴퓨터를 가지고 ..

요즘 내 최대 관심사가 딱 두가진데, 첫번째는 앱개발이고 두번째가 NEXT.js다 왜 두가지에 관심이 많냐면, 일단 전자에 대한 이유는 앱을 안할 수가 없다. 사람들이 PC를 사용하지 않을 수는 없다만, 결국 제일 쉽고 가볍게 접근 할 수 있는건 모바일 환경이라 일반적인 웹프론트는 구하는데도 상당히 적고 대부분 운영되고 있는 서비스의 Admin 페이지 같은거만 웹프론트로 개발하는 것 같음. 때문에 개발 시장에서 프론트 개발자가 앱 안하면 도태될게 뻔하다는게 보인다. 후자에 대한 이유는 UX 향상에 대한 관심도 때문이기도 한데, 어디서 지나가는 얘기로 대충 일반적으로 화면 렌더링 되는데 3초이상 걸리지 않는게 좋다고 들었어서 생각해보니 지금 주로 내가 개발하는 웹어플리케이션들이 그 시간을 넘어가는 것 같더..

어디서 봤는데 TypeScript가 Front-End 개발자들이 사용하고 싶은 언어 1위라고 하더라. 근데 오히려 학원에서 한창 배울 당시에 코로나 걸려서 javaScript 스킵하다시피하고 회사와서 바로 TypeScript 쓰라길래 TypeScript쓴 내 입장에선 공부할 것도 없이 걍 익숙해져버린 언어라 제대로 공부해볼 생각조차도 안했던 것 같다. JavaScript도 그냥 코테 공부하려니 선택지가 그나마 열심히 써봤던 언어가 그것 뿐이라 골랐던거구.. 그러다보니 자연스레 공부하게 되었다는 느낌이 되어버렸다. 서론은 이제 끊고, TypeScript에 대해서 이야기를 해보자. 1. 타입스크립트란? TypeScript는 JavaScript에 Type을 부여한 확장판 같은 것이다. 그 콘솔겜 하다보면 확장..