개발자
-
[2019.09.08] 트레바리 입사 3주차를 마무리하며.핵인싸 개발자의 길/트레바리 활동(2019.8~2020.07) 2019. 9. 8. 14:51
이번 주는 admin 클럽 페이지 개선 작업을 쭉 진행하였다. 많은 항목들이 하나로 나열되어 있는 부분을, 카테고리 별로 묶어 구분하여 보여주는 작업, 또 코드의 반복되는 부분의 리펙토링도 나름 시도해 봤다. 작업을 하면서 테크 셀 분들과 정말 많은 컴케를 주고받으며 작업을 했는데, 그 과정이 너무 좋았다. 참고로 '컴케'는 '커뮤니케이션'의 줄임말이다! (다들 컴케 컴케 하길래, 그것이 대체 무엇인가 했다. 나도 최근에 알음..😫) 하나의 Element 요소를 배치하는 것에도 어떻게 하면 쓰는 사람이 더 편할지, 동작 예측이 가능한지 신중하게 생각하면서 작업을 진행하였다. 작업하는 내내 다른 사람들의 의견을 주고 받는 것과 사용자를 위한 개발을 한다는 것이 너무나도 재미있었다! 페이지 개선 작업은 어느..
-
[2019.09.07] 슬기로운 개발생활 컨퍼런스 행사를 다녀오다.경험치 쌓기/일상 일기 2019. 9. 8. 02:00
오늘 이벤터스에서 주최하는 '슬기로운 개발 생활'이라는 컨퍼런스를 다녀왔다. 29,000원이라는 유료 컨퍼런스여서 쪼끔 고민이 되었지만... 발표 주제가 흥미로운 것이 많아 이번에 개발 동기 분과 다녀오기로 했다. # 발표 주제 개발자를 위한 디자인 이야기 : 디자이너와의 협업을 쉽게 하는 방법 공유 당신의 IDE, 이것만 알아도 1시간 일찍 퇴근 : 코딩에 도움을 줄 수 있는 여러 단축키 및 툴 컨트롤 공유 스타트업에서 테크 리더로 성장하기 : 스타트업 테크리더로 활동하기 위해 고민한 점, 노력한 점에 대해 이야기 렛츠git잇 : 우리가 잘 알지 못하는 실무에서 유용할 git, github의 기능 소개 및 공유 사격 중지! PM은 아군이다! : PM이란? PM에 대한 인식 및 역량, PM과 개발자 등 ..
-
[2019.08.28] 드디어 실제 Production 코드를 접했다. 그리고 첫 회식!핵인싸 개발자의 길/트레바리 활동(2019.8~2020.07) 2019. 8. 29. 02:05
입사 후 부터 어제까지 테크 셀에서 사용하는 기술 스택으로 혼자 프로젝트 진행을 하며 감각을 익혔다. 그리고 오늘부터 드디어 트레바리 admin 페이지를 직접 clone 받아서 소스코드를 볼 수 있었다. 그러나 소스코드를 직접 로컬에서 동작시키려하니.. 장벽이 너무 많았다.. 우선 내가 처음 접하는 DB인 PostgreSQL, 처음 다루어보는 개발 툴 Postico, SourceTree 환경 구성을 하느라 애를 먹었다. PostgreSQL은 Select,insert와 같은 쿼리문은 많이 다르지 않은 것 같은데, database 환경 설정하는 부분이 너무나도 달랐다... 심지어 admin 페이지를 돌리기 위한 SQL파일 덤프를 하는것도, username 권한 설정 등 때문에 많이 해맨 것 같다... 퇴근시..
-
[2019.08.21] 오늘의 TIL - [Next.js] Style 주의할 점개발 블로깅/오늘의 TIL 2019. 8. 21. 22:36
Next.js에서 스타일을 추가할 때, 일반적으로 태그에 클래스 명을 지정해주고, style jsx라는 태그 사이에 스타일을 작성한다. 그리고 React 특성 상, style jsx 태그를 포함하여 다른 컴포넌트로 전체를 한번 감싸준다. (1번 줄, 맨 마지막 줄의 div) 그러나 이러한 일반적인 스타일 방식이 먹히지 않을 때가 있다. 바로 아래와 같다. const component = () => { const arr = ['하나', '둘', '셋']; const Temp = arr.map(element => ({element})); return ( {Temp} ); } 위 코드를 보면, View 단에 쓸 Temp 컴포넌트를 return 전에 미리 정의해서 사용했다. 저렇게 미리 만들어 놓은 컴포넌트에는..
-
[2019.08.18] Next.js - React의 Server Side Rendering 프레임워크개발 블로깅/Next.js 2019. 8. 18. 20:28
우선 Next.js를 설명하자면, 리액트를 서버사이드 렌더링 방식으로 쉽게 구현할 수 있도록 환경을 제공해주는 프레임워크이다. # 서버사이드 렌더링이란? 서버사이드 렌더링이란, 클라이언트 단에서 작업하던 View와 Controller를 서버에서 직접 작업하는 것이다. 클라이언트 사이드 렌더링은, 리액트로 뷰를 만들고, 각 각 필요로 한 데이터를 서버 API에 요청하여 사용하는 방식으로, 클라이언트와 서버가 분리되어 가동되는 방식이다. 서버사이드 렌더링은 클라이언트에서 하는 모든 작업을 서버에서 작업하여 뷰를 사용자에게 보여주는 방식이다. Next.js를 사용하면, 리액트에서 이러한 서버사이드 렌더링을 쉽게 구현할 수 있다. # Next.js 기본 세팅 프로젝트 환경을 우선 구축한다. 프로젝트 폴더 생성과..
-
[2019.08.11] Mobx-react 기본 개념 및 사용법 2 (살짝 어려움 주의)개발 블로깅/React 개념 2019. 8. 12. 01:40
# Mobx-react 기본 개념 및 사용법 1 [2019.08.11] Mobx-react 기본 개념 및 사용법 1 (살짝 어려움 주의) Redux와 같이 global state 관리를 할 수 있는 mobx라는 라이브러리. Mobx는 Redux처럼 React에 종속되어 있는 라이브러리가 아니므로, 꼭 React가 아닌 일반 javascript 내에서 또는 vue.js와 같은 다른 웹 프레.. helloinyong.tistory.com 앞에서 구현한 Counter 컴포넌트를 이용하여 Mobx에 대해 더 알아보도록 하자. # observable 값 변경에 의한 연산 처리 computed Counter 값을 변경할 때마다, 자동으로 제곱된 값이 나오도록 해보자. src/Counter.js import Reac..
-
[2019.08.11] Mobx-React 개념 및 사용법 1 (살짝 어려움 주의)개발 블로깅/React 개념 2019. 8. 11. 22:00
글로벌 상태 관리를 할 수 있는 MobX 개념 및 사용법에 대해 정리한다. 먼저 MobX는 리덕스와 같이 리액트에 종속되어 있는 라이브러리가 아니다. React가 아닌 일반 javascript 내에서 또는 Vue.js와 같은 다른 웹 프레임워크에서도 사용할 수 있는 점을 참고하자. MobX 개념 파악하기 - Observable (관찰받고 있는 state) 리액트 안에서 사용되는 글로벌 상태를 직접 변경하며 어떻게 상태가 변했는지 파악하는 요소. - Computed Value (연산된 값) 이벤트 발생으로 인해 어떠한 연산에 필요로 하는 state에 변화가 생겼을 때, 그 state 변화에 따라서 새로운 연산 작업을 수행하게 된다. 해당 state에 변화가 없으면, 그냥 기존의 값을 사용한다. - Acti..
-
[2019.08.10] 오늘의 TIL - CRA eject란?개발 블로깅/오늘의 TIL 2019. 8. 10. 21:10
CRA(Create React App)을 생성하면, 기본 스크립트 명령어가 4개가 존재한다. # CRA 기본 스크립트 명령어 4가지 // package.json "scripts": { "start": "cross-env NODE_PATH=src react-scripts start", "build": "cross-env NODE_PATH=src react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } 그 중, 마지막 eject라는 명령어에 대해서 알아보자. # eject란? eject는 해당 프로젝트에 걸려서 숨겨져 있는 모든 설정을 밖으로 추출해주는 명령어다. $ yarn eject or ..