profile
Front-end to Full-stack
post-thumbnail

WeMong 프로젝트 회고

WeMong 프로젝트가 끝났다.우리팀은 크몽을 모델링한 위몽을 제작하였다.사용자가 판매자도 되고 구매자도 될 수 있는 사이트를 만들기로 하였다.크몽에는 예약 기능이 없기때문에 캘린더를 추가한 예약 기능을 만들기로 하였다.카카오 소셜로그인, 소셜 간편결제를 꼭 적용하기로

2022년 12월 13일
·
1개의 댓글
·
post-thumbnail

NAWEKE 프로젝트 회고

NAWKE 프로젝트가 끝났다. 우리팀은 나이키를 모델링한 나위키를 제작하였다. 나이키에서 각자의 아이디어를 더해 더 다양하고 편리한 UI/UX를 위해 해당 상품과 같이 코디하면 좋을 코디를 추천해주는 룩북을 만들자는 의견도 나왔고 로그인/회원가입을 하나로 합치고

2022년 12월 4일
·
0개의 댓글
·

WeMong 프로젝트 리베이스

프로젝트 첫날 커밋을 남기고 rebase를 진행했다.rebase에 대한 개념이 명확히 잡혀있지않은 상태에서 진행하다보니 리베이싱 상태가 계속 유지되는 문제가 생겼다.처음 진행한 방식은 git add .git commit -m "리베이스"git rebase feature

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

카카오 소셜로그인

카카오 소셜 로그인 로직을 구현했다.찾아보면서 로직이 궁금했는데 잘 찾아보기 힘들어서 로직도 첨부할 예정입니다.방식은 프론트에서 카카오 인가 코드를 받아온후 백엔드에 넘겨주면 백엔드에서 카카오 서버와 통신해 토큰을 발급받고 그 토큰을 가지고 자체사이트 토큰을 재발급해

2022년 12월 1일
·
1개의 댓글
·

WeMong프로젝트 1일차

2차프로젝트 모델링 사이트로는 크몽을 선정했다.프론트 4명과 백엔트 2명으로 구성됐다.기획을 바꾸기위해 플래닝 미팅을 진행했다. 예약 시스템을 추가하고 전문가/튜터와의 매칭을 성사시켜주는 사이트를 만들기로 1차 기획이 완료됐다.1차 기획 필수 페이지 메인페이지 메인페이

2022년 11월 29일
·
0개의 댓글
·

styled-components

styled-components는 최근 5년간 가장 인기있는 라이브러리다.PascalCase를 사용해야한다컴포넌트를 만들듯이 이름을 선언한다 const changeColor, setChangeColor = useState(false); const handleCha

2022년 11월 26일
·
0개의 댓글
·

동적 라우팅

동적 라우팅이란 몇개가 될지 모르는 페이지 개수에 각각 url 을 걸어줄 수 없을때 불러오는 데이터 값의 key값을 url로 만들어 주는 것이다.라우터에 위와같이 패스 명을 걸어준 후 /:id를 넣어준다그 후에는 map함수를 사용하는 입력되는 데이터에 따라 개수가 정해

2022년 11월 18일
·
0개의 댓글
·

로그인/회원가입

회원가입과 로그인을 위한백과 프론트의 통신을 해봤다.토큰을 주고받는 형태의 통신을 시도했다.fetch 메서드를 사용해 서버의 IP주소를 받아온 후 서버에서 요청한 사항들을 json 파일 형식으로변환시켜 post한다.그 후프론트에서 처리해야할 코드를 .then 을 사용해

2022년 11월 10일
·
0개의 댓글
·

onKeyDown

댓글을 다는 코드를 작성했다.한글로 댓글을 달면 댓글이 두개씩 달린다.찾아보니 한글은 조합문이라 단어의 조합이 끝난지 아닌지 알 수 없어서이벤트가 두번 발생한다고 했다처음에는 onKeyPress를 사용했다.후에 찾아보니 더이상 사용하지 않는 이벤트라고 해서 keyUP과

2022년 11월 9일
·
0개의 댓글
·

코드카타

단어의 시작부분중 겹치는 철자만 반환하는 함수를 작성해야한다첫 단어가 start라면 첫 단어를 기준으로 그 후에 오는 단어들의 철자를 대조하면 될것이다.일단 for문을 돌려서 처음 strs배열의 길이를 구한다.각 개체의 철자마다의 인덱스 값을 비교하기위해 이중 for문

2022년 11월 4일
·
0개의 댓글
·

westagram-Login

로그인 화면 HTML내용이다.유효성 검사를 하기위해 disabled 속성을 넣어서 비활성화 시켰다. 비활성화 시에 색을 다르게 하여 특이점을 나타내기위해 opacity값을 css내부에 따로 할당하였다.아이디인풋,패스워드인풋,로그인버튼 각각 가지고있는 클래스명을 할당하는

2022년 11월 3일
·
0개의 댓글
·

코드카타

2022년 11월 3일
·
0개의 댓글
·

코드카타

const sameReverse = num => { const a = num.toString(); //문자로 변환 const b = a.split(''); //배열로 변환 const c = b.reverse(); //인덱스를 뒤집기 const d=c

2022년 11월 3일
·
0개의 댓글
·

props

함수 내에서 animal은 '호랑이' 라고 선언한 후 자식 요소에 컴포넌트로 사용가능(영어 이름 함수는 따로 animaleng등 으로 선언하는 방법만 있나 궁금함)객체에 접근하는 방법인 키.값 or 키"값" 으로 컴포넌트 사용가능.함수도 컴포넌트로 사용 가능 여러 함

2022년 11월 2일
·
0개의 댓글
·

코드카타

reverse 함수에 정수인 숫자를 인자로 받습니다.그 숫자를 뒤집어서 return해주세요.x: 숫자return: 뒤집어진 숫자를 반환!예들 들어,x: 1234return: 4321x: -1234return: -4321x: 1230return: 321

2022년 11월 1일
·
0개의 댓글
·

Sass

SPA란? Link Component 와 a태그의 차이점 css 전처리기란? @mixin으로 공통된 css스타일 폼을 만들고 @include {폼이름} 으로 사용할수있다

2022년 11월 1일
·
0개의 댓글
·

코드카타 1

문제twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요.nums: 숫자 배열target: 두 수를 더해서 나올 수 있는 합계return: 두 수의 index를 가진 숫자 배열예를 들어,n

2022년 10월 31일
·
0개의 댓글
·

indexOf,slice

function getPrefix(str) { const 으 = str.indexOf('-'); return str.slice(0,으)}console.log(getPrefix('BTC-KRW'))indexOf 는 ()안의 개체가 str안에서 몇번째에 위치해있는지

2022년 10월 28일
·
0개의 댓글
·

Replit 33. JS 응용

클릭하면 이벤트가 일어남 ex) 로그인버튼, 검색버튼비밀번호가 빈칸이거나 5글자 미만이면 경고창에 비밀번호를 입력하세요.비밀번호 확인칸이 비어있으면 비밀번호 확인을 입력해주세요.비밀번호칸과 비밀번호 확인칸의 값이다르면 경고창에 비밀번호 틀림출력 후 thisIsPW 입력

2022년 10월 21일
·
0개의 댓글
·

개발자 도구 - Network

1. Network 패널의 기능 Network 패널은 Elements, Console, Application 과 함께 dev tool에서 가장 빈번하게 사용되는 패널이다. 특정 사이트에서 통신하고 있는 모든 목록을 보여준다. 또한 페이지를 표시하는데 필요한 각각의 작업

2022년 10월 21일
·
0개의 댓글
·