본문 바로가기

전체 글

(91)
백준 - 9012, 9613, 2309 https://github.com/seulgib/Clipper_Baekjoon/tree/main/Baekjoon
Inflearn 6주차 - TDD(테스트주도개발) TDD(Test Driven Development)란? 테스트 주도개발이란, 실제 코드 작성하기 전 테스트코드를 작성하는 단계이다. 테스트 코드 작성 후 해당 테스트 코드를 Pass할 수 있는 실제 코드를 작성한다. 즉, 정리하면 테스트하고자하는 기능의 테스트 코드 작성 -> 테스트실행 Fail -> 테스트 코드에 맞는 실제 코드 작성-> 테스트 실행 Pass 의 순서로 진행된다. 이걸 왜 할까? TDD를 하므로 많은 기능을 테스트하기에 소스 코드에 안정감 부여 디버깅 시간 감소 및 실제 개발 시간 감소 더욱 클린한 코드 작성 React Testing Library란? 구성 요소 작업을 위한 API를 추가해 DOM Testing Library 위에 구축된다. *DOM Testing Library: DOM..
Github Error error: Pulling is not possible because you have unmerged files. hint: Fix them up in the work tree, and then use 'git add/rm ' hint: as appropriate to mark resolution and make a commit. 로컬과 원격이 같은 파일을 수정했을 시 나오는 에러. merge되지 않은 파일이 있어서 pull을 할 수 없다는 뜻이다. 1) git stash 정상적으로 merge를 못한 파일들에 대한 정보를 확인한다. 2) git commit -am "" git commit -am "커밋 내용" git commit --ammend는 직전에 남긴 커밋을 수정하는 지시어다. git pull 해..
CSS에서 사용하는 단위 정리(반응형) [단위] -em: 각 부모의 폰트사이즈를 상속받아 점점 커짐. ex) body{font-size: 10px;} > div{font-size: 1.5em;} > h1{font-size:2em;} -> body의 자식요소가 div라면 10*1.5=15px로 적용, h1이 div의 자식요소라면 15*2=30px로 적용 -rem: 최상위태그에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html 최상위태그의 값을 기준으로 상대적 글자크기가 지정되지, em처럼 각 부모요소를 연속적으로 상속받지 x ***반응형*** 이번에 리액트로 웹앱을 개발하면서 꼭 필요했던 단위 뷰포트의 너비값과 높이값에 맞게 사용할 수 있음. -vh: 높이값의 1/100 단위 ex) 브라우저 높이값이 900px이면, 1vh는 그의 1/..
백준 4주차 백준 풀이 코드 올라간 깃허브 링크입니다. https://github.com/seulgib/Clipper_Baekjoon/tree/main/Baekjoon
Inflearn 4주차 NetFlix 앱 만들기 - part1 1) The Movie DB API 생성 넷플릭스 애플리케이션을 만들기 위해선 영화 정보를 담은 API를 가져다 써야하므로, TMDB라는 사이트에서 영화 정보에 대한 openAPI를 가져다 쓸 것이다. 아래 사이트 접속해서 회원가입 한 후 프로필 사진 클릭 > Settings > API 들어가면 API 키를 복사할 수 있다. https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 넷플릭스 애플리케이션 작업 폴더 src에 api 폴더를 생성한 후 위에서 생성한 ..
Inflearn 3주차 React Component -Class Component: 더 많은 기능 제공, 더 긴 코드 양, 더딘 성능, 더 복잡한 코드 -Functional Component: Class Component의 반대 성질 함수형에서는 리액트의 생명주기를 쓰지 못했다. -> React 16.8 Hooks 업데이트로 인해 함수형 컴포넌트에서도 생명주기를 사용할 수 있기에 데이터를 가져오고 컴포넌트 시작하자마자 API도 호출하고 등등을 할 수있게 되었다. 그리고 함수형 컴포넌트를 쓰면 React Hooks를 이용해 리액트 생명주기를 사용하면서 코드를 훨씬 간결하게 할 수 있다. ex) const [value, setValue]=useState(""); -> 첫번째 매개변수는 변수 이름이고, 두번째 매개변수는 첫번째 변수..
Github 협업 환경 만들기 [용어 정리] fork: 포크로 찍어서 가져오기 upstream: 원본 위치(상류) pull: (변경사항) 땡겨옴 pull request(PR): 수정사항 원격저장소로 보내기 conflict: 충돌 merge 합치기 1) 기본 셋팅 팀장: 로컬에서 프로젝트 기본 셋팅->깃허브 레포지토리 업로드 팀원: 핌장 레포를 fork해옴-> fork해온 것 본인 로컬에 clone하기 -> 로컬에서 돌아가게 셋팅 후 확인 2) 팀원이 만든 코드 합치기 팀장 팀원: 로컬에서 코드 수정 후 -> fork 떠온 본인 레포에 push -> 팀장 레포 지정 브랜치에 pull request를 보냄-> 충돌나는 거 없으면 Able to Merge -> 권한 있는 사람이 Merge 진행 *만약 Conlict이 뜬다면?(Can't a..