Hello,
I'm Seulgi David Hyoung.

1. Learn about functional ideas and information

What I felt while making the portfolio pages is, first of all, the portfolio is about me It's about introducing what I can do and what I've done I think the purpose is to include it.
Briefly, explain the work piece, link it up. Portfolio is an example I made it by referring to the sample, but in fact, I worked hard on lectures and cloning I made it for the purpose of listening and mastering functional implementation.
Add a mixture Add the function, and if you add weight, it will be more mine, but for me, it is not yet I don't have much time, so I'll add a function later I'm going to implement it.
My works are one-page, Or I implemented a layout that puts the top menu. It's just his work If I write it down and link it up, it looks a bit empty, more functionally I thought about what to implement, and
my content There is a web page, and users can access the site for information When you visit, you put in keywords and search, so that you can search well I thought that seo work was necessary to aim for exposure. Namely, It's a technology called search engine optimization that helps you collect well in search engine bots When users see my content, they can filter it with keywords I wanted to put in that functional aspect, and the meta tag work Did.
Usually at work, the planner does the planning stage, and even the screen composition It is said to make a draft. That is, you separate pages, and you press this A pop-up like this pops up, and if you press this, it moves like this. It defines everything I mean, I do. There's a prototype tool that helps you do that do.
Then designers can design based on the design do. It is better to refer to various references for design.
I also try to be a planner and designer and refer to various references It was necessary. What I'm going to make is, I'm going to make a different content on my way to Portfolio I also want to provide it, so I want to refer to other blogs for reference Collect data with parts.
When designing, the overall I decided on a concept or branding that would be the base, and it's called ux, From the user's point of view, they try to provide experienced services, (it seems difficult) I heard that you use a lot of work tools such as sketches, Adobe xd, and pygma, Images are said to use Photoshop, Ilar, etc.
I don't know about that in detail, but the font on the menu I'll use this, give color, and make this and that simple and clean I was going to give it to you. So, the results that designers put out are images It's a draft file, and based on that, I mark up html.

2. Design & Markup

So I marked up HTML. That is, the menu above is nav. This is a list Ulli, this is a link. A, button. To match each function I made an element.
After html markup, css work is done to style it. font Color, size, spacing, etc. were defined in the HTML document Bring up the stylesheet and see if it's rendered in the browser could.
But, more dynamically, when the user presses it, it pops out, If you scroll down, it goes back and forth. To give a dynamic effect You have to write JavaScript.
It is said that up to this part, a professional group called Web Publisher worked. Web standards, I need to work on different OSs, and I need to work on the responsive type It is said that web publishing is to consider and cover this part.
Front-end development is simply called login processing, that is, when you are logged in, this is what happens I'll show you the screen, and if I'm not logged in, I'll show you this I mark up the pages according to the number of cases It is a task that moves dynamically according to the situation.
So far, planners, designers, and developers are in a conference together They attend and have meetings to see if they can be technically implemented by developers, The developer sets a technology stack based on it, that is, a language Decide which one to use, framework, library to use. To where I need to study what kind of DB you need, and I need to study it separately I use this and that, and I have to study the new technology, When working with an external server, server setting and DB setting are required, It is said that it is a part that needs to be set up in advance.
In other words, the developer has a plan with detailed functions, markup results, etc I received the draft file and set it up so that I can start developing it right away This is because I can meet the schedule without a hitch.
Anyway, I haven't done a lot of design and mark-up work, I thought I should work on it using bootstrap. (Later on) I also wrote something called Ant design. (Because of the react.)
The bootstrap is an open source made on Twitter, and it can be used a lot on the web The components and layouts are all made up.
HTML, css, js. I made all these files, and if you have a design that you want to use If you have a layout, you can use it while looking at the usage.
So there are some works that are made by applying the layout using bootstrap, The reason I used bootstrap is because the reaction type is set up in advance Because I have it, I want to make it easily.
There are so many different devices these days, so the style changes depending on the resolution It's set up so that you can easily implement the css work, that is, the reactive type For the first project, I'am going to use only the grid system layout I saw it and did it.
I added class names and focused on that. But it's up to your taste If you rip it off and fix it, there are times when you have to be done manually There were a lot. Since it was my first time, I repeated it a little bit and it took a long time It was a task, but I think it will speed up if I master it.

3. Front end part

So the result of HTML, css, the main screen, the list screen, the detailed screen, It consists of a manager, 404 pages, etc.
First, if you have index. html and list. html, then usually index. html is The first screen that users see when they first access the homepage It's a page.
And if you search here, or if you click on a tag like this, I'm going to the page where I'm distributing content that fits the tag I called this a list page.

*Fixed html document page and dynamic page>

If the user is actually on the bulletin board when using it in real life, the click is not clear It needs to come out, and the results need to match, too.
I don't know in advance how many I'm going to get, so if the user writes on the bulletin board Does it have to come out as much as the writing.
You might not have one There are so many that you might need to move on to the next button, that is, situations The content of this Web document changes all the time.
So this web document is not only a fixed HTML file, but it's also a dynamic file every time It can be made.
In other words, if you put in a keyword, you can develop it so that you can spread the appropriate data And then, finally, this document will be made again In other words, you can create a web document that matches the keywords you put in The program code is working somewhere.
If the program code is running on the server, that is, the web document If the server makes everything and drops it off, it's called server-side rendering.
If the program code is running in the user's browser, that is, When a user puts in a keyword, the content corresponding to this keyword is displayed on the server I'm going to get the data, and I'm going to get this data, and I'm going to get this data on the screen If the code of the application is circulating in the browser It's called client rendering.
Anyway, I'm going to start with the latter version of client-side rendering I developed it.
But how can someone else's program code run on my browser Is there? I was curious In JavaScript code, the web browser reads the JavaScript code language There is a function to execute.
So, front-end development uses JavaScript language In summary, the default page is the default . html, and the user can select the keyword If you put it in, send a request to the server (backend), and receive the result data I developed JavaScript to recreate the document, and the user When you access my homepage, you can access this JavaScript file You drop it on your browser, so you can download this JavaScript file from your browser It's going to be implemented.
In the end, it's the front to develop JavaScript code It's the end.

* react>

When developing the front-end, you have to start from scratch with JavaScript No, I'm going to use different frameworks and libraries, A framework or library is simply:
I want to make it easier and faster to develop in a certain language I think it's a tool that was created, a function that can be used.
So I have to study and understand the basics of JavaScript You can do it.
I study JavaScript, frameworks, and libraries You need to learn how to use it. I have to study separately.
In other words, language studies basic linguistic concepts, practices application, Libraries and frameworks are made with concepts and usage. If you learn and use them well It is possible.
I think it would be good to practice in a pattern that I use often.
So, when you do client-side rendering for reactants, it's a little bit different for the user Expect faster rendering,
It makes it easier for developers to develop the front end It's a JavaScript library, and I made it on Facebook.
I worked on the react, and the first one was this HTML marked up Files have been made into react components.

* Components >

If you look at the HTML document, the component is a single file with one whole file However,
In React, I divide all of these into components and manage them It brings up the components, but this split unit is I don't think so For example, if you make one of these boxes into one component If you look at the page, this component is sprayed repeatedly.
As a result, the data that goes into this component is different I'm putting it in.

* Routing >

And if you look at the results of the markup, this index. html and list. html File actually exists,
Press this tag button to go to list. html I hung it up a href="./list. html" However, most web apps made with front-end development It doesn't work like this.
I told you earlier, not to link it to an actual HTML fileShippy Because it's making the screen dynamic, the user can move to this url Then, I made a screen that fits this url and made it render.
For example, if you go to Dave/Bulletin/profile, you can get a screen that fits this url I made it to render it.
This is called a single page application (SPA) method Make the urls you need.
("/")
("/Board/Name")
("/Board/content/content-id")
("/admin")
And... Connecting pages that fit this url is called routing I am doing.
/ ->Main page "/"
/Bulletin Board/Tag Name -> List Page
/Bulletin board/content/contentid -> Detailed page
/admin->Admin Manager
Other... -> 404 Error
So the routing went well, but the result was still a fixed screen, Whatever you press, the content comes out the same.
The reason is that when I create these components, I temporarily use these data I made a temporary page with a temporary title and a temporary explanation It's because it's in a state of condition, but in reality, it doesn't have the data that fits your request I'll have to get it and put it in then.
So where do I get this data?
(I think it's a good idea to play that role It's a back-end server)
So, where are these data?
(That storage space is the database)

4. Backend Part

*Modeling Usually, when a plan comes out, DB modeling is done first It's said that,
In other words, I design what schemas I'm going to make, In my case, when I came up with this function,
That is, when you go into the page, you'll see the latest update, and you'll see what happens Click to show the details, press the tag to match the tag I'll show you the list.
When I came up with this function, I thought I should make a schema like this First, DB modeling and development.
If you look closely, it looks like this. (Title, description, image, tag, url) Like this It is called modeling that consists of units (in apps) that are used a lot.
I named this model Content. This model is one of a kind To become an object, I need to get data from DB and put it in The data are in the DB like this,
The concept may differ depending on whether it is RDB, nosql, or DBMS, To put it simply, DB also created this schema called contents, The 1:1 mapping of the DB schema and the model in the app It's common, but it may not be.
The slide board area here, the image below, the link, and so on I'm using the same schema, but I'm showing you a different version of css it is. In other words, most of the areas that I'm showing on my page I'm taking the data from the DB and distributing it to them. *API is just a concept, And justice.
So I make API and use it. I don't make something and use it There's an API concept, but it's not just a code, a program, or anything It's a program that's designed and made.
So, the program that connects a specific program and a program It's an API. I have to make it.
And it's kind of like a messenger, and it's like a point of contact Connecting parts / Meggaeche Everything that connects is an API Rest API is an API for exchanging data, and API is a client -> API request -> Server (DB) -> API response -> Client ~ Like this Make a move.
So, API is the connection (connecting and receiving) function If it's a Maegette program, and that's the API of Naver's login function, it's literally If you have to log in to a particular homepage and you have to go back to that site, you can connect it I used Naver login API to connect it, so literally It's an API.
Through the API... So how do I get the data from the front end Should I bring it?
Since there's data in the DB, I need to access the DB It's not like I'm developing direct access to the DB and extracting data I don't.
There's a backend server in the middle of the web page and the DB, and there's data I'm asking you to give it to me. For example, on this page, the user is going to say If you pressed the tag,
In this front-end chord, you have to route it like this To enable dave.io/ bulletin/mail to show the page that fits the route Rendering again.
But when you render it like this, you put in a list that fits the tag I need to render it , So before I render it I asked the backend server to give me content that fits this tag I am doing.
The back-end server is always on standby, and when I get a request like this, I get it and return the result.
This is the request If you put it in, the interface that responds to the results is called API I am doing.
The API that I'm using now, if you put a tag in it, the content that fits that tag It was an API that responded to the list, and
For example, you received the tag mail as a parameter Tag: mail Then, the contents that match the keyword 'mail' in DB And I'm going to have to get these data back. (i.e., DB -> backend server) -> (Client screen) Attach it to DB like this, put data in, and print it It's one of the important things that a backend server does.
So the backend server is in the position of providing API, and through this API The person making the request is a front-end developer or other server developer It's that.
In the case of open APIs on large platforms like Facebook If you make it, people who need it come and use it according to the standard ,
But if you create the same service, the developers can use the API that they need After discussing it, I define all the specifications and develop them.
For me, I also work on music In other words, I finished working on the react components and routing I made the right page render well, and
So I had to work on spraying the right amount of data To get the data, I need to request an API, so I need to get the API of the backend I'm moved on to the development stage.

*REST API >

Then let's see what API you need,
First of all, the API that gets content when you click on the link, where you get specific content If you choose, the API that receives information from this content, and the content If you write a new one, the API that puts it in the DB, and the modification of it Then, the API that reflects the modification in the DB, and the content is deleted API, there are other APIs used, but
I'll talk about these first.
If you are asked to do something with this model (data),
Create a new model (data) for this,
Give me several of this model (data),
Give me one specific model (data) (Inquiry),
Modify it (modify), delete it, and basically the API doesn't know which model to use CRUD is often requested.
(CRUD is create / read / update / delete)
So when designing API with API path and http method A lot.
What that means is that the front end is when the user moves to a particular url, I had to render a screen that fits the dave/bulletin/mail graph,
It's called routing, but the backend doesn't have an API request to a particular uri If you come in, you can do the right thing and return the results will be routed to execute.
For example, ID =1 The API's uri that brings content with ID number 1 If you set this as content/1,
So when the backend server gets a request, the uri If you come in like this,
The method of picking content that fits the ID from the DB and returning it I made it work.
And when you return the result value, you usually send it in a fixed format.
This is called the json format, and even the backend of the moulin has an HTML document I can make it and drop it off.
But I don't know how to make it Because the front end code is responsible for the view, the server is It's not necessary, it's just dropping the data It looks like this, but it's the same model you need at the front end, I said it earlierI matched the model used in the app with the Sipi DB schema That's why,
If I were to route the API that I mentioned earlier It goes like this.
In this way, combine uri and http method Therefore, the method of designing an API is called REST API.
So Just by looking at the API specification (spec), you can predict what function it will be That's what they do, and that's how they're designed most of them are designed.

*Framework >

When developing a selection backend, most of them use a web framework to develop The language that runs on the browser is JavaScript Because of that,
You can choose which framework to use in JavaScript language There was, but the backend has a variety of technology stacks.
Once you choose which language you want to develop, the web that fits that language Since there are several frameworks, the choice is too wide There are a lot of different things, but the frameworks for creating these web apps You can easily create the REST API that you mentioned,
Also, there are functions that simply match DB and model.
So when I was developing the backend, I was thinking about which language and which language I thought about using a framework, but option number one is Python Language, should I try Django or flask this time? That's what I thought I did it, and I think node is the trend for option two, so I'll try it I guess so? The node is, as I've been saying, JavaScript It's a language that originally runs on the browser.
Nodejs is not on the browser, but on the server as well It's a framework that allows you to go back.
and There are several node-based frameworks While I was thinking about it,
NextJS simple on YouTube.It's developed as JS An example was given, and in my case, I was able to implement server-side rendering I had to do it. I've never done it before, so I didn't have a clue in the lecture Since you did everything, I'll just copy it I've been through a lot of trouble I didn't want to do it. I just follow what's good.
I have a short temper, so I just want to get the results quickly.

Anyway, to summarize, the framework
Next.js I used to create a backend server (Express.js embedded server),
So I made necessary APIs.
The APIs are REST where I put my contents that will be distributed at the front end in my DB It's an API, and it's not an API that does CRUD on my DB, I made API requests to external servers.
For example, bring pictures to my blog here,
or OAuth for administrative authentication, or external-linked APIs like this I was able to make it simple.
next.js framework, this is What's really good is that the UI uses react and has an express server That's it.
So server rendering works, so the server If you need something, you can stick it on It's a feeling, and
Other than that, it's a simple thing that you've been lazy about It was like a framework.
Anyway, so From the front end's perspective, the API of the back end has been completed I can get the actual data, not the dummy data.
So you need storage and DB.
As for the homepage, it's on the vercel right now. MongoDB I applied and used it, and I found a free space in the vercel I used it.
Anyway, I only upload my contents there, so there are only a few,, I want to use AWS next time.
To briefly explain the structure of mongoDB, the database is just one thing It's a project. A collection is a folder.
Then why is the folder You need to create a folder. MongoDB uses object data types to create data I can put it in.
Name: David Age:20 Then, exactly Mongodb, it made a collection,
Create several documents in the folder, and the contents of the document, Name: David Age: 20 This is it.
i.e., several in the collection It is a method of making a document (object data type). The collection is a folder, A document is a notepad file.

Summary

Took YouTube, Web classes, and create a portfolio That's it The client, that is, the code to return from the user's browser development.
The backend is my server, which is managed by the developer, and accessed only by the developer You can think of it as developing a code to go back to, for example, The front end makes this screen, and the server gives you the item information You bring it, and you combine the images as the user presses it. These codes It's going to go back, and the back end will have a lot of things inside, Here, I only talk about API server and DB server, and there are items in DB I have various information and send it to you when there is a request from outside, This exchange The interface is called the API, which is used by the server It provides, and
So among the ways that API is designed The method used is REST API.
I want to make ssr a little simpler I wanted to do it, and I was actually looking for something simpler than redux Googling introduced Next.js.
Listen to the lecture and study a little bit, When I tested it, it really made the service rendering simple.

Issues & Troubleshooting

Issue_1>
-If you need to write code without thinking and js grammar,
Remove back to the client component, and then to the
server component There were many cases of importing.

Solution>
-In Nextjs, there are two component types,
component
2. client component number 1 is a server component It's not a big deal. It's just a regular component It is a server component.
But, write "use client" at the top and then at the bottom When you create a component, it's a client component.
The difference is, The server component is in HTML, that is, in the return part!! Insert JavaScript functionality It's impossible.
That is, I will use the html tag on the render (return part) OnClick, like this, JavaScript code It's impossible.
UseState, useEffect, etc. are not available.
But "use client" That is, the client component may use js for the return portion.
js You can write all the code, dynamically all the js.
For your information, Server components load very fast. (Because there is no js code, I don't have to send the js file to the user.)
The client component is The loading speed may be slower than the server component. js file with dozens of keys I'm going.
And next.js is a process called hydration You have to go through it. Hydration is needed.
i.e. each component In order to write react grammar, you can write HTML on the page to the user After transmitting, some time is needed to analyze the html as a react.
The task of analyzing is called hydration.
By the end of the analysis, the HTML loading time is a little slow.
Because of such advantages and disadvantages, usually large pages, It's better to make it into a server component.
In the big page, the features The parts you need,
For example, the shopping cart page is a server component Create a new server in the
Server component (on the shopping cart page),
For the shopping basket item function, go to the
Client component page Make it
CartItem / CartItem / CartItem / Like this, You can import it and put it in.
Components, because of the large number of components It also splits the code.
If you squeeze it long on one page, It's hard to see, that is, it's hard to read, so I'll make another file.
You write the code on it, you take the code, and you do it I'm writing it.(Code Split)
example> data.js in cart folder Create (side-by-side with page.js),
Data or variable functions in this file Save your back.
Then take data.js from page.js and It's like writing. You can import it and use it.

Issue_2>

-Deliver data to the component Method

Solution>

-Props is usually used to transfer data to the component, but the props is a function of It is the same concept as the parameter.
Parent component is child Props is used to send data to components.
in reverse direction A child can't give data to a parent.
Unconditional go from top to bottom.
And it's not a parent-child relationship at all It is also impossible to transmit (share) data to components in other folders.
It is always possible to transfer data from parent to child. That's why it's the best You have to ride data from the parent component and do it like this.
That's how they send it down.
Anyway, it's uncomfortable.
Then, after each component, when you load all of the components It's working, right?If so, it is inefficient in react.
Because DB sends data to components The transmission is the exchange of data, and it's all running, so the reading continues When it happens, it slows down again, and costs and speeds continue to be wasted If there is, minimal communication is fine.
But in Nextjs, There may be exceptions.
For each component, daily It may be okay to get data directly from the DB.
that is, You don't have to use a prop, you don't have to use a parent-child prop It's the sound.
Because, in fact, Nextjs, you have DB data When writing, use
fetch(/shopping basket) (usually fetch() for DB data Import.) If you request using grammar that requests data,
Compress it into one, make a request into one, once Make a request and make a request.
Save, operate efficiently It's working.
i.e. per component, without the need to share data, The code that the DB requests and imports directly from the data There must be a lot.
100 requests to the DB server I'm not sending it, but
Nextjs will compress it and make it efficient, I'll gather them at the very least request, communicate with DB, send and receive data I mean, I do.
Anyway, yes. That's the deduplication It's called a function, and if you have multiple data requests like
, you can use one It compresses it. So, even if you use it like that, the problem is There are many cases where there is no.
props is a function that allows you to achieve the same function every time If you want to run it differently every time, not every time, parameters It's like using grammar. It's good when that happens.
Components for different purposes each time If you want to make it, you can use the props grammar.
with similar content There is no need to make multiple components. I can use the prop.
And for your information, the tip for writing the map over and over again is,
const cards = ["Lotte Card," "Hyundai Card," "Samsung Card"];
Cards like this[0] cards[1] cards[2] This is how you don't use it.
const cardLists = cards.map(v => { return p>{v}an interest-free event Medium/p; }); Create a function like this, and write
{cardLists} like this. You can send this to the props or something like this.
const Banner = props => { const cards = props.cards; const cardLists = cards.map((v, i) => { return h5 key={i}>{v}Payment 행사중/h5; }); return >{cardLists}/>; }; export default Banner; Like this,
Save it as a prop variable, turn it to
map, and put the key value, Return and export, go to the parent component, component You can insert it.
For reference, DB data, in the form of an array, const shoppingBag = [ { foods: "Tomatoes", costs: 30, count: 1, }, { foods: "Pasta", costs: 50, count: 2, }, { foods: "Coconut", costs: 80, count: 4, }, ]; for this type of data, in the
array, objects It's a structure. First of all, CartItem items={shoppingBag} / Like this On the child page that was loaded into the props and sent to the props,
const shoppingBagItem = props.items.map((v, i) => { return ( div key={i} className='cart-item' p{v.foods}/p p{v.costs}$/p p{v.count}pdiv);});
Like this, turn to map and If you take an object out of it, v.foods, and so on, it repeats as much as the content It is produced.

Issue_3>

An error appears when using 'use client'.
error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (anonymous)

Solution>

Solution: Googling results,
The reason for the error is "use" in a Windows environment with versions less than next.js 13.3.1 When implementing a client component using "client", as a general function Implementing a functional component results in the corresponding error (bug in next.js) Viewed
The workaround is that the bug can be found in the next.js 13.3.1-canary.4 version It's settled.
If you are using an earlier version, when implementing client components, the corresponding Arrows the components instead of functional components with general functions Implement as a functional component using a function and as an export default Exporting resolves the error.