image…

이글을 작성하게된 계기 Hash 알고리즘 문제를 풀다가 Object와 Map으로 선언했을 때 속도에서 차이가 나는 것을 발견했습니다. 코드는 같지만 다른 한쪽은 Object, 다른 한쪽은 Map을 사용한 코드지만 속도에서 명확한 차이를 보였고, 이 문제를 정확하게 알아보고자 포스팅하게 되었습니다. MDN 에서는 다음과 같이 설명합니다. Map, Object…

…

병목현상? 비동기 처리를 겪으면 필수로 겪는 문제인 병목현상에 대해서 알아보려고 합니다. 나무위키에서는 병목현상에 대해서 아래와 같이 설명하고 있습니다. 필자도 제대로 공부를 하기 전에는 비동기 코드를 작성하면서 아무런 문제가 없다고 생각했습니다. 이번 기회에 과거를 반성하며 글로 정리해 보려고 합니다. 비동기 처리 자바스크립트에서는 ES…

깊은 복사에 대해 얼마나 자세히 알고 있을까? 제가 자바스크립트에 관한 책을 읽으면 항상 언급되는 것이 깊은 복사에 대한 문제였습니다. 그만큼 중요하다고 생각하고, 누구나 한 번쯤은 깊은 복사에 대하여 고민해 봤던 적이 있을 것이라고 생각합니다 저는 깊은 복사에 대해 제대로 공부하기 전에는 자바스크립트에서 제공하는 JSON.stringify…

image…

Fact 프로그래머스 거리 두기 문제 다시 풀기 어제부터 이력서, 포트폴리오를 만들고 있는데 뭘 써야 할지 고민이 많다.. 다른 분 들 것들을 참고해서 작성하고 있긴 한데 결국 적는 내용은 나에 대한 것이기 때문에 생각을 많이 하게 된다.. 내가 프로젝트를 하면서 고민하거나 발생했던 문제에 대해서 정리하고 있다. Feelings…

Fact useMemo, useCallback, React.memo에 대해서 공부하기 알고리즘 문제 문자열 압축, 오픈 채팅방, 행렬 테두리 회전하기 리팩토링을 했고, 내일은 거리 두기 확인하기 문제 리팩토링해야겠다. Feelings…

Fact 프로그래머스 2렙 행렬 테두리 회전하기 문제 풀기 프로그래머스 2렙 거리두기 확인하기 문제 풀기 면접 스터디 참여하기 Feelings 역시 주말엔 알고리즘 공부 내가 생각하는 것들을 말로 나타내기 위해선 훈련이 필요하다. 그래서 스터디로 훈련중..ㅎ Findings react hooks api…

Fact 프로그래머스 2렙 오픈채팅방 문제 풀기 프로그래머스 2렙 문자열 압축 문제 풀기 프로그래머스 2렙 멀쩡한 사각형 문제 풀기 나머지 시간은 책을 읽었다. Feelings 오늘 왤케 졸리지..?…

Fact 알고리즘 3문제 풀기 we-study 프로젝트 이미지가 짤리는 문제 파이어베이스 스토리지 사용해서 이미지 받아오기 useMemo, useCallback, react.memo 잘 사용해서 최적화하기 기초부터 완성까지 프론트엔드 책 보면서 최적화할 방법 찾아보고 직접 해보기 Feelings…

Fact AWS route53에서 도메인을 구입하고 도메인을 구입한 것을 AWS route53과 연결했다. 그리고 AWS ACM을 통해서 구입한 도메인의 SSL Certificate를 발급해서 ELB에 SSL Listener을 생성후 ELB security group를 설정하고 ec2 인스턴스 서버에 SSL를 적용했다. 내 ec…

Fact 오늘 하루 종일 배포 문제와 싸웠다.. 원래 CI|CD를 사용해서 자동 배포를 다시 해보려고 했는데, 프런트는 firebase 덕에 배포가 쉽고 서버 하나만 그냥 ec…

Fact 로그인 테스트 리펙토링 퀴즈 검색 테스트 리펙토링 에러 바운더리 처리 Feelings react-query 정말 좋다.. Findings jQuery는 상태(상태 변화)와 DOM이 묶여 있는 구조 (상태와 렌더링이 무관함) React는 상태와 render(DOM…

Fact 퀴즈를 추가하기, 추가한 문제를 가져오기, 소장한 문제를 가져올때, 가장 최근에 생성한 퀴즈순서대로 가져오도록 구현했다. E2E 테스트 전체적인 리펙토링 Cypress에서 URL을 환경변수로 만들어서 사용하려고 했는데, 일반적인 방법으로는 사용을 못해서 아래와 같은 방법을 사용했다. Feelings E2E 테스트 상당히 중독성있다… E2E…

Fact 서버 상태 관리를 모두 react-query로 마이그레이션했다. 프런트엔드 인터뷰 스터디가 끝났다. 성공과 실패를 결정하는 1% 네트워크 원리 책을 1회독했다. 전세 계약을 2년 연장했다. Feelings 한동안 전세 계약 문제, 면접, 시간 등 다양한 이유 때문에 TIL…

let, var, const를 사용하여 생성된 변수들의 차이점은 무엇인가요? var 키워드로 사용하여 선언된 변수는 함수가 생성된 함수나 함수 밖에서 생성된 함수에 전역 오브젝트로 적용됩니다. let과 const는 블록 스코프입니다. 즉, 가장 가까운 중괄호 (function, if-else 블록, for-loop) 내에서만 접근할 수 있습니다. var…

Fact 성공과 실패를 결정하는 1%의 네트워크 원리 1~120페이지 읽고 스터디 프론트엔트 인터뷰 핸드북 스터디 Feelings 성공과 실패를 결정하는…

오브젝트 속성이나 배열 항목을 반복할 때 사용하는 언어 구문은 무엇인가요? Object인 경우 for-in Object.keys() Object.getOwnPropertyNames() 배열인 경우 for 반복 forEach for-of mutable 객체와 immutable 객체 사이의 차이점을 설명하세요. 여기서 말하는 mutable…

Fact 프로그래머스 오픈채팅방 문제를 풀었다. 카테고리별, 좋아요한 퀴즈별, 내가 추가한 퀴즈별, 검색 퀴즈별 페이지네이션을 다시 설정했다. 성공과 실패는 결정하는 1%의 네트워크 원리 1~30페이지 읽기 seedWhale 세미나를 참여했는데, 1시간 30분동안 풀집중해서 들었다. Feelings 이제 프로그래머스…

프로그래머스…

Fact 함께 책을 읽을사람을 구하고 있었는데.. 마침 우병님도 같은 책을 사놓으셨다고해서 즐거운 네트워크 스터디를 할수 있게 되었다! 프론트엔드 인터뷰 스터디 4주 1회차 참여 ReactQuery 수업을 들었는데 정말 귀에 쏙쏙박히는 명강의였다.. Feelings…

singel page app이 무엇인지 설명하고 SEO-friendly하게 만드는 방법을 설명하세요. 웹 개발자는 요즘 웹사이트가 아닌 웹 앱으로 제작한 제품을 언급합니다. 두 가지 용어 사이에는 엄격한 차이는 없지만, 웹 앱은 대화형, 동적인 경향이 있어 사용자가 작업에 대한 응답ㅇ르 받을 수 있습니다. 전통적으로, 브라우저는 서버에서 HTML…

Fact cypress를 사용해서 퀴즈 생성, 삭제, 업데이트, 좋아요, 좋아요 취소 e2e 테스트 좋아요한 퀴즈를 삭제했을경우 발생하는 문제 해결 기초부터 완성까지 프론트엔드 책 8장 읽기 Feelings 역시 테스트는 어렵고도 재미있다. cypress를 사용하면서 느낀점은 좀 느리다는 것..? Findings singel page app…

Fact 리액트 쿼리 공부 Findings React Query는 서버 상태(server state)를 관리하는 라이브러리다. 서버 상태란 원격에 위치한 공간에 저장되며 앱이 소유하거나 제어하지 않는다. 데이터를 가져오고 업데이트 하기 위해선 비동기 API…

Fact 카테고리별 퀴즈 목록 페이지네이션 구현 내가 추가한 퀴즈 목록 페이지네이션 구현 내가 좋아요한 퀴즈 목록 페이지네이션 구현 Feelings…

Fact we-study 프로젝트 REST ful하게 URI 설계하고 수정하기 유저정보 가져오기 GET 회원가입 POST 퀴즈 추가 POST 퀴즈 삭제 DELETE 퀴즈 업데이트 PATCH 퀴즈 가져오기 GET 내가 만든 퀴즈 가져오기 GET 퀴즈 좋아요 하기 POST 퀴즈 좋아요 취소 DELETE 좋아요한 퀴즈 가져오기 GET…

Fact REST API, REST ful에 대해서 공부하고 내 프로젝트에 적용하고있다. 프론트엔드 인터뷰 스터디를 참여했다. 오늘도 모두가 발표준비를 잘해와서 너무 좋았다. 프로그래머스 레벨3 디스크 컨트롤러 문제를 못풀었다. 엣지케이스가 많은 문제이기도 하고, 문제에서 제대로된 설명이 안나와있는 것들도 고려해야하는 문제였다. Feelings…

event bubbling에 대해 설명하세요. 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. image 위 코드는 세 개의 div 태그에 모두 클릭 이벤트를 등록하고 클릭했을 때 logEvent 함수를 실행시키는 코드입니다. 여기서 위 그림대로 최하위 div…

JavaScript와 관련하여 same-origin 정책을 설명하세요. same-origin 정책은 JavaScript 도메인 경계를 넘어서 요청하는 것을 방지합니다. origin은 URI체계, 호스트 이름, 포트 버호의 조합으로 정의됩니다. 이 정책은 한 페이지의 악의적인 스크립트가 해당 페이지의 DOM…

Fact 프로그래머스 3렙 베스트앨범 문제 풀기 2022-03-15 useRef() 공부하고 포스팅 퀴즈를 삭제하면 algolia quiz index 데이터도 삭제되도록 구현 퀴즈 옵션 드롭다운 클릭 > 수정 클릭 > 퀴즈를 수정할 수 있는 모달이 나오도록 구현했는데, useRef를 사용해서 모달을 닫으면 드롭다운도 닫히도록 구현했다. Feelings…

들어가며 React Hooks에는 다양한 것들이 있는데, 그중에 자주쓰는 useState(), useEffect() 말고 useRef()에 대해서 왜 사용하고 어떠한 문제를 해결해주는지 알아보려고합니다. useRef()? 다시 정리하자면 1.useRef() 는 일반적인 자바스크립트 객체입니다. 2.매번 렌더링할 때 동일한 객체를 제공합니다.…

프로그래머스…

Fact 퀴즈 옵션을 클릭하면 삭제, 수정할 수 있는 드롭 다운을 만들었다. 퀴즈 옵션에서 삭제하는 기능을 구현했다. 다크 모드로 변경하면 body의 class를 dark로 변경해 주도록 했었는데, useEffect depth를 잘못 설정해서 올바르게 작동하지 않던 문제를 해결했다. YAPP 동아리 자기소개서 작성 Feelings…

Fact 프런트엔드 인터뷰 스터디를 참여했다. 검색해서 가져온 퀴즈에 좋아요를 누를 수 있도록 구현했다. 퀴즈 리스트를 가져오는 도중 skeleton을 출력하는데, 아무리 변경해 주어도 skeleton의 넓이가 안 맞는 문제를 해결했는데, 결국 간단한 문제였다. Feelings…

Ajax에 대해 가능한 한 자세히 설명하세요. Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 사용되는 웹 개발 기술의 집합입니다. Ajax…

Fact 퀴즈에 좋아요 기능을 구현하려고 하는데, 기존에 하려고 했던 방식은 유저 정보를 가져와서 내가 좋아요를 누른 퀴즈 index에서 유저정보가 같은 데이터들을 찾아서 like를 true…

Fact 프론트엔드 인터뷰 스터디에 참여했다. 퀴즈 데이터, 소장 중인 퀴즈, 내가 추가한 퀴즈를 불러오는 로딩 중인 상태를 react skeleton으로 구현하려고 했는데, 퀴즈 리스트 같은 경우는 내가 몇 개를 가져오는지 알 수 있는 방법이 없다. 그래서 skeleton…

호스트 객체와 내장 객체의 차이점은 무엇인가요? 내장 객체는 ECMAScript 사양에 정의된 javaScript 언어의 일부인 객체입니다. 예를들어 String, Math, RegExp, Object, Function…

백준 계단 오르기 문제

Fact 기초부터 완성까지 프론트엔드 책 6장 읽기 cypress로 로그인기능을 테스트했다. 로그인 버튼을 클릭하면 로그인 페이지로 가야 함 로그인을 성공하면 메인으로 와야 함 로그인 실패 처리가 되어야 함 Feelings…

null, undefined, undeclared의 차이점은 무엇인가요? 어떻게 이 상태들에 대한 확인을 할 것인가요? Undefined는 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당하지 않은 상태입니다. Undeclared는 접근 가능한 스코프에 변수 선언조차 되어있지 않은 상태입니다. undefined와 null…

Fact 알고리즘만 하루종일 풀었다. 내가 푼 문제는 파일링 문제, 1로 만들기 문제, 계단 오르기 문제, 1,2,3 더하기 문제, 돌다리 건너기 문제 증가수열 문제, rgb 거리 문제, 지구 악당 문제, 정수 직사각형을 풀었다. Feelings 알고리즘을 하루에…

Fact 오늘 데브 코스 면접을 조졌다.. image…

이벤트 위임 이벤트 위임은 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법입니다. 리스너는 DOM의 event bubbling…

프로그래머스 두개 뽑아서 더하기 문제 이해 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 리턴하는 함수를 작성하시오 계획 이중 반복문으로 탐색을 돌면서 합한값을 배열에 넣고 중복제거후 오름차순으로 정렬

프로그래머스 3진법 뒤집기 문제 이해 자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 함수를 작성하시오. 계획 n을 3진법으로 변경한후 reverse하고 다시 10진법으로 변경한후 리턴한다.

Fact 프로그래머스 최소 직사각형, 약수의 개수와 덧셈, 두 개 뽑아서 더하기, 3진법 뒤집기 문제를 풀었다. 퀴즈 데이터를 받아올 때 데이터가 없으면 항상 빈 배열을 가져오도록 구현했는데, 이렇게 하면 데이터가 로딩되는 시간 동안 빈 배열 컴포넌트를 출력하게 된다. 이 문제를 해결하기 위해 react skeleton…

프로그래머스 약수의 개수와 덧셈 문제 이해 두 정수 left와 right가 매개변수로 주어집니다. left부터 right 까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀수를 구하는 함수를 작성해주세요. 계획 left부터 right까지의 수를 배열에 넣고, 반복문으로 해당 값의 약수의 개수가 짝수면 sum…

…

클로저를 활용하면 모듈을 정의하여 원하는 프로퍼티나 메서드를 캡슐화할 수 있습니다. ES2015 이전에 자바스크립트에는 모듈이라는 개념이 없었기 때문에 클로저를 사용하여 모듈을 정의하여 사용하였습니다. myModule() 함수는 increment(), decrement(), getCount…

…

Fact…

Fact 내가 추가한 문제를 가져올수 있도록 구현했다. 웹사이트가 딱딱하다는 느낌이 들어서 모든 버튼과 메뉴에 hover 이벤트를 추가했다. 회원가입, 로그인 퀴즈추가를 실패했을경우 에러처리 방법을 변경해주었는데, 마지막에 가져온 결과가 false면 해당 alert를 띄워주도록 해놓았고 추후에 더 좋은 방법이 생각난다면 바꿀 예정이다. Feelings…

Screenshot from 2022-02-23 18-42-49 프로그래머스에서 운영하는 에 참여하게 되었고 그 후기를 남겨보려고 합니다. 프런트엔드 개발을 위한 자바스크립트 스터디 링크 일단 제가 스터디를 신청하게 된 이유는 명확했습니다. 평소에 react만 공부하다 보니 라이브러리나 프레임워크 없이 javaScript…

Fact 기존 프로젝트에 Atomic Design Pattern을 고려 중인데 생각해야 할 것이 참 많다. 어떤 것을 기준으로 원자, 분자, 유기체, 템플릿, 페이지로 나눌 것인지? 내가 생각하기엔 정답이 명확하지 않다. 이미 짜인 코드를 위 구조대로 분리하려고 하니 머리가 아프다. Feelings…

숫자 문자열과 영단어 이해 숫자 문자열과 영단어 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 -> one4seveneight 234567 -> 23four5six7 1020…

소수 만들기 이해 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세요. 문제가 쉬워서 따로 계획은 작성하지 않았습니다.

…

Fact 프로그래머스 숫자 문자열과 영단어 문제, 신고 결과 받기 문제 TDD로 풀기 we-study 프로젝트에 자바스크립트 코드를 모두 타입 스크립트로 변경 프로젝트 만들다가 눈이 너무 아파서 다크 모드를 만들어보려고 useContext를 공부했다. Feelings…

Fact 프로그래머스 신고 결과 받기 문제를 풀었다. 전역상태에 있는 user 정보 유무로 로그인 상태를 확인했는데, 새로고침이나 로그인시 app.ts…

동전교환 문제 이해 다음과 같이 여러 단위의 동전들이 주어져 있을때 거스름돈을 가장 적은 수의 동전으로 교환 해주려면 어떻게 주면 되는가? 각 단위의 동전은 무한정 쓸 수 있다. 첫 번째 줄에는 동전의 종류개수가 주어진다. 두 번째 줄에는 N개의 동전의 종류가 주어지고, 그 다음줄에 거슬러 줄 금액 N이 주어진다. 각 동전의 종류는 10…

프로그래머스 모의고사 문제 이해 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, … 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, … 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4,…

Fact 동전교환 문제, 팩토리얼, 모의고사 문제를 풀고 중복순열 문제를 복습했다. 프로그래머스 데브 코스 2기 코딩 테스트를 봤다. 느낀 점은 알고리즘을 꾸준히 다시 시작해야겠다고 생각했다. 난이도는 2~3인 것 같고, 문제의 길이가 긴 만큼 엣지 케이스가 많고 푸는 시간도 오래 걸렸다 1기에서 1렙 문제들이 대부분이라 해서 긴장을 안 했는데…

4장 arguments 화살표 함수를 제외한 모든 함수에서는 arguments라는 객체를 사용할 수 있습니다. arguments 객체를 사용하여 함수에 실제로 전달된 인자들을 참조할 수 있습니다. 또한 arguments 객체는 유사배열 객체이기 때문에 인덱스로 프로퍼티에 접근할 수 있으며, length 프로퍼티를 가지고 있습니다. arguments…

프로그래머스 타겟넘버 문제 이해 n 개의 음이 아닌 정수들이 있습니다. 이 정수들을 바꾸지 않고 적절히 더하거나 빼서 타깃 넘버를 만들려고 합니다. 사용할 수 있는 숫자가 담긴 배열 numbers, 타깃 넘버 target이 매개변수로 주어진다. 계획 재귀 함수는 재귀가 멈추는 조건을 구해야 한다. numbers의 길이가 depth…

프로그래머스 다음 큰 숫자 문제 이해 자연수 n이 주어졌을 때 n의 다음 큰 숫자는 다음과 같이 정의한다. n의 다음 큰 숫자는 n보다 큰 자연수 n의 다음 큰 숫자와 n은 2진수로 변환했을 때 n은 2진수로 변환했을 때의 1의 갯수가 같다. n의 다음 큰 숫자는 조건 1,2 를 만족하는 가장 작은 수 입니다. 계획 n을 이진수로 변경한다. n…

Fact 타겟넘버, 부분집합, 순열구하기, 포켓몬 문제풀기 코드를 작성하다보니 중복되는 코드가 있는걸 쉽게 볼 수 있었다. 유저 데이터를 전역상태에서 가져오는 코드도 계속 같은 코드들을 컴포넌트들 똑같은 자리에 작성하고있었고, 이 문제를 해결하기 위해 hook…

타겟넘버 문제 이해 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 바꾸지않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 사용할 수 있는 숫자가 담긴 배열 numbers,타겟 넘버 target이 매개변수로 주어진다. 계획 재귀 함수는 재귀가 멈추는 조건을 구해야 한다. numbers의 길이가 depth랑 같으면 종료된다. 하나는 -1 하나는 +…

프로그래머스 카카오 블라인드 신규 아이디 추천 문제

이해 총 n 마리에서 n/2마리의 포켓몬을 가져갈 수있다. 같은 종류의 포켓몬은 같은 번호를 가지고있다. 계획 nums의 길이의 /2 만큼 nums를 인덱스 0부터 차례대로 넣는데, 중복값이면 넣지않는다. 프로그래머스 포켓몬 문제

Fact react-quill을 사용해서 퀴즈를 추가할 때 텍스트 편집기를 사용하도록 했다. react-quill 사용법 로그인 상태일 때 로그인 페이지에 들어갈 경우 메인 페이지로 리다이렉트 하도록 구현, 회원가입 성공 페이지를 만들고 회원가입이 성공하면 해당 페이지로 가도록 구현 카테고리 이미지를 어디에 넣을까? firebase storage…

Fact 알고리즘 DFS를 복습할 겸 재귀 함수 문제, 이진트리 문제, 부분집합 문제, 중복순열 문제를 풀었다. 퀴즈 데이터를 받아오지 못할 시 에러 컴포넌트를 만들고 해당 컴포넌트를 출력하도록 구현했다. 로그인, 회원가입 실패 시 에러 메시지 컴포넌트를 출력하도록 구현했다. 로그인을 안 하고 퀴즈를 클릭할 경우 login…

Fact 자바스크립트 코드 리뷰 스터디 Mission 4 API가 느린 경우의 인터랙션 처리 미션을 했다. 일부로 딜레이를 서버에 요청해서 그 딜레이 동안 로딩 중 처리 방법을 생각하고 구현해야 한다. 새로운 loding 컴포넌트를 만들고 데이터를 가져오는 동안 loding…

3장 변수선언 정적 타입 언어와는 다르게 자바스크립트는 느슨한 타입을 가진 언어이기 때문에 데이터 타입을 따로 명시하지 않고 변수를 선언할 수있습니다. 자바스크립트에서는 세 가지 키워드를 사용해 변수를 선언하며, 이 변수에 값을 할당합니다. var 로 선언된 변수는 기존에 선언된 변수의 값을 덮어쓰며, 를 기준으로 동작합니다. 변수 a에…

Fact 자바스크립트 코드 리뷰 스터디 Mission 4 Todo 업그레이드하기(할 일 목록 불러오기, 할 일 추가하기, 할 일 삭제하기, 특정 사용자의 할 일 전체 삭제하기, 할 일 완료 여부 토글 하기)를 구현했다. 자바스크립트 코드 리뷰 스터디 Mission 4 보너스 미션(Users 컴포넌트)를 구현했다. ex…

Fact 퀴즈를 검색할 때 객체 안에 _id, email을 입력해도 해당 데이터가 불러와지는 문제를 해결했다. 퀴즈 리스트 컴포넌트와 퀴즈 컴포넌트가 검색 리스트, 검색 컴포넌트 중복되는 문제를 리팩토링했다. 검색 결과가 validation을 추가하고 검색 결과가 없을 경우 Empty 컴포넌트를 불러오도록 구현했다. 유저 정보를 출력해 주는 Info…

Fact algolia의 quiz index에 퀴즈가 추가되면 해당 퀴즈 데이터를 저장하도록 구현했다. 검색어를 입력하면 검색어에 맞는 데이터를 가져오도록 구현했다. Feelings algolia를 사용한 이유는 원래 Query String…

Fact 프로그래머스 코드 리뷰 스터디 짤봇 미션 리팩토링을 했다. we-study 프로젝트 로그인을 해도 헤더의 로그인 버튼이 로그아웃으로 변하지 않는 문제를 해결했다. 퀴즈를 추가하면 이메일이 아니라 추가한 사람의 이름을 나타내도록 구현했다. 새로고침하면 로그인 상태가 날아가는 문제를 해결했다. Feelings 이번에 recoil…

Fact 리액트 상태관리를 직접 만들기 위해 자바스크립트 proxy를 공부했다. 짤봇미션 리펙토링 Feelings 자바스크립트 proxy는 내가알던 네트워크 proxy와 비슷한 맥락이라는 느낌이 들었다. 자바스크립트 proxy는 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체를 말한다. Findings…

Fact 주말 동안 기초부터 완성까지 프런트엔드 1장 2장을 읽고 블로그에 정리했다. 회원가입, 로그인 유효성 검사를 만들었다. firebase을 이용한 로그인, 회원가입을 사용했지만 기본적으로 firebase auth는 이메일, 패스워드만을 저장한다. 그래서 회원가입 시 유저정보를 작성할 때 데이터를 데이터베이스에 넣어주어야 한다. Feelings yup…

1장 2장 HTML HTML요소는 3가지 Content(내용), Start Tag(시작 태그), End Tag(종료 태그)로 나뉘며 이 3가지 구조를 합쳐 Element(요소)라고 부릅니다. 인라인 요소 : 태그가 할당된 텍스트나 이미지의 크기에 맞는 필요한 공간만을 차지합니다. 높이나 너비를 지정 할 수 없으며,줄 내부 어디서든 시작합니다. span…

이 책을 읽게 된 이유 스터디를 목표로 구매한 책인데, 스터디가 끝나고 현재도 계속 기억이 안 날 때마다 계속 보고 있다. 주요 내용 HTTP를 비롯한 네트워크 관련 내용을 쉽게 설명해놓은 책이다. 기본적으로 웹과 네트워크, HTTP 헤더 ,메세지, 상태코드, HTTPS…

Fact 자바스크립트 짤봇 미션완료 Findings Throttle, Debounce 둘 다 Dom 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS…

Fact 바닐라 자바스크립트 스터디 미션 3 1문제 그림으로 배우는 HTTP 2회독 끝 Findings 책을 읽으면서 가장 기억에 남았던 부분을 정리하자면, Http…

Fact 학습웹 프론트 질문, 모달, 로그인, 회원가입 페이지를 만들었다. Node.js를 사용하기 위해 필요한 공부를 했다. Findings Node.js란? Node.js 특징 비동기 I/O 처리 / 이벤트위주: Node.js 라이브러리의 모든 API는 비동기식입니다. 멈추지 않습니다(Non-blocking). Node.js 기반 서버는 API…

주요 내용 변수, 자료형, 함수 등 자바스크립트 문법 화살표 함수, 템플릿 리터럴, 프로미스 등 ES6 기능 등등 이 책을 읽게 된 이유 자바스크립트 문법을 꾸준히 공부하기 위해서, 또 내용이 알차다 기억이 안 나는 부분이 있으면 찾아보려고 구매했다. 책을 읽으면서 좋았던 부분 면접에서 나올법한 기본 상식들 var, let, const 차이점, this…

Fact 뮤직앱 리팩토링 뮤직앱 리드미 작성 그림으로 배우는 HTTP 70페이지 읽기 Feelings 자바스크립트 공부를 더 열심히 하자! Findings 데이터 바인딩 이란 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다. 사용자의 Input…

Fact 몸이 안좋아서 책만읽었다 Feelings 몸관리를 잘하자 Findings 몸관리를 잘하자 Future Action music-app 리팩토링하고 README 작성

Fact 자바스크립트 코드리뷰 스터디 미션2를 끝냈다.. 이틀동안 코드만 두들겼다 코드리뷰를 해봤다.. 하지만 자바스크립트 실력이 탄탄한편이 아니라 아주 조심스럽게 달았다. Feelings…

Fact 그림으로 배우는 HTTP 150페이지 읽기 자바스크립트 리뷰스터디 필수미션 캣웹 다시 배포 Feelings 자바스크립트로만 코드를 작성하는데 이해안되는 부분이 많다. Findings 이 코드에서 클릭시 해당 li의 id에 접근하기 위해선 e.target의 closest(‘li’)로 li태그에 접근후 dataset.id로 li태그에 data-id…

Fact 프로그래머스 FLO과제를 완성했다. ”[”03:20:56메리크리스마스 개발은 재미있어요”, “03:20:56데브 코스 꼭 붙었으면 좋겠다”]”라는 형식의 데이터를 서버로부터 받아온다 나는 redux thunk를 사용해서 비동기 처리를 했다. 데이터를 받아오면 정규식을 사용해서 03:20:5…

Fact 프로그래머스 프런트엔드 데브 코스 자기소개서를 썼다. 뮤직 앱을 만들면서 해당 노래 시간에 맞는 가사를 출력하고 싶은데 쉽지 않다. Feelings…

Fact 하루종일 리덕스만 공부했다.. 음악앱 과제에 리덕스를 추가하는게 이렇게 어렵다니.. 벨로퍼트님 블로그를 참고했는데 리팩토링까지 참고하려다보니 공부하는 시간이 좀 길어졌다.. 프로그래머스 데브코스 프론트엔드가 열렸다 얼른 신청해야지 Feelings…

Fact 프로그래머스 FLO과제를 했다 조만간 다하고 깃허브에 올려야겠다 Feelings 리액트는 익숙한데 바닐라 자바스크립트는 왜 이렇게 쓰는게 어색할까.. Findings audio 사용방법 Future Action http, 네트워크 책 다시읽기

Fact 경로 탐색 문제를 풀었다. 여태 풀던 DFS 문제와 좀 달랐다. 그전 것들은 보통맛이었으면 이번 문제는 살짝 매운맛..? 결국 기존의 DFS 방식이라 이해하는 데 오래 걸리지 않았다. 오늘부터 프로그래머스 자바스크립트 코드 리뷰 스터디를 참여하게 되었다. 오늘도 프런트엔드 직무 부트 캠프 5주가 끝이 났다. Feelings…

Fact 가장 짧은 문자 거리, 문자열 압축 문제를 풀었다. 바닐라 자바스크립트로 TODO 리스트를 만드는 법을 공부했다. Feelings…

마침 사이드 프로젝트에 장바구니를 구현하려다, 웹스토리지(localStorage, sessionStorage…

하루에 하나씩 아티클 읽기! jjuny 블로그에서 jjuny님이 하는거보고 재미있어보여서 시작했다… 2022년 6월 8월 8일 (월) 카카오웹툰은 CSS를 어떻게 작성하고 있을까? CSS-in-JS, CSS-Module…

Fact 알고리즘 백준 5문제, 프로그래머스 기능개발문제를 풀었다. 프로그래머스 고양이 사진 검색사이트를 풀어봤는데 정말 어렵다.. 꼴랑 2문제 풀고 시간이 끝났다. 코드를 이해하는게 시간이 오래걸린다. Feelings 알고리즘 푸는게 점점 익숙해져가는걸 느낀다. Findings - Future Action -

Fact 알고리즘 백준 7문제, 프로그래머스 위장문제를 풀었다. Feelings 알고리즘 문제를 오랜만에 푸니 정말 어렵다. 해쉬문제에 적응한 느낌이다. Findings PropTypes…

Fact 백준 알고리즘 홀수,10부제,일곱난쟁이 문제를 풀었다. 프론트엔드에서 Nest.js를 사용하는 방법을 공부했다. Feelings Nest.js는 정말 좋은 기능이 많은것같다. 리액트의 단점을 보완해주고 성능까지 올려주니 꼭 쓰자! 특히 react-router-dom 을 사용해 라우팅을 직접 해줄필요가 없으니 정말 편하다! Findings Next…

Fact 기존에 지킬 테마 블로그를 개츠비로 변경하고 기존에 있던 포스트들을 다 이동시켰다. 로그인 로그아웃 페이지를 만들고 하드코딩을 했다. 내 프로필 페이지를 만들었다. Feelings 개츠비 find-answer 테마를 적용했는데, 가독성이 정말 좋은 것 같다. 강력추천 Findings useMemo…

Fact create-react-app로 리액트환경을 구성했다. Github Page로 간단하게 프로젝트를 배포했다. 상품페이지, 장바구니, 홈 페이지의 라우팅을 설정했다. Feelings 존나 잘하고싶다. redShift는 리눅스에서 사용할수있는 성능 좋은 블루라이트 차단 프로그램이다.(편안함) Findings linux에서 create-react-app…

Fact 복습한다는 마인드로 제작중인 프로젝트에 css를 styled components로 사용하고있다. 인프런 강의를 들으면서 react를 복습하고있다. 5주 직무 부트캠프를 신청해서 첫 오리엔테이션을 시청했다. Feelings…

Fact nestjs 고양이웹 JWT토큰을 사용한 로그인 구현 공식문서 overView에서 하나씩 공부하면서 사용해보았다. 해당 가입된 고양이 목록 불러오기 구현 Feelings 기존에 nodejs-express…

Fact 간단하게 고양이 사이트를 만들면서 라우터 서비스를 기능별로 나누었고, 싱글턴 패턴을 적용시켰다. 프로젝트에 mysql와 MongoDB 두개를 연습삼아 연동하면서 기존에 사용하던 명령어를 다시 공부하는 시간을 가졌다. Feelings 완성된 코드를 보면서 정말 깔끔하다는 느낌을 받았다. Findings…

Fact 새로운 프로젝트를 하면서 기존에 공부했던 것들을 복습하고있다. 원티드 로켓펀치를 보면서 회사들의 기술스택을 보고있다. Feelings 기존에 배웠던 것들을 토대로 새로운 프로젝트를 만들고있는데, 기억이 나지않는 것들이 많았다. 내가 왜 빤스런했을까? 수형이형 말좀 들을걸 나는 1년전 매가 필요한 아이였다. 도망친 곳에 낙원은 없다. Findings…

Fact 문제를 어떻게 풀 것인가 책을 50페이지 읽었다. 항상 걸림돌이였던 알고리즘을 어떻게 해결해야할까 생각을 해보았다. Feelings 내가 그동안 취업에대한 열망이 부족했었다는 것을 느꼈다. 안일했던 나 자신을 반성하며 시간을 보냈다. Findings 오늘 많은 생각을했다. Future Action…

Fact 뭘 해야할까 Feelings 뭘 해야할지 모르겠다 Findings 머리속에 기억나는게 없다 Future Action 매일 백준 알고리즘 문제를 풀어야겠다 스프링5 프로그래밍 입문책 챕터를 나가야겠다.

2021년 상반기 회고 나는 프론트엔드 개발자를 목표로 다시 개발공부를 시작했다. 이 글을 쓰면서 내가 매일 꾸준히 해야할 것을 정리하고자 한다. 우선순위 나는 여태 React만 집중적으로 공부했다. 여태까지 한 프로젝트도 React였고, 가장 중요하다고 생각했다. 하지만 실제는 내가 생각 한 것과 많이 달랐다. JavaScript…

Fact…

Fact 파이썬과 파이참을 설치했다. 구매한 책에는 파이썬에 대한 기본적인 설명이 없어서 인터넷을 참고하면서 변수 설정 방법이나 함수 정의 방법을 직접 쳐보면서 공부했다. 간단하게 반복문으로 풀수 있는 문제들을 풀어보면서 익숙해지도록 노력했다. Feelings…

Fact 청년수당 활동 기록서를 작성했다. 여행 경로 알고리즘 문제를 복습했다. 코어자바 9 4장을 다시 공부했는데 책에서 나와있는 enum 자체는 정말 쉬운데 응용하는 방법에따라서 정말 이해가 안가는 부분이 많았다. 레이싱경주2에 enum을 사용해보았다. Feelings…

Fact 프로그래머스 2렙 문제 풀기 올바른 괄호 문제를 풀었다. 처음 했던 방식으로 이중 for문으로 풀었는데 빠른속도로 채점이 되었던 것에 비해서 효율성을 통과하지못했다. 그래서 반복문을 하나쓰고 처음부터 체크해나가는 식으로 문제를 풀었다. 정말 이상한 문제다. 자바 문익점 1주차…

Fact 프로그래머스 2레벨 문제 H-index 문제를 푸는 시간을 가졌다. 생각 외로 쉽게 풀었다. 문제를 이해하는 시간이랑 코드를 작성하는 시간이랑 비슷했던 것 같다. 이번 문제도 문제를 잘못 이해하면 풀 수 없는 문제였다. 넥스트스텝…

Fact 레벨 3 여행경로 문제를 풀었다. 약간의 도움을 받긴했지만, 재귀함수가 익숙해졌다는 느낌이 들어서 뿌듯했고, 그전에 풀지 못해던 문제를 오늘 풀 수 있게 되어서 기분이 좋았다. Feelings 오늘은 알고리즘을 푸는데 시간을 오래 쓴 것 같다. 그래도 dfs문제를 풀수있다는 자신감이 생겨서 좋다. Findings…

Fact 프로그래머스 3레벨 네트워크 문제, 타겟넘버 문제를 풀었다. 문제 자체가 이해가 잘 안가는 부분이 많았다. 공부 우선순위를 정하기위해 내가 가고싶은 회사에서 필요로하는 사항들을 엑셀로 정리했다. 자바 인터페이스에 대해서 다시 공부했다. Feelings 레벨 3 네트워크 문제를 풀면서 DFS…

Bubble Sort(버블정렬) image JavaScript 시간 복잡도 : O(n^2) 구현방법이 간단하지만 효율이 좋지 않습니다. Selection Sort(선택정렬) image 시간 복잡도 : O(n^2) Bubble Sorting 만큼 구현방법이 간단하지만 마찬가지로 효율이 좋지않습니다. 삽입 정렬 (Insertion Sort) image

Fact 풍덩 웹 백엔드를 개발하면서 로그인 부분을 구현하고있는데, 사소한 테스트까지 작성하면서 코드를 작성하고있다. Feelings 테스트 주도개발은 정말 어렵다.. 자바로 했을때도 어려웠는데, 새롭게 자바스크립트로 하니 처음보는 코드가 너무 많다. Findings…

Fact…

Fact 부스트캠프 알고리즘 테스트 문제를 풀었다. 문제 1은 무난하게 풀었다. 구현 문제였다. 문제 2는 DFS를 이용해야 하는 문제였다. 하나의 케이스를 찾지 못해서 풀지 못했다. 시험이 끝나고 따로 시간을 내서 풀긴 했지만, 너무 아쉬웠다. Feelings 3레벨의 다양한 문제들을 풀어볼 필요성을 느꼈다. 아직 재귀함수 DFS BFS…

Fact 재귀 함수 팩토리얼 문제, 피보나치수열 문제를 풀었다. 프로그래머스 3레벨 단어 변환 문제를 다시 풀었다. Feelings 3렙 문제를 재귀함수로 풀려고 하니 조건도 너무 많고, 이해가 안 되는 부분이 많았다. 풀 방법이 떠오르지 않을 때는 어떻게 해야 할까? 간단한 재귀함수 문제를 풀고 바로…

Fact 오늘은 부스트 캠프 알고리즘 테스트를 봤다. 내가 풀었던 문제를 Daliy-ps에 정리했다. Feelings 첫 번째 문제는 별로 어렵지 않았다. 평소에 풀던 문제 보다 쉬운 문제였다. 두 번째 문제는 테스트 코드를 연습할 수 있는 문제였다. 처음 Hash 와 set…

Fact 프로그래머스 피보나치 수, 단어 변환 문제등 오늘 하루 종일 알고리즘 문제를 풀었다. Feelings 피보나치수열에 대해서 공부하고 피보나치 수 문제를 for 문 으로도 풀어보고, 재귀 함수 방법으로도 풀어봤다. 피보나치는 재귀 함수로 구현했지만 단어 변환은 재귀 함수로 푸는게 쉽지 않았다. Findings 나는 아직 깊이/너비 우선 탐색(DFS…

Fact 알고리즘 다음 큰 숫자 문제를 풀었다. 알고리즘 타겟 넘버 문제를 풀었다. 알고리즘 피보나치 수 문제를 풀려다가 문제 지문이 이상한 것을 보고 피보나치 수열에 대해서 공부했다. Feelings 역시 알고리즘은 수학이 중요하다는 것을 느꼈다. Findings 평소에 피보나치 수열에 관심이 없었는데 이번에 공부하였다. Future Action…

Fact 프로그래머스 레벨2 폰켓몬 문제를 풀었다. 레벨 2지만 쉽게 이해만 한다면 정말 쉽게 풀수있는 문제였다. 자바 인터페이스에 대해서 복습하고 직접 사용해보았다. Feelings…

Fact 오늘 기봉이 형과 캐시 알고리즘 문제를 풀었다. (https://programmers.co.kr/learn/courses/30/lessons/17680) 영규: 숨겨진 엣지 케이스가 있는 문제였다. 재미있게 풀었다. 기봉: 오늘도 즐거운 짝 프로그래밍이였다. 챕터…

Facts 그때 풀지 못했던 문자열 압축하기 문제를 풀었다. 레디스에 에러가 발생해서 로그인이 안 되는 상황이 발생했다. 챕터 2 로또게임을 천천히 테스트 코드를 작성하면서 구현하고 있다. Feelings…

Facts 챕터 1 문자열 계산기를 완료했다. 문자열 계산기를 다 구현했지만 코드분리를 제대로 하지 못했다. Feelings…

Facts 자바스크립트 위장 문제를 풀었다. 문자열 계산기를 자바 정규식을 사용해서 기능을 구현했다. 아직 테스트는 작성하고있다. Feelings 위장 문제를 풀면서 느낀 것이 이런 문제는 수학을 모르면 풀수 없는 문제라는 것을 느꼈다. 알고리즘 문제는 수학과 연관된 문제들이 많은 것 같다. 오늘 \n…

Facts 자바스크립트의 정규식을 공부했다. 레이싱카 게임을 한번더 테스트코드로 작성해보았다. Feelings 미리 실패를 만들고 그후에 어떤 방법을 써서라도 통과가 되도록 만들라고 하셨는데 감이 잘 안온다. 자바 정규식도 자바스크립트 정규식과 비슷한 부분이 많은 것 같은데 역시나 어렵다. Findings 자바 정규표현식의 사용법을 알았다. Future…

Facts 가장 큰 수 만들기 알고리즘 문제를 풀었다. 너무 힘들었다. 문자열 압축 문제를 풀다가 포기했다. 다음에 한번 더 도전해봐야겠다. Feelings 알고리즘은 정말 어렵다.. Findings Matcger 클래스의 메소드들 find() 주어진 텍스트에서 pattern 에 일치하는 텍스트들이 발견되면 true…

Facts 오늘은 학점은행제 시험을 봤다. Feelings 올 100점 맞을 것 같은 느낌이 든다. Findings 그래도 어느정도 알던 내용이 조금 섞여있어서 편하게 시험을 봤다. Future Action Plan 졸업을 위해서 네트워크 관리사와 정보처리기사를 딸 준비를 해야겠다.

Facts 오늘은 다리를 지나는 트럭, 124 마을의 숫자 문제를 풀었다. 다리를 지나는 트럭은 저번에 못 풀고 넘어간 문제였는데 이번에 풀게 되어서 기분이 좋다. 124 마을은 진수를 이용하는 문제였는데 처음 접하는 문제라 이해하는 것도 힘들었다. Feelings…

Facts Java Step5 에서 말하는 Controller와 view Domian으로 객체를 나누고 MVC 패턴을 기반으로 리팩토링 하였다. 자기소개서를 새로운 형식으로 작성하였다. 레이싱카 우승자를 출력하는 메소드를 테스트 코드로 구현하려고 했는데 어려움이 많다. Feelings 내가 TDD…

Facts Java Step4 자동차 경주 게임에서 레이싱카의 이름을 추가하고, 우승자의 이름을 출력하는 기능을 만들었다. Feelings 자바로 코드를 작성하면서 느끼는거지만 자바스크립트에 비해서 정말 불편하다.. 테스트 코드를 작성하는 것이 어렵고 힘들기는 하지만 점점 익숙해 진다는 것을 느낀다. Findings…

Facts 소수찾기 문제를 한번 더 복습했다. 다음에 아리스토텔레스의 체 문제가 나오면 풀 수 있을 것 같다. 기능개발 문제를 풀었는데, 처음 로직을 잘못 짜서 시간을 많이 허비했다. 처음부터 계획을 잘못 작성한 것 같다.…

Facts 소수찾기 문제를 복습했다. 내일 한번 더 풀어봐야겠다. 기봉이형과 다트게임 문제를 풀었다. 정규식을 이용하는 부분빼고 별로 어렵지 않았던 것 같다. 근데 이 문제도 1렙 문제는 아닌 것 같다. 자바스크립트에선 자동으로 타입을 정해주는거에 익숙해있어서 자바 코드를 작성할때 타입에러때문에 시간을 많이 잡아먹었다. 자바지기님의 테스트 강의를 듣고…

Facts 소수찾기 문제를 풀었다. 이게 왜 1렙 문제인가? 효율성 테스트를 통과하기 위해서 시간을 오래 소비했다. 객체지향의 사실과 오해책을 6장까지 읽으면서 기봉이형과 우민씨와 같이 스터디했다. Feelings 너무 어렵다 무슨말인지도 모르겠다. 어디에 쓰는건지도 모르겠고, 도대체 어디에 적용해야할지 감이 안온다. Findings…

Facts 알고리즘 문제 자바스크립트로 x만큼 간격이 있는 n개의 숫자, 직사각형 별찍기 문제를 풀었다. 1렙은 이제 2문제 남았다. ER다이어그램으로 채팅App의 데이터베이스 설계도를 그렸다. 운영체제의 가상메모리에서 페이지 대치 알고리즘중 선입선출대치, 최적페이지 대치, 최근최소 사용, LRU…

Facts 알고리즘 문제 자바스크립트로 배열 평균구하기, 하샤드수 문제를 풀었고, 기봉이형과 짝프로그래밍으로 짝수홀수, 문자열을 숫자로, 두 배열의 합 문제를 자바로 풀었다. 객체지향의 사실과 오해 책을 105p까지 읽고 새로 알게된점이나 몰랐던 부분을 공유했다. Feelings…

Facts 알고리즘 문제 콜라츠 추측, 정수 내림차순 배치하기, 짝수와 홀수 문제를 풀었다. 콜라츠문제를 30분이나 시간을 잡아먹었다는게 굴욕이다. 재귀함수를 평소에 안쓰다가 쓰려니 시간이 좀 걸렸던 것 같다. 객체지향의 사실과오해 1p~ 60p…

Facts 알고리즘 문제 이상한 문자 만들기, 자연수 뒤집어 배열로 만들기, 자릿수 더하기 문제를 풀었다. 1렙은 이제 눈 감고 풀 수 있다. 하루에 3문제씩 1렙을 마저 풀어야겠다. 인터페이스 부분을 코드를 따라치면서 javaScript에서 사용하던 함수들이 java…

Facts 우민씨와 짝 프로그래밍을 하면서 몰랐던 부분이나 서로 알았던 부분을 공유하면서 todoList를 내가 생각하는 객제치향적으로 필요한 기능을 모두 구현했다. 알고리즘 기초문제 수박수박수, 문자열을 숫자로 문제를 풀었다. 문제가 좀 이상한 감이 있었지만 빠르게 풀었다. Feelings…

Facts 우민씨와 짝 프로그래밍을 하면서 몰랐던 부분이나 서로 알았던 부분을 공유하면서 todoList를 다시 만들었다. 구조를 다시 작성해서 할일추가, 할일완료 기능을 추가했다. Feelings 생성자에 대해서 다시 한번더 알게된 느낌이다. 너무 내용이 추상적이라 정답을 모르겠다. 내가 작성한 코드가 정답일까? Findings…

Facts 가장 빨리 만나는 코어 자바 9 2장 3장을 읽었다. Feelings 자바는 심오하다. 여러번 읽은것 같은데 항상 새로운 내용이다. Findings…

Facts 알고리즘 문자열 내림차순 정렬, 문자열 다루기 기본 문제를 풀었다. 문자열 내림차순은 금방 풀었는데, 문자열 다루기 기본은 isNaN으로 풀었는데 문제 자체가 변경되는 바람에 1234e 가 숫자로 판별되어서 다른 방법으로 푸느라 시간을 좀 소비했다. 자바 TodoList…

Facts S3 에 이미지를 업로드할때 필요한 Access Key ID와 SecretAccessKey를 환경변수로 만들어서 환경변수 파일을 GitHub에 올리지 않아서 발생했던 문제를 해결했습니다. 자동배포 기능 구현을 끝냈습니다. 가장 빨리 만나는 코어 자바 9 책 1장을 쳐보면서 정독했습니다. jshell…

Facts CodeDeploy를 연결할때 access key 잘못 입력해서 에러가 발생한것을 확인한후 맞는 access key를 입력했습니다. GitHub Actions를 통해서 깃허브를 통해서 api파일이 올라가는데, gitignore에 의해서 .env파일이 제외되어서 인스턴스에서 env…

Facts GitHub Actions를 이용하여 Git push를 했을 때 클라이언트를 S3에 자동배포가 될 수 있도록 구현했습니다. 프로젝트가 하나의 폴더에 있어서 해당하는 경로를 정하는 방법을 몰라서 시간을 허비했습니다. 그러다가 질문을 통해 working-directory…

Facts 배포후 장바구니에서 삭제가 되지않던 문제가 발생해서, 차례대로 어디서 문제가 생기는지 확인한 후 delete를 useparams로 데이터를 전달받아서 문제를 해결했습니다. dotenv 환경변수를 사용해서 로컬, 서버용 env파일을 따로 만들어서 웹팩의 기능을 사용해 명령어에 따라 필요한 주소를 불러올 수 있도록 구현했습니다. github…

Facts 깃허브에 실수로 올라간 몽고디비 URI 커밋 내용을 삭제했다. GoDady 주소 전달로 도메인을 설정했다. 현재까지 서버와 클라이언트 둘다 배포를 완료했다. 알고리즘 기본문제 3문제를 풀었다. gitHub actions로 클라이언트를 자동배포 할려다가 못했다. Feelings…

Facts 완주하지 못한 선수 알고리즘 문제를 풀었다. 모든 서버주소나 중요한 데이터는 .env 파일을 사용해서 감췄다. aws 인스턴스를 새로 만들고 S3 버켓을 새로 만들었다. Feelings 문제가 발생한 원인을 찾는게 어렵다. 그 전보다 알고리즘에 대한 자신감이 붙었다. Findings dotenv…

Facts README를 작성했다. 청년수당을 신청했다. Feelings 남의돈을 받는게 정말 힘들다는 것을 느꼈다. Findings README파일을 이쁘게 작성하는 방법을 알았다. Future Action Plan Access-Control-Allow-Origin 헤더, withCredentials…

Facts 카카오 겨울 윈터 문제를 풀었다. Feelings 2단계 까지는 풀 수 있다는 자신감을 얻었다. 3단계는 정말 어렵다.. 처음 보는 문제라 어떻게 풀이계획을 세워야할지 모르겠다. Findings 문제를 풀때 자신감이 중요하다는 것을 알았다. 매일매일 한문제씩이라도 문제를 풀어야된다는 것을 알았다. Future Action Plan Access…

Facts 알고리즘 문제를 풀었다. 한문제도 시간내에 못풀었다. Feelings 몇달만에 다시 알고리즘을 풀려고하니 너무 어렵다 계획을 짜도 코드로 옮기는데에 시간이 걸린다.. Findings 앞으로 미친듯이 풀어야겠다. 내 자신이 얼마나 알고리즘을 안 풀었는지 알았다. Future Action Plan Access-Control-Allow-Origin…

Facts 자기소개서와 포트폴리오를 작성했다. Feelings 글하나 쓰는게 얼마나 어려운 것인지 체감했다. Findings 내가 보기싫은 글은 남들도 보기 싫다는 것을 알았다. 이력서를 작성하면서 얼마나 더 열심히 해야할지 몸으로 깨달았다. Future Action Plan Access-Control-Allow-Origin…

Facts 오늘은 하루종일 자기소개서를 작성했다. Feelings 자기소개서를 작성하면서 나 자신을 다시 되돌아보는 시간을 가졌다. 우아한형제들캠프에 꼭 참여하고 싶다… Findings 남들이 보기에 좋은 개발자가 되기 위해서는 어떻게 해야할까? Future Action Plan Access-Control-Allow-Origin…

Facts 오늘 서버 배포를 완료했다. 최소거리 탐색을 구현했다. Feelings 서버쪽은 정말 문제가 생기면 감으로 맞출수 없다는 것을 느꼈다. 원인을 찾고 찾아서 공부하고 문제를 해결하는 연습의 필요성을 느꼈다. Findings Docker network를 쓰는 이유는 docker container는 매번 실행될 때마다 변동되는 vip…

Facts 오늘은 자료구조 그래프에 대해서 공부했다. redis가 오류가 났던 이유를 알았다. 포트연결이 잘못되어서 생긴 문제였다. Breath First Search 그래프를 공부하고 구현했다. Feelings 하나 구현하는데 정말 어렵다고 느꼈다. 집중력을 좀 키워야겠다고 느꼈다. Findings BFS는 너비우선 탐색이고 DFS…

Facts 도커허브에 이미지를 업로드했다.. ec2 인스턴스에 도커허브에있는 이미지를 가져왔다. 자료구조 링크드리스트를 공부했다. 스택과 큐를 공부했다. Feelings 자료란 정말 추상적이고 어렵다는 것을 느꼈다. 꼭 혼자 공부가 필요하다고 느꼈다. Findings 그래도 어느정도 자료구조에 대해 알게된것 같다. Future Action Plan…

Facts 온라인 시험을 끝냈다. 클라이언트를 aws s3에 업로드해서 배포했다. api 도커파일을 만들고 이미지를 생성했다. Feelings 도커도 안 쓴지 2달이 넘어가니 기억이 안 난다.. 노션에 명령어를 정리해 두었는데 빌어먹을 학교 이메일 때문에 들어갈 수가 없다. 시험을 잘 봐서 장학금을 받을 수 있을 것 같다. Findings aws…

Facts 서버에서 가져온 상품평 리스트를 출력했다. 부모와 자식간의 상태전달 여러번을 한 이유로 발생된 에러를 해결했다. Feelings 알고리즘을 오래동안 안 풀었더니 함수가 기억이 안난다.. 빨리 꾸준히 해서 부족한 부분을 채워야겠다. Findings useEffect 의 재 렌더링 조건에 대해서 더 잘 알게된 것 같다. Future Action…

Facts 서버에서 가져온 상품평 리스트를 출력했다. 부모와 자식간의 상태전달 여러번을 한 이유로 발생된 에러를 해결했다. Feelings 알고리즘을 오래동안 안 풀었더니 함수가 기억이 안난다.. 빨리 꾸준히 해서 부족한 부분을 채워야겠다. Findings useEffect 의 재 렌더링 조건에 대해서 더 잘 알게된 것 같다. Future Action…

Facts 상품평 사진 업로드 기능을 구현했다. 상품평 페이지에서 상품의 별점, 평가글, 사진을 업로드하고 서버에 안전하게 저장되도록 구현했다. Feelings 프로젝트가 커질수록 점점 복잡해진다는 것을 느꼈다. 데이터를 알맞게 가공해서 보내는 게 정말 번거롭다.. Findings…

Facts 그전에 해결 못했던 프록시와 라우터 문제를 해결했다. 상품평 컴포넌트를 만들었다. Feelings 기억이 안 나는 부분이 있어서 문제가 생긴 게 있는 것 같다. 언제나 항상 실수는 나한테서 온다는 것을 느낀다. Findings 테스트 코드의 중요성을 알았다. 라우터와 프록시에 대해 조금 더 알게 된 것 같다. Future Action Plan…

Facts 리뷰하기 화면을 만들었다. 리뷰하기 버튼을 누르면 해당 상품을 리뷰하는 화면으로 넘어가도록 구현했다. Feelings 한 달을 쉬니까 정말 잊어버린 게 많다는 것을 느낀다. 오늘도 마지막에 막혀서 짜증 났다. 내가 프록시를 잘 모르고 있다는 느낌이 들었다. Findings 라우터에서 exact는 확실하게 URL…

Facts 카카오 블라인드 테스트 비밀지도 문제를 복습했다. 상품문의 기능을 완성했다. 구매후기 화면을 만들었다. Feelings 상품문의 기능은 만들었지만 관리자가 댓글을 다는 기능은 못만들었다. 갈길이 멀다는게 느껴진다. 항상 새로운 것을 볼때마다 재밌다. Findings | 는 10진수 값을…

Facts 학점은행제 강의를 들었다. css 미디어 쿼리를 사용해서 반응형 웹사이트를 만들었다. 상품 디테일 화면에서 상품 소개 화면을 만들었다. 상품문의 기능을 만들고 있다. Feelings 한달만의 코딩이라 긴장했지만 그래도 첫날치고는 괜찮았다고 느낀다. 오랜만에 머리를 써서 그런지 너무 피곤하다. Findings…

Facts 은행을 다녀왔다 내일도 가야한다는게 너무 화난다. 학점은행제 네트워크 강의를 들었다. Feelings 미리 들어놔야겠다. Findings 들을게 좀 많다. Future Action Plan 꾸준히 시간날 때 마다 들어야겠다.

Facts 오늘은 학점은행제 네트워크 강의를 들었다. Feelings 전에 이미 공부하던거라 듣기 편했다. Findings 반복학습의 중요성을 알았다. Future Action Plan 꾸준히 시간날 때 마다 들어야겠다.

Facts 오늘은 보문역쪽 방을 알아봤다. Feelings 괜찮은방 구하기가 정말 어렵다는 것을 느꼈다. Findings 전세방은 거의 12월 ~1월쯤에 다 몰린다는 것을 알았다. Future Action Plan 방을 빨리 구하자

Facts 오늘 학점은행제가 개강했다. 몇몇 방을 보고 왔는데 그중에 고려대 쪽 방이 제일 좋아서 대출 조건을 확인하는 중이다. Feelings 오늘 너무 추워서 죽을뻔했다. Findings 나한테 돈이 3억이 있었으면 이런 일이 없지 않았을까? Future Action Plan 돈을 많이 벌자 지하철 타고 갈 때 책을 하나 가져가야겠다.

Facts 오늘 집 계약이 끝나서 짐을 파주로 옮겼다. 상품 디테일 화면에서 상품을 설명하는 이미지가 나오도록 구현했다. Feelings 서울 전셋집을 구하기가 정말 어렵다는 것을 알았다 Findings 뭐든지 돈이 있어야 한다는 것을 알았다. Future Action Plan 방을 구하자

웹을 지탱하는 기술 3가지를 쓰고 그 관계를 설명하시오. (27~28p) HTML은 그 정보를 표현하는 문서형식 HTTP라는 프로토콜을 사용하여 그 정보들을 가져오거나 내보낸다. URI는 리소스 식별자 웹 이전의 하이퍼미디어, 분산 시스템과 비교하는 관점에서 하이퍼미디어로서의 웹, 분산시스템의로서의 웹을 설명하시오. (42~43p…

Facts 하루 3분 네트워크 책 1~3장을 다시 읽었다. Feelings 계속 읽다 보니 몰랐던 부분을 이해할 수 있었다. Findings 이해한 것은 외운 것이다. Future Action Plan 웹을 지탱하는 기술 책을 정리해야겠다.

Facts 장바구니 알람기능을 구현했다. 품절기능을 구현했다. 풀점일때 상품을 구매하지 못하도록 구현했다. Feelings 알람 기능을 구현중인데 정말 화가난다.. Findings 다이얼로그 라이브러리의 사용법을 알았다. Future Action Plan 다이얼로그를 다 적용해야겠다.

Facts 서울시 청년 임대보증금 대출을 신청했다. 장바구니 기능을 다 구현했다. Feelings 할 수 록 재밌어진다. Findings 문제가 안 풀릴 때는 심호흡을 한 번 하자. Future Action Plan 장바구니 재고 기능을 구현해야겠다.

Facts 장바구니에서 상품의 개수를 수정할 수 있도록 구현했다. 개수를 변경하면 해당 가격도 변경되도록 했다. Feelings 몽고디비에서 데이터를 조작하는 것이 정말 힘들다는 것을 알았다. Findings 몽고디비에서 배열의 값을 pull…

Facts 회원 이름, 핸드폰 번호, 패스워드 변경 기능을 구현했다. 검색 기능 오류를 해결했다. 회원가입 기능을 수정했다. Feelings 이제 끝이 보인다.. Findings 어떤 기능을 성공할 때마다 다이얼로그로 상태를 알려주는 것이 중요하다는 것을 알았다. Future Action Plan…

WWW을 구성하는 3가지 핵심요소 HTML(HyperText Markup Language) - SGML을 베이스로한 문서 기술 언어 HTTP - 문서 전송 프로토콜 URL(Uniform Resource Locator) - 문서의 주소를 지정하는 방법 http://user:pass@www.example.jp:80/dir/index.htm?uid=1#ch…

Facts 구매 페이지 옆에 마이 쇼핑 메뉴를 만들었다. 마이 쇼핑 메뉴에서 사용자 정보 변경을 누르면 사용자의 패스워드가 맞는지 입력하고 변경할 수 있는 컴포넌트로 나오도록 했다. 그림으로 배우는 HTTP NetWork 책을 11장까지 스터디했다. 코딩 도장 때 못 풀었던 카펫 문제를 풀었다. Feelings…

Facts 회원만 상품을 결제할 수 있도록 구현했다. 결제 페이지에서 배송지를 다음 api로 결정할 수 있도록 구현했다. 전에 알고 있던 잡다한 에러들을 해결했다. Feelings 속도를 좀 더 내야겠다고 느꼈다. Findings 팝업을 간단하게 띄울 수 있는 방법을 알았다. 배송지 설정 api의 적용 방법을 알았다. Future Action Plan…

Facts 결제가 성공해야 구매리스트에 쌓이도록 구현했다. 로그인 기능 문제가 있던 것을 해결했다. Feelings 전세방을 구하고 있는데 정말 어렵다.. Findings HTML 태그에는 타입 값을 정해주어야 한다는 것을 알았다. 처음 구하는 전세방이지만 많은 것을 알게 되었다. Future Action Plan…

Facts 방 계약이 끝나서 방을 알아보러 부동산을 다녔다. 수강신청을 했다. Feelings 매우 바쁘다 스트레스가 밀려온다. 책을 꾸준히 읽어야겠다. Findings 책을 워낙에 기피하면서 살아와서 그런지 어디가 중요한 부분인지 잘 모르는 경우가 많다는 것을 알았다.. Future Action Plan 수강신청은 끝났으니 방 문제를 빨리 해결해야겠다.

…

Facts 아침에 스킬 트리 문제를 복습했다. 상품의 id와 개수를 서버에 전달해서 서버로부터 총 가격을 불러오는 기능을 구현했다. 결제 css를 수정했다. 결제 페이지를 완성했다. 3분 네트워크 책을 한번 정독했다. Feelings 오늘 코드를 작성하면서 일단 효율 좋은 코드를 짜기 전에 기능부터 만들어야 된다고 느꼈다. Findings…

Facts 상품페이지에서 구매하기를 누르면 결제페이지로 넘어가서 결제리스트에 상품이 쌓이도록 구현했다. 장바구니에서 구매하기를 누르면 결제페이지로 넘어가서 결제리스트에 상품이 쌓이도록 구현했다. 결제리스트 css 적용했다. Feelings…

Facts 아임포트 api를 내 프로젝트에 간단하게 적용했다. 구매 페이지에 사용자의 정보를 출력했다. 구매 페이지의 배송 요청 사항을 사용자가 수정할 수 있도록 구현했다. Feelings 문제 해결 능력이 조금 상승했다는 것을 느낀다. Findings 아임포트 결제 기능을 사용하는 방법을 알았다. Future Action Plan…

Facts 검색 기능을 구현했다. 구매페이지 css를 적용했다. 3분 네트워크 책 2장을 읽었다. Feelings 언제나 처음 하는거나 배우는 것은 어렵다는 것을 느낀다.. Findings 부모자식 관계가 아니여도 상태전달을 하는 방법을 알았다. 몽고디비엔 무수하게 많은 기능이 있다는 것을 알았다.. Future Action Plan…

목적 알고리즘의 성능을 판단하는 시간 복잡도, 공간 복잡도에 대해서 알아보도록 합시다. 시간 복잡도와 공간 복잡도(Time Complexity Space Complexity…

Facts 세션을 레디스에 저장했다. 쿼리 스트링을 이용한 검색 기능을 만들었다. 3분 네트워크 교실 1장을 읽었다. 최솟값 구하기 문제를 복습했다. Feelings 책을 한번 읽을 때 헤비 하게 읽도록 해야겠다. 프로젝트의 끝이 보이는 게 느껴진다. Findings…

재귀란? 컴퓨터 과학에 있어서 재귀(Recursion)는 자신을 정의할 때 자기 자신을 재 참조하는 방법을 뜻하며, 이를 프로그래밍에 적용한 재귀 호출(Recursive call…

Facts 아이템 디테일 화면에서 개수 선택 후 구매하기를 누르면 구매리스트에 쌓이도록 구현했다. 장바구니에서 선택 후 구매하기를 누르면 구매리스트에 쌓이도록 구현했다. 구매리스트 css를 적용했다. 코딩 올림픽에서 문제를 풀긴 했지만 제시간 내에 못 풀었다. 그림으로 배우는 네트워크 구조 책을 읽었다. Feelings…

Facts 몸이 안좋아서 집에서 네트워크 구조 책을 읽었다. Feelings 건강을 챙기자 Findings 건강이 최고라는 것을 알았다. Future Action Plan 프로젝트를 빨리 끝내야겠다.

Facts 이태원 코딩도장에서 문제를 풀었다. 오늘 몸살이 심하게 와서 일일 할일을 끝내지 못했다. Feelings 몸 관리의 필요성을 느꼈다. Findings 온몸이 아프니 아무것도 할 수 없다는 것을 알았다. Future Action Plan 오늘 쉬고 내일 더 열심히 해야겠다..

Facts 네트워크 구조 책 챕터 3을 읽었다. 장바구니 개수 몇개를 더해도 개수가 추가되도록 구현했다 Feelings aggregate를 사용해서 몽고디비의 카운트를 출력하고 했지만, 너무 어렵다.. Findings 몽고디비를 제대로 사용할려면 정말 어렵다는 것을 알았다.. Future Action Plan…

Facts 장바구니에서 상품을 구매하면 구매리스트에 구매한 상품 개수, 가격을 출력하려고 했는데 구현 못했다. 몽고디비 고유 Id 값에 문제가 생겨서 시간을 잡아먹었다. 그림으로 배우는 네트워크 구조 책 챕터 2를 읽었다. Feelings 몽구스 populate로 가져온 상품 데이터에 count…

목적 로그인 기능을 구현하는 것이 목적이라면 반드시 알아야 할 Redis에 대해서 알아보는 것이 이 글의 목적입니다. Redis란? 레디스(Redis)는 “REmote DIctionary System”의 약자로 메모리 기반의 Key/Value Store이며, 리스트, 해시, 셋 정렬된 셋 등 여러 형식의 자료구조를 지원합니다. NoSQL DBMS…

JSON JavaScript Object Notation의 약자로, RFC 4627이 규정하는 데이터를 기술하기 위한 언어이다. 기법은 JavaScript지만 “심플함”으로 인해 많은 언어에서 라이브러리를 제공하고 있다. 그래서 프로그래밍 언어 간에 데이터를 주고받을 수 있다. 미디어 타입 JSON의 미디어 타입은 ‘application/json…

Facts 장바구니 전체 삭제, 선택 삭제 기능을 구현했다. 그림으로 배우는 네트워크 구조 챕터 1을 읽었다. 알고리즘 올림픽에서 카카오 블라인드 문제 중 하나인 실패율 문제를 풀었다. Feelings 장바구니 기능을 다 구현하니 기분이 좋다. 한번 읽었던 정보를 가지고 비슷한 자료를 읽으니 그전부터 훨씬 수월하게 읽힌다는 느낌을 받았다. Findings…

Facts 장바구니 groupBy로 나눠진 데이터를 Object values를 이용해서 중복된 데이터 값을 제거했습니다. 장바구니 상품 개수, 가격, 총 가격을 출력했다. 장바구니 아이템 선택 삭제를 구현했다. Feelings…

Facts 장바구니 배열에 id 값을 넣고, populate를 이용하여 가져올때 id 값에 맞는 프로덕트들의 데이터를 담은 배열을 가져오도록 구현했다. 아침에 알고리즘 문제를 풀면서 Compare 함수를 복습했다. 코딩 도장 때 처음 접해보는 문제를 풀어봤다. Feelings…

Facts 회원가입이 완료되면 몽고디비 장바구니, 구매 목록 컬렉션에 해당 아이디에 맞는 배열이 생성되도록 구현했다. 웹을 지탱하는 기술 책을 읽었다. Feelings 데이터베이스 다 구현하고, 레디스도 붙여야 하는데 시간을 좀 내야 된다는 것을 느꼈다. Findings 몽고디비 Document 업데이트 메소드에 대해서 공부했다. Future Action…

Facts 상품을 추가하고, id에 맞는 상품의 정보를 가져오는 것을 구현했다. 로그인 정보를 데이터베이스에서 받아오도록 했다. 데이터베이스를 이용하여 회원가입을 이용했다. Feelings 확실히 하나하나 차근차근 진행하니 목표가 확실해지고, 정확하게 해결해야 하는 문제를 해결할 수 있었다는 것을 느꼈다. Findings…

Facts 설날동안 김정환님 블로그를 보면서 웹팩,바벨의 중요성을 알았다.

Facts 어제 못 끝낸 로그인 기능을 마저 분리했다. 몽고디비의 장점 중 하나가 스키마다. 오늘은 상품 스키마를 들어서 스키마에 맞는 데이터를 조회하고, 수정하고, 삭제할 수 있도록 구현했다. 데이터베이스에서 상품을 가져와서 출력해주는 기능을 구현했다. 서버에서 데이터를 받아올 때 프로미스 형태로 오는 걸 깜빡하고 시간을 살짝 낭비했다. Feelings…

Facts 데이터베이스와 연결하기 위해서 store에 있는 기능을 service와 repository로 분리했습니다. “웹을 지탱하는 기술” 책에서 JSON에 대한 정보를 다시 공부했다. Feelings 처음부터 데이터베이스에 있는 데이터를 가져와서 바로 기능을 적용하려다가 너무 꼬였다는 것을 느꼈다. 현재까지도 JSON…

Facts 프로젝트에 몽구스로 몽고디비를 연결했다. mongoDB 포트를 연결했다. 해당 데이터베이스 컬렉션에 상품 아이템들을 넣었다. Feelings 선택과 집중을 못 해서 나중에 해도 되는 것들에게 시간을 허비한 것 같다. 그래도 어제보다는 Docker 사용하는 것이 익숙해진 것 같다. Findings mongoDB…

Facts Docker에 대해서 공부했다. Docker의 명령어를 정리했다. Docker의 튜토리얼을 진행했고, 이미지를 만드는 것과 배포하는 방법을 알아보았다. Feelings 뭐든지 쉬운 게 없다는 걸 느낀다. 누구나 쳐맞기 전에는 그럴싸한 계획을 가지고 있다. Findings…

목적 자바스크립트에서 사용하는 정규식 표현에 대해서 포스팅 하고자 한다. 평소에 공부할려고 생각하고 있었는데 오늘 간단하게 정규표현식을 어떻게 사용하는지 알아보고자 한다.…

Facts catWeb 프로젝트의 라우터를 분리했다. esLint와 prettier를 사용해서 코드를 정리하는 작업을 했다. 아직 다 못했다. 마이크로 프로텍트 채용 설명회를 다녀왔다. Feelings…

Facts 라우터를 분리하는 코드를 따라치면서 어느 구조로 흘러가는지 이해했다. 내 프로젝트에 index.js에 있는 라우터를 분리하는 작업을 했다. 많이 어려운 부분이 있었다. 기능적인 부분은 routes 폴더에 나눴지만 나누기만 했을 뿐 프로젝트에 적용은 시키지 못했다. Feelings 오늘 우아한 형제들 이종립 님의 SI…

Facts 모던 웹 프론트엔드 개발환경 세미나에서 좋은 강의를 듣고 즐거운 시간을 보냈다. 학점 은행제 신청을했다. 코딩도장에서 알고리즘 문제를 거의다 풀었는데. 제출을 못했다. Feelings 오늘 프론트엔트 세미나를 들으면서 더 열심히 해야겠다는 느낌을 받았다. Findings…

목적 리눅스 우분투 환경에서 기본 텍스트 편집기를 변경하고 싶을 때가 있다.. 나같은 경우는 vim을 주로 사용하기 때문에 초기설정 nano를 vim…

Facts 로그인 부분을 로컬 스토리지를 같이 사용해서 더 확실하게 구현했다. 사용자별로 장바구니, 구매 페이지를 볼 수 있게 구현했다. 프로젝트의 규모가 커질수록 라우터의 규모도 커지고 그러면 나눠야 한다는 사실을 알았다. 리눅스 운영체제를 설치했다. Feelings…

목적 자바스크립트는 프로토타입 기반 객체지향 언어다. 프로토타입 기반 프로그래밍은 클래스가 필요 없는 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화 등의 개념을 구현할 수 있다. 하지만 ES…

목적 대표적으로 JAVA 같은 객체지향 언어에서의 this는 클래스 인스턴스의 레퍼런스 변수입니다. 하지만 javacript에서 this는 전혀 다른 의미를 가집니다. this가 어려운 이유는 자바스크립트에서 this는 전혀 다른 의미를 가지기 때문입니다. 이 글은 공부를 목적으로 정리한 글입니다. this란? this…

목적 우리가 쓰는 자바스크립트는 프로토타입(ProtoType…

Facts 장바구니 체크박스 삭제 기능을 구현했다. 아이템 디테일 화면에서 구매하기를 누르면 해당 아이템이 구매 목록에 쌓이도록 구현했다. Feelings…

Facts 장바구니 선택 삭제 기능을 구현했다. 장바구니 아이템 개수, 가격, 총 가격 출력 기능을 구현했다. Feelings 오늘 감기에 걸려서 몸 상태가 안 좋았는데 그래도 작은 기능이지만 구현을 성공한 거 같다. 예전에 작성한 코드를 수정하느라 시간이 좀 걸린 부분이 있었다. 항상 코드를 짤 때 정리의 필요성을 느꼈다. Findings…

Facts 오늘 코딩도장에서 스택/큐 문제를 풀었다. 장바구니 아이템 선택삭제 기능을 구현했다. Feelings 코딩 도장을 하면서, 처음 세운 계획을 진행하다 막힌 점이 있었는데, 막혔을 때 다시 계획을 세우고 진행했어야 하는데 그러지 못했다. Findings…

Facts 아이디 별로 장바구니 출력 기능을 구현했다. 장바구니 전체 삭제 기능을 구현했다. 장바구니 선택 삭제, 체크박스 기능을 다 구현하지 못했다. Feelings…

Facts 오늘은 아주 적은 시간이지만 알고리즘 문제를 복습했다. Feelings 확실히 그 전보다 푸는 속도가 빨라졌다는걸 느꼈다. Findings 하지만 더 열심히 해야한다는 것을 알았다. Future Action Plan 나는 매일 똑같이 반복적으로 알고리즘 문제를 풀고 복습할 것이다. Feedback

목적 이번 포스팅에서는 NoSQL의 대표적인 데이터베이스인 MongoDB란 무엇이고, 특징에 대해서 정리해보았습니다. MongoDB란? 실무에서는 오라클이나 MySQL과 같은 관계형 데이터베이스가 많이 사용됩니다. 그러나 최근 비관계형 데이터베이스를 적용하는 곳이 늘고 있습니다. 그중에서도 가장 대표적인 NoSQL 데이터베이스가 MongoDB…

목적 이번 포스팅에서는 개발자라면 꼭 필수적으로 알아야 하는 데이터베이스(Database)란 무엇이고, 어떤 문제를 해결해주는지, 왜 사용하는지에 대해서 정리해보았습니다. 데이터베이스 (DataBase…

목적 이번 포스팅에서는 NoSQL이라는 유연한 데이터 모델을 갖춘 고성능 비관계형 데이터베이스가 무엇이고, 어떤 특징을 가지고 있고, 어떠한 문제를 해결해주는지 정리해보았습니다. NoSQL 데이터베이스란? NoSQL은 Not Only SQL의 약자로 기존 RDBMs…

HTML의 구성요소 HTML의 가장 기본적인 구성요소는 헤더와 바디입니다. HTTP 메시지와 마찬가지로 헤더에는 문서의 메타 데이터를, 바디에는 문서의 내용 자체를 넣습니다. title: 문서의 타이틀 link: 다른 리소스로의 링크 script: JavaScript 등의 클라이언트 사이드 프로그램 meta…

Facts 아침에 간단하게 어제 풀었던 알고리즘 문제를 복습하고, 웹에서는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 HTTP 프로토콜을 사용하는데, HTTP 프로토콜로 데이터를 주고받기 위해서는 요청을 보냈을때 무조건 응답을 받아야 한다는 것을 알았다. 오늘 처음으로 코딩 테스트에서 문제를 시간 내에 풀었다. Feelings…

Facts 오늘 오전에 알고리즘 최소공배수 최대공약수 문제를 복습했다. git training 강의를 듣고 실습했다. 아이템이 사용자의 장바구니에 담기도록 구현했다. 하지만 담는 과정에서 에러가 발생했다. Feelings 코드를 보면 너무 대충 짠 느낌이 많이 들었다. 뒤 돌아보면서 왜 더 신경을 못썼나 하고 후회가 많이 된다. Findings…

Facts 오늘 회원가입 기능을 간단하게 구현하고, 짝 프로그래밍으로 최소공배수, 최대공약수 구하는 문제를 풀었다. Feelings 테스트 코드를 작성을 안 하고 문제를 풀었더니, 에러가 발생했을 때 어디서부터 잘못된 건지 모르기 때문에 에러를 해결하는 게 쉽지 않았다. 테스트 코드의 중요성을 깨달았다. Findings…

Facts 로그아웃을 구현했고, 로그인을 안한 상태로 마이페이지에 들어가면 홈을 리다이렉트 시키도록 구현했다. Feelings 오늘 생각을 잘못해서 괜한 시간을 낭비했다. 잘못되었다는 걸 느꼈을 때 빠르게 캐치해야 하는데 그러지 못했다. 생각의 중요성을 다시금 깨달았다. Findings…

Facts 서버에서 클라이언트로 세션id가 담긴 쿠키를 가져오는 것을 성공했고, 로그인에 성공하면, 홈으로 리다이렉트 하도록 구현했다. Feelings 하루를 끝낼 때마다 좀 집중했으면 더 공부할 수 있었을 텐데 하고 느낀다. 더 열심히 해야겠다. Findings…

다른글에서 간단하게 쿠키와 세션에 대해서 간단하게 정리해 보았는데 이글에서 더 집중적으로 쿠키와 세션에 대해서 적어보려고 합니다. Cookie와 Session을 사용하는 이유 HTTP 프로토콜의 특징이자 약점을 보완하기 위해 사용한다. HTTP…

프록시(Proxy) 프록시(Proxy…

Chapter06 HTTP의 기본 HTTP의 중요성 HTTP란? 컴퓨터에서 다룰 수 있는 데이터라면 무엇이든지 전송할수 있는 프로토콜이며, REST의 중요한 특징인 Uniform 인터페이스, 스테이트리스서버, 캐시 등을 구현하고 있는 web의 기반이 되는 프로토콜입니다. TCP/IP란? HTTP는 TCP/IP…

Facts 오늘은 아침에 알고리즘 문제를 풀고, proxy를 이용해서 로그인을 누르면 session id가 담긴 쿠키를 생성하는 것 까지 구현했다. Feelings 오늘 porxy로 서로 다른 포트로 세션을 공유할 수 없는 문제를 해결했는데, proxy를 좀 더 공부했으면 더 빨리 해결했을거라는 느낌이 들었다. Findings…

Facts 클라이언트와 api가 port가 다른 상태에서 session을 전달하기 위해서 방법을 찾고있는데, 해결하지 못했다. Feelings 내가 뭘 잘못하고 있을까? 너무 추측으로 문제를 푼다고 느꼈다. Findings 나 자신이 부족하다는걸 알았다. Future Action Plan 더 문제를 해결하려고 할때 원인부터 찾아야겠다. Feedback

HTTP Stateless Protocol http 프로토콜은 상태를 유지하지 않는다. 이를 stateless protocol이라 한다. HTTP…

Facts 오늘은 어제 풀었던 문제를 50분동안 다른방법으로 풀어봤다. 또 로그인 기능을 쿠키와 세션을 적용해서 구현 하고있다. 따라서 쿠키와 세션에 대해서 공부했다. Feelings 역시 공부는 필요한게 있을때 필요한걸 공부 할 때가 이해가 잘 된다는걸 느낀다. Findings 쿠키, 세션의 기능, 장점 단점, 차이점을 알게되었다. Future…

Facts 오늘은 아침에 알고리즘을 복습하는 시간을 가지고, 프로젝트에서 아이템 디테일 페이지 데이터를 서버로부터 가져오는 기능을 구현하고, 유저 정보 데이터를 서버로 보내고, 로그인 인증 로직을 서버에서 실행할 수 있게 구현했다. Feelings…

목적 우리가 javascript에서 흔히 사용하는 메소드들중 가장 대표적인 두가지 forEach와 map의 차이점을 알아보자. forEach map 느낌이 오시나요? 가장 큰 차이점은

Web Server와 WAS Web Server의 개념 소프트웨어와 하드웨어로 구분된다. 하드웨어 : Web서버가 설치되어 있는 컴퓨터 소프트웨어 : 웹 브라우저 클라이언트로 부터 HTTP 요청을 받아 정적인 컨텐츠(html,css,jpeg)를 제공하는 컴퓨터 프로그램 Web Server의 기능 HTTP…

‘웹을 지탱하는 기술’ 1회차 목적 첫번째 목적 HTTP와 URI, 그리고 각종 하이퍼미디어의 포멧의 스펙을 설명하는 것이다. 스펙을 안다는 것은 좋은 웹서비스의 설계로 향하는 첫걸음이기 때문입니다. 하지만, 스펙을 안다고해서 좋은 설계를 할 수 있는것은 아닙니다. 웹다움은 그런 스펙들이 가진 아키텍처적인 뒷받침에 기초하고 있기 때문입니다. 우리는 HTTP…

Node.js는 싱글 스레드 어플리케이션 입니다. 하지만 event와 callback을 통해 동시성을 지원할 수 있습니다. Node.js에선 Event를 매우 많이 사용하고, 이것 때문에 다른 비슷한 기술들 보다 훨씬 빠른 속도를 자랑합니다. Node.js 기반으로 만들어진 서버가 가동되면, 변수들을 initialize…

Promise Promise값 불러오기 then, await Facts 아침에 간단하게 알고리즘 한문제를 풀고, 서버로부터 받아온 카테고리 목록에 맞는 데이터를 서버로부터 가져오도록 구현했다. 마지막으로 “웹을 지탱하는 기술” 책을 꾸준히 읽으면서 정보를 공유했다. Feelings 내가 javaScript…

Facts 오늘도 알고리즘을 50분 풀어보고, 백엔드 서버에 있는 데이터를 프런트엔드로 받아오는 것을 구현했다. 데이터를 가져오는 건 성공했는데, 가져온 데이터를 기존에 있던 함수에 어떻게 적용할지 고민하고 있다. 구조 자체를 변경해야 해서 어려움을 겪고 있다. Feelings…

Facts 오늘 아침에 알고리즘을 50분 풀고, 프로젝트를 만들면서 uesEffect에 대해서 새롭게 알게되었다. 또한 어제 읽었던 “웹을 지탱하는 기술”을 마저 읽었다. Feelings 내가 막히거나 확신하지 못하는게 있으면 바로 질문이나, 피드백을 통해서 바로잡는게 중요하다는 것을 느꼈다. Findings 오늘도 나는 useEffect…

배열을 문자열로 repeat Facts 오늘은 2명이서 “웹을 지탱하는 기술”이라는 책을 읽으면서, 3분 책을 읽고 서로가 읽은 내용을 공유하는 방식으로 내가 필요한 정보들을 효율적으로 얻을수 있었다.. URI URL의 차이점, HTTP 메소드, 메세지, REST, express와 middleware에 대해서 공부했다. Feelings…

Facts 오늘은 구매 상세페이지를 적용하고, pagiNation 기능을 구현하는데, 여태 내가 짜던 구조가 문제가 있어서 어려운 부분이 많았다. 일단 구상자체도 힘들었고, 볼 수있는 예제도 없었기때문에 힘든부분이 많았다. 그래서 완성은 못했지만 내일 다시 구현해볼 예정이다. Feelings…

내가 여태 알고리즘 문제를 풀면서 해왔던 방식 나는 대학교…

Facts 오늘은 로그인 폼, 검색 결과를 css를 적용했다. css를 적용하는 것은 익숙해져서 속도가 빨라져서 문제가 없었다. 또 오늘 알고리즘 문제를 풀었는데 내 위치를 깨달았다. 너무 알고리즘 공부를 소홀히 한 거 같다. Feelings…

Facts 오늘은 어제 푼 알고리즘 문제를 복습하고, 다른 사람들이 풀어놓은 방식과 내가 쓴 방식을 비교하며 공부했다. 오늘은 장바구니 css를 정리하고 구매 페이지 css를 적용시켰다. 그리고 로그인 폼에 css를 적용 중이다. Feelings css…

FlexBox Gird Facts 오늘은 메뉴를 css를 적용했다. 또 Grid를 이용해서 아이템 상품들을 화면에 나열했고, 장바구니 또한 Gird FlexBox를 이용해서 아이템들이 쌓이도록 적용했습니다. Gird와 flex 박스를 공부하고 있는데, 괜찮은 공부 프로그램이 있어서 재미있게 할 수 있었다. Feelings…

Facts 오늘 짝 프로그래밍을 했다. 일단 아이템 상세페이지에서 바로 개수를 정하고 구매하기 버튼을 누르면 마이페이지 구매리스트에 구매한 날짜까지 적히도록 구현하였고, 검색창과 검색결과를 한 컴포넌트에 작성했는데, 이것도 컴포넌트를 분리하였습니다. 또한, 홈페이지에 css를 적용하면서 웹 브라우저 크기를 줄여도 UI…

Facts: 오늘은 장바구니, 마이페이지 구매리스트에 아이템의 갯수를 출력했고, 특정 아이템 화면에서 원하는 수량을 선택해 아이템을 장바구니에 넣으면, 선택한 개수만큼 장바구니에 담도록 설정했다. 총 수량에 맞는 가격이 출력되고, 구매하기를 누르면 마이페이지 구매리스트에 내가 구매한 아이템이 갯수와 함께 출력된다. Feelings…

이 포스트는 localStorage를 이용한 로그인을 사용하였고, 로그인 상태면 localStorage에 값에 를 저장하고, 로그아웃 상태면 를 저장하도록 했습니다. 자 이제 AUTHROUTE라는 js파일을 만들어 봅시다. 저는 로그인 상태일 경우, MyPage…

Facts…

Facts: 오늘은 로그인 시스템을 구현하고 맞는 아이디와 비밀번호를 입력하면 로그인 성공이라는 메세지가 나오고 localStorage에 isLogin이라는 key에 true…

Facts: 오늘은 체크박스를 선택해서 삭제하는 부분의 오류를 수정했고, 장바구니를 선택해서 구매하는것, 아이템 자체에서 구매를 구르면 구매리스트에 입금대기중 이라고 표시하는 기능까지 구현했다. 로그인 까지 구현하기위해 LocalStorage와 SessionStorage의 차이점을 공부했다. Feelings: 체크박스 선택하는 오류도 filter…

Facts: 오늘은 예정대로 장바구니 리스트에있는 아이템의 체크박스를 클릭해서 삭제하는 기능을 마저 구현했다. 새로운걸 적용시키는데에 시간이 오래걸렸지만, 기능을 구현할수있었다. 하지만 똑같은 제품을 연속…

이벤트이름을 설정 할 때 camelCase 로 설정해주어야 합니다. onclick 은 onClick, onmousedown 은 onMouseDown, onchange 는 onChange 이런식으로 말이죠. 이벤트에 전달해주는 값은 함수 여야 합니다. 만약에 onClick={this.handleIncrease…

왜 쓰는가? 우리가 쓰는 React는 기본적으로 Component…

Facts…

fetch Destructuring 구조화된 배열 또는 객체를 비구조화 하여 변수에 할당 useEffect 기본예제 템플릿 리터럴 배열 기존요소 삭제, 추가 Facts: 오늘은 어제 했던 가격 리스트별로 출력 기능을 리팩토링하였고, useEffect…

async 내림차순 오름차순 함수 useEffect 완벽가이드 Facts: 오늘은 useEffect를 사용해서 제품리스트를 가격순별로 오름차순, 내림차순 별로 볼수있는 기능을 구현했다. useEffect…

React Hooks 사용하기 React 이벤트 제어 Hooks완정정복 useEffect함수형 컴포넌트에서도 가변적인 상태를 지닐수있게해줌 useState 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할수있도록 설정 할 수있는 HOOK이다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate…

className 특정 엘리멘트의 클래스 속성의 값을 가져오거나 설정할수있다. preventDefault 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다. stopPropagation 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막는다. onsubmit 이벤트는 제출버튼 을 눌렀을때 발생하는 이벤트이다. from…

uesparams의 사용방법 : 현재 url에 전달된 파라미터를 각 컴포넌트에서 받아낼수있다. 리액트 훅스의 기본 : 클래스형 컴포넌트에서만 사용할수있는 state를 hooks를 사용해서 클래스형 컴포넌트 에서 쓸수있다. Facts…

Facts: 오늘도 마찬가지로 리액트로 categories 부분을 만들었다. categories에 있는 배열에 key값과 products에 있는 key값이 동일하는 제품들을 나열해주는 방식으로 적용해보았다. 이 기능을 구현하는 과정에서 시간이 좀 들었지만 함수는 완성했고 원하는 메뉴를 클릭하면 내가 클릭한 메뉴의 product…

Facts: 웹사이트에 리액트를 사용해서 프론트엔트를 만들고있다. 그중에서도 쇼핑몰 웹사이트를 만들면서 홈화면을 만들고있는데, 어려운 부분이 많았다. 일단은 카테고리 메뉴 구현 부분에서 문제점이 많았는데 categories 데이터와 products…

GitHub Blog 서비스인 github.io 블로그를 만들었다. Facts: 처음에 gitgub를 이용해서 블로그를 만들어서 minimal mistakes 테마를 적용해서 간편해보이게 만들어보았는데,Jekyll 설치 과정에서 나는 jekyll new wesite-name 이라는 명령어를 사용하지 않았다. 이것은 로컬 repository…