전체 글

[css]media query란 무엇인가? 방법론이란 ?

css를 구성하는 방법은 여러가지가 있습니다. class선택자 id 선택자, 또는 라이브러리를 사용한 styled, scss등등 정말 많습니다. 우리는 그중에서 제일 중요한 미디어쿼리에 대해 알아보고자 합니다. 필자는 여태까지 공부하면서 많은 개발지식을 가지고 있지만 그렇다고 해서 이런 중요한 지식들은 블로그에서 잊지 않도록 중요하다면 포스팅하는 습관을 가지고 있습니다ㅎㅎ CSS에는 방법론이라는 것이 있습니다. 공통 지향점 1.코드의 재사용성 높이기 2.쉽게 유지보수 할 수 있도록 하기 3.확장 가능하게 하기 4.클래스명으로 무슨 의미인지 예측 가능하도록 설계 우리가 작업을 하거나 협업을하다보면 여러가지 상황에 처하게 됩니다. 내가짠 코드를 다른 사람들에게 설명해야 하며 또 이런 방식으로 로직을 짠 이유..

2022년 01-10일 Next.js TIL..

이번교육에서 블로거를 만들기 위한 Next.js에 관해 교육을 받았다. React를 자주 다뤄본 나로써 Next.js를 입문하는데는 그렇게 어려움은 없었다. 기존 css에서 복잡한 스타일링은 쉽게 Styled-components라는 라이브러리를 사용해서 Next.js를 구동해보았고 사실 이전에 Next.js를 직접 다뤄보았는데 개발하는 방식이 복잡했는데 이렇게 간단하고 쉬운줄 몰랐다... 초반 교육에서는 API통신까지는 배우지 않았고 기본적인 웹 구동이나 CSS스타일링 하는 법에 대해 배운뒤 블로그 레이아웃을 설계하는 시간을 가졌다. 수업시간과 남아서 개발하는 시간까지 많은 시간동안 교육을 받았지만 딱히 어려운점은 없었다. 오늘 배운것은 아주 간단한 스타일이고 다음 교육에서는 어떤 기능을 구현할지 기대가..

[javascript] 드림코딩 자바스크립트 4. Arrow Function은 무엇인가? 함수의 선언과 표현

이번 시간에는 Javascript에 꽃이라고 불릴 정도로 핵식점인 기능을 담당하고 있는 Functions에 대해 알아보자. 여러분들이 매일 사용하고 있는 각각의 프로그램마다 제공하능 고유한 기능들이 있다. 이렇게 프로그램 안에서도 각각 저마다의 기능을 수행하는 함수들이 있는데 이렇게 절차적인 언어(procedural language)같은 경우는 함수가 프로그램에서 굉장히 중요한 기능을 담당한다. 그런데 Javascript에는 class가 추가되어 object oriented programing(OOP)이 아닌가? 이 추가된 class도 Java 언어처럼 Pure한 Object-oreiented가 아니고 Prototype을 베이스로한 각자의 Object-oreiented이다. 그래서 이 function이 ..

[javascript] 드림코딩 자바스크립트 3.코딩의 기본 operator,if,for loop 코드리뷰 팁

이번 3번째 시간은 Javascript의 연산 operator에 대해 알아볼 것이다. 이 연산은 한번 배워두면 가성비가 너무 좋다. 이유는 다른 프로그래밍언어에서도 공통적으로 사용이 가능하다. 이 연산이 쉽다고 조금 소홀이 공부하고 넘어가는 경우가 많은데, 실제로 현업에서 많은 주니어 분들이 코드 지적을 받는곳이 바로 연산이다. 그래서 여러분이 실수할 수 있는 코드 부분 한가지를 콕 찝어서 정리하고 넘어갈 테니 열심히 따라가 보자. 연산으로 넘어가기전 지난시간에 Variable과 const의 차이점 Mutable Data Type과 Immutable DataType 에 대해 설명해주었는데 조금 헷갈리게 설명해서 한번더 깔끔하게 정리해보자. // 2.Variable == 변수 (변경될 수 있는 값), rw..

[javascript] 드림코딩 자바스크립트 2.데이터 타입, data types, let vs var, hoisting

두번째 Javscript 공부시간인 데이터 타입, let vs var, hoisting을 배울 시간입니다. // 2.Variable == 변수 (변경될 수 있는 값); // JS == let (added in ES6) 이번에는 우리가 제일 중요한 Variable을 정리해보자 Variable을 변수라고도 하는데 변수라는 것은 변경될 수 있는 값을 뜻한다. Javscript에서는 변수를 만들때 let이라는 키워드를 만드는데 let은 ES6에 추가된 아이다. ES6는 전세계적으로 Javascript를 이용하는 문법을 뜻한다. // 두가지가 log되는 방식 == 어플리케이션을 실행하면 어플리케이션마다 사용할 수 있는 메모리 할당 // 이 메모리는 텅텅 빈 상자 let name = 'jungho'; console..

[javascript] 드림코딩 자바스크립트 1.콘솔에 출력 script async와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문

최근에 프론트엔드 개발직군에 짦은 기간을 일하고 다시 프론트엔드 개발자로써 성장하기위한 준비를 하고 있는 과정에서 Javscript 입문편을 정리해보고자 한다. 수많은 오픈소스와 유튜브 강의가 있지만 그 중에서 가장 편의성있고 심도있게 배울 수 있는 DreamCoding을 정리해보고자 한다. 기본 Vscode에서 세팅한 html 이다. 가장 중요한 부분들만 설명해보자면 html에 들어가는 head 요소이다. head요소에는 우리가 불러올 js파일을 이곳에서 불러올수 있는데 js파일은 script태그로 불러올 수 있다. --> 그럼 js를 불러와주는 script의 방식은 어떤 방식인가 기본적은 방식은 이렇게 script안에 src(경로)에 불러와줄 js파일을 명시하는 방법이다. 이런 방법을 사용하면 pag..

부트캠프 정리 - 수강생 후기

부트캠프 정리내용 입니다. 1. 코드 스테이츠 (Boot Camp) 생존기 리뷰 이번 리뷰는 USD 졸업 이후 부트캠프를 지원한 수강생의 리뷰 정리 내용입니다. 다양한 코딩 아카데미들이 존재했다. 스파 00, 바00, 그리고 국비 지원 프로그램들 까지... 하지만 내 눈을 사로 잡았던 곳은 코드스테이츠!! 이유는 하나 We Win 프로그램, 간단히 말해 취업 후에 교육비를 할부로 지불하는 방식으로, 취업에 대한 자신감과 교육생들이 생각하는 마음이 없다면, 쉽게 만들 수 없는 제도 2. 코드 스테이츠 (Boot Camp) 2주차 까지 리뷰 a. 장점 커리큘럼 자체가 지루하지 않다. 자바스크립트를 배우다 중간에 배운 개념을 적용할 수 있는 HTML과 CSS를 배우는데, .. 내가 배운 것을 곧바로 눈에 보일..

[React] create-react-app & Typescript 초기 세팅법 완벽 정리

🥩 Typescript & create-react-app 최근 타입스크립트 강의를 들으면서 create-react-app을 설정하는 법이 궁금했다. 왜냐면 React 제일 많이 사용해보았고 포트폴리오도 React로 주 언어로 개발했기 때문이다. 그리고 앞으로 사용하게될 것이기도 하고, 언제까지나 JS계열로 프로젝트를 진행할 수 는 없다! 그리고 업무시 중요한 eslint 와 preiiter 설정도 해보자! 1. create-react-app을 이용해 typescript 버전으로 설치 2. eslint & preitter typescript 버전으로 설치 이 두가지 버전이 세팅에 가장 중요한 부분이다. 하지만 먼저 알아야 하는 사항들 세가지가 있다 1. Typescript를 사용하는 create-react..

[React] 컴포넌트 라이프 사이클과 주요 메서드 호출 순서

컴포넌트 라이프사이클 이란 컴포넌트 라이프사이클은 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트로 생각할 수 있습니다. 모든 리액트 컴포넌트에는 LifeCycle을 갖습니다. LifeCycle은 세가지 카테고리로 나뉘며, 개괄적인 그림은 다음과 같습니다. 또한 컴포넌트는 LifeCycle마다 메서드를 가지고 있습니다. 이 메서드를 이용해 특정 시점에 원하는 동작을 하도록 만들 수 있습니다. 메서드에 대해서 더 자세히 알아보겠습니다. 컴포넌트 라이프사이클 메서드 알아보기 에러 처리 메서드를 제외하고 LifeCycle의 메서드는 총 8가지 입니다. 자주 사용되는 LfieCycle 메서드를 설명해보겠습니다. 1. Mounting 컴포넌트의 인스턴스가 생성되 DOM상에 삽입되는 단계입니다. Mounting은 ..

[React] useMemo와 useCallback

useMemo와 useCallback을 배우기 전 알야아 한 것 1. 함수형 컴포넌트는 그냥 함수다. 함수형 컴포넌트는 단지 jsx를 변환하는 함수 2. 컴포넌트가 렌더링 된다는 것은 누군가 그 함수(컴포넌트)를 호출해 실행되는 것을 뜻한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또는 다른 함수 등) 도 매번 다시 선언되어 사용된다. 3. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받은 props가 변경될 때마다 리렌더링된다. (심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받은 props가 변경되지 않더라도 리렌더링 되는게 기본) useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a,b),..

[GIT] Github push token 오류 바로잡기

가끔가다 이렇게 token 관련오류가 발생합니다. ㅎㅎ 이런 오류는 저에게 엄청난 스트레스를 주는 반면에 제대로 설정해도 안되는 경우가 많습니다 ㅎㅎ 깃허브에 token이 만료되었거나 일시적으로 오류가 발생한 것 같습니다. 2021 중반부 부터는 인증에 token이 사용될 거라는 github의 공지입니다. personal access token을 사용하게 될 것이라고 합니다. 인증 방식을 바꾸면서 생겨난 오류인 것 같습니다. 해결 방법 1. 깃허브에서 프로필 - > Settings 클릭 2. Developer settings 클릭 3. Personal access tokens 클릭 4.Generate new token 클릭 5.Token 설정 * Expiration은 Token 기간입니다. No expi..

[Javascript] Promise란 ?

이번시간에는 Javascript의 객체인 Promise에 대해 알아보겠습니다. Promise란? Promise(약속)이라는 뜻으로 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체를 뜻합니다. 반환되지 않은 상태에서 Then을 붙이면 결과가 반환되고 실행이 완료되지 않았으면 완료가 된 이후 Then 내부에 함수가 실행됩니다. Resolve(성공후 리턴값) -> then으로 연결 Reject(실패시 리턴값) -> catch로 연결 Finally 부분은 무조건 실행 const condition = true; const promise = new Promise((resolve, reject) => { if (condition) { resolve("성공"); } else { reject('실패'); } })..