본문 바로가기

전체 글

 (91)
React에서 styled components 사용하기 https://styled-components.com/ styled-components CSS for the Age styled-components.com styled components는 css 페이지를 따로 만들지 않고, javascript 안에서 편하게 스타일을 적용할 수 있게 해준다. css가 적용된 컴포넌트를 사용자 정의 이름으로 생성해 코드의 가독성을 높여준다. styled-component 설치 명령어(in terminal) npm i styled-components styled-component 사용법 styled-component를 설치했으면, 사용할 페이지에 import 해줘야 한다. import styled from "styled-components"; 1. 스타일 적용된 태그 생성하..
11720(숫자의 합 구하기) 난이도: 브론즈5 N개의 숫자가 공백 없이 쓰여있을 때, 이 숫자를 모두 합해 출력하는 프로그램을 작성하는 문제. https://www.acmicpc.net/problem/11720 11720번: 숫자의 합 첫째 줄에 숫자의 개수 N (1 ≤ N ≤ 100)이 주어진다. 둘째 줄에 숫자 N개가 공백없이 주어진다. www.acmicpc.net [풀이전략] 1. string으로, 공백 없이 쓰인 숫자를 입력받는다. 2. string을 한글자씩 char로 변환한다. 3. char를 int형으로 변환해 누적합을 구한다. [핵심 포인트] 아스키 코드에 대한 이해가 필요하다. * '0'의 아스키코드 = 48이므로 '0'-48=0, '1'-48=1, ... 이런식으로 char형 문자에 48을 빼면 원하는 숫자값 in..
Inflearn 9주차 - React 실행을 위한 Docker 실습 1. 도커란? 도커란 컨테이너를 사용해 응용 프로그램을 더 쉽게 만들고, 배포하고, 실행할 수 있도록 설계된 도구이다. 컨테이너 기반의 오픈소스 가상화 플랫폼이며 생태계이다. 도커를 쓰는 이유는, 어떤 프로그램을 다운 받는 과정을 간단하게 만들기 위해서다. 만약, 도커 없이 프로그램을 받아 실행한다면? Redis를 받는 과정을 통해 Docker 사용 유무에 따른 차이점을 살펴보자. Redis 홈페이지로 이동 -------> redis.io wget이 없기 때문에 redis installl시에 에러가 발생했다. 그럼 다시 wget을 설치하고, redis를 설치하고, 또 의존성 문제 등으로 다운에 실패하면 다시 부가적인 것들을 설치하고... 반복하다보면 굉장히 번거롭고 설치하는데 많은 어려움을 겪을 것이다...
백준 - 11723 백준 11723번(집합) 집합 add, remove, toggle, check 등의 연산을 수행하는 코드를 구현해야하는 문제이다. 문제에서 요구하는대로 기능을 구현하는 것 자체는 c++ vector, STL을 사용했기 때문에 쉬웠지만, 처음 작성한 코드로는 시간초과가 났었던 문제. 코드의 효율성을 개선하는게 통과의 관건이었다. #include #include #include #include #include using namespace std; void add(int num, vector &set) { //num이 vector에 존재하지 않는 경우 if (find(set.begin(), set.end(), num) == set.end()) { set.push_back(num); } } void remove..
React 스터디 - Redux 리덕스란? Redux는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리이다. Redux는 Satate를 관리하는 라이브러리이다!! [Redux의 data flow] Action -> (Call the reducer) -> Reducer ->(Update Store) -> Redux Store -> (Render new view) -> React Component ->(Dispatch Synchronous Action) ->다시 Action으로 회귀... *Action: 간단한 자바스크립트 객체이다. 여기에는 우리가 수행하는 작업의 유형을 지정하는 type 속성 있다. 선택적으로 redux 저장소에 일부 데이터를 보내는데 사용되는 payload 속성을 가질 수 도 있다. *Reducer: 애플리케이션..
Git 초기 설정 https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EC%B5%9C%EC%B4%88-%EC%84%A4%EC%A0%95 Git - Git 최초 설정 Vim과 Emacs, Notepad++은 꽤 인기 있는 편집기로 개발자들이 즐겨 사용한다. Mac이나 Linux 같은 Unix 시스템, Windows 시스템에서 사용 가능하다. 여기서 소개하는 편집기들이 불편해서 다른 편집기를 사 git-scm.com 1) 사용자 정보 *username과 useremail 설정 git config --global user.name "username" config --global user.email seulgi.baek@dgu.ac.kr *설정 확인 ..
Inflearn 7주차 - Next.js와 TypeScript [SSR vs CSR] 1) Client Side Rendering 서버에서 처리 없이 클라이언트로 보내주기 때문에 JavaScript가 모두 다운로드 완료되고, 실행을 마치기 전까지는 사용자는 빈 화면을 보고 있게 된다. *CSR이 왜 좋은가? SEO 대응에 용이하다. +) SEO 대응에 대한 추가적인 설명 SEO 대응 검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다. CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 meatadata가 바뀌었다. (이전 크롤러들은 자바스크립트를 실행시키지 않았었기에 SEO 최적화가 필수적이었다. 구글이 그 트렌드를 바꾸고 있다고 한다.) SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크..
공개 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: 삭..

티스토리툴바