개발자라는 직업이 관심을 많이 받게 되고 개발자로 전직 하려는 분들이 많아지면서 국비 교육을 들을지 유료 학원을 갈지 고민하시는 분들이 많이 보여서 포스팅을 하려고 합니다 개발자로 진로를 결정하고 국비 학원과 부트 캠프를 모두 다녀보았고 각 교육에 대해 느낀점을 이야기 해보려 합니다. 굉장히 주관적일 수 있기 때문에 참고 정도만 하세요 개발자로 전직 전 생각해볼 점개발자는 쉬운 직업은 아닙니다. 하지만 기술 직군이기 때문에 잘 배워서 취업을 한다면 최저 시급을 신경 쓰지 않는 연봉을 받을 수 있습니다. 조리과를 나와서 바리스타로 일을 했었는데 초봉은 당연히 최저 시급이었고 경력이 쌓여 매니저가 됐을 때에는 2천 초반 정도의 낮은 연봉을 받았습니다. 그리고 이 그상으로 올라가려면 굉장히 큰 벽이 있었습니다..

목록Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 - 현재 글Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Fetching Data for Pages지금까지 next.js의 routing API를 활용하는 방법에 대해 배웠습니다. 이것만으로도 꽤 괜찮은 앱을 만들 수 있지만, 실제로 서비스 되는 앱들은 보통 데이터를 가지고 와서 앱에 뿌려주어야 합니다. Next.js에는 데이터를 가지고 오는 표준 API가 제공됩니다. 우리는 비동기 함수인 'ge..

목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 - 현재 글Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 Clean URLs with Dynamic Routing이전 장에서 query string을 사용하여 동적 페이지를 만드는 방법에 대해서 배웠습니다. 이를 통해 링크를 눌러 이동하면 아래와 같이 나옵니다.http : // localhost : 3000 / post? title = Hello % 20Next.js 이번 장에서는 http : ..

목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 - 현재 글Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Create Dynamic Pages여러 페이지로 기본적인 next.js 앱을 만드는 방법을 알게 되었습니다. 그러나 실제 앱에는 동적 컨텐츠를 표시하기 위해 페이지를 동적으로 만들어야 합니다. next.js에는 여러 가지 방식이 있습니다 이번장에서는 query strings를 이용해 간단한 블로그 앱을 만들어 봅시다. Setup다음 예제를..

목차Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 - 현재 글Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Using Shared Components앞에서 Next.js에서 페이지를 만드는 방법에 대해 알게 되었습니다. 우리는 react 컴포넌트를 pages 폴더에 넣어서 페이지를 만들 수 있었습니다. pages폴더의 파일 이름은 url로 접근 할 수 있습니다. pages는 자바스크립트 모듈임으로 다른 자바스크립트 컴포넌트를 넣을 수도 있습니..

목차Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 - 현재 글Next js 튜토리얼 3편 : 공통 컴포넌트 사용 Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Navigate Between Pages간단한 Next.js를 실행 시켜 보았습니다. 이전 편에서 index.js를 추가했던 것처럼 원하는 만큼 여러가지의 페이지를 추가할 수 있습니다.이번에는 about 페이지를 만들어 봅시다. pages/about.js를 생성하고 아래의 내용을 추가해 주세요 export default function ..

처음으로 next js를 사용하여 자사 홈페이지를 리뉴얼 하는 프로젝트를 진행했습니다.어떻게 학습하며 프로젝트를 진행했는지 정리하려 합니다. 가장 우선적으로 한 일은 next js docs에서 제공하는 튜토리얼을 학습했습니다.그에 따라 next js docs를 기반으로 작성하겠습니다목차Next js 튜토리얼 1편: 시작하기 - 현재 글Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 NEXT.js의 기능 - 기본적으로 서버사이드 렌더링 지..

자사 홈페이지를 nextjs로 제작을 했다. 프로토 타입이 나온 후에 테스트를 하던 중 ie에서 작동이 안되는 이슈가 있었다. (개발자의 적 ie..) ie의 개발자 도구를 열어서 확인을 해본 결과 ie에서 지원하지 않는 자바스크립트 함수 때문인걸로 추론됐다. 그에 대한 해결책을 찾던 중 polyfill이라는 것을 알게 되었다. Polyfill 이란위키피디아에서는 아래와 같이 설명하고 있다. 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다. 기능을 지원하지 않는 웹 브라우저에서 원하는 기능을 구현할 수 있으나, 폴리필 플러그인 로드 때문에 시간과 트래픽이 늘어나고, 브라우저별 기능을 추가하는 것 때문에 코드가 매우 길어지고, 성능이 많이 저하된다는 단점이 있다. - 위키..

css에서 가장 중요한것은 블록요소와 인라인 요소의 차이점이라고 아는 것이라고 생각한다.이 개념이 흔들린다면 css를 사용함에 있어 혼란이 올 수 있으니 꼭 정립하고 가자. 1. 블록 요소- div, h1, p 등- 기본적으로 사용가능한 최대 가로 너비를 사용한다- 크기를 지정 할 수 있다- width: 100%; height: 0;으로 시작- 수직으로 쌓임- margin, padding 위 아래 좌 우 사용 가능- 주로 레이아웃을 잡을 때 사용2. 인라인 요소- span, img, a 등- 자신의 안에 포함된 내용 만큼의 너비를 사용한다- 크기를 지정 할 수 없다- width: 0; height: 0;으로 시작- 수평으로 쌓임- html 상에서 span태그 뒤에 줄바꿈이 있으면 띄어 쓰기가 들어간다- ..