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

자바스크립트는 정말 이상해..

이거 정답이 왜 "banana"? 정말 화가 난다 화가 나... 우선 string 앞에 + 연산자가 붙으면 자바스크립트는 해당 string을 숫자로 변환하려고 하는데 "a"는 숫자로 변환할 수가 없으므로 NaN(Not a Number)를 반환하는 것이다. 그 후

2023년 7월 28일
·
1개의 댓글
·
post-thumbnail

react-slick breakpoint, customPaging 설정하기

프론트엔드 개발을 하다보면 캐러쉘이라고도 불리는 slider를 구현할 일이 정말정말 많은데 이 때 우리를 정말 편리하게 해주는 갓갓갓라이브러리가 있다. 바로 ✨slick✨이다. https://www.npmjs.com/package/react-slick WOW…! 어

2023년 5월 2일
·
0개의 댓글
·
post-thumbnail

[프로그래머스] 숫자의 표현 - 자바스크립트

Finn은 요즘 수학공부에 빠져 있습니다. 수학 공부를 하던 Finn은 자연수 n을 연속한 자연수들로 표현 하는 방법이 여러개라는 사실을 알게 되었습니다. 예를들어 15는 다음과 같이 4가지로 표현 할 수 있습니다.1 + 2 + 3 + 4 + 5 = 154 + 5 +

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

[프로그래머스] 최소직사각형 - 자바스크립트

명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니

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

[프로그래머스] 다음 큰 숫자 - 자바스크립트

자연수 n이 주어졌을 때, n의 다음 큰 숫자는 다음과 같이 정의 합니다.조건 1. n의 다음 큰 숫자는 n보다 큰 자연수 입니다.조건 2. n의 다음 큰 숫자와 n은 2진수로 변환했을 때 1의 갯수가 같습니다.조건 3. n의 다음 큰 숫자는 조건 1, 2를 만족하는

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

Error: input image exceeds pixel limit

포트폴리오를 새로 만들면서 gif파일을 넣었는데 local환경에서는 잘 보이지만, 배포 후에 모든 gif파일이 엑스박스로 뜨는 에러가 발생했다. 처음에는 경로 문제인가 싶어서 경로를 이렇게 저렇게 바꿔봤는데 그대로 엑박...^^jpg나 png 파일은 똑같이 경로 설정을

2022년 9월 27일
·
0개의 댓글
·
post-thumbnail

네이밍 컨벤션

이상적인 코드의 모습이란? 코드 그 자체로 다 설명이 되는 코드. 예를 들어, 팀 단위로 협업을 할 때 팀원들이 읽기만 해도 무엇인지 이해가 되고 코드가 무엇을 하는지 물어볼 필요도 없이 이해가 되는 코드.

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

이벤트 루프(Event Loop)란?

이벤트 루프에 대해 알기 위해서는 우선 자바스크립트의 동작원리에 대해 이해하고 있어야 한다.

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

TypeScript - type과 interface의 차이

기본적인 사용 방법에는 큰 차이가 없다. 다만, interface는 객체의 타입을 지정하기 위해 고안된 방법이다.선언적 확장을 통해 새로운 interface를 만들지 않고, 이미 존재하고 있는 NewPersonType의 속성을 확장해나갈 수 있다.interface를 사

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

포트폴리오 만들기(1) - next.js, typescript, tailwindcss 설치

취업준비를 하며 이력서를 쓰다보니 뭔가 부족한 느낌이 들어 프로젝트내용이 좀 더 구체적으로 들어간 포트폴리오를 만들면 좋겠다는 생각이 들었다.그런데 예\~\~~ 전에 사전스터디 과제로 만들었던 자기소개페이지가 나름 쓸만하다는 걸 발견했다.⭐️자기소개페이지 작성글⭐️무려

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

기업협업 2주차 - query 공부 / 프로젝트 시작

지난 포스팅에서 데이터구조를 여러 번 짜보면서 location이 상위 collection으로 들어가야 할지, 유저/상품에 대한 field값으로 들어가야할지에 대한 고민을 작성했었다. (기업협업 1주차 - NoSQL과 트리구조 이해하기 👈지난 포스팅 참고) 그 고민에

2022년 8월 23일
·
0개의 댓글
·
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개의 댓글
·