목록전체 글 (170)
min
오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. flex 정말 너란 친구는..... 최고야....! 오늘의 가장 큰 주제는 css에서 flex였다. css에서 flex란 정말 중요한 개념이다. 사물들을 배치하는데 있어서 즉 정렬 하는 데 있어서 중요한 속성이다. 특히 비율과 관련된 부분이 flex 핵심인데 이번 프로젝트에서는 그 비율과 관련해서 여러 이슈가 있었다. 내가 프로젝트를 보면 다음과 같은 페이지가 구현되어야 한다. 여기서 가장 큰 문제는 저 3개의 비율을 어떻게 조정할 것인가 였다. 특히 저 큰 박스가 가운데에 있고 나머지 2개의 박스가 양옆에 가로로 배치되어야 한다. 이때 나는 저 3개의 박스를 담는 하나의 박스를 만들고 이 하나의 박스에서 3..
오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. test code and tdd 이번에 코드 리뷰 사이트를 만들면서 가장 시간을 많이 든 부분은 디버깅이었다. 어떤 기능을 만들면 해당 기능이 정상적으로 작동하는지를 확인하기 위해서 일일히 테스트를 진행했던 것이 가장 시간이 많이 든 부분이었다. 그래서 나는 이번 기회에 테스트를 자동화할 수 있으면 좋을 거 같다는 생각이 들었다. 그래서 테스트 코드에 대해서 알아봤으며 테스트 자동화에 대해서 찾아보았다. 그래서 오늘은 테스트코드 작성과 tdd에 대해서 알아볼려고 한다. 먼저 tdd란 데스트 주도 개발이다. tdd의 흐름은 다음과 같다. RED : 실패하는 테스트 코드를 작성한다. (즉 내가 만들려고 하는 기능..
https://school.programmers.co.kr/learn/courses/30/lessons/12980 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(n) { let answer = 0; while(n > 0) { if(n % 2 === 1) { n -= 1; answer += 1 } n /= 2; } return answer; } function solution(n){ if(n === 1) return 1; const nArr = Array.from(n.toString(2)); return nArr.reduce..
https://school.programmers.co.kr/learn/courses/30/lessons/12981 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(n, words) { var answer = []; let data = [words[0]]; for(let i = 1; i < words.length; i++) { if(words[i].at(0) !== data[data.length - 1].at(-1)) { return [i % n + 1 , Math.floor(i / n) + 1] } else if (data...
https://school.programmers.co.kr/learn/courses/30/lessons/67256 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(numbers, hand) { var answer = ''; let numbersIndex = { 1 : [0,0], 2 : [0,1], 3 : [0,2], 4 : [1,0], 5 : [1,1], 6 : [1,2], 7 : [2,0], 8 : [2,1], 9 : [2,2], 0 : [3,1], "*" : [3,0], "#" : [3,2], }; let left = ..
오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 1. 태그 시스탬 도입 : 코드 리뷰 사이트를 만들 때 중요한 것은 게시글을 보고 어떤 글인지 지레짐작이 가능해야 한다는 점이다. 실제로 많은 게시글 사이트의 경우에는 태그라는 시스탬을 통해서 이 글이 대충 어떤 글인지에 대한 지레짐작이 가능하도록 만들어놨다. 따라서 나도 태그 시스탬을 통해서 위 문제를 해결하려고 하였다. 태그 시스탬을 도입하면서 가장 어려웠던 부분은 onKeyDown 이벤트 핸들러였다. 태그 시스탬의 동작원리는 다음과 같다. input에 문자열을 입력한다. input에 엔터키를 눌렀을 때 해당 문자열을 태그로 변환한다. 변환한 태그를 태그목록에 추가한다. 위 과정을 보면 onKeyDown 헨들러가..
오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 1. 페이지네이션 버튼 구현 페이지 네이션 버튼 구현을 진행하면서 굉장히 어려웠던 점은 좌우 방향표를 눌렀을 때 현재 위치에 따라 disabled 또는 abled 처리를 진행해야 한다. 이는 정말로 어려운 것이었다. 왜냐하면 상위 부모 컴포넌트에 이에 대한 로직을 작성하고 이를 자식에게 props로 넘겨줘서 이 props에 따라서 조건부 css를 해야 하기 때문이다. 그래서 나는 이를 해결하기 위해서 부모 컴포넌트인 review list 컴포넌트에다가 로직을 다음과 같이 작성했다. const onClickPages = (number) => setCurrPage(number); const onClickPrevPages..
오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 다뤄볼려고 한다. 1. 반응형.... 정말 하.... 재밌다 ㅎㅎ : 내가 만든 프로젝트 한계점은 여러 사용자의 유저들이 이 프로젝트를 사용할 수 없다는 것이다. 즉 데스크탑을 기준으로 프로젝트를 보여주기 때문에 테블릿 , 모바일 환경에서 들어오는 사람들은 이 프로젝트를 보지 못한다. 그래서 나는 이 프로젝트의 사용성을 높이기 위해서 반응형을 구현했다. 반응형을 구현할 때 사용한 css 전처리기는 scss 였는데 이 scss가 굉장히 간단해서 생각보다 반응형을 구현하는데 어렵지 않았다. 실제로 반응형을 위한 로직은 다음과 같다. $breakpoint-mobile: 335px; $breakpoint-tablet: 758px; $breakpoint-..