[6월 회고] 이번엔 진짜 좀 다른데..?2024. 06. 28.2분목차 멘토링 지난 6월 남은 6월 다가올 7월 주절주절 멘토링지난 5월 중순 경에 프론트엔드 쪽으로 다시 방향을 잡고 멘토링을 받았었다. 그때는 진로에 대해 갈팡질팡 하고 있었을 때라 전체적으로 우울한 분위기로 멘토링이 진행됐었다. 당시 실시간 녹화 했던 영상을 보면 정말 왜 저렇게 주눅이 들어있나 싶을 정도로 무거웠었다. 그래서 진짜 마지막이라는 생각으로 …
EC2, docker를 이용한 배포 후기 [지도 검색 서비스 제작기]2024. 06. 25.5분프로젝트 링크 지금 경로탐색 기능과 ssr로 구현한 로그인 화면이 나오지 않고 있습니다. 참고해주시길 바랍니다. 프로젝트 아키텍쳐 React는 Cloudfront에, express는 docker를 이용해 aws ec2에 배포했다. 정말 이 한 줄로 표현하는게 너무 아쉬울정도로 역대급 삽질을 경험했다. 그 삽질들 중 기억에 남는 삽질에 대해서 작성해보려한다. UBUNTU학부생때 우분투 라는게 뭔지도 모르면서 컴공 감성이라며 노트북에 …
일단 완성은 했는데.. [지도 검색 서비스 제작기]2024. 06. 12.3분react, express 기반 풀스택 프로젝트 my-map의 경로탐색 기능을 사용한 모습 지난 글에서의 계획지난 글에서 앞으로의 계획을 마지막 문단에 기재했었는데 내 말을 얼마나 지켰는지 한 번 자체적으로 평가해봤다. 일단 이번 주 안으로 기능 구현을 마무리 지을 수 있을 것 같다.일단 기능 구현을 저번주 일요일까지 하기로 했었는데 그 잘 안됐어요 미안해요 그래도 …
やあ久しぶり[기술 면접 풀어보기]2024. 05. 21.5분4년전에 React.js로 취업 준비를 할 때 인상 깊게 봤던 모의 인터뷰 영상이 있다. https://www.youtube.com/watch?v=gnkrDse9QKc&t=2s 이 영상인데 당시에 면접준비를 하겠답시고 여러 영상, 글들을 닥치는 대로 봤었는데 제일 인상적인 인터뷰의 형태였어서 아직도 기억을 하고 있다. 당시에는 저 면접 문제들에 대해 단 한 가지도 명쾌한 답을 내지 못했는데 다시 취업을 준비하는 지금의 나는 …
[주간 회고] 올 해 안에 취업하기2024. 05. 20.3분토이 프로젝트에 대한 고민원래는 react.js 를 가볍게 복습하기 위해서 간단한 프로젝트로 진행하려 했는데 프로젝트를 진행하면 할 수록 재미있기도 하고 발전시킬 수 있는 요소들이 많아보여 백엔드까지 추가해 프로젝트 볼륨을 좀 늘려보려고 한다. 백엔드 스택을 결정하는데에 좀 고민이 됐는데 현재 내가 java spring 과정을 듣고있기에 spring을 선행학습 해서 적용할까 하다가 그러기엔 시간이 …
[주간 회고] 올 해 안에 취업하기2024. 05. 13.2분토이 프로젝트React.js, Kakao map api를 이용한 토이프로젝트를 시작했다. 이번 토이프로젝트의 표면적인 목표는 React.js, 웹 퍼블리싱, api 활용 이었지만 더 큰 목표는 개발에 대한 흥미를 다시 살리는 것이었다. 결국 내 목표가 단순히 취업이 아닌 롱런하는 개발자가 되기 위해선 이 개발이라는 활동을 즐겨야 한다고 생각했다. 그래서 나는 이 프로젝트를 내가 정말 개발에 …
[React.js] 상속에 대한 고민2024. 05. 10.3분백엔드 개발자가 목표지만 React에 대한 경험을 포기 하기엔 아쉽다는 조언을 들어서 React를 이용한 작은 토이 프로젝트를 진행하고 있다. state, 컴포넌트간 props 관리를 상기하기 위해 검색 시스템을 구축중인데 검색과 같은 동적으로 props를 전달해야하는 시스템에서 기존에 내가 사용했던 props 전달 방식으로는 검색을 할때마다 재랜더링을 해야하는 문제점이 생겨버려서 Java에서의 상속처럼 부모 자식 관계의 …
한 달 안에 취업하기 #172020. 02. 15.1분오늘 할 일 알고리즘 1문제 면접 문제 복기하기 알고리즘 1문제 Github 면접 문제 복기하기 자바스크립트의 자료형 Number String Boolean Undefined Null Function Object Array 자료형을 두 종류로 나누기 원시타입 : Number, String, Boolean, Undefined, Null 참조타입 : Object, Function, Array 자바스크립트 this의 4가지 활용법 일반 함수 실행 방식 (this 값 …
한 달 안에 취업하기 #162020. 02. 14.1분오늘 할 일 알고리즘 1문제 웹 관련 개념 잡기 알고리즘 1문제 Github 웹 관련 개념 잡기 자바스크립트의 이벤트 위임 요소들 각각에 이벤트를 부여하는 것이 아닌 하나의 이벤트 리스너로 전체영역에 등록하는 것. document.addEventListener('DOMContentLoaded', function() { let app = document.getElementById('todo-app'); // 리스트 아이템의 전체 영역에 이벤트 리스너를 등록합니다. app.addEventListener('click', function(e) { if …
한 달 안에 취업하기 #152020. 02. 11.2분오늘 할 일 알고리즘 1문제 vingle 문제 풀기 프론트엔드 면접질문 달아보기 글 복습 javascript 개념공부 알고리즘 1문제 Github Vingle 문제 풀기 Vingle 사전 평가 문제 그림1에서 test.txt 가 있을 때 log 를 작성해주세요. 132 그림1에서 test.txt 가 없을 때 log 를 작성해주세요. 13 다음과 같이 Callback이 중첩된 코드를 어떻게 하면 …
한 달 안에 취업하기 #142020. 02. 10.1분오늘 할 일 알고리즘 1문제 알고리즘 1문제 Github 중요 공지 오늘 지원했던 회사 중 한 곳에서 면접제의가 왔다. 그쪽에서 말씀하시길 1-2시간이 걸리는 기술면접이 될것이라고 엄포를 놓은지라 발등에 불이 떨어졌다. 면접일은 목요일이고 그 날까지 하루 1알고리즘을 제외하고는 모두 이론만을 다뤄야 할 것 같다. 그 이론은 과거에 했던 면접질문 답변 달아보기가 될 …
한 달 안에 취업하기 #132020. 02. 09.2분오늘 할 일 알고리즘 1문제 토이 프로젝트 시작 프로그래밍 관련 유튜브 영상 리뷰해보기 알고리즘 1문제 오늘의 문제 : https://programmers.co.kr/learn/courses/30/lessons/42586 Github 토이 프로젝트 시작 기한을 좀 2.14까지로 잡았는데 아무래도 새로운 개념인 React Hooks와 Redux를 배워가면서 동시에 프로젝트에 접목시켜야 하기 때문에, 기한을 넉넉하게 잡았다.(부족할지도 모른다.) 이번에는 우리 스터디의 특성에 맞춰서 모바일 환경을 …
한 달 안에 취업하기 # 122020. 02. 08.2분오늘 할 일 알고리즘 1문제 새 토이 프로젝트 React Hooks 공부 알고리즘 1문제 오늘의 문제 : https://programmers.co.kr/learn/courses/30/lessons/12948 Github 새 토이 프로젝트 구상 일전에 구상했던 1일 1알고리즘의 인증 사이트를 제작해보려한다. 투두리스트의 발전된 버전이라고 생각하면 될 것 같은데, 사진까지 하려고하면 DB가 필요할것같아서 일단 사진은 재껴두고 기능적인 구현만 해보려고한다. 상태관리가 핵심이 될 것 …
한 달 안에 취업하기 #112020. 02. 07.2분오늘 할 일 알고리즘 1문제 About me 프로젝트 시작 프로그래밍 관련 유튜브 영상 리뷰(이번엔 꼭 한다) 알고리즘 1문제 오늘의 문제 : https://github.com/yoyounn18/1Day1Algorithm/blob/master/%EC%B2%B4%EC%9C%A1%EB%B3%B5 Github About me 프로젝트 시작 / 끝 사이트 주소 : https://yoyounn18.github.io/kimyoungjo/ 후술할 사정에 의해서 어제 글을 못쓰고 오늘 하루에 About me 프로젝트를 끝냈다. SPA로 잘 구성해서 완성하고 만족스러운 …
한 달 안에 취업하기 #102020. 02. 05.2분알고리즘 1문제 오늘의 문제 : https://programmers.co.kr/learn/courses/30/lessons/12918 GitHub SPA 프로젝트 끝내기 https://yoyounn18.github.io/SPA-Toy-Project/ 끝냈다. 우여곡절 끝에 어쨌든 끝냈다. 끝내고 나서 든 생각은 빨리 다음 프로젝트를 시작하고 싶다는 생각이 들었다. 어떤 프로젝트를 할 지 많은 아이디어가 떠올라서 그것들을 정리하는 시간을 가져보려한다. (추가) 방금 완성된 프로젝트를 24인치 모니터가 달린 pc에서 확인을 했는데 배경 no …
한 달 안에 취업하기 #92020. 02. 04.0분오늘 할 일 알고리즘 1문제 SPA 프로젝트 최대한 진행해보기 알고리즘 1문제 오늘의 문제 : https://app.codesignal.com/arcade/intro/level-2/xzKiBHjhoinnpdh6m Github map() 을 활용할 기회일것 같아서 최대한 활용해보려 했는데 map안에서 index를 늘릴 방법을 모르겠어서 포기하고 for문을 돌려버렸다. SPA 프로젝트 최대한 진행해보기 개발노트 마음에 100퍼센트 든다고는 못하겠지만 현재의 내가 낼 수 있는 최고의 산출물인것은 확실할듯 하다. …
[SPA Project] 개발노트2020. 01. 30.0분React.js의 정수 SPA를 다루기 위해 시작한 프로젝트 1.30 사용할 page 구성 완료 이미지 파일 수집 Intro page 디자인 1.31 about 페이지 디자인 사용할 컴포넌트 Title, Typography 제작 각 페이지 Link to 연결 2.1 각 페이지 연결 완료 album 페이지 완료 2.2 intro 페이지 제외 올 리셋 about 페이지 완료 2.4 …
Javascript Map 정복하기2020. 01. 28.2분Map 볼 때 마다 이해가 안되는 녀석이다. 이론적으로는 이해가 되는데 응용이 조금이라도 첨가되면 바로 뇌정지가 와버린다. 이번 기회에 응용까지 싹다 끝내버리려고 한다. map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만, callback에서 return 되는 값을 배열로 만들어냅니다. 기본적인 사용법 const arr = [0, 1, 2, 3]; let squaredElement …
Javscript Array Method 정리2020. 01. 27.2분arr.pop() : 배열 맨 뒷부분의 값을 삭제 arr.push() : 배열 뒷부분에 값을 삽입 arr.shift() : 배열 앞부분의 값 삭제 arr.unshift() : 배열 앞부분에 값 삽입 arr.splice(index, 제거할 요소 개수, 변경된 영역에 추가할 요소) : 배열의 특정 위치에 요소를 주가하거나 삭제 arr.slice(start index, end index) : start index 부터 end index …
[React.js] Hover 버튼 만들기2019. 11. 22.2분React.js를 이용하여 About Me 페이지를 만들던 중 state의 개념과 onMouseOver을 이용하여 Hover(마우스 오버시 반응하는 것) 버튼을 만들어보았다. import React, { Component } from 'react'; import './HoverBtn.css' class HoverBtn extends Component { constructor(props) { super(props); this.handleMouseHover = this.handleMouseHover.bind(this); this.state = { isHovering: false, }; } handleMouseHover() { this.setState(this.toggleHoverState); } toggleHoverState(state) { …
[11.6] React 공부2019. 11. 06.7분Component 추출하기 function Comment(props) { return ( <div className = "Comment"> <div className = "UserInfo"> <img className = "Avatar" src = {props.author.avatarUrl} alt = {props.author.name} /> <div className = "UserInfo-name"> {props.author.name} </div> </div> <div className = "Comment-text"> {props.text} </div> <div className = "Comment-date"> {formatDate(props.date)} </div> </div> ); } 위 코드는 …
![やあ久しぶり[기술 면접 풀어보기]](/resources/media/images/title/2024/5/21/kimyoungjo/12_JF7dJ8gk.webp.minify.webp)
![[SPA Project] 개발노트](/resources/media/images/title/2020/1/30/kimyoungjo/21E0Ak.jpg.minify.jpg)
