반응형

React-native로 앱 만들기를 시작하면서 수많은 오류를 맞딱뜨렸지만 이 것만큼 세고 해결도 잘 안되는 오류는 첨봤다.

pod install이 잘 안된건가 싶어서 다시 해봤고, yarn도 다시 깔아보고 구글에 나와있는 에지간한거 다 해봤는데 결국 실패..

 

누구는 프로젝트를 다시 깔았다고 했는데 나는 귀찮아서 그거까진 안했다. 

해봤던 방법들을 나열해보자면

 

1. watchman 재설치

brew install watchman

실패!

 

2. cocoapod 재설치

sudo gem install cocoapods

vi ~/.bash_profile

.bash_profile에 가서 i버튼을 눌러 insert기능을 활성화 한 뒤

export GEM_HOME=$HOME/.gem
export PATH=$GEM_HOME/bin:$PATH

입력 후 esc 누르고 :wq 입력

 

프로젝트 폴더에 들어가서 cd ios로 이동하여 pod install 해보았지만 실패!

 

 

3. yarn 재설치

 

//node_modules && yarn 캐시 제거
rm -rf node_modules && yarn cache clean

//yarn 재설치
yarn install

//ReactNative의 캐시 제거
rm -rf ~/.rncache

실패!

 

 

 

4. Xcode 상의 [CP] 어쩌고 삭제 ((성공함))

Xcode를 실행한 후 내가 작업하고 있는 프로젝트를 연다.

프로젝트 이름을 선택하면

이렇게 가운데에 General 부터 Build Rules까지 소메뉴가 뜨는데

Build Phases에서 [CP] Copy Pods Resources를 삭제하고 ⌘+shift+k 누른 뒤 ⌘+b로 새로 빌드하면 됨 

 

아 너무 오랜 시간을 고생해서 이렇게 고생하는 사람들을 위해 포스팅 남겨본다.

나의 25시간이여..

반응형
  1. jason 2021.04.15 16:35

    횽... 고마워 ㅠㅠㅠ

반응형

이놈의 리액트는 진짜 짜증난다.

뭐 하나씩 하다보면 당연하게도 설치를 필요로 하는 것들이 있는데 이번엔 react-icon 설치하다가 갑자기 오류를 맞이하게 됐음..

 

mac Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88)

 

이번에는 이런 오류였는데 아 느무느무 짜증나는 오류였다.

잘 되다가 갑자기 왜 이런 오류가 뜨는건지 모르겠는데 하튼 나의 맥새끼랑 버전이 뭐 안맞는다는 거겠죱..

 

그래서 또 구글링 하다가 node-sass를 다시 까셈 이라는 말들을 보고선 열심히 삭제하고 다시깔고를 반복했는데도 계속 안되더이다.

 

내가 잘못생각한게 나는 그냥 내 컴터 ,그니까 터미널 켰을 때 기본적으로 설정되어있는 그 위치에서 하면 다 되는거라고 생각했는데 진짜 똥멍청이같은 생각이라는 걸 문득 깨달았다.

 

내가 현재 리액트를 작성하고 있는 그 폴더!에서 실행해야 된다는 것, 이렇게 몸소 체험했넴 후후

npm uninstall node-sass&& npm install node-sass

리액트를 작성중인 폴더에 들어가서 이거 그대로 실행했더니 알아서 잘 설치가 된 모양이다. 

기대를 품고 다시한번 yarn start를 쓴 뒤 엔타를 딱 내리쳤는데!!

 

 

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

 

또 다시 마주한 node sass 버전문제..

이거 왜 자꾸 뜨는지 모르겠는데 누구 아시는 분 

 

아 ㅁㅇㄴ;ㅏㅓㅁㄹㅇㄴ

 

다시 심호흡하고 리액트 작성중인 폴더에 가서

npm uninstall node-sass
npm install node-sass@4.14.1

입력하고 설치 다 끝내고 내니 아주 잘 매우 잘 yarn start가 실행되었다.

 

 

아 학원을 다니는 것도 아니고..

혼자 때려박기 식으로 하다보니 이런데서 시간 너무 많이 잡아먹고ㅠㅠ

이유도 모른채로 삭제했다 깔았다를 반복하는 느낌이다.

반응형
  1. 진짜로 2021.05.18 16:15

    이런걸로 시간 잡아먹는거 너무 짜증나요 ㅠ 검색을 해봐도 뭐가 뭔지 잘 모르겠고 진짜! 흑흑

반응형

블로그 개발을 앞서 어떤 메뉴들을 생성하고 어떤 내용들을 다룰지 한참을 고민했다.

뭐 내용이 알차고 나뿐만 아니라 많은이들에게 도움이 될만한 사이트라면 꼼꼼히 만들겠지만 지금은 넘나 머릿속에서 뒤죽박죽+혼돈의카오스인 내용들을 정리하면서 포트폴리오에 넣어볼만한 작은 사이트를 만드는거라 한시간 넘게 고민했는데 겨우 메뉴 두개 생각해냈음 \^0^/

 

나는 우선 메인페이지 포함 세 개의 메뉴를 다루려고 한다.

 

맨 처음 대문에 들어서면 대략 이런 식의 디자인으로 보여지게 하고 싶었고, 이 내부는 왼쪽 헤더는 고정인 상태로 우측에서만 스크롤이 가능하게 하려고 했다.

 

따라서 컴포넌트 폴더를 따로 만들고 드디어 컴포넌트를 각각 나눠서 사용해보는 것이 내 첫 번째 목표라고 할 수 있다.

리액트로 넘어오면서 맨 처음에 헷갈렸던 것이 바로 컴포넌트, 스테이트 이런 개념들이었는데 하나의 html 파일에서 메인 페이지를 다 짜는 것만 연습했던터라 모든 내용을 쿠키 조각내듯 다 쪼개고 그걸 각각의 파일에서 관리한 다음 하나의 js 파일에서 합친다는 개념이 너무 헷갈렸다.

 

특히 어떤 인강을 듣더라도 이거 하다가 저거 하다가 좀 그런 편이라서 (개념마다 설명을 해야하는 부분이 다르니까!) 

내 머릿속도 계속해서 내용이 팝콘 튀듯 이리저리 튀어다니는 느낌이었다. 

적절한 때에 잘 써야하는데 그 때도 잘 모르겠공 ㅠㅠ

 

물론 컴포넌트 많이 만들면 관리 힘들고 어쩌구 꼭 그렇게 안해도 되는데 어쩌구 이럴 수 있겠다만..

기왕 배운거 배운 개념 잘 활용해서 써먹어보자는게 목표였기 때문에 (그리고 너무 어려워서 하기 싫다는 생각을 넘 많이 했음) 나와의 싸움이다 생각하고 하는 중이다.

 

components라는 폴더 생성 후 그 안에 Diary라는 컴포넌트와 Works라는 컴포넌트를 만들었다.

import React from 'react';

function Works(){
    return(
        <>

        </>
    )
}

export default Works

 

까먹지 않고 export도 잘 했공..

App.js파일에서 

 

import Diary from './compononets/Diary';
import Works from './compononets/Works';

function App() {
  return (
    <div className="App">
      
      ...헤더 및 배경 등등

      <Route path="/diary">
        {Diary}
      </Route>

      <Route path="/works">
        {Works}
      </Route>
    </div>
  );
}

요렇게 연결을 해주었다.

 

그 다음 메뉴 이동을 위해 index.js에 가서 

import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

BrouwserRouter를 데꼬왔음!

 

라우팅을 하기 위해서 데꼬온거고 App.js에서 사용할거라 App.js를 <BrowserRouter>로 감싸주었다.

후에 다시 App.js에서 페이지 이동을 하고 싶은 애들한테 다 <Route>로 감싸주면 된다. 

Route에서 path는 어떤 주소를 입력하면 그 페이지가 보이게 하고 싶느냐 라고 하는건데 나는 가라로 걍 아무렇게나 지어줬다.

 

그런데 페이지 이동할때 누가 주소쳐서 가...?

를 해결하기 위해 메뉴 버튼에다가도 무언가를 해주어야 하는데 이 때 <Link>를 사용하면 된다.

 

import {Link,Route,Switch} from 'react-router-dom';

function App() {
  return (
    <div className="App">
      
        <ul class="dMenu">
          <li><Link to="/">Uptated</Link></li>
          <li><Link to="/diary">Diary</Link></li>
          <li><Link to="/works">Works</Link></li>
        </ul>

상단에 Link를 데꼬와주고, 원하는 곳에 Link to=""로 주소랑 연결해주면 된다.

원래 html 짤 때 ul>li*3>a[href="#"] 이렇게 짰었는데 이제는 a태그를 다 Link로 쓰면 된다니..! 

 

반응형
반응형

나는 여태 리액트가 그냥 제이쿼리 다운받듯이 스크립트로 연결해서 쉽게 쓸 수 있는 거라고 생각했다.

정말 무식했어..

 

일주일 전에 본격적으로 리액트라는걸 맛보기라도 해볼까 싶어서 책도 사고 인터넷에 검색도 해봤는데 1. node.js를 다운받는다. 2.갑자기 npm 어쩌구를 친다. 이 순서로 이어지는게 아니겠는가.

 

node.js 다운받으라고 할때만 해도 진짜 식은죽먹기넴~ㅋ 이정도야 모~~ㅋ 했었는데..

문제는 2번. 

그냥 밑도 끝도 없이 npm 어쩌구라는데 도대체 저걸 어디다 입력하라는건지 뭔지 모르겠고 점차 인내심은 바닥 나기 시작했다.

 

'아.. 

이렇게 리액트는 시작도 못해보고 포트폴리오를 마쳐야하는가' 하면서 자기 전에 조금 많이 고민을 하다가 결국 포기하지 않고 열심히 더 구글링을 해보았고 드디어 저 npm은 터미널이란 곳에 가서 입력하면 된다는 것을 알았다.

 

 

0. Homebrew 설치

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

1. nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

node.js를 각 운영체제에 맞는 버전으로 설치한다.

여기서 버전은 사람마다 말이 다 다른데 나는 안정적인 버전으로 설치했는데.....누구는 무조건 최신버전 설치하라고 하고(오류 많이 난다고).. 뭐 하튼 말이 많다. 그냥 하고싶은거 하면 될 것 같음.

 

 

2. 터미널을 킨다!!!!!!

터미널은 런치패드나 위에 돋보기 눌러서 ter까지만 검색해도 앱이 바로 나온다.

 

3. 터미널에 brew install node 입력

 

4. 막 # 왔다갔다 하면서 설치 되면 버전 확인하기 위해  입력

node -v
npm -v

각각 node.js와 npm 설치 버전을 확인할 수 있다.

 

 

5. 리액트 프로젝트를 시작할 폴더로 이동한다.

말 그대로 내가 홈페이지 만들 폴더로 이동하면 된다. 

나는 쉽게 바탕화면에 있는 나만의 폴더 안에 있는 리액트 폴더에 넣고 싶었는데 쉽게 생각하면 바탕화면>내폴더>리액트니까 

cd desktop/내폴더/react

라고 입력하면 이동이 됨.

cd는 머 디렉토리인가 이동할 수 있다는 뜻이라고 했다.

 

이동 후에

 

6. cra라는 create-react-app을 활용하여 리액트 프로젝트를 생성한다.

npx create-react-app 프로젝트명

프로젝트명은 원하는거 아무거나 입력하면 된다.

리액트가 세팅된 라이브러리임..

이건 원하는 웹사이트 만들때마다 이런식으로 만들면 된다. 

 

후에 vs code나 브라켓 등등 원하는 에디터를 켠 뒤에 열기를 눌러 내 리액트 폴더를 열고 터미널에서 또한 내 리액트 폴더로 이동한 뒤에

npm start

넣어주면 이제 서버 시작이당.

 

초반엔 어디서부터 어떻게 해야하는지 몰랐는데 (설치부터 리액트 프로젝트를 만들 때까지 어디가 설치부분이고 어디가 프로젝트 만드는 부분인지를 몰랐음) 이제는 척하면 척 npx create-react-app website1 등으로 쉽게 프로젝트를 만들어서 작성하고 있다.

반응형
반응형

오늘 처음으로 리액트를 설치해서 실행해보았다.

 

우선 나는 여러모로 복잡한 상황에 놓여있었는데

  1. 컴알못
  2. 코딩 잘 못함
  3. 맥 사용

 

총체적 난국..

 

그래서 여기저기 사이트 돌아다니며 힌트를 얻어서 설치까지 완료했다.

윈도우랑 다르게 맥은 터미널로 나에겐 생소하고 어려웠던 명령어를 사용해 설치를 해야했기 때문에 거의 복붙으로 해결봤던 것 같다.

 

바벨이고 얀이고 뭐가 뭔지 하나도 몰라서 이거도 해보고 저거도 해보고 다 했는데 설치가 다 된 후에 yarn start를 치니 연결이 안 되고 오류가 계속해서 뜨는 것이었다. 

대략 내용은 바벨 버전이 높아서 안된다는 것 같은 느낌?

here might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.1.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:

Users\username\node_modules\babel-loader (version: 8.2.2)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if c:\Users\useranme\node_modules\babel-loader is outside your project directory.
For example, you might have accidentally installed something in your home folder.

7. Try running npm ls babel-eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

 

뭔가 .env 파일을 만들어서 SKIP_PREFLIGHT_CHECK=true 이 문구를 넣으면 이런 오류를 무시하고 실행할 수 있다는 것 같은데, 문제는 env 파일을 어떻게 만드는건지 모른다는 것이었다..^0^.....

 

그래서 내가 찾은 방법은

1. babel-loader 라는 것을 저기서 앞서 알려준 8.1.0 버전으로 준비한다.

2. 다 지우고 새로 깐다 (이것 또한 모험)

3. 포기한다

 

역시 가장 무난한 방법이 1이 아닐까 싶어 알아보니 수동으로 파일을 바꾸면 디버깅하기 어려워진다고 하지 말라고 하더라. 

 

그래서 또 구글구글 하다가 다시 꼼꼼히 저 글을 읽어보니 package.json 파일에서 어쩌구 하는거 보니 그걸 바꾸면 되지 않을까 싶어서 맥 전체 검색으로 package.jsond을 검색하니.... 오마갓 너무 같은 이름의 파일이 많음을 발견..

 

하나하나 폴더를 눌러보니 하단에 

이런식으로 주소가 뜨길래  8.2.2로 적혀있다는 파일을 직접 찾아 들어가기 시작했다.

 

그래서 package.json 파일을 킨 다음 맨 밑에 있는 버전을 수기로 수정하기 시작함..

152번에 원래는 8.2.2로 적혀있던 것을 터미널에서 알려준 버전으로 바꾸고 저장한뒤 다시 터미널에서 yarn start를 쳐서 실행을 해보려 했으나......!

 

이번엔 웹팩? webpack 버전이 다르다며 5.11.0을 4.44.2로 바꿔야 한다고 써있길래 또 해당 과정을 반복해서 바꿈.

 

그리고 터미널에서 yarn start를 실행해보니 아주 잘 연결이 되었다! : ) 히히 

나중에 어마무시한 일이 생길지라도 당장은 해결이 되었으니 기분이 좋다.

 

반응형
반응형

내가 살다살다 포트폴리오를 만들어야 하는 날이 올줄은 꿈에도 몰랐다. 
대략 6개월 간의 프론트엔드 수업과정이 거의 끝나가고, 학원에서도 당연하게 포트폴리오 제출을 서두르고 있다.

 

사실 내가 들은 과정은 웹 퍼블리셔? 웹디자이너인데 약간의 코딩을 가미한 정도라 현타가 가끔 오기도 했고 지금도 포트폴리오를 어거지로 만들고 있지만서도 리액트나 추가적으로 공부를 더 해야겠다는 생각이 아주 많이 든다. 

 

와중에 html이나 css 같은 기초 웹 개발에 관심있는 분들을 위해 내가 자주 사용하고 또 자주 도움을 받았던 사이트를 정리하려고 한다. 

 

1. Fontawesome fontawesome.com/icons?d=gallery

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

아이콘을 폰트로 이용할 수 있는 곳. 아이콘을 이미지로 이용해도 되지만 메뉴 글자옆에 작게 넣고 싶을 때 이용하면 좋다. 사용방법은 가입 후에 메일로 전달되는 링크를 html 파일에 연결한 다음, icons메뉴에서 arrow(화살표) 혹은 sns 등 원하는 키워드를 입력한 뒤 i태그를 복사해 오면 된다. 생각보다 나는 굉장히 많이 사용하고 있으며 방문  빈도수도 꽤 높은 편이다. 

2. iconfinder www.iconfinder.com/

 

5,125,000+ free and premium vector icons in SVG, PNG, CSH and AI format.

Iconfinder is the leading search engine and market place for vector icons in SVG, PNG, CSH and AI format.

www.iconfinder.com

아이콘을 이미지로 사용해야할 때 무료도 아이콘을 다운받을 수 있는 곳으로 진짜 내가 자주 이용하는 곳이다. 돈을 주고 유료버전 이용도 할수 있으나 가난한 취준생이라 무료에도 만족하며 사용하고 있다. 아이콘 검색 후 내가 원하는 색이나 조금 다른 모양으로 바꾸고 싶을 때는 open in Editor 열어서 원하는 방향으로 수정 후 다운받으면 된다. 

 

3. Css Gradient cssgradient.io/

 

CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

cssgradient.io

배경색으로 그라데이션 넣고 싶을 때 너무 편하게 만들어줘서 좋은 곳이다. 원하는 색상과 그라데이션 방향 및 모양을 고른뒤 하단에 자동으로 만들어지는 background 어쩌구 그거를 복사해서 CSs에 넣으면 끝이다. 이렇게 간편할 수가 있다니.. 

 

4. pixabay pixabay.com/ko/

사실 다른 사이트 이용했었는데 그래도 pixabay에서 원하는 이미지를 더 많이 찾아볼 수있어 가끔 이용한다. 저작권 걱정없이 사용할 수 있어 좋다. 

 

5.unsplash unsplash.com/s/photos/splash

 

20+ Splash Pictures [HQ] | Download Free Images on Unsplash

Download the perfect splash pictures. Find over 100+ of the best free splash images. Free for commercial use ✓ No attribution required ✓ Copyright-free ✓

unsplash.com

pixabay와 비슷한 곳. 

 

5. color zilla chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ko

 

ColorZilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

chrome.google.com

이건 사이트는 아니고 확장프로그램인데 다른 사이트에서 괜찮은 색상을 발견했거나, 그것과 똑같은 색상이 필요할 때 크롬에 추가해놓고 필요시 클릭해서 색상을 따오기 매우 편리한 프로그램이다.  

html을 처음 시작했거나 구조파악 연습을 위해 Clone 사이트를 많이 만드는 사람이라면 매우 유용하게 사용할 수 있을 것이다. 

 

 

정리하면 되게 많을 줄 알았는데 막상 적으려니 기억이 안난다... 

그럼 오늘도 고통받고 있을 포트폴리오 제작자들 화이팅!

반응형
반응형

html과 css를 배운지도 벌써 두 달이 지났다.

그동안 여러가지 편집기를 써봤는데, 사용하기 편했던 편집기 위주로 남겨보려고 한다.

편집기의 장점

1. 태그 자동닫힘

이게 생각보다 매우 편하다.

메모장에서 적다보면 태그 안닫아서 레이아웃 깨지는 경우가 있다거나 속성이 안먹는 경우가 종종 발생한다.

특히 코드가 길어지고 복잡해질수록 닫는걸 가끔 까먹음..

근데 알아서 자동으로 닫아주니 훨씬 편하다.

2. 태그 색상구분

흰 배경에 검은 글씨만 나열되는 메모장과는 달리, 편집기에서는 태그나 속성마다 색상지정이 가능하다.

사용자의 편의에 따라 원하는 색상으로도 지정이 가능.

특히 css에서는 워낙 많은 선택자가 등장하기 때문에 색상이 구분될수록 훨씬 업무가 수월해진다.

3. 줄 복사

비슷한 선택자가 여러개 나오는 경우, ctrl+c/v하면 되긴 하지만 사실 선택자 이름이 길면 그거 드래그 하는 것도 일이다. 나처럼 귀차니즘이 심한 사람에게는 단축키 하나로 윗 줄을 그대로 복사붙여넣기 할 수 있는 기능이 있다. 실제로 나는 이 기능을 매우 편리하게 사용하고 있음..

4. emmet 기능

메모장에도 이게 되나? 잘은 모르겠지만 우선 emmet을 설치하면 태그를 일일이 치지 않아도 태그안에 태그를 여러번 넣을 수 있다. editplus에서는 안써봤지만 되는 걸 확인했고, notepad++에서는 단축키를 여러번 눌러야 먹히는 단점이 있긴했지만(내가 잘못 설치한 거일수도 있음..) 너모너모 편함.

지금 사용하는 visual studio code에서는 단축키(탭키) 한번 눌러도 아주 잘 먹힘.

이렇게 사용한다.

5. 창분리로 메인과 스타일시트를 분리해서 바로바로 스타일 적용 가능

뭐 메모장으로도 못할 건 없는데 메모장은 창이 여러개 뜨니까 그게 불편해서 싫은거고 편집기를 이용하면 하나의 편집기 안에 창만 분리해서 볼 수 있어 훨씬 편함.


이제 편집기로 돌아가보자.

메모장(핵불편)

메모장은 html을 처음 접할 때 많이 쓰는 것 같다. 윈도우에서 기본적으로 제공하고 있기 때문이고, 베이직하기 때문이다.

정말 긴급한 상황이 아니면 메모장은 되도록 안쓰는게 정신건강에 좋다.

Notepad++

남자친구의 추천으로 알게된 편집기였다. 노트패드를 알게 되었을 때 학원에서는 editplus를 추천해줬었는데 둘 다 써본 결과, 나에게는 notepad++가 훨씬 편했다.

우선 notepad++는 무료로 이용이 가능하고, emmet기능도 editplus와 동일하게 사용할 수 있기 때문에 가격적인 면에서는 훨씬 이득이라는 생각이 들었다. 근데 emmet 설치 방법이 좀 까다롭다고 해야하나? 어려워서 버벅대다가 겨우 깔았는데, 생각보다 단축키가 노트패드 안에서 잘 먹지를 않아서 여러번 눌러야 쓸 수 있었다.

단점은 맥버전이 없음!!

**용이하다고 생각했던 부분**

- 줄 복사는 복사하고자 하는 행의 끝에 커서를 갖다놓고 ctrl+d로 이용할 수 있다.

- 원하는 줄 앞에 커서를 두고 alt키를 누른 다음 위나 아래로 드래그하면 행을 다중으로 선택 가능

- ctrl + y 되살리기(ctrl + z의 반대)

- 원하는 줄 대충 드래그 후 탭 누르면 한번에 들여쓰기 가능 > 정렬이 편해서 깔끔하게 작성 가능함

다운로드 https://notepad-plus-plus.org/downloads/

 

Editplus

우선 에디트플러스는 유료로 알고 있다.

예전에는 무료로 제공했다고 하는데, 현재는 한 달만 무료 사용 가능하고, 30일이 지나면 유료로 전환되는 듯하다. 물론 어둠의 경로를 이용하면 다르겠지만..

이 편집기는 학원에서 선생님이랑 함께 쓰느라고 설정도 다 같이 했는데, 나는 노트패드가 더 편해서 잘 안썼음. 근데 쌤은 여전히 이거로 emmet 플러그인도 잘 사용하신다. (emmet 플러그인 별도 설치해야 함)

노트패드보다 기능이 많은 것인지 뭔지 모르겠지만 인터페이스가 굉장히 불편했던 걸로 기억.

뭔가 되게 복작복작한 느낌이었다. 단순무식한 나는 알록달록하고 알아보기 힘든 화면에서 적응을 못했음 ㅠ

**용이하다고 생각했던 부분**

- html이나 css 기본문서 불러올 때 원하는 형식대로 짜놓고 불러올 수 있음.(노트패드에도 있지 않을까?)

- 줄 복사 단축키는 ctrl + j

- html편집할 때 필요한 색상표나 글씨체, 글씨크기 등 도구모음 상자가 편해보였다. 노트패드에선 찾다찾다 못찾았어염..

<출처: https://www.editplus.com/screen.html>

다운로드 https://www.editplus.com/download.html

Visual Studio Code

윈도우에서 맥으로 옮겨오면서 노트패드말고 다른 걸 써볼까 해서 결국 나의 종착지가 된 visual studio code이다. 편집기 내부에서 바로바로 작성한 코드를 프리뷰할 수 있다는 게 매우 편리하게 다가왔다.

그리고 윈도우나 맥 가리지 않고 다양한 os에서 사용이 가능해서 매력적이다.

지정하기 나름이지만 기본 emmet은 tab키로 쓸 수 있는 것 같음, 그리고 노트패드와 달리 바로바로 입력이 된다. 별도의 플러그인 설치 없이 바로 emmet 기능을 쓸 수 있음.

**용이하다고 생각했던 부분**

- 창 분할 후 굳이 크롬으로 html 파일을 열지 않아도 프리뷰가 가능(다른 편집기도 가능할 수 있는데 안해봤어여..)

- emmet 플러그인 설치할 필요 없고 간단하게 이용 가능

- 오타나거나 태그가 이상하면 빨간색으로 표시해준다.

더 있었는데 기억이 안나서 우선은 여기까지만..

다운로드 https://code.visualstudio.com/

 

나보다 더 경력자들도 있을테고, 오랜시간 코딩하셨던 분들에 비하면 나는 완전 아가수준이지만 혹시나 고민하시는 분들이 계시다면 이 포스팅을 보고 도움이 되었으면 좋겠다.

반응형
반응형


01
4주 차에 관둔다고 하고 그만 두고 나옴. 이유는 많지만 자세히 적긴 좀 그렇고.. 쓰다 보면 썰 중간중간에 이유가 보일 것 같다.

02
우선 뚜레쥬르나 파리바게트 교육이 잡혔는데 실업급여 수급 중이다? -> 상관 없음. 교육비도 지원 받을 수 있고, 실업급여도 수급 가능하다.
한 달에 한 번 나오는 훈련장려금 -> 수급 불가능. 실업급여도 국가에서 주는 것이고 훈련장려금도 국가에서 주는 것이기 때문에 중복 수급이 불가능하다. 둘 중에 하나 선택해서 받아야 함.

03
면접 때는 아무나 들어와서 배우면 다 할 수 있다고 했다.
근데 막상 가서 배우니까 손이 빠른 사람, 느린 사람 다양한데 그것보다도 누군가는 관심을 더 받고 누군가는 덜 받는다는게 문제였다. 이상하게 교육하는 사람 맘에 안들면 와서 제대로 봐주지도 않고, 평가도 대충 하는 느낌을 받았다. 처음부터 누구나/아무나 가능하다는 말을 하지 말았어야 하는 것 같은데.. 교육하면서 들어가는 비용 아깝다는 둥 비용 운운하면서 정작 배우는 사람들이 실력을 늘리거나 성장하는데에 도움을 그닥 주지는 않았다.


04
분위기 매우 고등학교 같음.
20살 넘긴 성인들이 모인 곳인데, 교육생들끼리는 서로 존중하고 배려해서 분위기가 매우 좋았지만 그 외의 사람들은 그게 아니었던 것 같음. 80년대 회사에서 느낄 법한 꼰대꼰대함과 답답하다고 야/너 등의 호칭 파괴+꿀밤이나 발로 차는 시늉 등등 나 고등학교 다닐 때나 선생님들이 친근함??을 무기로 애들 막 대할 때 했던 행동들이 매일 같이 이어짐.. (라떼.....)
별로 기분이 좋진 않았음. 그래도 다들 채용되어야 하니까 어거지로 참고 버티는 느낌?

05
내정자가 슬슬 정해진다.
2주 3주쯤 지나면 이미 내정자는 정해지고, 도대체 부족한 사람들은 어떤 스킬이 부족한지 알기 힘들 정도로 그냥 인성이나 막말 등으로 사람 기를 엄청 죽인다. 나는 내가 관뒀지만 아직도 아이싱을 할 때 어떤 점이 부족한지, 빵을 구울 때 뭐가 부족한지 알 수가 없다. 내가 마지막으로 관두던 날, 내정자가 이미 다 정해졌단 이야기를 들었고 무슨 "선처"해주듯이 너한테도 한번 더 기회를 줄게 라는 반응에서 바로 그냥 그만 해야겠다 생각을 했다.

나는 그 곳에 선처 받으러 간게 아니고, 앞으로 이 일로 먹고 살려고 기술 배우러 들어간 "교육생"인데 자꾸 뭐 기회를 한번 더 주고 말고 그런게 뭐가 있나. 면접봐서 정당하게 들어간 거고, 교육생이란 이름을 달고 교육을 받는 건데 뭐가 부족한지도 모른 채로 매일같이 비난에 욕만 먹었다.

06
미용이나 요리 쪽은 어느정도 군기나 꼰대들이 있는 거 같다는 생각을 어렴풋이 하고 들어갔지만 막상 겪어보니 3n살 먹고 견디기에는 너무 잣같은 상황이 많은 것 같다.
다른 욕지거리 듣거나 화받이를 하는건 할 수 있겠는데, 채용이 확실치 않았고 그 불안 속에서 견뎌내기에는 희망같은게 전혀 없었기 때문에.. 여기 교육센터만 그랬는지 모르겠지만 내가 겪어본 바로는 어리거나/멘탈 개강하거나 둘 중 하나라도 안되면 견디기 너무 힘든 상황같았다.

07
교육생이지만 채용이 확정된 교육생이 아니기 때문에 매일 스트레스에 시달림..
가르치는 사람 눈치보고 하루종일 눈치보면서 시작하고 눈치보다 하루가 끝이 난다. 그나마 동기들이 너무 좋았다는 거, 그거 하나로 참고 버틴 것 같다.

08
이건 내가 그냥 스스로 느낀 점이다.
어떤 사람은 교육기간이 제일 행복했을 수도 있고, 교육기관 혹은 교육자가 너무 친절해서 좋았을 수도 있다. 내가 개인적으로 느낀 감정이기에 모든 사람들이 이런 경험을 할 것이라고 생각하지 않았으면 좋겠다.

반응형
  1. niniz 2020.12.25 08:34

    저 교육예정인데 혹시 어느 지역센터에서 훈련 받으셨나요..??

+ Recent posts