본문 바로가기

분류 전체보기268

프로젝트 파일 구조 명령어 - tree 기본적으로 mac에는 tree명령어가 없다 그래서 homebrew가 설치되었다는 가정하에 brew install tree 로 tree를 설치해준다 tree 설치 brew install tree 이제는 tree명령어를 사용할 수 있다 사용하기 전에 앞서서 도움말을 보자 tree 도움말 tree -help 또는 man tree 참고로 man(manual) 명령어를 이용한다면 q를 입력해서 나가야한다 tree 사용 cd(change directiory) 명령어로 위치를 옮겨서 실행하자 왜나하면 엄청..많이 나오기 때문에! 현재 경로의 폴더들은 이런 상황이다 tree 기본적으로 tree는 폴더를 만나면 recur(재귀)를 진행해서 가장 내부의 파일까지 출력한다 그럴때는 위에 tree -help 에서 봤었던 -L.. 2023. 3. 3.
2023 플러터 앱 핸드폰에 설치해서 실행해보기(iOS) 아이폰은 안드로이드보다 많이 복잡하다..ㅎ 1. 아이폰 직접 연결 우선 아이폰을 컴퓨터에 직접 연결한다 이 표시가 뜨면 신뢰를 누른다 그럼 맥북의 Finder→위치에 본인의 아이폰이 보일 것이다 이 기기에 한번도 연결한 적이 없다면, iPhone 백업을 암호화하라는 창이 뜬다. 이 부분은 백업에 관한 설정인데, 암호화를 하지 않으면 중요 데이터는 빼고 백업이 되고, 백업 암호화를 하면 중요데이터를 포함한다 연결된 상태에서 Finder의 일반 탭에서 아래로 내려서 Wi-Fi에 연결되어 있을 때 이 아이폰 보기를 체크해준다 2. 아이폰 개발자 도구 활성화 핸드폰에서 개인정보 보호 및 보안으로 들어간다 아래의 개발자 도구를 끔→켬으로 바꿔준다 (재부팅) 재시동 3. iOS Dev 계정 - team(개인) 등록.. 2023. 1. 12.
2023 플러터 앱 핸드폰에 설치해서 실행해보기(Android) 1. 안드로이드 개발자 모드 활성화 설정 → 휴대전화 정보 → 소프트웨어 정보 로 들어간다 빌드번호를 여러번 클릭한다 xx 1단계 전입니다에서 한번 더 클릭하면 비밀번호를 입력하라고 나온다 비밀번호를 입력하면 ‘개발자 모드를 켰습니다’ 메시지가 나온다 그리고 다시 설정으로 가보면 맨 아래에 개발자 옵션 메뉴가 생긴 것을 볼 수 있다 클릭을 해서 들어가자 아래에 디버깅 탭에서 USB 디버깅을 활성화해주자 2. 핸드폰 연결 Mac 유저의 경우 허용 핸드폰에서 뜨는 메세지 USB 디버깅 항상 허용을 체크하고 확인을 한다 3. Android Studio 핸드폰을 연결한 채로 안드로이드를 켜준다 우측 상단 타겟에서 안드로이드 기기를 선택한다 그리고 오른쪽의 Run을 누른다 Running Gradle task 'a.. 2023. 1. 12.
선언적 렌더링(Declarative Rendering) vs 명령형 렌더링(Imperative Rendering) Imperative: Give step-by-step instructions on how to reach a certain goal Declarative: Describing the result (the what), without instructing how to do it 예시) Mom wants a kid to tidy up its room. Imperative: “Pick up the toys, then empty the bin, then remove dust and finally vacuum the floor.” Declarative: “Here’s a picture of how your room looks like clean. I want you to get it into that state i.. 2023. 1. 11.
Mac Node.js, Npm(Node Package Manager) 버전 LTS로 업데이트 하기 LTS:(Long Term Support) 긴 시간동안 업데이트도 하며 지원하는 버전이다 version 확인 npm -v node -v n 모듈 설치 sudo npm install -g n Node.js LTS 버전으로 업데이트 sudo n lts 다시 버전 확인 NPM 재설치 sudo npm install -g n 결과 Node.js v.16.16.0 → v.18.13.0 NPM v8.11.0 → v.8.19.3 2023. 1. 11.
Vue Project 생성하기2023 (M1, CLI, UI, Vite) 일단 난 M1 Mac을 사용하고, homebrew를 이용해서 진행할 것이다 Node.js를 설치한다 ⇒ 생략 Vue CLI (Command Line Interface) 설치 sudo npm install -g @vue/cli 1. Vue-CLI default 프로젝트 생성 #vue create [프로젝트명] vue create vue-default 버전 선택 Vue3 프로젝트 매니저 도구 선택 NPM or Yarn Yarn 선택 완료 실행 테스트 # cd [프로젝트명] cd vue-default yarn serve http://localhost:8080 접속 터미널 실행 종료 Ctrl + C - 프로젝트 구조 .idea node_modules public public/favicon.ico public/i.. 2023. 1. 11.
M1 Mac Flutter 앱 만들어보기(feat. homebrew) Cross Platform Dev(IOS, Android) - Flutter의 장점 Flutter는 실제 Native Code로 컴파일하며 크롬이 사용하는 렌더링 엔진(스키아-Skia)을 사용하므로 실행 시 다트를 변환하지 않는다. 즉 사용자의 디바이스에서 플러터 앱을 실행하면 성능이나 생산성이 저하되지 않는다 Flutter는 JavaScript가 아닌 디버깅이 용이하고 컴파일 타임이 빠르다 brew 설치는 생략 [brew로 설치를 하지 않으면 bash shell 실행 PATH를 등록해줘야 하기때문에 귀찮다] 윈도우의 PATH 설정과 비슷한 개념이다. 리눅스나 맥도 터미널 전역에서 명령어를 입력해서 실행하려면 bin 폴더를 경로로 잡아줘야 한다 - 기본G식 brew install flutter 난 이전에.. 2023. 1. 9.
네이버 클라우드 써밋 립스탑백 후기 내가 총 300명 안에 든건지는 모르겠는데...진짜 열심히 참여했다..ㅎㅎ결국!!가방 받았다 ㅎㅎ 손잡이 부분에 네이버 클라우드라고 자수로 되어있고, 안에는 자크로 잠글 수 있게 되어있고 작은 수납공간 하나가 존재했다dev랑 관련된 가방으로는 원티드 뉴 스타트 패키지에 있는 가방을 매우 유용하게 쓰고 있는데,비교를 하면... 원티드 가방이 좀 가죽느낌에 짱짱한 재질이다 이 네이버 클라우드 가방은 하늘하늘한(?) 느낌이다두께가 좀 얇다대신에 맥북프로 16인치를 넣으니깐원티드 가방은 버거워하는 느낌이 있었는데 얘는 넣고도 충분하다..!이 네이버클라우드 장점은 손잡이에 네이버 클라우드 자수... 내가 뭔가 초록집 다니는 느낌이쟈나....ㅎ근데 가방이 얇은편이라 나는 그렇게 잘 들고다니진 않는거같다 기분전환용으.. 2023. 1. 9.
Slack 채널에 메세지 보내기 2023년 (Spring, Js) 1. 슬랙에 가서 자신만의 워크스페이스를 만든다 2. 메세지를 보내고 싶은 채널을 만든다(optional) - 기본 채널로 써도 됨 난 로그인을 하면 로그인한 사용자의 간단한 정보를 슬랙으로 보내고 싶기때문에 채널 이름을 auth로 설정함 사용자 추가는 건너뛰기를 하였다 3. 채널 이름(# 채널이름)에서 아래를 가리키는 화살표 토글 버튼을 누른다 4. 통합 탭으로 눌러서 앱 -> 앱 추가를 누른다 5. 수신 웹훅(Incoming WebHooks)를 추가한다(보기->슬랙에 추가) [ 웹으로 열린다 ] 6. 전송 보낼 채널을 선택한다 7. 웹후크 URL을 복사한다 아래에 메세지전송, 링크추가, 사용자 지정 아이콘, 채널 재정의, curl 요청 등 어떻게 보내는지에 대해 자세히 적혀있다 8. 알림 올 이름을 .. 2023. 1. 8.
IntelliJ Honey Tips 5 - 단축키 모음 이번 5번에서는 단축키로 돌아왔다 인텔리제이를 잘 쓰려면 단축키와 여러 기능들 또한 알면 좋다 오늘은 나름 꿀팁들을 몇개 또 들고 왔다 현재 파일에서 변수/메서드 검색: Cmd + F12(윈도우는 컨트롤 + F12) 구조(structure) 보기: Cmd + 7 (위와 비슷하다. 하지만 더 강력하다. 프로젝트 구조도 볼 수 있고 메서드 단위로 점프 뛰며 이동할 수 도 있다) 모든 메서드 및 javadoc 줄이기(collapse): cmd + shift + +/- 해당 위치의 접은 코드 늘리기(expand) : cmd + +/- => 로직이 복잡할때 모든 메서드를 줄여놓고 cmd + 7으로 메서드를 찾아가서 작업하면 눈도 머리도 안피곤함! 최근에 정말 복잡한 3000줄 이상의 .ts파일에서 LifeCycl.. 2023. 1. 5.
2.n년차 주니어 개발자의 2021~2022년 회고 with 노트 2023년 1월 1일이 되고도 벌써 4일이 지나서 5일이 되었다..!!!2022년은 나에게 여러가지 감정을 느끼게 하는 한 해였다2020년 초에 짧막한 계약직을 시작으로(이후 내가 정규직 요청 거절)2021년부터 2021년 12월까지 정말 부단히도 달렸다알고리즘 공부/스터디, 스프링 스터디, 팀 프로젝트, 공채/인턴/상시 모집 지원 등등...이 모든게 두 권의 노트에 담겨 있고, 채워 나가는 중이다(하트)약간 때를 거슬러 올라가 2021년도 취준때부터 얘기하면 좋을 것 같다아래 내용이 뭔지 정확히 기억은 안나지만.. 대학생 후배들 과제 도와줬던 것 같다요즘은 파이썬부터 배우고 C를 배워서 포인터를 모르거나 헷갈려하더라. 안헷갈려하는 친구들도 있는것 같지만..나름 C수업은 A+를 받았기도 하고 3, 4학년.. 2023. 1. 5.
Semicolon auto disable in IntelliJ(Js/Ts) 자바스크립트나 타입스크립트 언어의 특징은 1. 끝에 세미콜론(;)이 있든 없든 에러가 아니다 2. 리스트나 객체의 끝에 ,가 있어도 에러가 아니다 3. 문자열로 '', ""둘다 허락한다 1. const test = '123'; const test = '123' 2. const arrTest = [1, 2, 3, 4, 5,] const arrTest = [1, 2, 3, 4, 5] let t2 = {age: 25, height: 180, grade: 'A',} let t2 = {age: 25, height: 180, grade: 'A'} 3. const hello='hello' const hello="hello" 나는 끝에 세미콜론을 붙이지 않는 것을 선호한다 또한 자바스크립트나 타입스크립트는 [1,2,3.. 2022. 12. 8.
IntelliJ에서 Vue.js프로젝트 만들기 사실 프론트엔드분들은 VScode -> WebStorm 순으로 IDEA를 많이 쓸 것 같지만 나는...쪼렙 초보이기때문에 IntelliJ로 프론트를 개발한다(사실은 회사에서 인텔리제이 라이센스만 줘서.. + 내 돈으로 웹스톰 결제하기 싫..ㅋㅋ) 그래서 인텔리제이로 뷰를 공부해보려고 한다 내 인텔리제이 버전은 2022.4 Ultimate Edition이다 기본적으로 인텔리제이에서 새 프로젝트를 만들면 뷰 프로젝트가 안보인다 아마 내 기억으로 WebStorm은 뷰 프로젝트가 있던 것 같다 그럼 인텔리제이는 어떻게 해야하나..? 일단 플러그인에서 Vue.js 플러그인을 검색해서 설치하자 그리고 새 프로젝트를 만들어보면... 아래 Vue.js를 만드는 프로젝트가 보일것이다 이거로 새 프로젝트를 만들자..! 일.. 2022. 12. 8.
Whitespace Characters 제거하기 + 여러가지 Whitespace Characters는 공백문자 그리고 이 WhiteSpace Character의 종류에는 1. 가로 크기를 차지하는 공백 문자(눈에 보임) 2. 세로 크기를 차지하는 공백 문자(눈에 보임) 3. 1 또는 2지만 눈에 보이지 않는 공백 문자가 있다 특히 3번의 경우는 일부러 사용하는 경우도 있고(화면에 보여줄 때), 일부러 제거하는 경우도 있다(서버에서 받을 때) 아니 3번같은게 어디 있어~? 라고 말씀하시는 분들은 아래에 더블클릭으로 보라돌이 뚜비 나나 뽀를 선택해보자 NORMAL의 경우는 전체가 블록으로 지정되고, SPACE의 경우는 공백마다 블록 지정, ZERO_WIDTH_SPACE의 경우에는 눈에는 NORMAL이랑 비슷하지만 [보라돌이]를 누르면 보라돌이만 선택되고 [뚜비]쪽을 .. 2022. 11. 26.
재택 개발을 위한 셋업 아이템 목록 1. 허리 받침쿠x에서 샀다. 사실 뒤에 걸어서 의자에 걸어두는건데 귀차나서 이렇게 뒀다그렇게 허리를 지탱해준다는 느낌은 없는데, 그냥 엉덩이 위부터 기대고 있기 편한 느낌을 만들어준다 2. 발 받침대 얘도 쿠x인가 네이x에서 샀다일반 목재는 아무래도 나무 껍질이 발에 박힐수도(이런 일은 거의 없을거야..사포질 하기때문에) 있고, 맨발에는 느낌이 별로라서얘로 쓰고있다짧은다리...라서 그런건 절대 아니고!!의자에 앉아서 발 올리고 있음 세상 편하다 3. LED 모니터 스탠드오늘 아침 새벽에 출근도 전에 배송이 왔는데.. 대충 조립해놓고 출근했다 유튜브에서 이거 쓰시는분들을 봐서 나도 함 써보고 싶었다그리고 거실에서 아버지가 주무시는데, 코딩쟁이들은 새벽에도 코딩하거나 컴퓨터를 하지 않는가...혼자 사는 자.. 2022. 11. 16.
네이버클라우드 써밋 온라인 이벤트 참여! 2022. 11. 15.
용어: Cloud Service & On-premise(+ BaaS) ! 제 생각으로 작성했고 무지성 복붙을 하지 않은 글이며 DevOps가 아니고, 주니어 개발자이므로 오개념이 있을 수 있습니다. 틀린 개념이 있다면 부디 친절하게 알려주세요! 일단 웹을 접하다 보면 서버나 클라이언트란 말을 많이 들어봤을 것이다 DB단으로부터 데이터를 가져와서 가공해서 보여주거나 클라이언트(브라우저)에서 입력된 데이터를 DB로 넣어서 CRUD를 하게 하는게 웹 서비스이다 그리고 이런 서비스로 돈을 벌기 위해서는 백엔드나 프론트엔드 서버를 사내에 설치할지, 외부에 설치할지 등을 정하게 된다 그리고 그런 서버 관련된 사양은 네트워크 장비를 두고 운영하는 것이고 랙(RACK-선반)에 네트워크장비(기본적인 컴퓨터[CPU, RAM, SSD/HDD], 암호화기,LB etc)을 두게 됩니다 그리고 이.. 2022. 10. 29.
모바일 환경 테스트하기(기기로 접속) 보통 npm install serve로 해서 내부적으로 서버환경을 만들어서 오픈된 포트를 모바일로 들어가곤 한다 근데 기왕 인텔리제이를 쓰는 김에 인텔리제이가 제공해주는 built-in 옵션으로 이용해보자! @media 쿼리를 쓰는 반응형 테스트 말고, 모바일 기기로 접속했을 때 어떤 기능을 disable 하거나 동작을 다르게 하고싶은 경우 이용하면 된다 일단 프로젝트에 resources 아래에 test할 html 파일을 만들자 나같은 경우 그냥 index.html로... vanilla js code로 돔이 준비된 경우 함수가 실행되도록 했다 웹 환경일때 result Division element에 web이라고 파란색으로 표시하고, 모바일 환경일때는 mobile로 표시하고 빨간색으로 표시하는 거다 인텔리.. 2022. 10. 23.
협업을 위한 DTO Response Custom 뭐 기본적으로 Entity가 아닌 DTO를 Response로 내려보내야 하는 것은 다들 알 것이다 우리 회사의 Entity Spec을 외부에 노출하지 않으며, Setter가 열린 채로 Entity를 내려보내고, 아직 메모리에 올라와 있는 채로 어딘가에서 누군가가 수정을 하고, 업데이트나 머지가 일어난다면(영속성인 객체상태에서) 끔찍한 일이 아닐 수 없다 static으로 내부클래스로 구현할지 말지는 본인 선택이다. 깔끔해진다는 장점이 있으나 OuterClass.InnerClass이렇게 인자나 반환값이 바뀌게 되어 오히려 이게 안예쁘게 보일 수 있다 프로젝트 브라우저 내에서 이쁘게 보일것이냐 => static(inner) 코드 레벨에서(함수 인자나 반환값으로 쓸 때) 참조를 깊게 안할것이냐 => non st.. 2022. 10. 23.
IntelliJ Honey Tips 4 - 필수!(feat. 협업하기 위한 셋업) 개발에 대한 포스팅이 꽤나 늦었다 ㅎㅎ 회사에서 이리 치이고 저리 치이고 야근도 한다고! 자, 우리 개발자들은 다른 사람의 코드를 보기도 하고 내가 수정하기도 하고, 내가 만든 코드를 다른 사람이 보게 된다 면접때 면접관이 중요하게 보는 포인트 중에 하나는 팀프로젝트 경험이 있는가(취준생인 경우), 회사를 다녀본 경우는 다른 팀원들과 소통의 오류를 겪었을 때 어떻게 해결했는가?(이직인 경우) 이다 이 두 질문의 Main Context는 협업이다! 코드레벨에서의 협업은 Git Commit Message Convention, Camel/Kebab/Pascal Case Convention, variable Convention, JavaDoc작성, Hard Wrap(IDEA), ESLint or TSLint, .. 2022. 10. 23.