분류 전체보기

자바스크립트로 알고리즘 문제를 해결하는 연습을 해야겠다는 생각에 가장 쉬운 왕초보 문제부터 풀어볼 것이다 그 전까지 알고리즘은 전부 다 자바로 풀었기 때문에 매우 쉬운 문제임에도 자바스크립트로 해결하는게 헷갈린다.. 오늘 처음으로 자바스크립트를 사용한 알고리즘 문제 풀이 연습을 하였고 그 코드를 올려보려고 한다 A와 B의 값을 입력받아 더해서 출력만 하면 되는 문제이다 자바스크립트를 사용해서 백준 문제를 풀 때에는 초반에 세팅 코드가 몇줄 필요하다 구글링을 통해서 세팅 코드를 보고 적용해보았다 아래는 정답 코드이다 const fs = require('fs'); const inputData = fs.readFileSync(0, 'utf8').toString().split(' '); const A = par..

오늘은 고양이 사진 검색 사이트 해설의 마지막 강의인 추가 요구 사항 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 이벤트 발생 시..

오늘부터 일주일 동안 프로그래머스의 프론트엔드 채용 과제였던 '고양이 사진 검색 사이트' 해설 강의가 진행된다 이번 강의를 통해서 바닐라 자바스크립트만을 이용해서 새로운 기능을 구현해 과제의 요구사항을 충족시켜보면서 프론트엔드 개발 역량을 기를 수 있을 것이라 생각한다 과제 해설 강의를 들으며 중요한 내용, 에러 발생, 어려운 부분 등을 기록해두려고 한다 이번주도 화이팅! # 미션 1 # 반응형 웹 유저가 사용하는 디바이스의 가로 길이에 따라 검색 결과의 row 당 column 갯수 변경 992 px 이하 : 3개 768px 이하 : 2개 576px 이하 : 1개 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘리기 미디어 쿼리 사용 @media screen and (m..

프로그래머스 프론트엔드 데브코스 과정인 클라우딩 어플리케이션 엔지니어링 교육을 시작한지 한달이 되었다 OT에서 데브코스의 진행 방식에 대한 설명을 들은게 며칠 전 같은데 벌써 한달이 지났다니 시간이 참 빠르다 처음 한달동안은 HTML, CSS, Javascript 의 기본 문법과 실습이 진행되었다 알고 있던 내용을 복습하기도 하고, 잘 모르던 개념에 대해서 배우기도 하면서 기본 개념을 쌓을 수 있는 시간이었다 한달 간의 과정을 되돌아보면서 1차 회고를 적어보고자 한다 # 프로그래머스 데브코스 1차 회고 # 데브코스 시작 프로그래머스 스쿨 페이지에 들어가자마자 보이는 나의 프로필이다 코린이 탈출을 위해서 한 걸음씩 나아가는 중이다 앞으로 121 일 정도 남았다! 이 시간도 금방 가겠지? # 나름 열심히 한..

가계부 서비스의 기능을 추가로 구현하는 날이다 유저가 가계부 서비스를 이용하면서 자산을 입력하고 소비 내역을 등록하는 등의 필수 기능들을 구현하면서 가계부 서비스를 완성시켜보는 시간이다 강의 실습을 잘 따라하면서 열심히 해봐야지! # 가계부 서비스 기능 개발하기 # 작업 정리 # User Story 현재 자산이 입력되어있지 않은 경우, 자산을 입력할 수 있다 현재 자산이 입력되어 있는 경우, 자산을 새로 입력할 수 없다 현재 자산은 0원 이상 입력해야 한다 현재 자산을 입력해야 소비내역을 입력할 수 있다 # User Action # Load 최초 진입 1. 현재 자산 금액을 조회한다 : 로딩 -> 성공 / 실패 (성공 / 실패 모두 feedback을 주어야 한다) 2. 현재 자산의 존재 여부를 확인한다 ..