profile
프론트엔드 개발자👩‍💻
post-thumbnail

코딩애플 보고 정리한 TypeScript 기본 문법

사수님께서 이번 프로젝트는 next.js와 타입스크립트를 사용해볼거라고 하셨다.넥스트제이에스..타입스크립트... 그게 뭔데...ㅠ당장 오늘부터 개발에 들어가야 하기 때문에 주말동안 부랴부랴 공부해본 내용을 정리해보고자 한다..!^^자바스크립트는 dynamic typin

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

기업협업 1주차 - NoSQL과 트리구조 이해하기

기업협업 1주차의 과제는 noSQL과 firebase에 대한 이해운영중인 웹사이트의 DB구조를 nosql 형식으로 파악하고 모델링해보기우리 웹사이트의 DB구조와 유사한 웹사이트를 찾아보고 DB구조 파악하기firestore에 직접 데이터 넣고 값을 뽑아보며 어떤 게 가장

2022년 7월 25일
·
1개의 댓글
·
post-thumbnail

2차 프로젝트 - ✈️myfaketrip

2차 프로젝트 소개 📍 팀명: my fake trip 📍 클론한 웹사이트: 마이리얼트립 📍 프로젝트 기간: 2022.07.04 ~ 2022.07.15 📍 팀원: FE 4명 / BE 2명

2022년 7월 24일
·
0개의 댓글
·

React - Ant Design

1차 프로젝트 때는 외부 라이브러리 사용 없이 모든 기능을 수작업으로 만들었었다.(ex. 애증의 캐러쉘,,,,)근데 2차 프로젝트에서는 드디어 라이브러리 사용이 가능하다 얏호\~~!!리액트에서 라이브러리를 사용할 수 있게 되어 기쁜 것도 잠시, 스타일값을 적용하고 내가

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

React -Styled Components

이번 2차 프로젝트는 scss 대신 styled component를 이용하여 모든 태그를 스타일링 해보자!$ npm install styled-componentsstyled-components의 styled를 import 해준다.함수 바깥에 컴포넌트로 사용할 이름을 정

2022년 7월 8일
·
0개의 댓글
·

Git Rebase

지금까지는 프로젝트를 브랜치들을 병합할 때 merge를 사용했지만, 오늘 rebase를 통해 병합하는 방법에 대해 배웠다.git rebase를 사용하면 git merge를 사용할 때의 문제점들을 해결할 수 있다.불필요한 merge commit 생성모든 feature b

2022년 7월 5일
·
0개의 댓글
·

1차 프로젝트 - Wesop✨ (회고록)

사실 프로젝트를 시작하기 전에 각자 클론하고 싶은 사이트를 발표하는 시간이 있었다. 정말 많은 사이트들을 살펴보았는데 끌리는 게 없던 와중 내가 자주 사용하는 이솝 화장품이 생각났다. 모던한 느낌의 이솝 이미지처럼 깔끔한 UI가 눈에 들어왔다. 하지만 우리가 연습해

2022년 7월 3일
·
0개의 댓글
·
post-thumbnail

1차 프로젝트 - Wesop✨ (회원가입 모달창)

📍회원가입 버튼 클릭시 모달창 열기 modal이라는 state를 하나 만들고, 회원가입 버튼을 클릭할 때 state값이 true로 바뀌도록 했다. 삼항연산자를 이용해 modal의 값이 true일 경우 모달창이 보이도록 작성했다. 📍 입력되는 input값 받아오기

2022년 7월 3일
·
0개의 댓글
·
post-thumbnail

1차 프로젝트 - Wesop✨ (상세페이지)

상세페이지는 크게 네가지 영역으로 나누어 작업했다. 1\. 제일 상단의 제품이미지+제품소개 부분2\. 이솝 내에서 제공되는 서비스 안내 문구 부분(이 부분은 하드코딩으로 진행했다.)3\. 사용법4\. 제품 추천 슬라이더제품 소개 부분에서 가장 많은 시간을 소요했던 부분

2022년 7월 3일
·
0개의 댓글
·
post-thumbnail

React - 캐러쉘(Carousel) 제작하기

캐러쉘의 어원은 회전목마...라고 동기분이 말해줬다.빙빙 돌아가는 회전목마처럼... 부드럽게 넘어가는 슬라이드를 제작해보자!외부라이브러리를 쓰면 쉽게 만들 수 있지만, 이번 1차 프로젝트에서는 외부라이브러리 사용 없이 구현해보라고 하셔서 쌩으로 제작해보았다..^^우선

2022년 6월 25일
·
0개의 댓글
·
post-thumbnail

2022.06.16의 일기📝

내가 다니는 학원이 있는 위워크 커뮤니티에서는 각종 이벤트를 많이 한다. 그동안은 너무 바빠서 참여해볼 생각을 못했었는데 이번에는 점심시간인 12시부터 1시까지 간단하게 독서모임을 진행한다고 해서 동기분과 같이 다녀왔다.​커뮤니티측에서 준비한 예쁜 도시락을 먹으며 모임

2022년 6월 17일
·
0개의 댓글
·

React - 백엔드와 통신하기

이전 포스팅에서는 백엔드 서버와 통신하기 전이었기 때문에 아이디와 패스워드 값을 임의로 설정한 후 실제 아이디와 패스워드 창에 입력되는 값이 내가 지정한 값과 일치할 때 메인페이지로 화면이 넘어가도록 코드를 작성했었다.오늘은 fetch를 이용해 백엔드 서버에 회원가입

2022년 6월 15일
·
0개의 댓글
·

React - 로그인 기능 구현하기

1) 우선 useState를 이용해 아이디와 패스워드의 초기값을 공백으로 지정해주었다.2) setId와 setPw를 이용하여 input값이 변할 때(onChange) 각 input창에 력되는 내용이(e.target.value)값이 각 id와 pw에 담기도록 했다.아이디

2022년 6월 15일
·
0개의 댓글
·
post-thumbnail

React - useEffect

useEffect는 기본적으로 콜백함수를 인자로 받으며, 크게 두 가지의 형태가 있다. component가 렌더링 될 때마다 매번 함수 실행. 컴포넌트가 맨 처음 화면에 렌더링이 될 때, 그리고 컴포넌트가 다시 렌더링 될 때 실행.컴포넌트가 렌더링 될 때마다 함수가

2022년 6월 13일
·
0개의 댓글
·

code-kata day2

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

2022년 6월 8일
·
0개의 댓글
·
post-thumbnail

React - sass

지금까지 HTML과 CSS, JavaScript로 작성한 문서를 react로 옮기는 과정에서 로그인페이지와 메인페이지의 class명이 겹쳐 css가 중복으로 적용되는 일이 발생했다. React에서는 하나의 html만 존재하기 때문이다.모든 class명을 전부 다르게 해

2022년 6월 8일
·
0개의 댓글
·

React란?

3세대 웹이 나타난 이유? 웹이 발전하면서 유저와의 상호작용이 많아지고 다루어야 할 데이터가 증가 → 웹 애플리케이션의 개발과 유지보수가 어려워지게 되었다. 대표적인 웹프레임워크 & 라이브러리 Angular, Vue - 프레임워크 React - 라이브러리 우리가 리

2022년 6월 7일
·
0개의 댓글
·
post-thumbnail

HTTP

how do we communicate. 컴퓨터가 웹을 이용해 소통을 할 때 필요한... 무언가...Hyper Text: 문서와 문서가 링크로 연결되어 있음을 뜻한다. 구글에서 네이버로 올수 있고 네이버에서 다음으로 갈 수 있는 것은 결국 하이퍼끼리 연결되어 있기 때문

2022년 6월 3일
·
0개의 댓글
·
post-thumbnail

Git & Github

version: 파일에서 수정 변경이 일어났을 때, 이전과는 다른 '버전'이라고 말한다.만약 위와 같이 파일들을 저장하면 여러 명이서 작업할 경우 최종파일에 대한 오해가 생길 수 있다.따라서 파일을 여러 이름으로 저장하는 것이 아니라, 하나의 파일을 일자, 시간, 이름

2022년 6월 3일
·
0개의 댓글
·
post-thumbnail

ERD - 스타벅스 모델링

Entity Relation Diagram의 약자로 흔히 ER 다이어그램이라고 한다.ERD는 모델링의 기초 청사진이라고 할 수 있다.청사진을 잘 짜는 것이 중요한 이유는 처음에 모델링을 잘못하면 이후에 수정하는데 더 많은 비용과 시간이 소요되기 때문에 처음에 모델링을

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