- 전체보기(89)
- JavaScript(27)
- js(27)
- python(21)
- React(20)
- 리액트(18)
- typescript(9)
- 기초 100제(7)
- 자바스크립트(7)
- 코드업(7)
- 코딩테스트(7)
- next(6)
- webpack(5)
- django(4)
- tutorial(3)
- aws(3)
- Props(2)
- 명령어(2)
- Absolute Path(2)
- Relative Path(2)
- 터미널(2)
- component(2)
- 나(2)
- useEffect(2)
- CSS(2)
- styled components(2)
- 손종일(2)
- CSR(2)
- SSR(2)
- terminal(2)
- 리눅스(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)
- foreach(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)
- getter(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)
- Map(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)
Map과 forEach의 차이는 무엇일까?
Map과 forEach Map > 클라이언트에서 Map은 주로 원하는 데이터의 형식으로 맵핑하기 위하여 많이 사용하곤한다. 간단한 키와 값을 서로 연결시켜 저장하고, 저장된 순서 그대로 각 요소돌을 반복적으로 접근할 수 있도록 한다. 그렇게하여 원하는 형식의 새로운
[TypeScript] Constructor와 접근 제한자, Getter와 Setter
Constructor (생성자) 객체지향 언어에는 Constructor 생성자가 있습니다. > 모든 Class는 Constructor라는 메소드를 가집니다. class로부터 객체를 생성할 때 호출되며, 객체의 초기화를 담당하고 있습니다. > Access Modif
OOP 객체지향 프로그래밍이란?
OOP 객체지향 프로그래밍 객체지향 프로그래밍이란? > 예를 들어 온라인 쇼핑 어플리케이션을 만든다고 가정해본다면, 주문의 정보, 고객의 데이터, 상품의 데이터, 주문하기, 장바구니에 담기 등 여러가지 변수와 함수가 필요하게 됩니다. 이렇게 코드를 작성하다보면 프로
[TypeScript] 함수의 Type, 선택적 매개변수 그리고 기본 매개변수
함수의 타입은 void, number, string 등 여러가지의 타입을 지정할 수 있습니다.함수의 return 값이 없는 경우에는 void로 지정할 수 있고함수의 return 값이 있는 경우에는 각 Type들로 지정할 수 있습니다.아래와 같이 message, user
[TypeScript] union type과 any type그리고 Type Guard
TypeScript TypeScript에서의 any Type 어떤 형식의 변수든 모두 담을 수 있다. 아래처럼 number, string, boolean 등 모든 변수를 담을 수 있습니다. 즉 해당 변수의 타입을 타입 체크를 하지 않겠다는 의미가 됩니다. 하지만 T
[TypeScript] Enum 타입과 리터럴 타입
## TypeScript ### TypeScript에서의 Enum 타입 ```typescript enum userGrade { VVIP, VIP, Premium, } ``` **enum Type** >enum을 사용하게되면 숫자 열거형, 문자 열거형, 혼
[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
[Next] Next에서의 alert, window, document , localStorage 사용 가능할까?
= 우리가 기존에 사용하던 대로 사용한다면 SSR에서는 해당 객체나 메소드에 접근하지 못하고 에러가 출력됩니다. CSR에서는 접근이 가능하지만, SSR에서는 접근하지 못하고 에러가 출력됩니다.useEffect(() => {},\[]) 는 렌더링이 되고 난 후 실행되기
[Next] Next.js에서의 동적라우팅
Next js에서의 동적 라우팅 방법 1. 받은 값을 2배로 리턴하는 api > 2. 받은 값을 2배로 출력하는 페이지를 생성 > 즉 http://localhost:3000/get-double/[value]의 value값을 동적으로 받아서 double api요청한
[Next] useEffect로 받은 데이터는 SSR될까? ( getInitialProps 사용 )
React useEffect를 사용했을 경우에 SSR이 될까? ☀️ 답 : useEffect안에서 동작하는 데이터는 SSR되지 않는다. useEffect(() => {}, []) 는 마운트 되었을 때, useEffect는 실행된다. 그렇기 때문에 SSR로 받은 htm
Brandi 인턴십을 진행하며
인턴십 팀명 : Brandi 내용 : Brandi 백오피스 개발 인원 : 4명 (프론트 : 2명 / 백엔드 : 2명) 기간 : 4주 (2020.10.19 ~ 2020.11.13) 코드 : https://github.com/JongilSohn/frontend
[Next] CNA (Next, TypeScript, Styled-components) 세팅 후 SSR시 css 적용 안되는 현상
아래처럼 Next js에서 제공되는 코드도 있지만 깜빡거리는 현상이 있을 수 있습니다.깜빡인다면 하기의 코드를 사용하시면 됩니다.하기의 코드는 참고 링크 첨부합니다.위 처럼 .babelrc와 \_document.tsx를 설정한다면 SSR되기 전에 스타일을 적용 시킨 후
나는 개발을 왜 시작하게 되었을까?
무선 조도 센서를 이용한 졸업 작품을 개발하였다. 해당 동영상과 내용을 넣고 싶지만... 예전에 바이러스가 걸려서 파일이 날라가서 나의 기억속에만 남아있다. 아두이노와 지그비 통신을 사용하여 무선 조도 센서, 블라인드, App을 만들었다. App으로 블라인드를 내리고,
[Next] TypeScript & Next.js & styled-components 초기 세팅 (CNA)
## Next.js와 TypeScript를 사용하기 위한 초기 세팅 방법 **_app.tsx, _document.tsx는 다음 블로그에서 다루도록 하겠습니다.** ### CNA (create-next-app)
[JavaScript] context API와 redux? 차이점?
전역으로 상태 관리를 하기 위한 도구입니다. Redux는 리액트가 아닌 곳에서도 사용이 가능하지만, context API는 React에서만 사용이 가능합니다. 리덕스는 한개의 저장소를 가지지만 context API 여러 저장소가 존재할 수 있습니다.Redux는 cont
[JavaScript] JavaScript의 특징? 파이썬과는 뭐가 다를까?
자바스크립트는 웹을 풍부하게 만들어주는 작고 가벼운 언어라고 요약할 수 있습니다.미국 넷스케이프 커뮤니케이션즈사에서 개발한 스크립트 언어이며, 작고 빠른 성능을 가지고 있어서 웹 문서를 동적으로 꾸밀 때 많이 사용합니다. 자바스크립트는 웹 브라우저에서 실행되는데(클라이
[Docker] 배포 후 느낀 Docker의 장단점 (Arket 배포 완료!)
Docker 우선 공부하면서 배포를 진행하여 현재 우리 아르켓 팀이 만든 프로젝트 배포에 성공하였습니다~!! Docker 사용 방법에 대해서는 다음 블로그에서 다루도록 하겠습니다!
[Next] Next js를 사용하여 SSR, CSR 구현
Next.js를 사용하면 React에서도 CSR, SSR을 혼합하여 빠른 성능을 구현할 수 있다.
[JavaScript] Webpack - Bundle
Webpack Bundle JS, CSS, JPG, PNG 등 여러개의 파일들을 모듈로 다룰 수 있는데 웹팩을 사용하면 웹에 사용되는 다양한 파일을 모두 모듈로 다룰 수 있습니다. 서로 참조하는 파일들을 모아서 하나의 파일로 묶는 것을 Bundle이라고 합니다.
[TypeScript] TypeScript에서의 input 관리
TypeScript TypeScript에서의 input 상태 관리 Arrow Function >아래와 같이 React.FC라는 것을 사용해서 type을 지정할 수 있지만, React.FC에는 기본적으로 children이 탑재되어 있다. 그렇기 때문에 Greetin