profile
Allday
태그 목록
전체보기 (88)js(26)JavaScript(26)python(21)React(20)리액트(18)typescript(9)코딩테스트(7)기초 100제(7)코드업(7)자바스크립트(6)next(6)webpack(5)django(4)aws(3)tutorial(3)리눅스(2)명령어(2)Absolute Path(2)Props(2)Relative Path(2)터미널(2)component(2)(2)CSS(2)손종일(2)styled components(2)useEffect(2)CSR(2)SSR(2)terminal(2)dynamic routing(1)API(1)instance(1)relative(1)framework(1)프레임워크(1)공식문서 따라하기(1)Access Modifiers(1)OOP(1)동적 라우팅(1)CRA(1)linux(1)Styled Componet(1)brandi(1)stack(1)queue(1)배포(1)type alias(1)내부함수(1)이미지(1)CLUD(1)sys.path(1)패키지(1)Extending Styles(1)generator(1)iterator(1)제너레이터(1)컴포넌트(1)람다(1)deps(1)tympanus(1)lambda(1)Module(1)router(1)input(1)float(1)객체지향 프로그래밍(1)Getting Started(1)useState(1)MDN(1)fixed(1)Semantic Elements(1)mock data(1)non-default value parameter(1)class(1)pagination(1)이터레이터(1)optional chaining(1)init(1)리눅스 명령어(1)왜?(1)특징(1)환경 설정(1)Generic(1)ec2(1)설치(1)Nginx(1)컴파일 언어(1)const(1)let(1)var(1)CNA(1)docker(1)클로저(1)회고록(1)초기세팅(1)Liux(1)Paging(1)라우터(1)JongilSohn(1)interface(1)union(1)value(1)State(1)useMemo(1)useReducer(1)useRef(1)inline block(1)arrow function(1)window(1)function type(1)Enum(1)mysql(1)접근 제한자(1)변수 선언 차이점(1)miniconda3(1)Constructor(1)Context API(1)splice(1)스타일드컴포넌트(1)block(1)개발자(1)inline(1)basic(1)querystring(1)페이지네이션(1)스택(1)array(1)위치인수(1)setter(1)프로젝트(1)인턴십(1)프로그래밍 언어(1)Fetch(1)장단점(1)spa(1)getInitialProps(1)render(1)객체지향(1)bundle(1)전역값 관리(1)JSX(1)next.js(1)slice(1)semantic web(1)내장함수(1)rendering(1)getter(1)(1)기본구조(1)가변인수(1)redux(1)closure(1)sys.module(1)sys(1)Nike(1)생성자(1)default value parameter(1)화면 전환 효과(1)contextAPI(1)hover(1)animation(1)Default Value(1)function(1)Event(1)pytho(1)Adapting based on props(1)배열(1)position(1)semantic tag(1)union type(1)웹팩(1)import(1)인터프리터 언어(1)AWS개념(1)자료구조(1)absolute(1)
post-thumbnail

[TypeScript] Constructor와 접근 제한자, Getter와 Setter

Constructor (생성자) 객체지향 언어에는 Constructor 생성자가 있습니다. > 모든 Class는 Constructor라는 메소드를 가집니다. class로부터 객체를 생성할 때 호출되며, 객체의 초기화를 담당하고 있습니다. > Access Modif

3일 전
·
0개의 댓글
post-thumbnail

OOP 객체지향 프로그래밍이란?

OOP 객체지향 프로그래밍 객체지향 프로그래밍이란? > 예를 들어 온라인 쇼핑 어플리케이션을 만든다고 가정해본다면, 주문의 정보, 고객의 데이터, 상품의 데이터, 주문하기, 장바구니에 담기 등 여러가지 변수와 함수가 필요하게 됩니다. 이렇게 코드를 작성하다보면 프로

3일 전
·
0개의 댓글
post-thumbnail

[TypeScript] 함수의 Type, 선택적 매개변수 그리고 기본 매개변수

함수의 타입은 void, number, string 등 여러가지의 타입을 지정할 수 있습니다.함수의 return 값이 없는 경우에는 void로 지정할 수 있고함수의 return 값이 있는 경우에는 각 Type들로 지정할 수 있습니다.아래와 같이 message, user

4일 전
·
0개의 댓글
post-thumbnail

[TypeScript] union type과 any type그리고 Type Guard

TypeScript TypeScript에서의 any Type 어떤 형식의 변수든 모두 담을 수 있다. 아래처럼 number, string, boolean 등 모든 변수를 담을 수 있습니다. 즉 해당 변수의 타입을 타입 체크를 하지 않겠다는 의미가 됩니다. 하지만 T

4일 전
·
0개의 댓글
post-thumbnail

[TypeScript] Enum 타입과 리터럴 타입

## TypeScript ### TypeScript에서의 Enum 타입 ```typescript enum userGrade { VVIP, VIP, Premium, } ``` **enum Type** >enum을 사용하게되면 숫자 열거형, 문자 열거형, 혼

5일 전
·
0개의 댓글
post-thumbnail

[JavaScript] Webpack - 기본구조

Webpack Webpack이 바라보는 Module 1. js 2. sass 3. hbs 4. jpg, png ... Bundle을 통한 하나의 js ex) index.js + bar.js -> dist/bundle.js 로 보이지만 index.js + bar.j

2020년 12월 21일
·
0개의 댓글
post-thumbnail

[Next] Next에서의 alert, window, document , localStorage 사용 가능할까?

= 우리가 기존에 사용하던 대로 사용한다면 SSR에서는 해당 객체나 메소드에 접근하지 못하고 에러가 출력됩니다. CSR에서는 접근이 가능하지만, SSR에서는 접근하지 못하고 에러가 출력됩니다.useEffect(() => {},\[]) 는 렌더링이 되고 난 후 실행되기

2020년 12월 19일
·
0개의 댓글
post-thumbnail

[Next] Next.js에서의 동적라우팅

Next js에서의 동적 라우팅 방법 1. 받은 값을 2배로 리턴하는 api > 2. 받은 값을 2배로 출력하는 페이지를 생성 > 즉 http://localhost:3000/get-double/[value]의 value값을 동적으로 받아서 double api요청한

2020년 12월 18일
·
0개의 댓글
post-thumbnail

[Next] useEffect로 받은 데이터는 SSR될까? ( getInitialProps 사용 )

React useEffect를 사용했을 경우에 SSR이 될까? ☀️ 답 : useEffect안에서 동작하는 데이터는 SSR되지 않는다. useEffect(() => {}, []) 는 마운트 되었을 때, useEffect는 실행된다. 그렇기 때문에 SSR로 받은 htm

2020년 12월 17일
·
0개의 댓글
post-thumbnail

Brandi 인턴십을 진행하며

인턴십 팀명 : Brandi 내용 : Brandi 백오피스 개발 인원 : 4명 (프론트 : 2명 / 백엔드 : 2명) 기간 : 4주 (2020.10.19 ~ 2020.11.13) 코드 : https://github.com/JongilSohn/frontend

2020년 12월 16일
·
2개의 댓글
post-thumbnail

[Next] CNA (Next, TypeScript, Styled-components) 세팅 후 SSR시 css 적용 안되는 현상

아래처럼 Next js에서 제공되는 코드도 있지만 깜빡거리는 현상이 있을 수 있습니다.깜빡인다면 하기의 코드를 사용하시면 됩니다.하기의 코드는 참고 링크 첨부합니다.위 처럼 .babelrc와 \_document.tsx를 설정한다면 SSR되기 전에 스타일을 적용 시킨 후

2020년 12월 15일
·
0개의 댓글
post-thumbnail

나는 개발을 왜 시작하게 되었을까?

무선 조도 센서를 이용한 졸업 작품을 개발하였다. 해당 동영상과 내용을 넣고 싶지만... 예전에 바이러스가 걸려서 파일이 날라가서 나의 기억속에만 남아있다. 아두이노와 지그비 통신을 사용하여 무선 조도 센서, 블라인드, App을 만들었다. App으로 블라인드를 내리고,

2020년 12월 12일
·
0개의 댓글
post-thumbnail

[Next] TypeScript & Next.js & styled-components 초기 세팅 (CNA)

## Next.js와 TypeScript를 사용하기 위한 초기 세팅 방법 **_app.tsx, _document.tsx는 다음 블로그에서 다루도록 하겠습니다.** ### CNA (create-next-app)

2020년 12월 11일
·
0개의 댓글
post-thumbnail

[JavaScript] context API와 redux? 차이점?

전역으로 상태 관리를 하기 위한 도구입니다. Redux는 리액트가 아닌 곳에서도 사용이 가능하지만, context API는 React에서만 사용이 가능합니다. 리덕스는 한개의 저장소를 가지지만 context API 여러 저장소가 존재할 수 있습니다.Redux는 cont

2020년 12월 9일
·
0개의 댓글
post-thumbnail

[JavaScript] JavaScript의 특징? 파이썬과는 뭐가 다를까?

자바스크립트는 웹을 풍부하게 만들어주는 작고 가벼운 언어라고 요약할 수 있습니다.미국 넷스케이프 커뮤니케이션즈사에서 개발한 스크립트 언어이며, 작고 빠른 성능을 가지고 있어서 웹 문서를 동적으로 꾸밀 때 많이 사용합니다. 자바스크립트는 웹 브라우저에서 실행되는데(클라이

2020년 12월 7일
·
0개의 댓글
post-thumbnail

[Docker] 배포 후 느낀 Docker의 장단점 (Arket 배포 완료!)

Docker 우선 공부하면서 배포를 진행하여 현재 우리 아르켓 팀이 만든 프로젝트 배포에 성공하였습니다~!! Docker 사용 방법에 대해서는 다음 블로그에서 다루도록 하겠습니다!

2020년 12월 7일
·
0개의 댓글
post-thumbnail

[Next] Next js를 사용하여 SSR, CSR 구현

Next.js를 사용하면 React에서도 CSR, SSR을 혼합하여 빠른 성능을 구현할 수 있다.

2020년 12월 5일
·
0개의 댓글
post-thumbnail

[JavaScript] Webpack - Bundle

Webpack Bundle JS, CSS, JPG, PNG 등 여러개의 파일들을 모듈로 다룰 수 있는데 웹팩을 사용하면 웹에 사용되는 다양한 파일을 모두 모듈로 다룰 수 있습니다. 서로 참조하는 파일들을 모아서 하나의 파일로 묶는 것을 Bundle이라고 합니다.

2020년 12월 4일
·
0개의 댓글
post-thumbnail

[TypeScript] TypeScript에서의 input 관리

TypeScript TypeScript에서의 input 상태 관리 Arrow Function >아래와 같이 React.FC라는 것을 사용해서 type을 지정할 수 있지만, React.FC에는 기본적으로 children이 탑재되어 있다. 그렇기 때문에 Greetin

2020년 12월 2일
·
0개의 댓글
post-thumbnail

[TypeScript] CRA 생성 및 Function과 Allow Function

TypeScript CRA에서는 TypeScript를 지원하기 때문에 CRA TypeScript를 생성할 수 있다. > npx create-react-app [project_name] --template typescript CRA 세팅 위의 명령어로 CRA를 생성

2020년 12월 1일
·
0개의 댓글