waterhuman_b의 등록된 링크

키자드에 등록된 총 50개의 포스트를 확인하실 수 있습니다.

Naver Blog

리액트란 무엇인가? React Concept

리액트란 무엇인가? 리액트의 컨셉... 부트캠프를 하면서 리액트를 3개월 정도 사용을 해왔다. 사실 이런 게 있구나, Hook을 쓰구나 Life cyecle 같은 것들을 그렇구나 하는 느낌으로 넘겼던가 같다. 사실 지금도 자세히는 모르지만, 리액트 강의를 듣는 것을 토대로 간략하게 설명을 해보려고 한다. 제가 공부한 내용을 바탕으로 글을 쓰는 거니 틀린 부분들의 지적은 매우 감사합니다! 리액트란 무엇인가? 리액트의 컨셉은 그냥 단순하게 생각하자면 유저인터페이스를 만들기 위한 javaScript 라이브러리입니다. 이게 맞다.. 페이스북이란 기업에서 만든 라이브러리입니다. 현재는 메타라는 이름으로 쓰고 있지만! 프론트엔드 개발자들이 좀 더.......

원문보기 내부링크
Naver Blog

자바스크립트 타이머함수

자바스크립트에는 타이머 함수가 존재하는데, 타이머 함수는 일정한 시간 혹은 시간마다 실행되는 함수이다. 4가지 함수가 있는데 setTimeout 함수는 일정 시간 후 실행되는 함수이고, setInterval 함수는 일정 시간마다 실행되는 함수이다. 그리고 두 가지 clear 함수가 있어 Timeout 함수와 Interval 함수를 종료시킬 수 있다. 간단하게 사용법을 알아보자! 이렇게 timer라는 변수를 만들고 setTimeout 함수를 실행시켜 콘솔 창에 "waterHumanB"라는 문구를 3초 후에 출력하게 할 수 있다. 참고로 시간은 ms 단위로 되어 있다. 그리고 h1 태그를 클릭하면 clearTimeout 함수를 실행시켜 setTimeout 함수를 멈출 수 있다. h1 태그는 b.......

원문보기 내부링크
Naver Blog

2022.01.09 WIL 기술면접 준비 헬..

시간이 참 빨리간다. 기술면접을 준비하고 있는데.. 3개월 간 시간에 쫒겨 코딩을 했다. 결과는 내가 몸으로 익힌 것들이 정말 많았다. 하지만 하나 하나 정리를 잘 했어야 했는데, 많은 프로젝트를 진행 하면서 제대로 정리 하지 않았던게 그대로 쌓여서 넘쳐 버렸다. 아직도 부족하고 배울게 많지만 지금 까지 했던 것들 위주로 다시 개념들을 짚고 넘어가야 될 거 같다. 미리미리 했었으면 좋았겠지만 이미 시간은 지났고 앞으로 하는 수 밖에 없다. 나와 같이 개발을 공부하는 사람들에게 자신의 썻던 코드를 그냥 단순히 배껴서 정리하는게 아니라 이해한 것을 바탕으로 빈 페이지에 코드와 내용을 써보는 연습을 하는게 좋을것 같다. 내일.......

원문보기 내부링크
Naver Blog

자바스크립트 배열 메소드 정리 #1

javaScript array method는 다양하지만 모든 것을 알고 외우기는 한계가 있다. 우선 자주 쓰는 것들 위주로 공부를 해 보았는데 흔히 배열의 길이를 제거나, 새로운 배열을 만들거나, 배열을 추가하고 삭제하고 원하는 배열의 데이터 값을 찾을 수 있는 메소드들이 존재한다. 간단한 예제와 함께 알아보면 좋을 것 같다. 우선 기본 배열을 만들고 그 안에서 메소드을 적용하면서 알아보자 어떠한 배열의 인덱스 값을 입력하면 그 인덱스 값에 있는 데이터를 읽을 수 있다. 자바스크립트 배열 메소드 첫 번째 array.length array.length 메소드를 사용하면 배열의 길이를 알 수 있다. numbers.length부터 보면 numbers라는 변수 안에 [1,2,3,4]라.......

원문보기 내부링크
Naver Blog

2022.01.16 WIL

요즘은 공부를 해도 쉬어도 불안불안하다.. 스트레스가 이상하게 쌓이고 있는 기분들.. 취업 준비를 하고 있지만 안 하고 있는 느낌? 처음 대학교를 졸업하고 취업 준비를 할 때가 24살.. 그때는 어리니까 젊으니까 미래가 창창하다고 생각했지만 새롭게 개발자라는 직업을 하려고 다시 재취업을 하려고 하니 나이가 있으니 잘해야 된다는 생각들이 엄청나게 나를 괴롭히고 있는 것 같다. 새해가 지난지 벌써 3주가 돼가는데 3개월 정도 달려왔던 것들이 아직도 쌓인 기분이다. 계획 좀 제대로 하고 스트레스를 풀 수 있는 무엇인가 필요하다. 여유 좀 가지고 편안한 마음으로 부족한 개발 공부와 취업 준비를 해야겠다. 나와 같은 삶이 불안하고.......

원문보기 내부링크
Naver Blog

2022.01.23 WIL

불안불안한 마음이 조금 사라지고 요즘은 명상을 하고 있다. 명상을 통해서 지금 이순간을 받아들이고 불안감이 많이 사라졌다. 아무것도 안하고 느끼는것이 정말 중요한거 같다. 우리 일상이 항상 스마트폰으로 가득 차 있기 때문에 뇌가 쉬지 못하는 것 같다. 매일 그래도 조금 씩 꾸준히 공부를 하고 있지만 좀 더 집중해서 해야할거 같다. 이번주는 좀 더 공부량을 늘리고 지원하고 싶은 회사가 생겨서 지원을 하려고 한다. 이번주에 할일 회사지원하기, 알고리즘, 프론트엔드 공부 좀더 양을 늘리기 정보처리기사 공부계획 짜기, 영어공부 계획도 정하기 앞으로 아침에 휴대폰 보지 않기! 내 할일 우선으로 하고 휴대폰하기!!! 무의식적으로.......

원문보기 내부링크
Naver Blog

2022.01.30 WIL 노션일기장

이번 주 내 생일과 곧 있으면 설날 연초 별의별 이유로 친구들 지인들을 많이 만났다. 코로나 시국에 방을 잡고 배달을 시켜서 맘 편하게 놀았던 거 같다. 벌써 1월이 끝나고 2월이 돼간다. 개발 공부를 한지도 벌써 반년? 이 되는 것 같다. 4개월 정도의 항해 부트 캠프를 시작으로 혼자서 1일 1commit과 함께 노션으로 작은 일기장을 만들어서 하루 계획과 마무리를 간단하게 적고 있다. 여기 블로그에 가면 노션으로 일기장을 쓸 수 있는 템플릿을 무료로 쓸 수 있다. 오늘 할 일과 내일 할 일들을 적어놓고 간단하게 느낀 점들 그날 기분 등 간단하게 적어 놓으니까 좀 더 계획적이고 그날마다 어떤 것들을 했는지 알 수 있어서 좋은 것 같다.......

원문보기 내부링크
Naver Blog

2022.02.06 WIL 코딩테스트, 면접준비...

몇몇 서류를 넣은 곳에 합격했다는 연락이 왔다. 이번 주부터는 면접과 코딩테스트가 있다...면접도 그렇고 코딩테스트도 그렇고 긴장되는 것은 똑같다. 면접도 이번이 처음이라 긴장이 된다.코딩테스트 같은 경우 아직 많이 준비를 하지 않았고 기본적인 큐, 스택도 정확하게 모르는 상황에서 봐야 하는 점이 조금 무섭긴 하다. 카카오, 네이버 정도의 난이도는 아니겠지만 너무 기초적인 것만 공부를 하고 있어서 걱정이 된다.그래도 2월에는 취직을 목표로 하고 있어서 어느 정도 진행이 되고 있는 거 같다. 이번 주는 많이 바쁠 것 같다. 공부도 열심히 하고 좋은 결과가 있길..이번 주도 다음 주도 파이팅!

원문보기 내부링크
Naver Blog

AICON 광주 2021 메타버스로 참여하기

광주 김대중컨벤션 센터에서 AI 채용 관람회가 열렸다. NHN 같은 기업들도 참여한다고 한다. NHN 성남시에 위치하고 광주에 AI 센터를 만들 거라고 한다. https://vibetechreal.com/ 위 사이트에 들어가게 되면 현재 두 가지 행사가 진행 중이다. 나는 광주에 살아서 직접 갈 수 있지만, 요즘 코로나가 무섭기도 하고 개발자를 공부하는 나에게 메타버스로 참여하는 것이 좀 더 재미있을 것 같았다. 사이트에서 회원가입을 하고 프로그램을 설치하면 위 화면처럼 메타버스 캐릭터로 원하는 회사 부스들을 이동할 수 있다. 게임처럼 생긴 UI가 우리는 익숙하기 때문에 조작하느데 별 어려움은 없었다. 해당 부스에 가면 홍보영상, 회사 기술 소개.......

원문보기 내부링크
Naver Blog

2021. 12. 19 WIL

항해99 수료 4일 전... 100일 동안 열심히 했나, 아쉬운 것은 무엇인가 많은 생각이 드는 마지막 주차인 거 같다. 이제 이력서를 쓰고 나의 블로그, github, 노션 등을 정리하고 이력서를 몇 년 만에 다시 쓰는지 한참 대학교 마지막 학기 때 광주광역시에 살던 나는 면접을 보러 서울, 인천, 경기도 등등 고생했지만 광주에 취직을 해서 다닌 기억이 난다. 개발자로 전직을 하는 거기 때문에 전에 경력은 거의 의미가 없을 거 같다. 앞으로 남은 기간 동안 준비할 것들은 이력서 마무리, 기술 면접 준비, 부족한 자바스크립트, 리액트 공부 이 정도 될 거 같다. 취업 목표는 설날 전까지.. 제일 걱정인 부분은 서울이나 경기권에 살아야 된다는.......

원문보기 내부링크
Naver Blog

프론트엔드 개발자 면접 준비 TIP

프론트엔드 개발자로 취직을 위한 면접을 준비를 할 때가 왔다. 우선 모든 면접의 기본인 간단한 자기소개가 있어야 한다. 나라는 개발자를 간단하면서 궁금증을 유발할 수 있는 자기소개가 좋겠다. 저의 경우 반도체 회사에서 근무를 하고 마케터로 이직을 하고 개발자를 준비하고 있다. 이런 것을 재미있게 풀면 될 거 같다. 면접이라는 것은 나의 이력서만 보고 질문을 해야 하기 때문에 내가 쓴 이력서를 모르고 있다면 면접관 입장에서는 거짓말하는 사람으로 생각하기 쉽다. 한참 24살 취업을 하려던 시절에 이리저리 면접을 많이 보러 다녔던 기억이 새록새록 난다. 이제 개발자로 취업을 하기 위해서 개발자는 기술면접이라는 것을 보는.......

원문보기 내부링크
Naver Blog

2021.12.26 WIL 항해99 3기 수료 후기

길고 짧았던 항해99 수료식 이후.. 월요일부터 바쁘게 이력서를 쓰고 증명사진도 찍고, 나의 블로그, 깃허브, 노션 등등 정리를 했다. 정리를 하면서 나의 컴퓨터 바탕 화면도 정리를 하였고, 이제 로켓펀치, 원티드, 점핏 등 다양한 곳에 지원을 할 예정이다. 아마도 연말이라 모두가 바쁠 텐데.. 특히 회사 같은 경우 연말에 정리하고 할게 많아서, 아마 내가 지원한 곳은 내년 초에나 연락이 올거 같다. 틈틈이 공부를 하면서, 이력서도 다듬고, 해야겠다. 3개월 이란 시간 동안 많은 것을 배웠다. 아쉽기도 하고, 시원 섭섭한 분위기를 맞으면서, 같이 공부를 했던 항해99 3기 동기들과 이런저런 이야기를 하면서, 각자 계획들을 공유하고, 하.......

원문보기 내부링크
Naver Blog

javaScript 기초문법 callback 함수

자바스크립트의 기초가 많이 부족하다는 것을 느끼고 문법 공부를 하려고 한다. 목표가 있다면, 한번 공부한다고 다 외우고 알 수는 없지만, 앞으로 개발을 하다가 어떠한 동작이나 기능을 만들 때 어떤게 필요하다 하면 구글링 하지 않고 내가 정리한 것들을 보고 기능을 만들면 좋겠다는 생각을 했다. 삽질은 너무 힘들어.. 그럼 화이팅! 함수의 인자로 사용되는 함수로 실행 위치가 보장된다는 특징이 있다. 실행 위치가 보장 된다는 것은 타이머가 만료가 된 후 실행이되기 때문인거 같다. timeout이라는 함수를 만들고 callback 이라는 파라미터를 넣어준다. setTimeout 메소드를 함수안에 넣어서 콘솔에 "waterHuman!을 3.000초 뒤에.......

원문보기 내부링크
Naver Blog

자바스크립트 화살표 함수 사용법

자바스크립트를 사용해서 함수를 만들 때는 function 키워드를 사용한다. 위에처럼 sum이라는 함수를 만들어 리턴 값으로 더하기 연산자를 넣어서 두 배열을 합쳐주는 값을 반환한다. 그리고 콘솔 창에 sum() 매개변수를 넣어주면 2와 3을 더한 값이 출력됩니다. 위에도 사실 간단하지만 화살표 함수라는 것이 나와서 좀 더 간단하게 함수를 만들 수 있다. 더블이라는 변수에 할당하는 함수를 만들어 x * 2라는 값을 반환하게 만들었다. 위 함수와 아래 화살표 함수는 똑같이 동작을 한다. 화살표를 사용해 function이라는 키워드를 없애고 => 화살표를 넣어서 함수를 만들 수 있다. 그리고 화살표 함수를 더 축약할 수 있다. 중괄호를 없.......

원문보기 내부링크
Naver Blog

자바스크립트 알고리즘 공부 시작

많은 분들이 파이썬으로 알고리즘 공부를 한다. 파이썬으로 알고리즘 풀이와 이론들이 정말로 많기도 하고 강의도 엄청 많다... 나는 프론트엔드 개발자로써 자바스크립트로 공부하려고 한다. 처음엔 파이썬으로 하려고 했으나, 아직 자바스크립트도 많이 부족하고, 리액트, node.js 등 아직 공부할게 산더미인데 파이썬 문법도 다시 배우고 파이썬으로 알고리즘을 한다면, 머리가 터질 것 같다. 나의 주특기인 자바스크립트의 기본기를 다지고 앞으로 몇 년간 자바스크립트로 개발을 할 것인데 알고리즘 공부와 코딩 테스트 준비는 자바스크립트로 하는 게 맞는 거 같다. 자바스크립트 알고리즘, 코딩 테스트 자료가 많이 없어서 아쉽긴 하지만.......

원문보기 내부링크
Naver Blog

자바스크립트 호이스팅과 즉시 실행 함수

자바스크립트 언어를 공부하고 개발자를 준비하는 분들이라면 꼭 들어 봤을 호이스팅! 우선 호이스팅이란 함수 선언 부가 유효범위 최상단으로 끌어올려지는 현상이라고 한다. 보통 코드를 읽을 때 위에서부터 아래로 읽게 되지만 호이스팅이라는 현상 때문에 double()이라는 함수가 선언되기 전과 후에 한 번씩 두 번 호출된다. 호이스팅의 문제로는 내 생각에는 가독성의 문제가 생길 것 같다. 보통 함수나 변수를 선언하고 그것을 사용하게 끔 모두가 코드를 짜고 있을 거라고 생각하는데 지금은 한눈에 보이지만 코드량이 많이 지면 가독성이 떨어지게 될 것 같다. 불필요한 주석도 생길 것 같고, 동작의 흐름을 한 번에 알기 힘들 수도? 그.......

원문보기 내부링크
Naver Blog

로그인 서버인증 쿠키/세션 JWT 방식

우리가 어떠한 사이트에서 물건을 사고, 글을 쓰는 등 서비스를 이용하려면 회원가입을 통해 로그인을 해야 사용자가 되어 서비스를 사용할 수 있다. 우리가 회원가입했던 정보들을 인증하고 로그인한 상태를 유지를 해야 한다. 흔히 쿠키/세션 방식과 토큰 방식으로 우리는 웹사이트에서 로그인 했을 때 서버로부터 인증을 받을 수 있다. 쿠키랑 세션이 무엇인지 토큰은 무엇이고 JWT는 무엇인지 어떻게 로그인을 인증받고 사용하는지 정리해 보았다. 여기 있는 내용들은 혼자 공부한 내용을 바탕이기 때문에 참고용으로 보면 좋을 것 같고, 틀린 부분이나 고쳐할 부분이 있다면 알려주시면 감사하겠습니다. 1. Cookie/Sesson방식 1-1 쿠키란 무.......

원문보기 내부링크
Naver Blog

2022.01.02 새해 첫 WIL

새해를 맞아 동네 뒷산에 올라가 2020년 첫해를 맞이했다. 동네 뒷산이어도 주민들이 생각보다 많아서 깜짝 놀랐다. 해가 뜨니 모두가 각자 소원을 빌며 휴대폰으로 사진을 찍고 있었다. 나도 부랴부랴 사진을 찍고 너무 추워서 금방 내려갔다. 항해가 끝나고 이력서를 넣고 부족한 공부도 하고, 면접 준비도 하고 있는 중이다. 1월 초부터 연락이 슬슬 올 거 같다.. 코딩테스트, 기술면접 등 준비할 게 아직도 많다. 나와 잘 맞는 곳에 취직이 되어 올해부터는 프론트엔드 개발자로 보내고 싶다. 그리고 이 세상(?) 모두가 하는 새해 계획!! 세우기!!!! 올해 계획 1. 개발자 취업하기 2. 1일 1 commit 3. 정보처리기사 자격증 취득 4. 나의 사이.......

원문보기 내부링크
Naver Blog

RESTful API란 무엇인가?

프론트엔드 개발자가 되겠다고 결심을 하고 HTML, CSS, javaScript 등을 공부를 하던 중 API 통신이라는 용어를 접하게 됩니다. 저 역시도 get 요청, post 요청 무슨 말인지 몰랐지만, 클라이언트와 서버가 인터랙션을 하려면 RESTful API를 구현하여 데이터를 주고받습니다. 간단하게 설명하자면 우리가 사용하는 웹이나 앱에서 서버와 데이터를 주고받을 때 API 통신을 하고 이것을 RESTful API를 이용해서 만드는 것입니다. 이제 하나하나 알아보도록 할 텐데, 이 모든 내용은 제가 공부를 한 내용을 바탕으로 글을 쓴 거기 때문에 정확하지 않을 수 있고요. 틀린 내용이 있다면 댓글로 지적 부탁합니다. >< 1. RESTful API란? REST 아.......

원문보기 내부링크
Naver Blog

2021. 10. 18. 월요일 TIL

새로운 프로젝트가 시작되고 이번주는 클론코딩 우리 조는 Velog를 클론 코딩 하기로 했다. 나는 로그인과 회원가입을 맡아서 하기로 했다. 오늘 배운 것 json 서버를 열어서 CRUD를 하고 싶어서 Delete 요청을 하고 있던중 Delete는 API 설계를 하지 않아서 요청을 할 수 가 없다는 것을 몇시간 만에 알게 되었다... 삽질을 오지게 했지만 그래도 토큰에 대해서도 공부도 하고 https://ko.wikipedia.org/wiki/JSON_%EC%9B%B9_%ED%86%A0%ED%81%B0 한번 읽어서는 잘 모르겠지만 토큰안에 인코딩해서 정보를 담아 놓을 수 있고 그걸 디코딩해서 정보를 쓸 수 있다. 토큰은 을 사용하는 이유는 로그인에 있어서 유통기한을 주는 것이다. 그리고 토큰.......

원문보기 내부링크
Naver Blog

2021. 10. 19. 화요일 TIL

velog 클론 코딩 2일차 기본적인 로그인과 회원가입을 완성하였다. 현재 구현한 페이지는 회원가입 후 로그인을 하면 헤더가 바뀌는 상황이다. 오늘 배우고 느낀것 회원가입을 할 때 post 요청 때문에 잠깐 애를 먹었다. 우리는 요청할 때 약속한 API대로 줬어야 하는데 바보같이 줘서... 이런식으로 묶어서 보냈어야 했는데, 그냥 보내서 요청을 받을 수가 없는 것이 였다... 그리고 문제가 로그인을 했을 때 토큰을 받고 쿠키를 저장하고 로그아웃을 하면 쿠키를 지우는 방식인데... 토큰이 계속 남아있다. 토큰을 같이 지우던가, 쿠키말고 토큰을 이용해서 로그인 방법을 알아 봐야 겠다. 아직 쿠키와 토큰의 차이도 공부를 해야 겠다.

원문보기 내부링크
Naver Blog

2021.10.20 수요일 TIL

# TIL 벨로그 클론코딩 3일차 헤더 부분은 거의다 한거 같다. 오늘 최종으로 한 것들 1. 로그인시 메인화면으로 가기 2. 로그인시 헤더 바뀌기 3. 로그인,회원가입 입력창에 맞는 값 넣지 않으면 경고창 4. 다른 조원을 도와서 comment API 요청 get, post 완료 ## 오늘 배운것, 내일 할일 ```useEffect```는 쉽게 설명하면 페이지가 렌더링 햇을 때 실행한다. 클래스형 함수에서 mount되는 과정과 비슷하다. 그리고 github로 TIL 쓰는법... 내일 할일은 우선 로그인,회원가입 토큰 이용하기, 모달창 만들기, 로딩속도 확인하기, 로그인시 토글버튼, 마이페이지, 무한스크롤, comment Delete,Patch API 요청 하기.......

원문보기 내부링크
Naver Blog

2021.10.21. 목요일 TIL

### TIL 오늘은 축처진 하루가 되었다. 벨로그 클론코딩 관련해서 프로젝트를 제대로 진행을 하지 못해서 정말 아쉬운 날이다. ### 오늘 배운것 내일 할 것 오늘은 프로젝트를 거의 진행을 하지 못했고, 헤더 부분에 벨로그를 보면 로고 부분에 아이디로 바뀌는 것을 똑같이 해서 상세페이지 마다 아이디로 바꿔 줬다. 그리고 회원가입시 비밀번호를 4자리 이상으로 만들고 닉네임을 입력 안하면 회원가입을 하지 못하게 만들었다. 내일 할일은 모달페이지를 만들어서 로그인, 회원가입을 만들고 토큰으로 로그인 하는 것을 다시 해봐야 할 것 같다. 그리고 CICD로 S3 배포 하는 것과 실전 프로젝트를 한번 생각해 봐야겠다..

원문보기 내부링크
Naver Blog

2021. 10. 22 금요일 TIL

velog 클론코딩 마무리를 하였다. http://17log.s3-website.ap-northeast-2.amazonaws.com/ 벨로그를 클론코딩해서 만들었다. 나는 헤더와 로그인, 회원가입, 모달창을 만들고 페이지마다 헤더에 네임이 바뀌는 기능까지 하였다. 오늘 배운 것 useState를 이용해서 기본값을 false로 잡고 modalClose를 콜백으로 다시 부정을 줘서 true로 바꿔준다. 그래서 버튼을 만들어서 클릭을 하면 모달창을 boolean값을 바꿔줌으로 닫아지게 보인다. 핵심은 currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다는 것이다! 즉, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다. 하지만 currentTarg.......

원문보기 내부링크
Naver Blog

2021. 10. 24 항해99 6주차 WIL

길고 길었던 주특기 리액트 주차도 끝나고 이제 실전 프로젝트에 들어간다.... 처음 개발을 시작할 때는 단순히 HTML, CSS가 조금 재미있어서 시작한것도 있지만 JavaScript, 리액트를 배우면서 프론트엔드 개발자의 역할에 대해서 배우고 하니 점점 개발자로써 자리를 잡아가고 있는 것 같다. 앞으로 WIL, TIL 뿐만 아니라 조금씩 공부하는 것들을 블로그에 올려야 겠다.. 이번주에 한것 이번주는 우선 벨로그 클론 코딩을 마무리 했다.. http://17log.s3-website.ap-northeast-2.amazonaws.com/ 우리가 만든 벨로그 클론코딩 작품이다. 나는 로그인, 회원가입, 헤더, 모달창을 구축했다. 이번주는 아쉬운게 많았다. 실전프로젝트 팀원을 구하는.......

원문보기 내부링크
Naver Blog

2021. 10. 28 목요일 TIL

마지막 실전프로젝트가 시작하고 벌써 목요일 그동안 많은 일이 있었다. 야심차게 시작했던 OTT 서비스를 공유 할 사람들을 모아주는 서비스는 결제라는 큰 문제로 개발에 문제점보다 CS적인 문제점이 많아서 접게 되었다.. 그리고 시작한 새 프로젝트! 아직 이름과 어떠한 서비스인지 말을 할 수 없지만, 벌써 주차별로 Scope를 정하고 API를 설계하고 백엔드 분들이 서버를 열어 연결중에 있다. 그전에 우리는 리덕스 툴킷이라는 리덕스를 좀더 쉽게 사용 할 수 있는 라이브러리를 공부중이다. 오늘 배운 것들 오늘은 리덕스 툴킷이라는 라이브러리를 공부하고 있었다. 리덕스 툴킷을 사용하는 이유는 첫번째로 리덕스 스토어를 구성할 때 너무.......

원문보기 내부링크
Naver Blog

2021. 10. 31. WIL

실전프로젝트 시작한지 일주일이 지났다. 새프로젝트의 MVP는 좀 괜찮을 거라고 생각을 했다. 늦게 시작한 만큼 조금 느린 감이 있어서 2주차 때는 많이 바쁠 것 같다. 실전 프로젝트에서 새로운 기술을 많이 쓰고 있다 리덕스 툴킷, Next.js, AWS amplify로 한 CICD 리덕스 툴킷과 AWS amplify로 CICD는 해결 했고, Next.js에 대해서 조금 공부가 필요한거 같다. 디자인도 어느정도 나와서 기본적인 기능을 위한 뷰만 완성을 했는데, 이제 디자인도 추가 해서 배포 했을 때 전체적인 우리 서비스의 느낌을 주고싶다. 배운 것들 CICD는 애플리케이션 개발 단계에서 자동화를 하여 보다 짧은 주기로 고객에게 제공하는 방식! CI/CD의 기본개념은 지.......

원문보기 내부링크
Naver Blog

2021. 11. 14 WIL

실전 프로젝트 시작한지 3주차 시간이 어떻게 흘러갔는지 모르겠다. MVP완성까지 열심히 달려서 우리가 계획했던 기능 을 모두 만들지는 못했지만, 발표도 했고 우리의 프로젝트 아키텍쳐와 개발에 있어서 어려웠던 점들.. 3주동안 팀원들과 열심히 했다, 하루 빨리 우리가 준비했던 서비스를 시작해서 유저를 받고싶다. 먼저 프론트엔드 아키텍처이다. 우리는 리액트로 개발을 시작했고 ,NEXT.js와 리덕스를 더 효과적으로 활용하기 위해 리덕스 툴킷을 사용했다. NEXT.js는 SEO최적화를 위해 사용을 했다. 그리고 AWS amplify로 CICD를 통해 github에 commit을 하면 자동으로 빌드, 배포가 된다. Amazon Route 53을 통해서 우리가 가비아에서 구.......

원문보기 내부링크
Naver Blog

2021. 11. 21 WIL

MVP 발표가 엊그제 같은데, 아직도 할게 많다. 클라이언트와 서버를 HTTPS로 연결을 성공을 했고, UI도 어느정도 완성을 했다, 아직 디자이너님들과 디테일적인 것을 더 잡아야 하지만 하루 빨리 우리 서비스를 홍보를 하고 우리가 준비한 이벤트도 하고싶다. 현재 무한스크롤 기능을 만들고 싶었지만, 현재 페이지네이션으로 대체를 한 상태이다. 남은 2주동안 무한스크롤과 게시물에서 여러 이미지를 저장하는 기능을 완성하고 싶다. 아직까지 작은 오류들과 배포 오류,, 이번주도 다시 열심히하자

원문보기 내부링크
Naver Blog

2021. 11. 28 WIL

최종 발표 일주일전 최대한 기능을 마무리 하려고 노력했지만,, 생각보다 시간이 많이 걸리 거 같아서 MVP보다 조금 발전된 형태로만 진행 해야할것 같다. 다른 환경적인 요소들도 신경을 써야 하고, 발표준비, PPT, 피드백 준비 등 다양한 문제들이 많아서 걱정이다. 마지막주는 개발보다는 마무리 하는 단계로 생각해야 겠다.

원문보기 내부링크
Naver Blog

2021. 12. 5 WIL / 12. 12 WIL

프로젝트가 끝나고 개인적인 시간이 많아 지면서, 연말이고 하니,, 친구들과 가족들과 시간을 많이 보냈다. 공부를 거의 안했고, 다시 정신 차려야겠다. 먼저 저번주에 프로젝트가 마무리 되었다. https://www.kkuljohab.com/ 사이트도 문제 없이 돌아가고, 3개월정도 유지를 할 계획이다. 팀장으로써 프로젝트를 진행했는데, 아쉬운 점들이 상당히 많았다. 먼저 아직 개발적인 능력이 충분하지 않았다는 판단에서 같이 기능을 만들면서, 일정관리, 환경적인 관리 등을 하니 솔직히 부담이 되게 많았던거 같다. 프로젝트 면에서 가장 아쉬운 것들 중 첫번째는 Next.js를 제대로 활용하지 못한것, SEO최적화를 위해서 사용했지만, SEO최적화가 되.......

원문보기 내부링크
Naver Blog

알고리즘 공부.. with 파이썬

나에겐 알고리즘이란 고등학교 때 배웠던 수학들과 유튜브 알고리즘뿐이었다. 현재 나에게 알고리즘이란 취업을 위한 수단밖에 되지 않았지만, 개발자에게 알고리즘이 필요한 이유를 많이 찾아보니 내가 어느 정도 내가 할 줄 아는 리액트나 JS를 어느 정도 자유롭게(?) 사용 하는 날이 온다면, 이제 데이터를 처리할 때 좀 더 효율적이게 처리할 수 있는지 고민이 생길 때 이야기인 거 같다. 예를 들어 리액트에서 리덕스를 통해 API 통신을 할 때 서버에서 문자열이나, 숫자열, boolean 값을 줄 때 어떻게 처리를 해야 좀 더 효율 적인지? 사용자가 원하는 정보들을 좀 더 빠르게 보여주고, 불필요한 통신 요청을 안 하는 방법? 이러한 방법들.......

원문보기 내부링크
Naver Blog

2021. 09 .27 월요일 TIL

리액트를 시작한 지 일주일! 강의를 두 번째 듣고 있어서 그런지 익숙하고 전에 놓쳤던 부분들이 잘 들어와서 이제는 조금 리액트와 친해진 거 같다. 전에 컴포넌트가 뭔데 함수형과 클래스형이 있고, 리덕스는 뭔지 왜 이렇게 많은 훅과 라이브러리 등이 나를 괴롭혔지만, 이제는 조금씩 잘 할 수 있겠지.. 2주 동안 리액트와 친해지고 두 달 동안 리액트를 사용해서 3개의 프로젝트를 한다면 어느 정도 웹개발을 할 수 있을 거 같다. 오늘 배운 것 DOM에서는 자바스크립트를 사용해서 DOM요소를 가져왔다. 리액트에서는 Ref를 이용해서 리액트요소를 가져온다. State관리 props와 state를 관리해 줘야 한다. 계속 state가 정보가 바뀌면 계속 렌.......

원문보기 내부링크
Naver Blog

2021. 09. 29. 수요일 TIL

프로젝트 마지막날 http://myvocalist.shop.s3-website.ap-northeast-2.amazonaws.com/ 리액트로 만든 첫번째 작품이다. 어떤 것을 써야 하는 줄은 알았지만 어떻게 써야 할줄은 몰랐어 팀원들에게 물어물어 답지를 보지 않고 잘 해결 할 수 있엇다. 내일 부터 새로운 팀원들과 새로운 과제 새로운 수업이 있다. 오늘은 여기서 그만 일찍 자고 내일부터 운동도 해야겠다.

원문보기 내부링크
Naver Blog

2021. 09. 30. 목요일 TIL

새로운 주차가 시작 되고 새로운 팀원들과 리액트 심화반 시작 리액트에 많이 익숙해 져서 그런지 수업듣는데 생각보다 낯설지 않았다. 이번 주차가 끝나면 이제부터 백엔드, 프론트엔드 개발자 팀으로 나뉘어 프로젝트를 진행한다. 오늘 배우 것 아직 해결을 하지 못하고 있어서 걱정이다.

원문보기 내부링크
Naver Blog

2021. 10. 02 토요일 TIL

요즘 컨디션이 너무 안좋아서 공부에 집중이 잘 되지 않았다. 다행이 약먹고 괜찮아 졌지만 그만 큼 진도를 나가지 못해서 아쉽다. 다시 집중해서 하자!! 배운것들 먼저 Promise 자바스크립트는 싱글 쓰레드로 동작하는 언어입니다. 비동기 작업을 동시에 하기 때문에 콜백을 해줘서 호출을 하는데 호출이 계속 중복되면 콜백 헬이라는게 만들어집니다. 이때 Promise를 이용해서 비동기 처리 시점을 명확하게 표현을 할 수 있어요. async, await는 Promise 사용을 편리하게 해줍니다. 먼저 async는 함수 앞에 붙입니다. await은 async 의 짝꿍입니다. 항상 같이 사용해요. async는 함수 안에서만 동작합니다. await은 프라미스가 처리될 때까지 기.......

원문보기 내부링크
Naver Blog

항해 99 3기 3주차 리액트 심화

항해99를 시작한지 벌써 3주차 매일매일 시간이 엄청 길다고 느끼면서도 짧게 느껴지는 신기한 마법(?) 항해 체크페이지에 시간을 알 수 있지만 내가 실제로 집중해서 공부하는 시간이 궁금했다. 실제로 잠깐 화장실, 밥먹는시간, 물먹는 시간, 집중안되서 SNS하는 시간, 유튜브 보는 시간 제외하고 48시간 정도 강의를 듣거나 프로젝트를 하거나 자료를 찾는 시간이 걸렸다. 앉아있는 시간은 주 100시간이 넘는거 같은데 실제로 집중해서 하는 시간이 반도 안되는거 같다. 꺼놓고 까먹은 적도 있지만 켜놓고 안 끄지 않은적도 있어서 별로 차이는 없는 거같다. 남은 3개월정도의 시간동안 앉아 있는 시간과 집중하는 시간이 비슷해지게 노력해야.......

원문보기 내부링크
Naver Blog

2021. 10. 04. 월요일 TIL

리액트 심화 강의를 들고 있다. 요즘 집중이 너무 안되서 문제다.. 진작 끝낫을 강의들을 아직도 듣고 있으니.. 목표는 수요일까지 234주차는 한번더 듣는 것이다. 이유는 이번 강의에서 토큰세션으로 로그인, 회원가입, 등 우리가 아는 사이트를 만들때 필요한 동작들? 을 배우고 있다. 나도 나만의 사이트를 만들고 싶었고 구상 중이다. 앞으로 로그인이 가능한 홈페이지 프로젝트를 잘 마루리해서 나의 사이트 만들기를 도전 해야겠다. 오늘 배운것들 쿠키를 생성하고 거기에 아이디와 비밀번호를 만들어 사이트에 로그인을 하는 방법을 배웠다. 처음에는 리덕스를 통해서 상태를 관리 했지만 새로고침을 하면 날라가 버린다. 그래서 로그인이.......

원문보기 내부링크
Naver Blog

2021.10. 05. 화요일 TIL

벌써 화요일 슬슬 과제를 준비 해야하는데 강의를 듣는데 별거 아닌 에러들이 너무 괴롭힌다. 오타나 import 에러는 별거 아닌데 너무 짜증이난다. 낮에 더워서 그런지 짜증 지수가 확확 올라가서 집중이 확 떨어진다. 적어도 목요일까지는 두번 들어야하는데 열심히 해보자 오늘 배운것 파이어 스토어와 연동하여 Stroage에 이미지를 저장하는 방법을 배웠다. 우리가 로그인을 하고 게시글을 올렸을 때 차례대로 게시글이 올라가고 그 이미지는 firebase에 저장이 되고 upload action이 떠야하는데... 저장이 되고 작동은 하는데 action 함수가 실행이 안되는거 같다. 강의를 전거 부터 다시 들어야 할거같은데 오늘은 시간이 너무 늦어서 이만.......

원문보기 내부링크
Naver Blog

2021. 10. 06 수요일 TIL

3주차 숙제만 남겨두고 오늘은 갑자기 일이 생겨서 오후에는 거의 공부를 하지 못한거 같다. 내일 4주차 까지 끝내고 프로젝트를 시작 해야겠다. 오늘 배운것 오늘은 게시물을 만들고 preview를 띄워서 내가 만들 게시물에 사진을 미리 보여주는 방법을 배웠다. 모듈을 하나 더 만들어서 리덕스에 먼저 저장하고 파이어베이스에 다시 저장하고 가져오는 방법을 배웠다. 똑같이 action을 만들고 reducer를 설정하고 dispatch를 하는 것은 똑같지만 moment라는 패키지를 통해 편하게 할 수 있었다. 아직은 코드를 만드는 순서가 이해가 잘 안되지만 계속 하다 보면 익숙해 질 거 같다. 그리고 Debounce와 Throttle를 배웠는데 Debounce는 일정한 시.......

원문보기 내부링크
Naver Blog

2021. 10. 07. 목요일 TIL

요즘 집중력이 확 떨어졌다. 계획했던 공부도 일주일동안 반정도 했던거 같다.. 다시 계획을 짜서 공부를 해야겠다. 리액트를 좀더 자유롭게 할 수 있을 만큼 익숙해지고 공부도 하고 다른 강의들도 듣고 싶다. TypeScript도 공부를 해보고 싶지만 아직은 자바스크립트 부터 친해 지는게 먼저 인거같다. 앞으로 리액트 공부와 자바스크립트 알고리즘 공부를 해야겠다. 시간도 좀더 체계적으로 계획해서 운동도 다시 하려고한다. 오늘 배운것 오늘은 무한스크롤을 배웠따. 간단한 동작 설명으로는 처음에는 2개정도의 게시물만 보여주고 스크롤을 끝까지 내리면 파이어베이스에 저장된 게시물들을 가져와서 보여준다. 리스트를 만들어주고 다음 목.......

원문보기 내부링크
Naver Blog

항해99 4주차 WIL

리액트 심화강의를 끝냈지만 머리에 남은것은 혼란뿐.. 이번주는 유독 집중도 되지않고 어렵고 너무 힘들었다.. 이제 리액트를 통해서 프론트엔드 개발을 해야한다. 이번주에 배운것 firebase를 통해서 로그인, 댓글, 댓글알림 등 기능들을 구현했지만 리덕스가 어떤것인지 이해는 했지만 아직은 이해하기 어렵기 때문에 많은 연습이 필요할거 같다. 로그인, 포스팅 기능, 댓글 등으로 인해 리렌더링이 많이 되기 때문에 전역관리가 필요하다. 보통 state가 바뀌면 리렌더링이 일어나지만 우리는 리덕스와 리덕스 훅들로 인해 관리를 해준다. 리덕스를 관리 한다면 action과 dispatch 가 늘어나면 코드가 복잡해지고 가독성이 떨어지고 유지보스.......

원문보기 내부링크
Naver Blog

2021. 10. 12. 화요일 TIL

프론트엔드와 백엔드로 나뉘어 미니프로젝트를 진행 중이다. 우리 팀은 오늘의집이라는 플랫폼과 비슷하게 인테리어 소품을 소개하는 작은 사이트를 만들려고 한다. 물론 구매는 할 수 없지만.. 간단하게 설명 하면 node.js로 백엔드 서버를 만들고 React로 프론트엔드를 만든다. 그리고 서버를 연결해서 데이터를 주고 받고 회원가입, 로그인, 게시글 만들기,수정,삭제, 댓글 등 동작을 만들 것이다. 그럴려면 axios를 통해서 백엔드에 데이터를 주고 받야아 하는데... 사실 아직 로그인, 회원가입, 게시글 만들기,삭제,수정, 댓글달기, 알람 등 완벽히 이해하지 못해서 너무 어렵다.. 아직 10월이니 12월 까지 열심히 해보자~ 오늘 배운 것 axi.......

원문보기 내부링크
Naver Blog

2021. 10. 15. 금요일 TIL

리액트로 프로젝트를 시작하고 벌써 내일이 마지막 정신 없이 하다 보니 시간이 이렇게 흘렀다. 아직 부족한 점이 많고 코드도 이해야하는데 공부를 하면 할 수록 바보가 되는 기분이다. 오늘은 댓글을 만드려고 get요청과 post요청을 배웠다.. 오늘 배운것 HTTP 요청 메서드.. 이제야 이해가 확간다.. 크게 쓰는 요청들은 GET, POST, PUT , DELETE, PATCH 이다 GET 요청은 데이터를 받을 때 쓰는 요청입니다. 흔히 우리가 백엔드 서버에 어떠한 정보를 주면 그것을 받아와서 컴포넌트를 만들어 뿌려주는 역할을 합니다. 댓글을 가져오거나, 게시물을 가져 오는 것입니다. POST는 요청하는 것으로 어떠한 데이터를 저장할때 씁니다. 예를 들어 &q.......

원문보기 내부링크
Naver Blog

2021. 10.17 항해 5주 WIL

실전프로젝트까지 한주가 남았습니다. 다음주에 클론코딩을 진행할 텐데 다음주 목표는 리액트를 통해서 CRUD를 만드는 것을 목표로 하고 있습니다. 프론트엔드의 개발자는 백엔드에 있는 데이터를 사용자에게 잘 전달 할 수 있도록 하는것.. 이번주 배운 것들 아직 리덕스 미들웨어 작성하는 것이 많이 부족했다. 이번 프로젝트에서는 댓글을 작성하는 것을 하였다.. 그것도 다른 분들에게 많은 도움을 받아 만들었지만, 이제 어떤 API 요청을 통해서 필요한 요청을 주고 받아야할지 감이 온거 같다. 다음주에는 CRUD를 만드는 것을 목표로 해봐야 할 것 같다. CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(.......

원문보기 내부링크
Naver Blog

항해99 3기 1주차 미니 풀스텍 프로젝트 마무리

짧은 5일 동안 많은 일이 있었다. 새로운 팀과 새로운 과제, 그리고 모더나... 우리팀의 주제 : 첫 차 Money ? 8조인 우리팀은 국내 차 종류와 사회 초년생을 위한 연봉별 자동차 구매 할 수 있는 작은 서비스를 만들었다. https://firstcar8.shop API 설계도 생각보다 많은 기능이 있다. 로그인, 회원가입, 차량LIST, 차량 detail, 연봉별 등 다양한 기능들을 구현 하였다. 미니 풀스텍 프로젝트에서 얻은 새로운 지식 서버 사이드 렌더링 서버에서 페이지를 그려 클라이언트로 보낸 후 화면에 표시하는 기법 검색 엔진 최적화와 빠른 페이지 렌더링이 장점이다. JWT 인증에 필요한 정보들을 암호화 시킨 것이다. 암호화 할 방식과 타입이 들어.......

원문보기 내부링크
Naver Blog

2021. 09. 22. 수요일 TIL

추석 마지막 날 공부 마무리.. 마음은 전 강의를 듣겠다며 컴퓨터 앞에 앉았으나 앉아 있는 시간에 비해 공부한 시간은 생각보다 많이 되지 않았다.. 더 놀고 싶다.. 프론트엔드 개발자의 무기 중 하나인 리액트 수업을 시작했다. 리액트 강의 1주 차를 완료했다.(원래는 3일 동안 3주 차까지 들으려고 했다...) 배운 내용들 프론트엔드 개발자는 서버로부터 사용자에게 간편하고 빠르고 이쁘게 보여주는 역할을 한다. HTML, CSS, JavaScript의 기본적인 지식을 배웠다. HTML에서는 DOM과 자식 요소들을 배웠고 CSS는 Seletor를 통해 꾸며주는 법과 calc(), 그리드 시스템에서 flex 정렬을 간단하게 배웠다. calc()는 왼쪽에서 오른쪽으로 곱셈, .......

원문보기 내부링크
Naver Blog

2021. 09. 23 목요일 TIL

프론트엔드 개발자의 무기 중 하나인 리액트 수업을 듣는다. 새로운 주차에 들어서면서 새로운 팀원들과 함께 리액트 수업을 듣고 있다. 새로운 팀의 팀장은 내가 돼서 조금 놀랬지만 이번 프로젝트는 개인 프로젝트여서 부담은 없다. 프론트엔드의 꽃 리액트 너무 어렵다.. 오늘 배운 것들 리액트 기초반 2주 차 컴포넌트의 라이프 사이클, 컴포넌트의 state 관리, 패키치설치, React hook 사용방법 먼저 가상돔을 사용한다. 가상돔은 말 그대로 가상의 돔 기존의 DOM과 새로 그린 DOM을 비교해서 바뀐 부분만 갈아준다. 돔 업데이트 처리가 간결하다. 라이프 사이클: 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지 생성될.......

원문보기 내부링크
Naver Blog

2021. 09 .24 금요일 TIL

벌써 토요일이라니.. 오늘은 서브 모니터를 설치해서 기분이 좋았다. 확실히 화면이 많아지니 다양하게 볼 수 있어서 너무 좋았다. vscode를 넓게 쓰면서 강의도 보고 진작 살걸 ㅎㅎ 오늘 강의를 마무리 하려고 했으나 이상한 부분에서 막혀서 기분이 좋지 않다. 오늘 배운 것 오늘은 keframs를 사용해서 애니메이션을 추가해 프로그래스바를 만들었다. keyframes는 styled-component안에 들어 있어서 CSS처럼 쓸 수 있어서 간편했다. transition과 animation을 써서 좀더 동적인 모습으로 꾸며 보았다. 그리고 firebase를 사용해서 백엔드도 구축했다. firebase는 서버리스로 서버를 신경 쓰지 않고 사용할 수 있는 좋은 라이브러리? 인거 같다.......

원문보기 내부링크
Naver Blog

항해99 3기 2주 차 React

항해99 3기 시작한 지 2주 차가 되는 날 추석에 공부 좀 하려고 했지만, 생각보다 많이 못 해서 아쉬움만 남았다. 프론트엔드 개발자가 되기위해 선택한 주특기 React 원래 VsCode로 만든 HTML, CSS, JavaScript의 방식과 많이 다르고 컴포넌트들로 만드는 리액트 요소들 함수형과 클래스형 처음에는 낯설고 적응이 되지 않아서 많이 힘들었다. 처음 보는 형식이라 알 것 같으면서도 이해가 되지 않아 기본을 잘 다져야겠다는 생각이 들었다. React 말고 Vue, Angular가 있지만 천천히 배우도록 하자 일주일 동안 배운 것 React는 일반적인 HTML의 요소와 돔구조와 많이 달랐다. React는 React 요소가 있는데, 컴포넌트를 통해서 웹구조를 만든다.......

원문보기 내부링크
1