본문 바로가기

분류 전체보기

 (124)
공개 SW - 백엔드 API 통신 기초개념 정리 *학교 프로젝트 과목을 들으면서 백엔드 API 통신을 처음 해보게 되었다. 까먹었을때 수시로 다시 찾아보기 위해 블로그에 정리해본다! *비동기(Asynchronous) 함수 -function앞에 async를 붙이면 해당 함수는 항상 Promise를 반환 -Promise 아닌 것도 Promise로 감싸 반환 -await: async 함수 안에서만 동작 => javaScript는 await 키워드를 만나면 Promise 처리가 될 때까지 기다린다. -await 함수는 thenable 객체를 받음 -> then method가 있는 호출 가능한 객체(.then/.catch문 사용으로 간편한 예외처리) *CRUD란? 특정 객체에 대한 *Create: 등록 *Read: 조회 *Update: 수정 *Delete: 삭..
백준 - 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(""); -> 첫번째 매개변수는 변수 이름이고, 두번째 매개변수는 첫번째 변수..

티스토리툴바