개발
-
프론트엔드 기술 면접 질문 리스트(라**)개발/두서없이 공부한 개발공부 2024. 9. 7. 03:33
Q. javascript 에서 var, let, const 의 차이가 뭐라고 생각하시나요?A. 3가지 다 변수선언 방식입니다. var 의 경우 함수스코프를 가집니다. var로 선언된 변수의 경우 함수내에서 유효하며 블록 스코프를 가지지 않습니다.그래서 if, for 문에 선언하더라도 바깥에서 접근할 수 있습니다. 또한 var함수의 경우 재사용이 가능합니다.위에 var x라고 선언하였더라도 바로 아랫줄에 var x 의 다른값을 넣으면 재할당이 가능합니다.이러한 이유로 요즘에는 var 보다 const 를 더 많이 사용합니다. 그리고 var의 경우 호이스팅이 됩니다. 호이스팅이 되면 선언된 함수가 최상단으로 올라옵니다.하지만 선언만 되는것이며 할당이 된것이 아니라 undefined로 초기화 되어 만약 출력을..
-
Next.js Vs React 둘은 무엇일까?개발/두서없이 공부한 개발공부 2023. 11. 22. 00:15
React, Next.js를 들어 보았는가? 프론트엔드 개발자를 지향한다면 React, Next.js 둘 중 하나는 꼭 들어봤을 것이다. 이 둘은 프론트엔드를 하는데 안 들어봤다면 공부를 안 한 것이다. 사실 React, Next.js는 그냥 개발 도구라고 생각하면 된다. React 란 무엇인가? 사용자 인터페이스를 만들기 위한 라이브러리가 바로 React 이다. 단어를 한번 풀고 넘어가자 사용자 인터페이스 : 사용자 인터페이스(UI)는 사용자가 어떻게 시스템 또는 소프트웨어와 상호 작용하는지를 나타내는 것 라이브러리 : 다양한 기능을 제공하고 코드를 구성하는 데 도움을 주는 코드 모음 한마디로 정리하자면 우리가 웹브라우저에 띄우는 모든 것을 담당하는 것을 React라고 할 수 있다. Next.js 란?..
-
(#3) 기숙사 프로젝트 사용 기술개발/회고록 2023. 10. 13. 15:07
저번에는 소통을 위한 개발도구를 설명했다면 이번에는 프론트엔드가 개발을 위해 사용한 기술을 설명해 보려고 한다. 스프링, java는 백엔드, mysql은 벡엔드에서 사용한 기술이라 정확히 잘 몰라 패스하도록 하겠다. 프론트엔드는 2명이서 제작을 하였으며 디자이너 없이 제작을 하다 보니 많은 어려움이 있었다. 내가 기획한 의도를 정확하게 파악을 하였는지, 잘 진행이 되었는지, 등등 중간중간 확인을 해야 했고, 중간중간 내 의도와 다른 부분은 계속 수정을 요청했다. React React기술을 사용했는데 React를 사용한 이유는 여러가지가 있었다. 그것을 나열해 보도록 하겠다. 컴포넌트 기반이다 보니 개발분담을 잘 할 수 있었다. 가상 DOM을 사용하여 렌더링 비용을 아낄 수 있다. 새로고침을 줄여 사용자의..
-
(#2) 기숙사 프로젝트 사용 기술개발/회고록 2023. 10. 12. 15:50
프로젝트를 진행할 때는 협업을 위해 많은 도구를 어쩔 수 없이 사용해야 한다. 소통을 위한 도구로 사용되기도 하며, 개발의 용의성을 위한 용도로 사용되기도 하며, 기능개발에 필요하기 때문에 사용되기도 한다. 각각의 개발한 사용기술을 한번 정리해보고 어떠한 점이 좋았고 어떠한 점이 별로였는지 한번 작성해 보려고 한다. 나는 프론트와 기획 디자인 관점에서 이 글을 작성하다 보니 백의 관점을 정확하게 파악하기는 어렵다. 그건 다른 블로그를 보고 한번 찾아보면 좋을 것 같다. 의견조율을 위한 사용 기술 Notion(노션) Notion회의나 한걸 기록하는 용도로 사용하는 편이다. 메인화면에는 우리의 간략한 소개를 적고 그 밑으로는 회의 내용 및 기획서 및 각종 자료를 작성한다. 위 항목은 우리의 결과물을 적는 칸..
-
(#1) 기숙사 프로젝트 시작 이유개발/회고록 2023. 10. 3. 16:21
4명의 인원이서 기숙사프로젝트를 4개월 동안 진행하였다. 중간 배포를 하게 되면서 어떻게 개발하였는지 어떠한 과정이 있었는지 어떻게 개발을 진행했는지 1차 개발동안 부족한 부분은 무엇이 있었고 잘한 부분은 어떠한 점이 있었는지 상세히 풀어서 작성해보려고 한다. 인원은 총 4명이서 5월 28일 부터 9월 25일 총 121일간의 일이다. 프런트 2명 백엔드 2명 이렇게 프로젝트를 진행했으며 내가 사람을 모았고 기획을 해왔기 때문에 기획과 디자인을 겸해서 진행하였다. 확실한 건 인원과 시간이 많이 부족했던 것 같다. 나 혼자 진행하기에는 많은 업무처리량이 있었고 학업, 일정, 알바 등 다양한 일을 해야 하는 나는 많이 힘들었고 지쳤다. 개발 목표 필자는 성공회대 행복기숙사 국가 근로생이었다. 나는 6개월이라는..
-
동기와 비동기란 무엇일까?개발/두서없이 공부한 개발공부 2023. 9. 4. 07:50
흠.. 면접 때 질문했던 주제 중 하나인 동기와 비동기이다. 대답하지 못했다. 근데 이걸 처음 접한 건 아니다. 그냥 대답하지 못한 거다. 그냥 공부를 안 했다고 하자. 멍청한 놈!!@!@!@ 동기 synchronous 란? 데이터의 요청과 결과가 한자리에서 일어나는 걸 말한다고 한다. 일단 실행하면 이건 컴퓨터가 터지는 일이 있어도 다음단계로 넘어가지 못한다. 시킨 업무를 완수해야 다음 문장으로 넘어갈 수 있다. 답을 주지 않으면 그냥 컴퓨터는 다른 일을 할 수 없는 것이다. 비동기 Asynchronous 란? 요과 결과가 동시에 일어나지 않는 것을 비동기라고 한다. 한마디로 일단 이거대로 진행하고 결과가 나오지 않더라도 다른 작업이 가능한 것이다. 병행작업이 가능하다 고 보면 될 것 같다. 내가 비동..
-
axios란 뭘까?개발/React (페이지 제작과정) 2023. 8. 26. 00:03
난 지금까지 axios를 사용하면서 살실 axios를 왜 쓰는지 몰랐다! 그냥 클론코딩으로 시작하다 보니 그냥 써보니 돼서 그냥 대충 이런 구조로 작성하면 실행되는구나를 깨달았고 그냥 이유는 모르지만 쓰고 있다. 근데 열받는 건 잘 된다는 거다. 그래서 공부를 하지 말까?라는 고민도 했지만 그 시점쯤에 문제가 생겼다. axios를 왜 알아야 할까? 단순하게 한마디로 정리하자면 서버와 통신하기 위해서이다. 우리가 웹사이트를 만들때 정적인 데이터만 보여주고 싶지는 않을 것이다. 그럼 지속적으로 서버와 통신을 하고 요청을 하고 데이터를 받아와야 하는데 그 기능을 하는 게 axios라고 보면 된다. 정확하게 axios가 뭘하는 애인가? Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 HT..
-
이미지 업로드 페이지를 만들어보자.개발/React (페이지 제작과정) 2023. 8. 23. 05:53
일단 이미지 업로드만 할 수 있는 게시판을 만들고 싶었다. 그래서 서버와 관련된 코드를 빼고 어떻게 JS와 Css를 작성했는지 한번 기록 겸 남겨두려고 한다. 필요한 건 간단하다. 맨 위 제목을 작성하고 이미지들을 업로드 드래그 앤 드롭으로 끌어 넣으면 계속 추가되는 형식의 사이트이다. export default function ImageUploadForm() { const [selectedFiles, setSelectedFiles] = useState([]); const fileInputRef = useRef(null); const handleFileChange = (event) => { const files = Array.from(event.target.files); setSelectedFiles((..