하나씩 배워나가는 개발일지

SW Expert Academy SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요! swexpertacademy.com 문제 1부터 N까지의 숫자에서 홀수는 더하고 짝수는 뺐을 때 최종 누적된 값을 구해보자. [예제 풀이] N이 5일 경우, 1 – 2 + 3 – 4 + 5 = 3 N이 6일 경우, 1 – 2 + 3 – 4 + 5 – 6 = -3 접근방식 N이 입력되면 1~N까지 숫자 중 홀수는 +, 짝수는 - 처리를 하고 전부 더한 값을 출력하는 문제 1~N까지의 숫자를 arr라는 배열에 저장 arr를 돌면서 2로 나눴을 때 나머지가 0이면(짝수), ans_arr에 (해당 값-2*해당 값) 수식을 통해 해당 값에 마이너스를 붙인 값을 지정 나머지가 0이 아니면(홀수) 해당 값을 그..

SW Expert Academy SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요! swexpertacademy.com 문제 N=2a x 3b x 5c x 7d x 11e N이 주어질 때 a, b, c, d, e 를 출력하라 접근방식 배열 num_arr = [11, 7, 5, 3, 2] 생성 배열의 각 값들이 몇 번 들어가는지 확인할 배열 ans_arr = [0, 0, 0, 0, 0] 생성 N이 주어지면 num_arr를 순회하면서 N을 각 값들로 나눴을 때 나머지가 0인지 확인 나머지가 0이 아니면 N을 구하는 데 사용되는 숫자가 아니므로 값을 0으로 설정 나머지가 0이면 while True를 통해 나머지가 0이 아닐 때 까지 ans_arr[i]에 1을 더해주고 N을 num_arr..

리덕스란? 자바스크립트 어플리케이션을 위한 상태 관리 라이브러리 리덕스 Data Flow Action: 간단한 JS 객체. 작업 유형을 지정하는 type 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 payload 속성도 가질 수 있음 Reducer: 어플리케이션 상태 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수. 인수로 조치를 취하고 store 내부 상태 업데이트함 Redux store: 이들을 하나로 모으는 객체 저장소는 어플의 전체 상태 트리를 보유. 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것. Redux store는 클래스가 아님. 몇 가지 메소드가 있는 객체일 뿐 Dispatch: 스토어 내장 함수 중 하나로 리듀서에..

SW Expert Academy SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요! swexpertacademy.com 문제 각 날짜별로 매매가를 알고 있다고 가정 후 최대 이익을 구하는 문제 원재는 연속된 N일 동안의 물건의 매매가를 예측하여 알고 있다. 당국의 감시망에 걸리지 않기 위해 하루에 최대 1만큼 구입할 수 있다. 판매는 얼마든지 할 수 있다. 예를 들어 3일 동안의 매매가가 1, 2, 3 이라면 처음 두 날에 원료를 구매하여 마지막 날에 팔면 3의 이익을 얻을 수 있다. 접근방식 각 테스트 케이스마다 배열의 마지막부터 접근 sell 변수와 ans 변수를 0으로 설정 먼저 배열을 마지막 값을 sell 변수에 할당 배열을 돌면서 만약 sell 값이 현재 인덱스의 값보다 ..

리액트에서 한 컴포넌트 안에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법에는 여러가지가 있음 React Context란? Context는 모든 수준에서 수동으로 props를 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공 React Context는 컴포넌트 트리의 깊이에 관계없이 props를 전달하지 않고도 컴포넌트에 데이터를 제공 Context는 전역 데이터를 관리하는 데 사용 ex) 전역 상태, 테마, 서비스, 사용자 설정 등 Context API란? 전역 데이터를 Context에 담아서 사용하려면 먼저 Context를 생성해야 함 const MyContext = React.createContext(defaultValue); Cont..

이번에는 리액트를 사용해 디지니플러스 웹사이트를 만들 예정이다. 만들기 전에 필요한 기초 부분을 살펴보자. The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기 Axios란? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 Axios 사용방법 axios 모듈 설치: npm install axios --save Axios 인스턴스화 하는 이유 중복된 부분을 계속 입력하지 않아도 되기 때문에 cf) js파일에 'racfe' 치면 functional한 컴포넌트 바로 생성! Styled Component란? CSS-in-JS라고 하는 JS 파일 안에서 CSS를 처리할 수 있게 해주는 대표적인 라이브러리 설치 방법 1. npm - n..

전개연산자란? 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용 배열 조합 const arr1 = [1,2,3]; const arr2 = [4,5,6]; const arr3 = [7,8,9]; const arrWrap = [...arr1, ...arr2, ...arr3]; 객체 조합 const obj1 = { a: 'A'; b: 'B'; } const obj2 = { c: 'C'; d: 'D'; } // 객체 자체가 들어감 const objWrap = {obj1, obj2}; // 객체 자체가 아닌 각각의 값 할당 const objWrap2 = {...obj1, ...obj2}; 전개연산자를 사용하면 기존 배열을 보존할 수 있음 const arr1 = [1,2,3]; const a..

이번 과제로는 JS를 이용한 사진 관리 웹사이트를 만들어보았다. 먼저 기본 화면을 봐보도록 하자. 로그인 화면 관리 시스템 화면 학생 정보 등록 화면 정보 입력 화면 정보 등록 완료 시 화면 학생 프로필 및 수정 화면 학생 정보 수정 화면 수정된 학생 정보 화면 선택 박스 체크 화면 선택한 객체 삭제 화면 학생 정보 부분 리스트(스크롤) 페이지 CSS를 이용한 애니매이션 화면 반응형 화면 [흐름] 다음과 같이 구성했다. 과제 기간은 약 10일로 지난 과제 기간보다 길었지만 생각없이 신청한 공모전, 교내 경진대회 등으로 시간을 다 날려먹어서 과제 할 시간이 약 4일정도밖에 없어서 요구한 필수 기능들만 구현을 했다. 파이어베이스의 파이어스토어 데이터베이스를 사용했고 웹페이지에서 등록하면 해당 객체 정보가 파..

지난 과제로 당근마켓 메인페이지를 만들어보았다. 멘토님께서 다음과 같이 리뷰를 해주셨는데, 내가 만든 웹사이트는 크게 어려운 기능이 없었어서, 코멘트가 따로 필요 없었던 것 같다. 그래서, 이번 리팩토링 시간에 지난 번에 구현하고 싶었는데 못했던 부분인 '반응형 웹사이트'를 만들어보고자 한다. 이게 당근마켓 메인페이지인데, 화면을 일정 크기 이상 줄이면 먼저 서치바가 없어지고 서치 아이콘이 생기고 거기서 더 크기가 줄어들면 리스트들이 없어지고 채팅하기 버튼이 없어지고 메뉴 아이콘이 생긴다. 먼저, 서치바 아이콘과 메뉴 아이콘을 일단 html 코드에 순서대로 넣어주고 화면이 클 때는 "display: 'none'" 으로 안보이게 속성값을 지정해주었다. 채팅하기 그리고 css에서 미디어 쿼리를 사용해 화면 ..

첫 번째 과제로 'HTML/CSS를 이용한 웹사이트 메인페이지 클론코딩'을 진행했다. JS 사용은 권장이었고 필수사항은 HTML과 CSS를 이용해서 메인페이지를 만드는 것이었다. 나는 당근마켓 웹사이트를 만들었고 그 과정에서 알게 된 사실과 어려웠던 점을 적어보려 한다. 내가 만든 웹사이트는 https://aquamarine-mousse-e4a8fd.netlify.app/ 이 주소에서 확인할 수 있다. 나는 수업에서 배운대로 우선 header, main, footer로 영역을 나눠서 개발을 진행했다. header 부분부터 살펴보자. 당근마켓 메인페이지의 헤더는 다음과 같이 구현되어있다. 왼쪽 섹션에는 로고가, 가운데 섹션에는 리스트들이, 오른쪽 섹션에는 서치바와 채팅버튼이 있다. 따라서 나는 header..