[Project Refactoring]YourPage refactoring 2
기존에 YourPage는 하나의 페이지 안에 진행목록, 커미션목록, 프로필 지금은 없어진 채팅까지 세가지 모두 한번에 표현하려고 했다 그러다 보니 컨텐츠 하나하나가 여유가 없어보였다.
Tag
- codestates 178
- 코딩앙마 47
- GIS DEVELOPER 13
- Blog 7
- method 7
- 노마드코더 7
- programmers 7
- object 6
- array 5
- function 4
- array method 4
- constructor 3
- property 3
- for 2
- variable 2
- for in 2
- symbol 2
- data type 2
- rest parameter 2
- prototype 2
- promise 2
- callback 2
- generator 2
- yield 2
- iterable 2
- iterator 2
- helloworldjavascript 2
- 코딩알려주는누나 2
- more 1
- alert 1
- prompt 1
- confirm 1
- type conversion 1
- operator 1
- comparison operator 1
- strict equality operator 1
- equality operator 1
- if 1
- else if 1
- else 1
- logical operator 1
- loop 1
- while 1
- do while 1
- break 1
- continue 1
- switch 1
- global variable 1
- local variable 1
- function expressions 1
- function declartion 1
- arrow function 1
- object in 1
- var 1
- let 1
- const 1
- constructor function 1
- computed property 1
- object method 1
- toString 1
- Math 1
- string 1
- string method 1
- destructuring assignment 1
- array destructuring 1
- spread syntax 1
- closure 1
- lexical environment 1
- setTimeout 1
- setInterval 1
- clearTime 1
- call 1
- apply 1
- bind 1
- inheritance 1
- instance 1
- class 1
- method overriding 1
- constructor overriding 1
- then 1
- catch 1
- finally 1
- async 1
- await 1
- try catch 1
- mdn 1
- LF 1
- CRLF 1
- 디자인베이스 1
- portfolio 1
codestates
[Project Refactoring]YourPage refactoring
function ProfileModule({ info }) { return ( <StyledContainer> <Buttons text="수정" buttonStyle="smallEdit" /> <StyledImgContai...
[Project Refactoring]HomePage refactoring
HomePage에는 세 개의 커스텀 훅이 사용된다
[Project Refactoring]Typography refactoring
리팩토링을 마친 Typographies 컴포넌트는
[Project Refactoring]FormPage
우리는 커미션 신청을 채팅으로 하도록 설계를 했다.
[Project Refactoring]image 컴포넌트
기존 imageComponent
[Project Refactoring]input 컴포넌트
타이포그라피 리팩토링하는 과정에서 createTag의 input 컴포넌트가 말썽인걸 찾았다.
[Project Refactoring]Typography
기존 Typography 컴포넌트
[Project Refactoring]버튼 컴포넌트
theme과 함께 수정해야할 컴포넌트
[Project Refactoring]env
client 폴더 바로 안에(package.json과 동일한 위치).env 파일을 만들고 .gitignore에 .env 추가
[Project Refactoring]배포
우리 팀의 프로젝트는 리팩토링이 너무나도 필요하다. 모든 부분에서 필요하다고 생각이 들기 때문에 기존의 프로젝트를 건들지 않고 fork로 새로운 repository로 리팩토링을 진행할 것이며 또한 https를 적용하기 위해 서버와 클라이언트 모두 새롭게 배포를 한다.
[Project Retrospect]230327~230402 4주차
230327 월요일
[Project Retrospect]230320~230326 3주차
230320 월요일
[Project Retrospect]230313~230319 2주차
230313 월요일
[Project Retrospect]230303~230312 1주차
230303 금요일
[Project Retrospect]~230302 0주차
날짜 앞에 ~를 붙인 것은 팀이 결정되고 본격적인 프로젝트가 시작되기 전에 내가 미리 준비해야했던 것들 또한 회고하기 위해 붙이게 되었다.
[Project Retrospect]회고 시작
코드스테이츠의 마지막 스테이지인 메인 프로젝트 기간이 마무리 된지 벌써 일주일이나 지났다.
[Project Management] 아이디어 미믹
크몽, 콜리, 크레페 ( 소규모 커미션 )** : 포토샵, 그림그리기 등등 재능기부 형식으로 변경
[Project Management] Git
README.md
[Project Management] DevTools
GitHub 리포지토리
[SRS]개발자 테스트
유닛 테스트 만으로는 해당 기능이 100% 정상적으로 동작한다고 단정할 수 없음
[SRS]진행 절차
용어
[SRS]API 명세서
REST(Representational State Transfer) API(Application Programming Interface)
[SRS]테이블 명세서
작성 목적
[SRS]화면 정의서
화면 정의서
[SRS]사용자 요구사항 정의서
소프트웨어 개발 단계
[SRS]프로젝트 개요
SRS(Software requirements specification)
[FE]프레임워크 선택 및 설치
Create React App
[FE]개발환경 구성
필요한 기술 스택
[GIT]dev branch
dev 브랜치 작업 완료 -> main 브랜치로 Pull request
[GIT]flow
브랜칭 전략
[GIT]설정
로컬 레포지토리와 연결할 유저 정보를 설정
[GIT]branch
Git branch
[GITHUB]이슈, 마일스톤, 칸반 적용
Github 이슈와 마일스톤
[GITHUB]칸반
논의 중 생겨난 하나의 업무 관리 방식 중 하나
[GITHUB]리포지토리
Github 리포지토리에 꼭 필요한 파일
[CodingTest]멱집합
멱집합
[CodingTest]GCD & LCM
최대공약수(Greatest Common Divisor, GCD)
[CodingTest]순열 & 조합
순열 & 조합
[CodingTest]Algorithm 예제(Brute Force)
Algorithm 구현 Brute-Force
[CodingTest]Algorithm 예제(Greedy)
Greedy Algorithm - 거스름돈
[CodingTest]Dynamic Programming(DP, 동적 계획법)
Dynamic Programming(DP, 동적 계획법)
[CodingTest]Greedy Algorithm(탐욕 알고리즘)
Algorithm 구현의 기초
[CodingTest]Greedy Algorithm(탐욕 알고리즘)
Greedy Algorithm 문제 해결 단계
[CodingTest]공간 복잡도
알고리즘이 수행되는 데에 필요한 메모리의 총량
[CodingTest]시간 복잡도
시간 복잡도
[CodingTest]Algorithm
Algorithm
[CI/CD]Proxy
CORS 정책이 필요한 이유
[CI/CD]YAML
Yet Another Markup Language. 사람이 읽을 수 있는 데이터 직렬화 언어
[CI/CD]GitHub Action
Github 레포지토리에서 바로 소프트웨어 개발 워크플로우를 자동화, 사용자 지정 및 실행 가능케 함
[CI/CD]CI/CD 파이프라인
배포 자동화 필요성
[CI/CD]CI/CD
CI는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)
[CI/CD]DevOps
전통적인 IT 조직 구조
[CI/CD]개발 프로세스
개발 프로세스
[AWS]Deploy Assignment
IAM 기본 설정
[AWS]Deploy
배포 - 개발한 서비스를 사용자들이 이용 가능하게 하는 일련의 과정
[AWS]Deploy Strategy
지금까지 로컬 환경에서 클라이언트와 서버, 데이터베이스를 띄워서 작성한 코드를 구동하고 확인
[AWS]S3(Simple Storage Service)
클라우드 스토리지 - 인터넷 공간에 데이터를 저장하는 저장소
[AWS]RDS(Relational Database Service)
Relational Database Service
[AWS]EC2(Elastic Compute Cloud)
Amazon EC2(Elastic Compute Cloud)
[AWS]Cloud Computing
기존 방식의 한계
[AWS]Amazon Web Service
대부분 클라우드 서비스 업체 기본 장점
[Optimization]Lighthouse
Lighthouse
[Optimization]Tree Shaking
나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거
[Optimization]Cache Manage
캐시 사용하기
[Optimization]HTML, CSS Optimization
HTML, CSS 코드 최적화
[Optimization]최적화
최적화 - 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것
[TESTING]TDD
Test-driven Development
[GraphQL]GraphQL 구조
GraphQL 구조
[GraphQL]GraphQL VS REST API
REST API의 한계
[GraphQL]GraphQL
페이스북에서 개발, 오픈 소스로 제공된 쿼리 언어
[Garbage Collection]가비지 컬렉션
가비지 컬렉션
[GRAPHIC]그래픽
비트맵
[STRING]문자열
프로그래밍 언어마다 문자열을 저장하는 자료형은 다 다르고 용량도 다름
[THREAD]스레드
스레드
[PROCESS]프로세스
프로세스
[OS]운영체제
운영체제
[COMPUTER]CPU & Memory
Memory
[COMPUTER]컴퓨터 구조
입력장치 출력장치 중앙처리장치 산술/논리 연산 장치(ALU) 제어 장치 레지스터 - CPU의 내부 메모리, CPU에서 사용하는 데이터를 일시적으로 저장하는 장소 저장장치 주기억장치 - 주로 ...
[Assignment]React Hooks
json-server - json 파일을 이용하여 REST API 서버를 구축해주는 라이브러리
[REACT18]React.lazy() & Suspense
React.lazy()
[REACT18]Code Spliting
react 18에서 바뀐 점
[Component & Hook]Custom Hooks
개발자가 스스로 커스텀한 훅, 반복되는 로직을 함수로 뽑아내어 재사용
[Component & Hook]useCallback
렌더링 최적화를 위한 Hook 중 하나
[Component & Hook]useMemo
컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조
[Component & Hook]Function Component & Class Component
Function Component & Class Component
[Virtual DOM]Diffing Algorithm
React Diffing Algorithm
[Virtual DOM]Virtual DOM
Virtual DOM
[BUNDLING]Webpack Assignment React
React가 아닌 JS를 번들링할 때와 마찬가지로(앞 내용의 번들링까지) 진행하면 터미널에서
[BUNDLING]Webpack Reack
리액트만 알아서는 개발하기가 어렵다
[BUNDLING]Bundling
프론트엔드 개발자에게 번들은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음
[BROWSER]Canvas
HTML의 canvas 태그와 JS를 활용하여 다양한 그래픽 요소 생성 가능
[BROWSER]애니메이션
@keyframes
[BROWSER]resposive wep
반응형 웹
[BROWSER]browser rendering
브라우저 렌더링
[BROWSER]browser
브라우저
[Data Structure]Graph
Graph
[Data Structure]Tree
Tree
[BACKEND]OAuth
OAuth
[BACKEND]Token
Token
[BACKEND]Hashing
Hashing
[BACKEND]Session
Session
[BACKEND]Cookie
Cookie
[HTTPS]HTTPS
HTTP Secure의 약자
[HTTP]HTTP
HTTP 특징
[UFA]WAI-ARIA
WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
[UFA]Web Accessibility
장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
[UFA]SEO
검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업, SEO(Search Engine Optimization, 검색 엔진 최적화)
[UFA]Web Standards
양한 정보를 여러 사람들과 공유할 수 있는 공간이 ‘웹’
[State Managemen]Redux
Redux의 상태관리
[State Managemen]Props Drillingt
상태란 동적으로 표현되는 데이터
시간복잡도를 개선한 fibonacci
```js function fibonacci(n) { //일단 초기 배열이 [0, 1]에서 시작하여 배열의 요소를 누적해 나가는 방법 //그리고 이미 구해놓은 것은 배열의 요소로 저장해놓기..!!! 그래야 런타임이 초과되지 않는다
[Custom Component]useRef
React는 DOM을 직접 건드리는 것을 금지한다.
[Custom Component]Storybook
Storybook
[Custom Component]Component-Driven Developmen
Component-Driven Development(CDD)
[UFA]UI/UX
UI(User Interface, 사용자 인터페이스)
[JSON]JSON.stringify
JSON(JavaScript Object Notation)
[ALGORITHM]recursion
재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴.
[WEB SERVER]Middleware
미들들웨어(Middleware)는 요청(Request)에 필요한 기능을 더하거나, 문제를 발견하고 밖으로 걷어내는 역할을 한다.
[WEB SERVER]Refactor Express
Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 프레임워크 중 하나
[WEB SERVER]CORS
SOP(Same-Origin Policy 동일 출처 정책)
[ZOOM]221207 zoom react
React 함수 컴포넌트 Pure Function 항상 동일한 input, 동일한 output props를 받아서 JSX를 출력
[ZOOM]221206 zoom react
리엑트 배칭
[AJAX]클라이언트 요청
React 데이터 흐름
[ZOOM]221205 zoom RESTful API
데이터 주고 받으려고 응답과 요청을 잘 주고 받기 위해 누구나 보기 쉽게 메뉴판을 만들기 위해 표준화
[REST API]Rest API
REST(Representational State Transfer)
[AJAX]SSR, CSR
SSR(Server Side Rendering)
[AJAX]Asynchronous JavaScript And XMLHttpRequest
AJAX(Asynchronous JavaScript And XMLHttpRequest)
[HTTP]HyperText Transfer Protocol
HyperText Transfer Protocol HTML과 같은 문서를 전송하기 위한 프로토콜 웹 브라우저와 웹 서버의 소통
[Browser]브라우저 작동원리
URL(Uniform Resource Locater)
[Web Application Architecture]웹 애플리케이션 아키텍처
클라이언트 - 서버 아키텍처(2티어 아키텍처)
[SPA]React SPA
SPA(Single Page Application)
[BASIC]React
리액트
[AXIOS]axios API
fetch와 비슷한 역할을 하는 라이브러리
[FETCH]fetch API
여러 웹사이트에서 해당 정보만 불러 업데이트 하기 위해 특정 URL로부터 정보를 받아오는 역할을 한다.
[Asynchronous]비동기
비동기적 실행(Asynchronous execution)
[OOP]프로토타입 체인
extends
[OOP]프로토타입
JavaScript는 프로토타입 기반 언어(prototype-based language)라 불림
[OOP]객체 지향 프로그래밍
Object Oriented Programming
[OOP]클래스와 인스턴스
class - 청사진
[HOF]고차함수
일급 객체(first-class citizen)
[AUDITION]기술면접
id와 class
[GITHUB]fork
기존의 프로젝트에 변화를 주거나 새로운 것을 시도를해보기 위해 리포지토리를 복사하는 것
[GITHUB]git
디렉토리를 만들고 해당 디렉토리에 로컬 Git repository를 생성(git init) local working directory를 git의 관리하에 있게 함
[ZOOM]221111 codestates zoom DOM
innerHTML VS textContent
[Koans]koans 후기3
Spread syntax
[Koans]koans 후기2
primitive data type, reference data type
[Koans]koans 후기
Scope
[JS]Spread/Rest
spread
[JS]Closure
```js let x = 10; function outer() { console.log(x); // ReferenceError // outer 안에 새로운 x가 잇고 console.log의 위치는 새로운 x의 할당보다 먼저 위치하고 있기 때문에..? let x = 20; ...
[JS]Scope
스코프
[JS]원시자료형, 참조자료형
원시자료형
[JS]dot notation braket notation
dot notation
[JS]mutable
mutable(원본이 변함)
[MOCKUP]계산기
```css /* 리셋 */ { margin: 0; padding: 0; box-sizing: border-box; border: none; }
[Wireframe]레이아웃
프레임워크(framework)
[BASIC]flex 2
자식 요소 flexbox
[CSS]flex
부모 요소 flexbox
[HTML]html emmet
div.qq*10
[CSS]셀렉터
셀렉터
[CSS]박스 모델
줄 바꿈이 되는 박스(block) - h1, p
[CSS]기초
컴포넌트 기능별로 묶어서 제작
[HTML]attribute
attribute
[HTML]semantic
시맨틱 태그를 사용해야하는 이유
[HTML]input type
input type
[HTML]기초
HyperText Markup Lanuage
[JS]연산자, 문자열
연산자
[JS]변수, type
변수
코딩앙마
[TypeScript] Utility Types
유틸리티 타입
[TypeScript] Generics
Generics
[TypeScript] Class
class
[TypeScript] 리터럴, 유니온
Literal Types
[TypeScript] 함수
타입스크립트 함수
[TypeScript] 인터페이스(interface)
```ts let user: object;
[TypeScript] 기본타입 및 js변환 등
변수의 타입
generator 2
next 메소드에 인수전달
generator
generator
Promise 2
async
Promise
Promise
Class
Class
프로토타입
프로토타입
call, apply, bind
call, apply, bind method
setTimeout, setInterval, clearTime
setTimeout
클로저
Closure
전개구문
전개구문(Spread syntax)
나머지 매개변수
나머지 매개변수
구조분해할당
구조분해할당(Destructuring assignment)
배열 메소드 3
array method
배열 메소드 2
array method
배열 메소드
array method
문자열과 문자열 메소드
string
Math
Math
toString()
toString()
심볼 메소드
Symbol.for()
심볼
Symbol
객체 메소드
Object.assign()
계산된 프로퍼티
Computed property
생성자 함수
생성자 함수
var, let, const
var, let, const
배열 반복문
배열 반복문 for
배열과 배열 메소드
array
메소드
Object method
객체 in
Object in
for in
for in
객체
객체
함수표현
함수표현식
전역변수, 지역변수
정의
함수
function
switch
switch
반복문
for
논리연산자
논리연산자
연산자
기본 연산자
형변환
형변환
alert, prompt, confirm
alret, prompt, confirm
[datatype]변수선언
변수 선언에 있어 유의할 점
GIS DEVELOPER
[ReactThreeFiber] 그림자(Drei)
Drei에서 제공하는 그림자 컴포넌트
[ReactThreeFiber] 그림자
shadow
[ReactThreeFiber] 카메라
Camera
[ReactThreeFiber] 광원
Light
[ReactThreeFiber] Matreial - Texture Maping
Texture Maping
[ReactThreeFiber] Matreial(Drei)
MeshReflectorMaterial
[ReactThreeFiber] Matreial
Matreial
[ReactThreeFiber] Geometry의 종류와 인자
Geometry의 args 속성
[ReactThreeFiber] Geometry
Geometry
[ReactThreeFiber] Tranformation
도 를 라디안으로 바꾸려면 PI/180
[ReactThreeFiber] 애니메이션
애니메이션
[ReactThreeFiber] Canvas
Three.js 는 WebGL과 WebGPU를 wrapping한 라이브러리.
Blog
Make button & Youtube
버튼 테스트
Make notice
공지사항 만드는 방법
Tags Test
태그 여러 가지 다는 방법
Sample Test
샘플 코드와 “```”
Insert Images
이미지를 넣어보자
Markdown All in one
마크다운 문법
First post!
깃헙 블로그 시작
method
call, apply, bind
call, apply, bind method
배열 메소드 3
array method
배열 메소드 2
array method
배열 메소드
array method
문자열과 문자열 메소드
string
계산된 프로퍼티
Computed property
메소드
Object method
노마드코더
nomard crome app 7
todo-list 2
nomard crome app 6
todo-list
nomard crome app 5
quote
nomard crome app 4
clock
nomard crome app 3
link
nomard crome app 2
Login
programmers
프로그래머스 221202
가위바위보
정규식
RegExp
프로그래머스 221201
String.prototype.replaceAll()
프로그래머스 221121
점의 위치 구하기
프로그래머스 221106
햄버거 만들기
프로그래머스 221104
옹알이(1)
object
맨 위로 이동 ↑array
맨 위로 이동 ↑function
맨 위로 이동 ↑array method
맨 위로 이동 ↑constructor
맨 위로 이동 ↑property
맨 위로 이동 ↑for
맨 위로 이동 ↑variable
var, let, const
var, let, const
전역변수, 지역변수
정의
for in
맨 위로 이동 ↑symbol
맨 위로 이동 ↑data type
맨 위로 이동 ↑rest parameter
맨 위로 이동 ↑prototype
맨 위로 이동 ↑promise
맨 위로 이동 ↑callback
맨 위로 이동 ↑generator
generator 2
next 메소드에 인수전달
generator
generator
yield
generator 2
next 메소드에 인수전달
generator
generator
iterable
generator 2
next 메소드에 인수전달
generator
generator
iterator
generator 2
next 메소드에 인수전달
generator
generator
helloworldjavascript
cmd
파일탐색 dir
Queue, Stack, Tree
어떤 데이터의 구체적인 구현 방식은 생략한 채, 데이터의 추상적 형태와 그 데이터를 다루는 방법만을 정해놓은 것을 가지고 ADT(Abstract Data Type) 혹은 추상 자료형이라고 합니다.
코딩알려주는누나
[TypeScript] React 시작해보기
Create React App
[TypeScript] 기본타입 및 js변환 등
변수의 타입
more
Tags Test
태그 여러 가지 다는 방법
alert
alert, prompt, confirm
alret, prompt, confirm
prompt
alert, prompt, confirm
alret, prompt, confirm
confirm
alert, prompt, confirm
alret, prompt, confirm
type conversion
형변환
형변환
operator
연산자
기본 연산자
comparison operator
연산자
기본 연산자
strict equality operator
연산자
기본 연산자
equality operator
연산자
기본 연산자
if
연산자
기본 연산자
else if
연산자
기본 연산자
else
연산자
기본 연산자
logical operator
논리연산자
논리연산자
loop
반복문
for
while
반복문
for
do while
반복문
for
break
반복문
for
continue
반복문
for
switch
switch
switch
global variable
전역변수, 지역변수
정의
local variable
전역변수, 지역변수
정의
function expressions
함수표현
함수표현식
function declartion
함수표현
함수표현식
arrow function
함수표현
함수표현식
object in
객체 in
Object in
var
var, let, const
var, let, const
let
var, let, const
var, let, const
const
var, let, const
var, let, const
constructor function
생성자 함수
생성자 함수
computed property
계산된 프로퍼티
Computed property
object method
객체 메소드
Object.assign()
toString
toString()
toString()
Math
Math
Math
string
문자열과 문자열 메소드
string
string method
문자열과 문자열 메소드
string
destructuring assignment
구조분해할당
구조분해할당(Destructuring assignment)
array destructuring
구조분해할당
구조분해할당(Destructuring assignment)
spread syntax
전개구문
전개구문(Spread syntax)
closure
클로저
Closure
lexical environment
클로저
Closure
setTimeout
setTimeout, setInterval, clearTime
setTimeout
setInterval
setTimeout, setInterval, clearTime
setTimeout
clearTime
setTimeout, setInterval, clearTime
setTimeout
call
call, apply, bind
call, apply, bind method
apply
call, apply, bind
call, apply, bind method
bind
call, apply, bind
call, apply, bind method
inheritance
프로토타입
프로토타입
instance
프로토타입
프로토타입
class
Class
Class
method overriding
Class
Class
constructor overriding
Class
Class
then
Promise
Promise
catch
Promise
Promise
finally
Promise
Promise
async
Promise 2
async
await
Promise 2
async
try catch
Promise 2
async
mdn
화살표함수의 함정
this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다. new.target키워드가 없습니다. 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다. 생성자(Constructor)로 사...
LF
git LF, CRLF 에러
CR(Carriage-Return)
CRLF
git LF, CRLF 에러
CR(Carriage-Return)