- 전체보기(30)
- React(5)
- 리액트(4)
- CSS(3)
- TIL(3)
- JavaScript(3)
- 1차프로젝트(2)
- westagram(2)
- Flex(2)
- SPAO(2)
- array(2)
- 프로토타입(2)
- html(2)
- spa(2)
- routing(1)
- slice매서드(1)
- 인증(1)
- path parameter(1)
- object(1)
- 배열(1)
- 인가(1)
- component(1)
- array.shift메서드(1)
- position(1)
- hooks(1)
- 시맨틱태그(1)
- 클론코딩(1)
- 사전스터디(1)
- 벨류(1)
- 다음 글부터는 TIL로(1)
- 왜 개발을 시작했어요?(1)
- 개구리랑 flex 완전정복(1)
- 인증과 인가(1)
- SPAO클론코딩(1)
- 매서드 사용방법(1)
- Elements(1)
- rebase(1)
- restful api(1)
- http(1)
- 시맨틱웹(1)
- 호이스팅(1)
- for문(1)
- SPAO회원가입(1)
- 배열길이구하기(1)
- 객체(1)
- background-img태그(1)
- 요소수정(1)
- concat메서드(1)
- 반복문과 조건문(1)
- 요소삭제(1)
- MPA(1)
- router(1)
- http통신(1)
- Prototype(1)
- useEffect(1)
- useState(1)
- semantic tags(1)
- 통신규약(1)
- 1차 프로젝트(1)
- network(1)
- 타입스크립트(1)
- 스터디(1)
- 인스타그램(1)
- 주니어개발자(1)
- 레이아웃(1)
- git flow(1)
- sources(1)
- hoisting(1)
- 장바구니 페이지(1)
- 조건문(1)
- 타입스크립트를 쓰는이유(1)
- prestudy(1)
- 반복문(1)
- 요소접근(1)
- concat(1)
- 클로저(1)
- React Intro(1)
- filter(1)
- loginPage(1)
- application(1)
- key(1)
- bycrypt(1)
- 개발자도구(1)
- 데이터베이스(1)
- value(1)
- 웹의 역사(1)
- filter메서드(1)
- 키(1)
- 회원가입 페이지(1)
- State(1)
- ReactDOM.render(1)
- 함수(1)
- Sass(1)
- 개발이야기(1)
- DevTools(1)
- CustomHook(1)
- CSR(1)
- SSR(1)
- display: flex;(1)
- 로그인페이지(1)
- block(1)
- 객체와 반복문(1)
- 데이터타입(1)
- inline(1)
- console(1)
- C(1)
- HyperTextTransferProtocol(1)
- 요소추가(1)
- 클래스(1)
- 스파오 클론코딩(1)
- 프로젝트(1)
- 첫글(1)
- render(1)
- Java(1)
- 객체지향(1)
- forLoops(1)
- JSX(1)
- Javascript 기초(1)
- semantic web(1)
- 변수(1)
- squash(1)
- splice메서드(1)
- salting&keystretching(1)
- Database(1)
- 토큰(1)
- 팀프로젝트(1)
- img태그(1)
- Props(1)
- array.pop메서드(1)
- Array.splice()(1)
- 리액트 선행학습(1)
- array.splice메서드(1)
- closure(1)
- css속성(1)
- 단방향해쉬(1)
- git(1)
- typescript(1)
- query parameter(1)
TIL- SPA MPA CSR SSR
1. 웹의 역사와 발전 > 1세대 웹 - 전통적인 Web System Architecture (정적인 웹) 2세대 웹 - User Interaction 의 증가 (동적 웹) 3세대 웹 - SPA(Single Page Application) - 구별되기 시작하는 Fr
TIL- JavaScript와 다른 언어의 차이점
자바스크립트는 동적인 언어이고, 프로토타입을 기반으로한 객체지향 언어이기 때문이다.class 기반의 언어는 객체의 형식이 정의된 class라는 개념을 가지고 그것을 이용해 객체를 찍어낸다.반면 프로토타입 기반 언어는 class의 개념이 없으며, 객체 prototype의
TIL- TypeScript
자바스크립트의 경우 동적 타입 언어(Dynamic Typing)이기 때문에 런타임 속도는 빠르지만 안정성이 보장되지 않는다. 따라서 타입스크립트는 자바스크립트의 이러한 단점을 보완하기 위해 만들어 졌고 "확장된 자바스크립트"라고 생각할 수 있다.(JavaScript +
TIL-prototype
프로토 타입이란? 자바스크립트는 프로토타입(prototype) 기반의 언어로 어떤 객체를 원형으로 삼고 이를 복제함으로써 상속과 비슷한 효과를 얻는다. 모든 객체는 자신을 생성한 객체 원형에 대해 숨겨진 연결을 갖고 자신을 생성하기 위해 사용된 객체원형을 프로토타입
TIL - Closure
1. Closure란 무엇인가? 함수와 Lexical Environment의 조합이고, 함수가 생성될 당시 외부 변수를 기억하여, 생성 후에도 계속 접근이 가능한 기능이다. 자바스크립트는 Lexical Environment를 갖는데, 코드가 실행되면 스크립트 내부
TIL - Hoisting
1. 호이스팅이란 무엇인가? enviromentRecord에는 코드의 식별자 정보들이 저장된다. 이때, 자바스크립트 엔진이 식별자들을 최상단으로 끌어올려 놓는 것으로 간주하는 것이며, 변수 정보를 수집하는 과정을 더욱 이해하기 쉽게 대체한 개념이다. 2. 호이스팅
나의 소중한 개발이야기 : 개발에 입문하게 된 나를 돌아보며
그러던 중 고향친구의 형님이 회사를 그만두시고 프렌차이즈 피자가게를 한다는 사실을 알게되었고, 무작정 찾아가 도전하고 싶다고 했다. 하지만, 형님의 답은 "NO"였다. 지금 생각해 보면 당연히 그런 답을 들을 수 밖에 없었다. 그저 가벼운 생각으로 "회사 그만두고 피자
[React] Hooks
함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수이다.class 컴포넌트 안에서는 동작하지 않으며, useState, useEffect 등 내장 Hook을 제공한다.(Hoo
Git Workflow & Rebase
Git flow Main branch(시작) ➡️ Develop branch 생성 ➡️ feature(F1/F2) branch 생성(개발 진행) ➡️ Develop branch로 이동(feature F1 개발완료시) ➡️ feature F2 개발 준비 ➡️ D
1차 프로젝트 마무리
🔍 첫 팀프로젝트 일대기 간단요약 > - 팀명 : 스파오게임(SPAOGAME) 팀원 \- Front-end : 강성구, 김현진, 정경훈 \- Back-end : 김주현, 이기용, 송영록 >- 개발기간 : 2021-10-05 ~ 2021-10-15(2주) >- 개발목
[1차프로젝트] SPAO(회원가입 페이지 진행상황 기록)
프로젝트 사이트(SPAO) - http://spao.com구성원 : 프론트엔드 (3명) / 백엔드 (3명)담당페이지 : 로그인 , 회원가입, 장바구니시멘틱 태그를 이용한 회원가입 페이지 레이아웃 구성하기불필요한 className 최소화 및 scss 규칙 지켜
[1차프로젝트] SPAO(로그인 페이지 진행상황 기록)
프로젝트 사이트(SPAO) - http://spao.com구성원 : 프론트엔드 (3명) / 백엔드 (3명)담당페이지 : 로그인 , 회원가입, 장바구니구현목표( 1 ) 시멘틱태그를 이용한 레이아웃 구성( 2 ) 로그인 페이지 내부 기능구현\- 아이디, 비밀번호
TIL-RESTful API
API 구조를 만들기 위해(API 시스템을 구현하기 위한 아키텍처) 가장 널리 사용되는 형식이다. 리소스(HTTP URI로 정의된)를 구조적으로 깔끔하게 표현한다.(HTTP Method + Payload)장점 : 서버와 클라이언트 사이에 주고받는 메세지를 스스로 설명
[React] 인스타그램 코딩 마무리 기록
제시된 문제 : ID와 PW <input>에 이벤트가 발생할 때, handleIdInput함수를 실행하고 이벤트가 일어난 요소에 담긴 (event.target.value)을 state에 저장한다.< 내가 작성해본 코드 >email(idInput)과 passw
TIL - 인증&인가
개인정보를 통해 본인임을 증명하는 방법이라고 쉽게 설명을 할 수 있다. 우리가 회원가입 시 휴대폰 본인인증 서비스를 이용하여 본인을 확인시켜주고 가입을 할 수 있고, 이렇게 가입한 아이디로 웹페이지에 로그인을 할 수 있는데 이러한 과정을 인증이라고 정의할 수 있다.우리
TIL-Database
1. 데이터베이스(Database)란 무엇인가? >데이터란 컴퓨터 안에 기록되어 있는 숫자를 의미하며, 이런 데이터의 집합을 데이터베이스라고 한다. 일반적으로 데이터베이스의 개념은 특정 데이터를 확인하고 싶을 때 간단하게 찾을 수 있도록 정리된 집합을 말한다. 통상
[React] 2. React Router, Sass]
🔍 React Router >- path속성으로 자신이 원하는 URL 주소를 만들고 그 해당 URL에 들어갈 컴포넌트들을 지정하고 브라우저 이동 없이 빠르게 페이지 전환이 이루어지도록 도움을 준다. CRA(Create React App)에는 routing을 위한 로
TIL- React Intro
React 배경지식 왜 리액트를 사용 하는가? 웹 어플리케이션의 발전 정적인 1세대 웹에서(html , css, 자바스크립트, 돔, 이벤트) 동적인 2세대의 웹(제이쿼리- 메서드 모음) 으로 발전하면서 3세대 웹 (프론트앤드 프레임워크 & 라이브러리) 리액트,앵귤러,뷰
TIL - React를 시작하기 전에(1~5)
✔ JSX는 무엇인가? > 위의 태그 문법은 HTML도 아니고, 문자열도 아니다. 자바스크립트를 확장시킨 JSX라는 것이다.(아직은 내가 배우기 전이니 React.js를 쓰기 위해 사용하는 문법정도라고 생각해 두려고 한다...) ✔ JSX가 가진 특징은 무엇
Weekly I Learned(2주차) - 인스타그램 클론코딩(Westagram)
✔ HTML을 이용한 뼈대 만들기 로그인 페이지 및 메인 페이지 만들기 > - 로그인 페이지 >- 메인 페이지 ✔ CSS를 이용한 레이아웃 만들기 > 로그인 페이지 메인페이지 ✔ 결과물 >✔ 내가 잘 했다고 생각하는 점 👍 완성을 해냈다. 👍 자기소개 페이지를 만들