프로그래머스 데브코스

오늘은 2월의 시작이다 2월의 시작을 맞이하여 오늘부터 리액트 강의가 시작된다 옛날에 직접 구매해서 봤던 강의와 동일한 내용이라 복습하는 차원에서 기초부터 보면서 다시 한번 리액트의 개념에 대해 정리하고 간단한 토이 프로젝트를 만들어보려고 한다 2월도 화이팅! # React 소개 # React 란? 지금은 Meta가 된 Facebook이 개발한 오픈소스로 자바스크립트의 UI 라이브러리이다 즉, 자바스크립트를 알아야지 리액트를 쓸 수 있다 # Node.js란? 자바스크립트는 어떻게 실행될까? 브라우저에 내장되어 있는 자바스크립트 엔진을 이용하여 실행된다 하지만 브라우저들은 서로 다른 엔진을 사용한다 아래는 각 브라우저 별로 사용하는 내장 엔진의 종류이다 크롬 브라우저가 가진 v8이 가장 대표적인 자바스크립..

오늘은 지난번 강의에 이어서 피그마에 대한 심화 내용을 배우게 된다 실습도 진행하니 집중해서 잘 듣고 정리해야겠다 # 오토레이아웃 오토레이아웃이란 CSS의 flex와 유사한 기능이다 자주 사용되니 잘 알아두자 ① 오토레이아웃으로 설정해주고 싶은 요소들을 드래그한다 ② 단축키 shift + a 를 눌러 하나의 Frame으로 묶인 오토레이아웃으로 설정해준다 오토레이아웃 내의 요소들은 자동으로 정렬된다 오토레이아웃을 설정하면 요소의 크기가 늘어나거나 줄어들 때 자동으로 맞춰준다 # 오토레이아웃 실습 # input 컴포넌트 생성 1. text를 입력한 후 shift + a 로 오토레이아웃 설정을 한다 2. text 컴포넌트의 margin, padding, fill, stroke 값을 적절하게 설정한다 ▶bord..

오늘의 강의는 알고리즘 4문제를 해결하는 것이다 Level0 부터 Level2 까지 총 4문제를 해결하고 구현 방법을 간단히 정리하겠다 소스코드 및 더욱 구체적인 해결 방법은 알고리즘 카테고리에 따로 정리할 것이다 일단 익숙한 자바로 문제를 해결해보았다 자바스크립트로 코드를 변경해보고 그것도 따로 포스팅하도록 하겠다 모든 문제는 자바를 기준으로 정리하였다 # [Lv0] 문자 개수 세기 아스키 코드에 대해서 알면 쉽게 풀리는 문제이다 아스키 코드로 알파벳을 숫자로, 숫자를 알파벳으로 변환할 줄 알아야 한다 # [Lv0] 이어 붙인 수 자바를 기준으로 String을 int로, int를 String으로 변환하여 코드를 짜면 금방 풀 수 있는 문제이다 (자바스크립트는 어떨지 아직 모르겠다) # [Lv1] 크기가..

이번주부터 피그마에 대한 강의가 진행된다 옛날에 프로젝트를 하면서 피그마를 사용해본 적이 있었는데 아무래도 디자인 감각이 없고 섬세함이 부족한 나에게는 약간은 어려운 툴이었다 하지만 이번 기회에 피그마를 제대로 배워서 멋진 디자인을 만들어봐야겠다 # 피그마 소개 피그마는 다양한 UX 툴 중 압도적인 사용량을 보여주는 가장 인기있는 디자인 툴이다 피그마는 백터 기반의 툴이다 -> 확대, 축소 시에도 이미지의 깨짐이 없다 # 디자인 기초 # 컬러 디자인에서는 색상이 주는 느낌이 중요하다 디자인 시 색상이 주는 느낌을 고려해서 디자인 해야한다 # 대비 # 보색대비 서로 반대되는 색을 인접하게 위치시키는 것 색 조합이 어려울 수도 있다 # 유사대비 유사한 색을 인접하게 위치시키는 것 조화롭고 차분한 느낌을 주며..

오늘은 고양이 사진 검색 사이트 해설의 마지막 강의인 추가 요구 사항 3가지를 해결하는 내용이다 마지막 강의에서는 엄청 중요한 기능은 아니지만 사용자 경험을 향상시킬 수 있는 추가적인 기능 구현에 대해 진행된다 이번 강의를 통해서 더 많은 것을 알아가야겠다 # 추가 요구 사항 해결 # 추가 요구 사항 1 1. 최근 검색어 input 창에 마우스 호버시에만 보이도록 하기 SearchInput 컴포넌트 내에 SearchInputSection 클래스를 생성한다 상단의 input과 최근 검색어 부분이 한 section 안에 위치되도록 한다 CSS 설정을 통해서 input 창에 마우스 hover 시에만 최근 검색어가 보이도록 설정한다 # SearchInputSection에 적용한 CSS .SearchInputSe..

지금까지 배운 고양이 사진 검색 사이트에 대한 내용을 바탕으로 모의 테스트를 진행하는 날이다 최종 모의 테스트, 과제 테스트로 총 두개의 테스트에 대한 후기를 작성해보고자 한다 # 테스트 후기 # 최종 모의 테스트 최종 모의테스트는 2시간 동안 두개의 필수 요구사항을 해결하는 문제였다 프로그래머스에서 출제한 모의 테스트이기 때문에 자세한 문제 내용이나 코드를 첨부할 수는 없을 듯하여 문제를 풀이하며 기억에 남는 것, 중요했던 것, 헷갈린 개념 등을 정리해보려고 한다 (혹시나 해서 테스트 결과 보기로 들어가서 확인해봤는데 코드가 바꼈네..?!) # 필수 과제 1 첫번째 필수 과제는 검색어를 자동 완성하는 것이다 input 창에 검색어를 누르기만 하면 바로 밑에 해당 검색어가 포함된 데이터들을 리스트 형식으..

# 미션 3 # api 요청 결과 리팩토링 및 async - await 도입 에러 처리할 때는 백엔드팀과 회의를 통해서 어떤 에러를 어떻게 처리할 것인지 조율해야 한다 이번 실습에서는 500 에러를 처리하는 방법에 대해서만 다루겠다 const REQUEST_ERROR = { 500: { msg: "요청 실패" }, }; //request에서 에러처리까지 한번에 가능 const request = async (url) => { try { //result의 값이 생길 때까지 아래 코드는 대기 const result = await fetch(url); if (result.status === 200) { return result.json(); } else { throw REQUEST_ERROR[result.sta..

오늘은 저번에 이어서 고양이 사진 검색 사이트 두번째 해설 강의로 새로운 기능을 추가로 구현해나가는 날이다 기능 구현하는 방법을 잘 공부해두어야겠다 오늘도 화이팅! # 미션 2 # 모달 제어 모달 클릭 시 해당 모달에 대한 상세 정보 띄우기 + css 수정 1. imageInfo - 모달 상세 정보 보여주는 메소드 작성 //모달에서 상세 정보 보여주기 //async - await 적용 가능 showDetail(data) { // 상세 정보 요청 api.fetchCatDetail(data.cat.id).then(({ data }) => { // 정보 업데이트 this.setState({ visible: true, cat: data, }); }); } 2. App.js 수정 - onClick 이벤트 발생 시..